build working

ts/@live-compositor/core/package.json

@@ -28,12 +28,14 @@
     "/cjs"
   ],
   "devDependencies": {
+    "@types/react": "^18.3.3",
     "@types/react-reconciler": "0.28.8"
   },
   "dependencies": {
     "react-reconciler": "0.29.2"
   },
   "peerDependencies": {
+    "react": "^18.3.1",
     "live-compositor": "workspace:^0.1.0"
   }
 }

ts/@live-compositor/web-wasm/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "dist",
     "module": "ESNext",

ts/examples/vite-browser-render/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@live-compositor/browser-render": "workspace:0.1.0-rc.4",
     "@live-compositor/web-wasm": "workspace:0.1.0-rc.0",
+    "mp4box": "^0.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -24,5 +25,8 @@
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1",
     "vite-plugin-static-copy": "^1.0.6"
+  },
+  "peerDependencies": {
+    "live-compositor": "workspace:^0.1.0"
   }
 }

ts/examples/vite-browser-render/src/examples/mp4/decoder.ts

@@ -58,6 +58,7 @@ export class MP4Decoder {
     console.log(`Using codec: ${videoTrack.codec}`);
 
     const trak = this.file.getTrackById(videoTrack.id);
+    if (!trak) return;
     const description = getCodecDescription(trak);
     if (!description) {
       console.error('Codec description not found');

ts/examples/vite-browser-render/ts-declarations/mp4box.d.ts

@@ -0,0 +1,112 @@
+declare module 'mp4box' {
+  export class DataStream {
+    constructor(buffer?: ArrayBuffer, byteOffset?: number, endianness?: boolean);
+
+    get buffer(): ArrayBuffer;
+    set buffer(v: ArrayBuffer);
+
+    static LITTLE_ENDIAN: boolean;
+    static BIG_ENDIAN: boolean;
+  }
+
+  export interface MP4File {
+    onReady?: (info: MP4Info) => void;
+    onError?: (e: string) => void;
+    onSamples?: (id: number, user: object, samples: Sample[]) => void;
+
+    getTrackById(id: number): TrakBox | undefined;
+
+    appendBuffer(data: MP4ArrayBuffer): number;
+    start(): void;
+    stop(): void;
+    flush(): void;
+
+    setExtractionOptions(id: number, user?: object, options?: ExtractionOptions): void;
+  }
+
+  export interface MP4MediaTrack {
+    id: number;
+    movie_duration: number;
+    track_width: number;
+    track_height: number;
+    timescale: number;
+    duration: number;
+    bitrate: number;
+    codec: string;
+  }
+
+  export interface MP4VideoTrack extends MP4MediaTrack {
+    video: {
+      width: number;
+      height: number;
+    };
+  }
+
+  export interface MP4AudioTrack extends MP4MediaTrack {
+    audio: {
+      sample_size: number;
+      sample_rate: number;
+      channel_count: number;
+    };
+  }
+
+  export type MP4Track = MP4VideoTrack | MP4AudioTrack;
+
+  export interface MP4Info {
+    duration: number;
+    timescale: number;
+    tracks: MP4Track[];
+    audioTracks: MP4AudioTrack[];
+    videoTracks: MP4VideoTrack[];
+  }
+
+  export interface Sample {
+    timescale: number;
+    data: ArrayBuffer;
+    size: number;
+    duration: number;
+    cts: number;
+    dts: number;
+    is_sync: boolean;
+    depends: number;
+  }
+
+  export interface ExtractionOptions {
+    nbSamples: number;
+  }
+
+  export type MP4ArrayBuffer = ArrayBuffer & { fileStart: number };
+
+  export class Box {
+    write(stream: DataStream): void;
+  }
+
+  export class TrakBox extends Box {
+    mdia: MdiaBox;
+  }
+
+  export class MdiaBox extends Box {
+    minf: MinfBox;
+  }
+
+  export class MinfBox extends Box {
+    stbl: StblBox;
+  }
+
+  export class StblBox extends Box {
+    stsd: StsdBox;
+  }
+
+  export class StsdBox extends Box {
+    entries: Description[];
+  }
+
+  export interface Description {
+    avcC?: Box;
+    hvcC?: Box;
+    vpcC?: Box;
+    av1C?: Box;
+  }
+
+  export function createFile(): MP4File;
+}

ts/examples/vite-browser-render/tsconfig.app.json

@@ -20,5 +20,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src", "ts-declarations"]
 }