@revideo/2d 0.5.7-alpha.1076 → 0.5.7-alpha.1084

package/lib/utils/video/ffmpeg-client.js

@@ -14,32 +14,46 @@ export class ImageCommunication {
         }
     }
     async getFrame(id, src, time, duration, fps) {
-        return new Promise((resolve, reject) => {
-            if (!import.meta.hot) {
-                reject('FfmpegVideoFrame can only be used with HMR.');
-                return;
-            }
-            function handler(event) {
-                const image = new Image();
-                const uint8Array = new Uint8Array(event.data.frame.data);
-                const blob = new Blob([uint8Array], { type: 'image/png' });
-                const url = URL.createObjectURL(blob);
-                image.src = url;
-                image.onload = () => {
-                    resolve(image);
-                };
-            }
-            this.nextFrameHandlers.push(handler);
-            import.meta.hot.send('revideo:ffmpeg-decoder:video-frame', {
-                data: {
-                    id: id,
-                    filePath: src,
-                    startTime: time,
-                    duration,
-                    fps,
-                },
-            });
+        const response = await fetch('/revideo-ffmpeg-decoder/video-frame', {
+            method: 'POST',
+            headers: {
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                id,
+                filePath: src,
+                startTime: time,
+                duration,
+                fps,
+            }),
         });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const arrayBuffer = await response.arrayBuffer();
+        // Assuming fixed dimensions for now
+        const width = 1080; // or whatever your fixed width is
+        const height = 1920; // or whatever your fixed height is
+        let imageData;
+        try {
+            imageData = new ImageData(new Uint8ClampedArray(arrayBuffer), width, height);
+        }
+        catch {
+            const width = 1080; // your desired width
+            const height = 1920; // your desired height
+            // Create a black frame
+            const blackFrame = new Uint8ClampedArray(width * height * 4); // 4 channels: R, G, B, A
+            for (let i = 0; i < blackFrame.length; i += 4) {
+                blackFrame[i] = 0; // R
+                blackFrame[i + 1] = 0; // G
+                blackFrame[i + 2] = 0; // B
+                blackFrame[i + 3] = 255; // A (fully opaque)
+            }
+            imageData = new ImageData(blackFrame, width, height);
+        }
+        const imageBitmap = await createImageBitmap(imageData);
+        return imageBitmap;
     }
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmZtcGVnLWNsaWVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvdXRpbHMvdmlkZW8vZmZtcGVnLWNsaWVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCO1FBV1Esc0JBQWlCLEdBQXNDLEVBQUUsQ0FBQztRQVZoRSxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUNyQixNQUFNLElBQUksS0FBSyxDQUFDLDZDQUE2QyxDQUFDLENBQUM7UUFDakUsQ0FBQztRQUVELE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FDaEIsd0NBQXdDLEVBQ3hDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUN4QixDQUFDO0lBQ0osQ0FBQztJQUlPLE9BQU8sQ0FBQyxLQUFtQjtRQUNqQyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUM7UUFDeEMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztRQUU1QixLQUFLLE1BQU0sT0FBTyxJQUFJLFFBQVEsRUFBRSxDQUFDO1lBQy9CLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNqQixDQUFDO0lBQ0gsQ0FBQztJQUVNLEtBQUssQ0FBQyxRQUFRLENBQ25CLEVBQVUsRUFDVixHQUFXLEVBQ1gsSUFBWSxFQUNaLFFBQWdCLEVBQ2hCLEdBQVc7UUFFWCxPQUFPLElBQUksT0FBTyxDQUFtQixDQUFDLE9BQU8sRUFBRSxNQUFNLEVBQUUsRUFBRTtZQUN2RCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQztnQkFDckIsTUFBTSxDQUFDLDZDQUE2QyxDQUFDLENBQUM7Z0JBQ3RELE9BQU87WUFDVCxDQUFDO1lBRUQsU0FBUyxPQUFPLENBQUMsS0FBbUI7Z0JBQ2xDLE1BQU0sS0FBSyxHQUFHLElBQUksS0FBSyxFQUFFLENBQUM7Z0JBRTFCLE1BQU0sVUFBVSxHQUFHLElBQUksVUFBVSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUN6RCxNQUFNLElBQUksR0FBRyxJQUFJLElBQUksQ0FBQyxDQUFDLFVBQVUsQ0FBQyxFQUFFLEVBQUMsSUFBSSxFQUFFLFdBQVcsRUFBQyxDQUFDLENBQUM7Z0JBQ3pELE1BQU0sR0FBRyxHQUFHLEdBQUcsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBRXRDLEtBQUssQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO2dCQUVoQixLQUFLLENBQUMsTUFBTSxHQUFHLEdBQUcsRUFBRTtvQkFDbEIsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO2dCQUNqQixDQUFDLENBQUM7WUFDSixDQUFDO1lBRUQsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztZQUVyQyxNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsb0NBQW9DLEVBQUU7Z0JBQ3pELElBQUksRUFBRTtvQkFDSixFQUFFLEVBQUUsRUFBRTtvQkFDTixRQUFRLEVBQUUsR0FBRztvQkFDYixTQUFTLEVBQUUsSUFBSTtvQkFDZixRQUFRO29CQUNSLEdBQUc7aUJBQ0o7YUFDRixDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7Q0FDRiJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmZtcGVnLWNsaWVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvdXRpbHMvdmlkZW8vZmZtcGVnLWNsaWVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCO1FBV1Esc0JBQWlCLEdBQXNDLEVBQUUsQ0FBQztRQVZoRSxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUNyQixNQUFNLElBQUksS0FBSyxDQUFDLDZDQUE2QyxDQUFDLENBQUM7UUFDakUsQ0FBQztRQUVELE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FDaEIsd0NBQXdDLEVBQ3hDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUN4QixDQUFDO0lBQ0osQ0FBQztJQUlPLE9BQU8sQ0FBQyxLQUFtQjtRQUNqQyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUM7UUFDeEMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztRQUU1QixLQUFLLE1BQU0sT0FBTyxJQUFJLFFBQVEsRUFBRSxDQUFDO1lBQy9CLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNqQixDQUFDO0lBQ0gsQ0FBQztJQUVNLEtBQUssQ0FBQyxRQUFRLENBQ25CLEVBQVUsRUFDVixHQUFXLEVBQ1gsSUFBWSxFQUNaLFFBQWdCLEVBQ2hCLEdBQVc7UUFFWCxNQUFNLFFBQVEsR0FBRyxNQUFNLEtBQUssQ0FBQyxxQ0FBcUMsRUFBRTtZQUNsRSxNQUFNLEVBQUUsTUFBTTtZQUNkLE9BQU8sRUFBRTtnQkFDUCxnRUFBZ0U7Z0JBQ2hFLGNBQWMsRUFBRSxrQkFBa0I7YUFDbkM7WUFDRCxJQUFJLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQztnQkFDbkIsRUFBRTtnQkFDRixRQUFRLEVBQUUsR0FBRztnQkFDYixTQUFTLEVBQUUsSUFBSTtnQkFDZixRQUFRO2dCQUNSLEdBQUc7YUFDSixDQUFDO1NBQ0gsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLFFBQVEsQ0FBQyxFQUFFLEVBQUUsQ0FBQztZQUNqQixNQUFNLElBQUksS0FBSyxDQUFDLHVCQUF1QixRQUFRLENBQUMsTUFBTSxFQUFFLENBQUMsQ0FBQztRQUM1RCxDQUFDO1FBRUQsTUFBTSxXQUFXLEdBQUcsTUFBTSxRQUFRLENBQUMsV0FBVyxFQUFFLENBQUM7UUFFakQsb0NBQW9DO1FBQ3BDLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLGtDQUFrQztRQUN0RCxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsQ0FBQyxtQ0FBbUM7UUFFeEQsSUFBSSxTQUFvQixDQUFDO1FBRXpCLElBQUksQ0FBQztZQUNILFNBQVMsR0FBRyxJQUFJLFNBQVMsQ0FDdkIsSUFBSSxpQkFBaUIsQ0FBQyxXQUFXLENBQUMsRUFDbEMsS0FBSyxFQUNMLE1BQU0sQ0FDUCxDQUFDO1FBQ0osQ0FBQztRQUFDLE1BQU0sQ0FBQztZQUNQLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLHFCQUFxQjtZQUN6QyxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsQ0FBQyxzQkFBc0I7WUFFM0MsdUJBQXVCO1lBQ3ZCLE1BQU0sVUFBVSxHQUFHLElBQUksaUJBQWlCLENBQUMsS0FBSyxHQUFHLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLHlCQUF5QjtZQUN2RixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsVUFBVSxDQUFDLE1BQU0sRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7Z0JBQzlDLFVBQVUsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxJQUFJO2dCQUN2QixVQUFVLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUk7Z0JBQzNCLFVBQVUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsSUFBSTtnQkFDM0IsVUFBVSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxtQkFBbUI7WUFDOUMsQ0FBQztZQUVELFNBQVMsR0FBRyxJQUFJLFNBQVMsQ0FBQyxVQUFVLEVBQUUsS0FBSyxFQUFFLE1BQU0sQ0FBQyxDQUFDO1FBQ3ZELENBQUM7UUFDRCxNQUFNLFdBQVcsR0FBRyxNQUFNLGlCQUFpQixDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQ3ZELE9BQU8sV0FBVyxDQUFDO0lBQ3JCLENBQUM7Q0FDRiJ9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revideo/2d",
-  "version": "0.5.7-alpha.1076+c0acda35",
+  "version": "0.5.7-alpha.1084+4580e7ac",
   "description": "A 2D renderer for revideo",
   "author": "revideo",
   "homepage": "https://re.video/",
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@preact/signals": "^1.2.1",
     "@revideo/internal": "^0.0.0",
-    "@revideo/ui": "^0.5.7-alpha.1076+c0acda35",
+    "@revideo/ui": "^0.5.7-alpha.1084+4580e7ac",
     "clsx": "^2.0.0",
     "jsdom": "^22.1.0",
     "preact": "^10.19.2",
@@ -40,7 +40,7 @@
     "@codemirror/language": "^6.10.1",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
-    "@revideo/core": "^0.5.7-alpha.1076+c0acda35",
+    "@revideo/core": "^0.5.7-alpha.1084+4580e7ac",
     "@rive-app/canvas-advanced": "2.7.3",
     "code-fns": "^0.8.2",
     "hls.js": "^1.5.11",
@@ -48,5 +48,5 @@
     "mp4box": "^0.5.2",
     "parse-svg-path": "^0.1.2"
   },
-  "gitHead": "c0acda35b79eb998c2deb66e4a95f67680865942"
+  "gitHead": "4580e7ac3430f58ef720a31e7e46a99c22c9f261"
 }

package/src/lib/components/Layout.ts

@@ -284,8 +284,6 @@ export class Layout extends Node {
   @signal()
   public declare readonly textAlign: SimpleSignal<CanvasTextAlign, this>;
 
-  protected fontLoaded: boolean = false;
-
   protected getX(): number {
     if (this.isLayoutRoot()) {
       return this.x.context.getter();
@@ -964,11 +962,13 @@ export class Layout extends Node {
 
   @computed()
   protected applyFont() {
-    if (!this.fontLoaded) {
+    const loadingFonts = Array.from(document.fonts).filter(
+      font => font.status === 'loading',
+    );
+    if (loadingFonts.length > 0) {
       DependencyContext.collectPromise(
         (async () => {
           await document.fonts?.ready;
-          this.fontLoaded = true;
         })(),
       );
     }

package/src/lib/components/Txt.test.tsx

@@ -10,7 +10,6 @@ describe('Txt', () => {
 
   it('Handle plain text', () => {
     const node = (<Txt lineWidth={8}>test</Txt>) as Txt;
-    node.toPromise();
 
     const parseSpy = vi.spyOn(node as any, 'parseChildren');
     const leaf = node.childAs<TxtLeaf>(0);
@@ -39,7 +38,6 @@ describe('Txt', () => {
         Apple <Txt>Banana</Txt> Cherry
       </Txt>
     ) as Txt;
-    node.toPromise();
 
     const first = node.childAs<TxtLeaf>(0);
     const second = node.childAs<Txt>(1);

package/src/lib/components/Video.ts

@@ -197,7 +197,7 @@ export class Video extends Media {
     return video;
   }
 
-  protected lastFrame: HTMLImageElement | null = null;
+  protected lastFrame: any | null = null;
 
   protected async webcodecSeekedVideo(): Promise<CanvasImageSource> {
     const video = this.video();
@@ -213,7 +213,7 @@ export class Video extends Media {
     return getFrame(this.key, video.src, time, fps);
   }
 
-  protected async ffmpegSeekedVideo(): Promise<HTMLImageElement> {
+  protected async ffmpegSeekedVideo(): Promise<ImageBitmap> {
     const video = this.video();
     const time = this.clampTime(this.time());
     const duration = this.getDuration();

package/src/lib/components/__tests__/clone.test.tsx

@@ -52,7 +52,6 @@ describe('clone', () => {
     const template = (
       <Circle lineWidth={8} startAngle={signal} end={0.5} />
     ) as Circle;
-    template.toPromise();
     const clone = template.snapshotClone({end: 0});
 
     expect(clone.lineWidth()).toBe(8);

package/src/lib/components/__tests__/state.test.tsx

@@ -12,7 +12,6 @@ describe('state', () => {
     const circle = (
       <Circle lineWidth={8} startAngle={signal} end={0.5} />
     ) as Circle;
-    circle.toPromise();
     circle.save();
 
     circle.lineWidth(16);

package/src/lib/utils/video/ffmpeg-client.ts

@@ -28,37 +28,55 @@ export class ImageCommunication {
     duration: number,
     fps: number,
   ) {
-    return new Promise<HTMLImageElement>((resolve, reject) => {
-      if (!import.meta.hot) {
-        reject('FfmpegVideoFrame can only be used with HMR.');
-        return;
-      }
+    const response = await fetch('/revideo-ffmpeg-decoder/video-frame', {
+      method: 'POST',
+      headers: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        id,
+        filePath: src,
+        startTime: time,
+        duration,
+        fps,
+      }),
+    });
 
-      function handler(event: MessageEvent) {
-        const image = new Image();
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
 
-        const uint8Array = new Uint8Array(event.data.frame.data);
-        const blob = new Blob([uint8Array], {type: 'image/png'});
-        const url = URL.createObjectURL(blob);
+    const arrayBuffer = await response.arrayBuffer();
 
-        image.src = url;
+    // Assuming fixed dimensions for now
+    const width = 1080; // or whatever your fixed width is
+    const height = 1920; // or whatever your fixed height is
 
-        image.onload = () => {
-          resolve(image);
-        };
-      }
+    let imageData: ImageData;
 
-      this.nextFrameHandlers.push(handler);
+    try {
+      imageData = new ImageData(
+        new Uint8ClampedArray(arrayBuffer),
+        width,
+        height,
+      );
+    } catch {
+      const width = 1080; // your desired width
+      const height = 1920; // your desired height
 
-      import.meta.hot.send('revideo:ffmpeg-decoder:video-frame', {
-        data: {
-          id: id,
-          filePath: src,
-          startTime: time,
-          duration,
-          fps,
-        },
-      });
-    });
+      // Create a black frame
+      const blackFrame = new Uint8ClampedArray(width * height * 4); // 4 channels: R, G, B, A
+      for (let i = 0; i < blackFrame.length; i += 4) {
+        blackFrame[i] = 0; // R
+        blackFrame[i + 1] = 0; // G
+        blackFrame[i + 2] = 0; // B
+        blackFrame[i + 3] = 255; // A (fully opaque)
+      }
+
+      imageData = new ImageData(blackFrame, width, height);
+    }
+    const imageBitmap = await createImageBitmap(imageData);
+    return imageBitmap;
   }
 }