Merge remote-tracking branch 'origin/master' into @BrtqKr/cleanup-rules

.github/workflows/demos_check.yml

@@ -1,6 +1,7 @@
 name: demos lint
 
 on:
+    workflow_dispatch: {}
     push:
         branches: [master]
         paths:

.github/workflows/lint.yml

@@ -1,5 +1,6 @@
 name: lint
 on:
+    workflow_dispatch: {}
     push:
         branches: [master]
     pull_request:

.github/workflows/macos_lint.yml

@@ -1,5 +1,6 @@
 name: macos lint
 on:
+    workflow_dispatch: {}
     push:
         branches: [master]
     pull_request:

.github/workflows/shellcheck.yml

@@ -1,5 +1,6 @@
 name: shellcheck
 on:
+    workflow_dispatch: {}
     push:
         branches: [master]
         paths:

.github/workflows/test.yml

@@ -1,5 +1,6 @@
 name: build and test
 on:
+    workflow_dispatch: {}
     push:
         branches: [master]
     pull_request:

.github/workflows/ts_sdk_check.yml

@@ -1,14 +1,11 @@
 name: TS SDK check
 
 on:
+    workflow_dispatch: {}
     push:
         branches: [master]
-        paths:
-            - "ts/**"
     pull_request:
         types: [opened, synchronize]
-        paths:
-            - "ts/**"
 
 concurrency:
     group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/wasm.yml

@@ -1,5 +1,6 @@
 name: wasm build
 on:
+    workflow_dispatch: {}
     push:
         branches: [master]
     pull_request:

docs/src/components/ExampleSceneJsx.tsx

@@ -21,17 +21,14 @@ function Example() {
       <Rescaler top={20} left={20} width={640} height={360}>
         <InputStream inputId="bunny" />
       </Rescaler>
-      <View
-        bottom={0}
-        left={0}
-        height={120}
-        backgroundColor="#B3B3B3">
+      <View style={{ bottom: 0, left: 0, height: 120, backgroundColor: '#B3B3B3' }}>
         <View />
         <Text fontSize={100} weight="bold" color="#000000">
           LiveCompositor 😃😍
         </Text>
         <View />
       </View>
+      </View>
     </View>
   );
 }

ts/create-live-compositor/templates/node-express-zustand/src/App.tsx

@@ -25,16 +25,16 @@ function OutputScene() {
 
 function Instructions() {
   return (
-    <View direction="column">
+    <View style={{ direction: 'column' }}>
       <View />
       <Text fontSize={50}>Open index.ts and get started.</Text>
-      <View height={20} />
+      <View style={{ height: 20 }} />
       <Text width={960} fontSize={30} wrap="word">
         This example renders static text and sends the output stream via RTP to local port 8001.
         Generated code includes helpers in liveCompositorFfplayHelper.ts that display the output
         stream using ffplay, make sure to remove them for any real production use.
       </Text>
-      <View height={20} />
+      <View style={{ height: 20 }} />
       <Text fontSize={50}>Where to go next?</Text>
       <Text width={960} fontSize={30} wrap="word">
         - ./src/App.tsx defines content of the streams.

ts/create-live-compositor/templates/node-minimal/src/index.tsx

@@ -4,10 +4,10 @@ import { ffplayStartPlayerAsync } from './liveCompositorFfplayHelper';
 
 function App() {
   return (
-    <View direction="column">
+    <View style={{ direction: 'column' }}>
       <View />
       <Text fontSize={50}>Open index.ts and get started</Text>
-      <View height={20} />
+      <View style={{ height: 20 }} />
       <Text width={1000} fontSize={30} wrap="word">
         This example renders static text and sends the output stream via RTP to local port 8001.
         Generated code includes helpers in liveCompositorFfplayHelper.ts that display the output

ts/examples/node-examples/src/audio.tsx

@@ -40,7 +40,7 @@ function InputTile({ inputId, mute }: { inputId: string; mute: boolean }) {
       <Rescaler>
         <InputStream inputId={inputId} volume={volume} mute={mute} />
       </Rescaler>
-      <View bottom={10} left={10} height={40}>
+      <View style={{ bottom: 10, left: 10, height: 40 }}>
         <Text fontSize={40}>
           Input ID: {inputId}, volume: {volume.toFixed(2)} {mute ? 'muted' : 'live'}
         </Text>

ts/examples/node-examples/src/dynamic-inputs.tsx

@@ -32,7 +32,7 @@ function InputTile({ inputId }: { inputId: string }) {
       <Rescaler>
         <InputStream inputId={inputId} />
       </Rescaler>
-      <View bottom={10} left={10} height={50}>
+      <View style={{ bottom: 10, left: 10, height: 50 }}>
         <Text fontSize={40} color="#FF0000" lineHeight={50} backgroundColor="#FFFFFF88">
           Input ID: {inputId}
         </Text>

ts/examples/node-examples/src/dynamic-outputs.tsx

@@ -21,7 +21,7 @@ function InputTile({ inputId }: { inputId: string }) {
       <Rescaler>
         <InputStream inputId={inputId} />
       </Rescaler>
-      <View bottom={10} left={10} height={50}>
+      <View style={{ bottom: 10, left: 10, height: 50 }}>
         <Text fontSize={40} color="#FF0000" lineHeight={50} backgroundColor="#FFFFFF88">
           Input ID: {inputId}
         </Text>

ts/examples/node-examples/src/dynamic-text.tsx

@@ -43,7 +43,7 @@ function PartialText(props: PartialTextProps) {
 
 function ExampleApp() {
   return (
-    <View direction="column">
+    <View style={{ direction: 'column' }}>
       <PartialText text="Example partial text that transition in 1 second" transitionMs={1_000} />
       <PartialText text="Example partial text that transition in 2 second" transitionMs={2_000} />
       <PartialText text="Example partial text that transition in 5 second" transitionMs={5_000} />

ts/examples/node-examples/src/simple.tsx

@@ -27,7 +27,7 @@ function ExampleApp() {
   });
 
   return (
-    <View direction="column">
+    <View style={{ direction: 'column' }}>
       {[...Array(count)].map((_value, index) => (
         <SimpleComponent key={index} text="Example text" />
       ))}

ts/examples/vite-browser-render/src/examples/MP4Player.tsx

@@ -32,8 +32,8 @@ function Scene() {
 
   if (inputState !== 'playing') {
     return (
-      <View backgroundColor="#000000">
-        <View width={530} height={40} bottom={340} left={500}>
+      <View style={{ backgroundColor: '#000000' }}>
+        <View style={{ width: 530, height: 40, bottom: 340, left: 500 }}>
           <Text fontSize={30} fontFamily="Noto Sans">
             Loading MP4 file
           </Text>
@@ -43,9 +43,9 @@ function Scene() {
   }
 
   return (
-    <View width={1280} height={720}>
+    <View style={{ width: 1280, height: 720 }}>
       <InputStream inputId="bunny_video" />
-      <View width={230} height={40} backgroundColor="#000000" bottom={20} left={500}>
+      <View style={{ width: 230, height: 40, backgroundColor: '#000000', bottom: 20, left: 500 }}>
         <Text fontSize={30} fontFamily="Noto Sans">
           Playing MP4 file
         </Text>

ts/live-compositor/README.md

@@ -15,11 +15,11 @@ npm create live-compositor
 ## Usage
 
 ```tsx
-import { View, Text, InputStream, Rescaler } from 'live-compositor';
+import { View, Text, InputStream, Rescaler } from "live-compositor";
 
 function ExampleApp() {
   return (
-    <View direction="column">
+    <View style={{ direction: "column" }}>
       <Rescaler mode="fill">
         <InputStream inputId="example_input_1" />
       </Rescaler>

ts/live-compositor/src/components/View.ts

@@ -4,11 +4,7 @@ import { createCompositorComponent, sceneComponentIntoApi } from '../component.j
 import type { Transition } from './common.js';
 import { intoApiRgbaColor, intoApiTransition } from './common.js';
 
-export type ViewProps = {
-  /**
-   * Id of a component.
-   */
-  id?: Api.ComponentId;
+export type ViewStyle = {
   /**
    * Width of a component in pixels. Exact behavior might be different based on the parent
    * component:
@@ -57,11 +53,6 @@ export type ViewProps = {
    * absolutely positioned, instead of being laid out by its parent.
    */
   rotation?: number;
-  /**
-   * Defines how this component will behave during a scene update. This will only have an
-   * effect if the previous scene already contained a `View` component with the same id.
-   */
-  transition?: Transition;
   /**
    * (**default=`"hidden"`**) Controls what happens to content that is too big to fit into an area.
    */
@@ -72,28 +63,47 @@ export type ViewProps = {
   backgroundColor?: string;
 };
 
+export type ViewProps = {
+  /**
+   * Id of a component.
+   */
+  id?: Api.ComponentId;
+
+  /**
+   * Component styling properties.
+   */
+  style?: ViewStyle;
+
+  /**
+   * Defines how this component will behave during a scene update. This will only have an
+   * effect if the previous scene already contained a `View` component with the same id.
+   */
+  transition?: Transition;
+};
+
 const View = createCompositorComponent<ViewProps>(sceneBuilder);
 
-function sceneBuilder(props: ViewProps, children: SceneComponent[]): Api.Component {
+function sceneBuilder(
+  { id, style = {}, transition }: ViewProps,
+  children: SceneComponent[]
+): Api.Component {
   return {
     type: 'view',
-
+    id,
     children: children.map(sceneComponentIntoApi),
+    width: style.width,
+    height: style.height,
+    direction: style.direction,
 
-    id: props.id,
-    width: props.width,
-    height: props.height,
-    direction: props.direction,
-
-    top: props.top,
-    left: props.left,
-    bottom: props.bottom,
-    right: props.right,
-    rotation: props.rotation,
+    top: style.top,
+    right: style.right,
+    bottom: style.bottom,
+    left: style.left,
 
-    transition: props.transition && intoApiTransition(props.transition),
-    overflow: props.overflow,
-    background_color_rgba: props.backgroundColor && intoApiRgbaColor(props.backgroundColor),
+    rotation: style.rotation,
+    overflow: style.overflow,
+    background_color_rgba: style?.backgroundColor && intoApiRgbaColor(style.backgroundColor),
+    transition: transition && intoApiTransition(transition),
   };
 }
 

ts/package.json

@@ -9,7 +9,7 @@
     "build": "pnpm -r run build",
     "build:sdk": "pnpm -C @live-compositor/core run build && pnpm -C @live-compositor/node run build && pnpm -C @live-compositor/web-wasm run build && pnpm -C live-compositor run build",
     "build:all": "pnpm -C @live-compositor/browser-render run build-wasm && pnpm -r run build",
-    "typecheck": "pnpm -r run typecheck",
+    "typecheck": "pnpm -r --filter '!@live-compositor/browser-render' run typecheck",
     "clean": "pnpm -r run clean",
     "watch": "pnpm -r --parallel --stream run watch",
     "generate-types": "node ./scripts/generateTypes.mjs"