[ts-sdk] Modify text interface, update examples (#867)

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

@@ -27,26 +27,26 @@ function Instructions() {
   return (
     <View style={{ direction: 'column' }}>
       <View />
-      <Text fontSize={50}>Open index.ts and get started.</Text>
+      <Text style={{ fontSize: 50 }}>Open index.ts and get started.</Text>
       <View style={{ height: 20 }} />
-      <Text width={960} fontSize={30} wrap="word">
+      <Text style={{ 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 style={{ height: 20 }} />
-      <Text fontSize={50}>Where to go next?</Text>
-      <Text width={960} fontSize={30} wrap="word">
+      <Text style={{ fontSize: 50 }}>Where to go next?</Text>
+      <Text style={{ width: 960, fontSize: 30, wrap: 'word' }}>
         - ./src/App.tsx defines content of the streams.
       </Text>
-      <Text width={960} fontSize={30} wrap="word">
+      <Text style={{ width: 960, fontSize: 30, wrap: 'word' }}>
         - ./src/routes.ts controls HTTP API that can be used to interact with this example.
       </Text>
-      <Text width={960} fontSize={30} wrap="word">
+      <Text style={{ width: 960, fontSize: 30, wrap: 'word' }}>
         - ./compositor.tsx exposes LiveCompositor instance that can be used to add/remove new
         streams/images/shader.
       </Text>
-      <Text width={960} fontSize={30} wrap="word">
+      <Text style={{ width: 960, fontSize: 30, wrap: 'word' }}>
         - ./store.ts implements global store using Zustand, enabling express API and React to share
         common settings.
       </Text>

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

@@ -6,9 +6,9 @@ function App() {
   return (
     <View style={{ direction: 'column' }}>
       <View />
-      <Text fontSize={50}>Open index.ts and get started</Text>
+      <Text style={{ fontSize: 50 }}>Open index.ts and get started</Text>
       <View style={{ height: 20 }} />
-      <Text width={1000} fontSize={30} wrap="word">
+      <Text style={{ 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
         stream using ffplay, make sure to remove them for any real production use.

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

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

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

@@ -9,13 +9,13 @@ function ExampleApp() {
     <Tiles transition={{ durationMs: 200 }}>
       {Object.values(inputs).map(input =>
         !input.videoState ? (
-          <Text key={input.inputId} fontSize={40}>
+          <Text key={input.inputId} style={{ fontSize: 40 }}>
             Waiting for stream {input.inputId} to connect
           </Text>
         ) : input.videoState === 'playing' ? (
           <InputTile key={input.inputId} inputId={input.inputId} />
         ) : input.videoState === 'finished' ? (
-          <Text key={input.inputId} fontSize={40}>
+          <Text key={input.inputId} style={{ fontSize: 40 }}>
             Stream {input.inputId} finished
           </Text>
         ) : (
@@ -33,7 +33,8 @@ function InputTile({ inputId }: { inputId: string }) {
         <InputStream inputId={inputId} />
       </Rescaler>
       <View style={{ bottom: 10, left: 10, height: 50 }}>
-        <Text fontSize={40} color="#FF0000" lineHeight={50} backgroundColor="#FFFFFF88">
+        <Text
+          style={{ fontSize: 40, color: '#FF0000', lineHeight: 50, backgroundColor: '#FFFFFF88' }}>
           Input ID: {inputId}
         </Text>
       </View>

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

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

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

@@ -36,7 +36,7 @@ function PartialText(props: PartialTextProps) {
 
   return (
     <View>
-      <Text fontSize={40}>{props.text.substring(0, textPart.characters)}</Text>
+      <Text style={{ fontSize: 40 }}>{props.text.substring(0, textPart.characters)}</Text>
     </View>
   );
 }

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

@@ -8,7 +8,7 @@ type PartialTextProps = {
 };
 
 function SimpleComponent(props: PartialTextProps) {
-  return <Text fontSize={40}>{props.text}</Text>;
+  return <Text style={{ fontSize: 40 }}>{props.text}</Text>;
 }
 
 function ExampleApp() {
@@ -32,7 +32,7 @@ function ExampleApp() {
         <SimpleComponent key={index} text="Example text" />
       ))}
       <View />
-      <Text fontSize={30}>Text component example (fontSize={30})</Text>
+      <Text style={{ fontSize: 30 }}>Text component example (fontSize={30})</Text>
       Raw text example (default fontSize={50})
       <View />
       Counter: {count}

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

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

ts/live-compositor/src/component.ts

@@ -2,6 +2,8 @@ import type React from 'react';
 import { createElement, useId } from 'react';
 import type * as Api from './api.js';
 
+export const DEFAULT_FONT_SIZE = 50;
+
 type ComponentProps<P> = { children?: React.ReactNode; id?: Api.ComponentId } & P;
 
 export type SceneComponent = Api.Component | string;
@@ -30,7 +32,7 @@ export function sceneComponentIntoApi(component: SceneComponent): Api.Component
     return {
       type: 'text',
       text: component,
-      font_size: 50,
+      font_size: DEFAULT_FONT_SIZE,
     };
   }
   return component;

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

@@ -1,15 +1,9 @@
 import type * as Api from '../api.js';
 import type { SceneComponent } from '../component.js';
-import { createCompositorComponent } from '../component.js';
+import { createCompositorComponent, DEFAULT_FONT_SIZE } from '../component.js';
 import { intoApiRgbaColor } from './common.js';
 
-export type TextProps = {
-  children?: (string | number)[] | string | number;
-
-  /**
-   * Id of a component.
-   */
-  id?: Api.ComponentId;
+export type TextStyle = {
   /**
    * Width of a texture that text will be rendered on. If not provided, the resulting texture
    * will be sized based on the defined text but limited to `max_width` value.
@@ -55,7 +49,7 @@ export type TextProps = {
   /**
    * (**default=`"normal"`**) Font style. The selected font needs to support the specified style.
    */
-  style?: Api.TextStyle;
+  fontStyle?: Api.TextStyle;
   /**
    * (**default=`"left"`**) Text align.
    */
@@ -67,29 +61,45 @@ export type TextProps = {
   /**
    * (**default=`"normal"`**) Font weight. The selected font needs to support the specified weight.
    */
-  weight?: Api.TextWeight;
+  fontWeight?: Api.TextWeight;
+};
+
+export type TextProps = {
+  children?: (string | number)[] | string | number;
+
+  /**
+   * Id of a component.
+   */
+  id?: Api.ComponentId;
+
+  /**
+   * Text styling properties
+   */
+  style?: TextStyle;
 };
 
 const Text = createCompositorComponent<TextProps>(sceneBuilder);
 
 function sceneBuilder(props: TextProps, children: SceneComponent[]): Api.Component {
+  const { id, style } = props;
+
   return {
     type: 'text',
-    id: props.id,
+    id: id,
     text: children.map(child => (typeof child === 'string' ? child : String(child))).join(''),
-    width: props.width,
-    height: props.height,
-    max_width: props.maxWidth,
-    max_height: props.maxHeight,
-    font_size: props.fontSize,
-    line_height: props.lineHeight,
-    color_rgba: props.color && intoApiRgbaColor(props.color),
-    background_color_rgba: props.backgroundColor && intoApiRgbaColor(props.backgroundColor),
-    font_family: props.fontFamily,
-    style: props.style,
-    align: props.align,
-    wrap: props.wrap,
-    weight: props.weight,
+    width: style?.width,
+    height: style?.height,
+    max_width: style?.maxWidth,
+    max_height: style?.maxHeight,
+    font_size: style?.fontSize ?? DEFAULT_FONT_SIZE,
+    line_height: style?.lineHeight,
+    color_rgba: style?.color && intoApiRgbaColor(style?.color),
+    background_color_rgba: style?.backgroundColor && intoApiRgbaColor(style?.backgroundColor),
+    font_family: style?.fontFamily,
+    style: style?.fontStyle,
+    align: style?.align,
+    wrap: style?.wrap,
+    weight: style?.fontWeight,
   };
 }