[ts-sdk] Update create-live-compositor-templates, general cleanups (#812

)

ts/.nvmrc

@@ -0,0 +1 @@
+20.18.0

ts/create-live-compositor/src/options.ts

@@ -79,7 +79,7 @@ export async function resolveBrowserOptions(): Promise<BrowserOptions> {
 export async function resolveNodeOptions(): Promise<NodeOptions> {
   const templateName = await selectPrompt('Select project template: ', [
     { title: 'Minimal example', value: 'node-minimal' },
-    { title: 'Express.js + Redux', value: 'node-express-redux' },
+    { title: 'Express.js + Zustand', value: 'node-express-zustand' },
   ] as const);
   return {
     type: 'node',

ts/create-live-compositor/templates/node-express-redux/package.json → ts/create-live-compositor/templates/node-express-zustand/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "template-node-express-redux",
+  "name": "template-node-express-zustand",
   "private": true,
   "description": "Live Compositor app",
   "version": "1.0.0",
@@ -11,16 +11,15 @@
   },
   "dependencies": {
     "@live-compositor/node": "^0.1.0",
-    "@reduxjs/toolkit": "^2.2.7",
     "express": "^4.21.0",
     "live-compositor": "^0.1.0",
     "react": "^18.3.1",
-    "react-redux": "^9.1.2"
+    "zustand": "4.5.5"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",
     "@types/node": "^20.14.10",
-    "@types/react": "^18.2.25",
+    "@types/react": "^18.3.3",
     "typescript": "^5.5.3"
   }
 }

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

@@ -1,28 +1,25 @@
 import { View, Text, useInputStreams, InputStream, Tiles } from 'live-compositor';
-import { Provider, useSelector } from "react-redux"
 
-import { showInstructionsSlice, store } from "./store"
+import { store } from './store';
+import { useStore } from 'zustand';
 
 export default function App() {
-  return (
-    <Provider store={store}>
-      <OutputScene />
-    </Provider>
-  )
+  return <OutputScene />;
 }
 
 function OutputScene() {
   const inputs = useInputStreams();
-  const showInstructions = useSelector(showInstructionsSlice.selectors.shouldShow)
+  const showInstructions = useStore(store, state => state.shouldShowInstructions);
+
   return (
     <View>
       {showInstructions ? <Instructions /> : undefined}
       <Tiles>
-        {Object.values(inputs).map((input) => (
+        {Object.values(inputs).map(input => (
           <InputStream key={input.inputId} inputId={input.inputId} />
         ))}
       </Tiles>
-    </View >
+    </View>
   );
 }
 
@@ -33,8 +30,8 @@ function Instructions() {
       <Text fontSize={50}>Open index.ts and get started.</Text>
       <View 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
+        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} />
@@ -46,12 +43,14 @@ function Instructions() {
         - ./src/routes.ts controls HTTP API that can be used to interact with this example.
       </Text>
       <Text width={960} fontSize={30} wrap="word">
-        - ./compositor.tsx exposes LiveCompositor instance that can be used to add/remove new streams/images/shader.
+        - ./compositor.tsx exposes LiveCompositor instance that can be used to add/remove new
+        streams/images/shader.
       </Text>
       <Text width={960} fontSize={30} wrap="word">
-        - ./store.ts implements Redux store that is used for storing global state and sharing it between express API and React.
+        - ./store.ts implements global store using Zustand, enabling express API and React to share
+        common settings.
       </Text>
       <View />
     </View>
-  )
+  );
 }

ts/create-live-compositor/templates/node-express-redux/src/routes.ts → ts/create-live-compositor/templates/node-express-zustand/src/routes.ts

@@ -1,6 +1,6 @@
 import express, { json } from 'express';
 import { Compositor } from './compositor';
-import { showInstructionsSlice, store } from './store';
+import { store } from './store';
 
 export const app = express();
 
@@ -17,6 +17,6 @@ app.post('/add-stream', async (req, res) => {
 
 // curl -XPOST 'http://localhost:3000/toggle-instructions'
 app.post('/toggle-instructions', async (_req, res) => {
-  store.dispatch(showInstructionsSlice.actions.toggle());
+  store.getState().toggleInstructions();
   res.send({});
 });

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

@@ -0,0 +1,12 @@
+import { createStore } from 'zustand';
+
+export type State = {
+  shouldShowInstructions: boolean;
+  toggleInstructions: () => void;
+};
+
+export const store = createStore<State>(set => ({
+  shouldShowInstructions: true,
+  toggleInstructions: () =>
+    set(state => ({ shouldShowInstructions: !state.shouldShowInstructions })),
+}));

ts/live-compositor/src/api.generated.ts

@@ -192,7 +192,7 @@ export type VideoEncoderOptions = {
   /**
    * (**default=`"fast"`**) Preset for an encoder. See `FFmpeg` [docs](https://trac.ffmpeg.org/wiki/Encode/H.264#Preset) to learn more.
    */
-  preset: H264EncoderPreset;
+  preset?: H264EncoderPreset | null;
   /**
    * Raw FFmpeg encoder options. See [docs](https://ffmpeg.org/ffmpeg-codecs.html) for more.
    */