[ts-sdk] Modify remaining interfaces (#868)

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

@@ -15,13 +15,13 @@ function ExampleApp() {
 
   return (
     <Tiles transition={{ durationMs: 200 }}>
-      <InputTile inputId="input_1" mute={streamWithAudio === 'input_1'} />
-      <InputTile inputId="input_2" mute={streamWithAudio === 'input_2'} />
+      <InputTile inputId="input_1" muted={streamWithAudio === 'input_1'} />
+      <InputTile inputId="input_2" muted={streamWithAudio === 'input_2'} />
     </Tiles>
   );
 }
 
-function InputTile({ inputId, mute }: { inputId: string; mute: boolean }) {
+function InputTile({ inputId, muted }: { inputId: string; muted: boolean }) {
   const [volume, setVolume] = useState(1.0);
 
   useEffect(() => {
@@ -38,11 +38,11 @@ function InputTile({ inputId, mute }: { inputId: string; mute: boolean }) {
   return (
     <View>
       <Rescaler>
-        <InputStream inputId={inputId} volume={volume} mute={mute} />
+        <InputStream inputId={inputId} volume={volume} muted={muted} />
       </Rescaler>
       <View style={{ bottom: 10, left: 10, height: 40 }}>
         <Text style={{ fontSize: 40 }}>
-          Input ID: {inputId}, volume: {volume.toFixed(2)} {mute ? 'muted' : 'live'}
+          Input ID: {inputId}, volume: {volume.toFixed(2)} {muted ? 'muted' : 'live'}
         </Text>
       </View>
     </View>

ts/live-compositor/README.md

@@ -15,12 +15,12 @@ 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 style={{ direction: "column" }}>
-      <Rescaler mode="fill">
+    <View style={{ direction: 'column' }}>
+      <Rescaler style={{ resizeMode: 'fill' }}>
         <InputStream inputId="example_input_1" />
       </Rescaler>
       <Text fontSize={20}>Example label</Text>

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

@@ -22,18 +22,18 @@ export type InputStreamProps = {
   /**
    * Mute audio.
    */
-  mute?: boolean;
+  muted?: boolean;
 };
 
-type AudioPropNames = 'mute' | 'volume' | 'disableAudioControl';
+type AudioPropNames = 'muted' | 'volume' | 'disableAudioControl';
 
 const InnerInputStream =
   createCompositorComponent<Omit<InputStreamProps, AudioPropNames>>(sceneBuilder);
 
 function InputStream(props: InputStreamProps) {
-  const { mute, volume, ...otherProps } = props;
+  const { muted, volume, ...otherProps } = props;
   useAudioInput(props.inputId, {
-    volume: mute ? 0 : (volume ?? 1),
+    volume: muted ? 0 : (volume ?? 1),
   });
   return createElement(InnerInputStream, otherProps);
 }

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

@@ -5,17 +5,11 @@ import { intoApiTransition } from './common.js';
 import type { SceneComponent } from '../component.js';
 import { createCompositorComponent, sceneComponentIntoApi } from '../component.js';
 
-export type RescalerProps = {
-  children: React.ReactElement | string | number;
-
-  /**
-   * Id of a component.
-   */
-  id?: Api.ComponentId;
+export type RescalerStyle = {
   /**
    * (**default=`"fit"`**) Resize mode:
    */
-  mode?: Api.RescaleMode;
+  resizeMode?: Api.RescaleMode;
   /**
    * (**default=`"center"`**) Horizontal alignment.
    */
@@ -68,6 +62,19 @@ export type RescalerProps = {
    * absolutely positioned, instead of being laid out by its parent.
    */
   rotation?: number;
+};
+
+export type RescalerProps = {
+  children: React.ReactElement | string | number;
+
+  /**
+   * Id of a component.
+   */
+  id?: Api.ComponentId;
+  /**
+   * Rescaler styling properties
+   */
+  style?: RescalerStyle;
   /**
    * Defines how this component will behave during a scene update. This will only have an
    * effect if the previous scene already contained a `Rescaler` component with the same id.
@@ -77,25 +84,29 @@ export type RescalerProps = {
 
 const Rescaler = createCompositorComponent<RescalerProps>(sceneBuilder);
 
-function sceneBuilder(props: RescalerProps, children: SceneComponent[]): Api.Component {
+function sceneBuilder(
+  { id, style, transition }: RescalerProps,
+  children: SceneComponent[]
+): Api.Component {
   if (children?.length !== 1) {
     throw new Error('Exactly one child is required for Rescaler component');
   }
+
   return {
     type: 'rescaler',
-    id: props.id,
+    id: id,
     child: sceneComponentIntoApi(children[0]),
-    mode: props.mode,
-    horizontal_align: props.horizontalAlign,
-    vertical_align: props.verticalAlign,
-    width: props.width,
-    height: props.height,
-    top: props.top,
-    bottom: props.bottom,
-    left: props.left,
-    right: props.right,
-    rotation: props.rotation,
-    transition: props.transition && intoApiTransition(props.transition),
+    mode: style?.resizeMode,
+    horizontal_align: style?.horizontalAlign,
+    vertical_align: style?.verticalAlign,
+    width: style?.width,
+    height: style?.height,
+    top: style?.top,
+    bottom: style?.bottom,
+    left: style?.left,
+    right: style?.right,
+    rotation: style?.rotation,
+    transition: transition && intoApiTransition(transition),
   };
 }
 

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

@@ -4,11 +4,7 @@ import { intoApiRgbaColor, intoApiTransition } from './common.js';
 import type { SceneComponent } from '../component.js';
 import { createCompositorComponent, sceneComponentIntoApi } from '../component.js';
 
-export type TilesProps = {
-  /**
-   * Id of a component.
-   */
-  id?: Api.ComponentId;
+export type TilesStyle = {
   /**
    * Width of a component in pixels. Exact behavior might be different based on the parent
    * component:
@@ -49,6 +45,17 @@ export type TilesProps = {
    * (**default=`"center"`**) Vertical alignment of tiles.
    */
   verticalAlign?: Api.VerticalAlign;
+};
+
+export type TilesProps = {
+  /**
+   * Id of a component.
+   */
+  id?: Api.ComponentId;
+  /**
+   * Tiles styling properties
+   */
+  style?: TilesStyle;
   /**
    * Defines how this component will behave during a scene update. This will only have an
    * effect if the previous scene already contained a `Tiles` component with the same id.
@@ -58,20 +65,23 @@ export type TilesProps = {
 
 const Tiles = createCompositorComponent<TilesProps>(sceneBuilder);
 
-function sceneBuilder(props: TilesProps, children: SceneComponent[]): Api.Component {
+function sceneBuilder(
+  { id, style, transition }: TilesProps,
+  children: SceneComponent[]
+): Api.Component {
   return {
     type: 'tiles',
-    id: props.id,
+    id: id,
     children: children.map(sceneComponentIntoApi),
-    width: props.width,
-    height: props.height,
-    background_color_rgba: props.backgroundColor && intoApiRgbaColor(props.backgroundColor),
-    tile_aspect_ratio: props.tileAspectRatio,
-    margin: props.margin,
-    padding: props.padding,
-    horizontal_align: props.horizontalAlign,
-    vertical_align: props.verticalAlign,
-    transition: props.transition && intoApiTransition(props.transition),
+    width: style?.width,
+    height: style?.height,
+    background_color_rgba: style?.backgroundColor && intoApiRgbaColor(style?.backgroundColor),
+    tile_aspect_ratio: style?.tileAspectRatio,
+    margin: style?.margin,
+    padding: style?.padding,
+    horizontal_align: style?.horizontalAlign,
+    vertical_align: style?.verticalAlign,
+    transition: transition && intoApiTransition(transition),
   };
 }
 

ts/live-compositor/src/hooks.ts

@@ -19,7 +19,7 @@ export type AudioOptions = {
 
 /**
  * Hook used to control audio configuration. If you already placing InputStream component
- * you can use `mute` and `volume` props instead.
+ * you can use `muted` and `volume` props instead.
  */
 export function useAudioInput(inputId: Api.InputId, audioOptions: AudioOptions) {
   const ctx = useContext(LiveCompositorContext);