@revideo/2d 0.5.6 → 0.5.7-alpha.1083

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.6",
+  "version": "0.5.7-alpha.1083+c69c165a",
   "description": "A 2D renderer for revideo",
   "author": "revideo",
   "homepage": "https://re.video/",
@@ -29,8 +29,8 @@
   ],
   "devDependencies": {
     "@preact/signals": "^1.2.1",
-    "@revideo/internal": "0.0.0",
-    "@revideo/ui": "0.5.6",
+    "@revideo/internal": "^0.0.0",
+    "@revideo/ui": "^0.5.7-alpha.1083+c69c165a",
     "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.6",
+    "@revideo/core": "^0.5.7-alpha.1083+c69c165a",
     "@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": "6e350fa16d493d3bd20a4e06fa36a02bbecd0a0b"
+  "gitHead": "c69c165a3263605576098abec2555d055c73d3c5"
 }

package/src/lib/components/Layout.ts

@@ -1,10 +1,8 @@
 import {
   BBox,
-  boolLerp,
+  DependencyContext,
   InterpolationFunction,
-  modify,
   Origin,
-  originToOffset,
   PossibleSpacing,
   PossibleVector2,
   SerializedVector2,
@@ -13,14 +11,18 @@ import {
   SimpleSignal,
   SimpleVector2Signal,
   SpacingSignal,
-  threadable,
   ThreadGenerator,
   TimingFunction,
-  tween,
   Vector2,
   Vector2Signal,
+  boolLerp,
+  modify,
+  originToOffset,
+  threadable,
+  tween,
 } from '@revideo/core';
 import {
+  Vector2LengthSignal,
   addInitializer,
   cloneable,
   computed,
@@ -30,7 +32,6 @@ import {
   interpolation,
   nodeName,
   signal,
-  Vector2LengthSignal,
   vector2Signal,
 } from '../decorators';
 import {spacingSignal} from '../decorators/spacingSignal';
@@ -961,6 +962,17 @@ export class Layout extends Node {
 
   @computed()
   protected applyFont() {
+    const loadingFonts = Array.from(document.fonts).filter(
+      font => font.status === 'loading',
+    );
+    if (loadingFonts.length > 0) {
+      DependencyContext.collectPromise(
+        (async () => {
+          await document.fonts?.ready;
+        })(),
+      );
+    }
+
     this.element.style.fontFamily = this.fontFamily.isInitial()
       ? ''
       : this.fontFamily();

package/src/lib/components/TxtLeaf.ts

@@ -61,9 +61,9 @@ export class TxtLeaf extends Shape {
   }
 
   protected override async draw(context: CanvasRenderingContext2D) {
-    await document.fonts?.ready;
     this.requestFontUpdate();
     this.applyStyle(context);
+    await document.fonts?.ready;
     this.applyText(context);
     context.font = this.styles.font;
     if ('letterSpacing' in context) {

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/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;
   }
 }