@revideo/2d 0.5.7-alpha.1084 → 0.5.8-alpha.1082

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

@@ -1,23 +1,14 @@
 export class ImageCommunication {
     constructor() {
-        this.nextFrameHandlers = [];
         if (!import.meta.hot) {
             throw new Error('FfmpegVideoFrame can only be used with HMR.');
         }
-        import.meta.hot.on('revideo:ffmpeg-decoder:video-frame-res', this.handler.bind(this));
-    }
-    handler(event) {
-        const handlers = this.nextFrameHandlers;
-        this.nextFrameHandlers = [];
-        for (const handler of handlers) {
-            handler(event);
-        }
     }
     async getFrame(id, src, time, duration, fps) {
         const response = await fetch('/revideo-ffmpeg-decoder/video-frame', {
             method: 'POST',
             headers: {
-                // eslint-disable-next-line @typescript-eslint/naming-convention
+                // eslint-disable-next-line
                 'Content-Type': 'application/json',
             },
             body: JSON.stringify({
@@ -31,29 +22,12 @@ export class ImageCommunication {
         if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);
         }
+        const width = parseInt(response.headers.get('X-Frame-Width') || '1080', 10);
+        const height = parseInt(response.headers.get('X-Frame-Height') || '1920', 10);
         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 imageData = new ImageData(new Uint8ClampedArray(arrayBuffer), width, height);
         const imageBitmap = await createImageBitmap(imageData);
         return imageBitmap;
     }
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmZtcGVnLWNsaWVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvdXRpbHMvdmlkZW8vZmZtcGVnLWNsaWVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCO1FBV1Esc0JBQWlCLEdBQXNDLEVBQUUsQ0FBQztRQVZoRSxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUNyQixNQUFNLElBQUksS0FBSyxDQUFDLDZDQUE2QyxDQUFDLENBQUM7UUFDakUsQ0FBQztRQUVELE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FDaEIsd0NBQXdDLEVBQ3hDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUN4QixDQUFDO0lBQ0osQ0FBQztJQUlPLE9BQU8sQ0FBQyxLQUFtQjtRQUNqQyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUM7UUFDeEMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztRQUU1QixLQUFLLE1BQU0sT0FBTyxJQUFJLFFBQVEsRUFBRSxDQUFDO1lBQy9CLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNqQixDQUFDO0lBQ0gsQ0FBQztJQUVNLEtBQUssQ0FBQyxRQUFRLENBQ25CLEVBQVUsRUFDVixHQUFXLEVBQ1gsSUFBWSxFQUNaLFFBQWdCLEVBQ2hCLEdBQVc7UUFFWCxNQUFNLFFBQVEsR0FBRyxNQUFNLEtBQUssQ0FBQyxxQ0FBcUMsRUFBRTtZQUNsRSxNQUFNLEVBQUUsTUFBTTtZQUNkLE9BQU8sRUFBRTtnQkFDUCxnRUFBZ0U7Z0JBQ2hFLGNBQWMsRUFBRSxrQkFBa0I7YUFDbkM7WUFDRCxJQUFJLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQztnQkFDbkIsRUFBRTtnQkFDRixRQUFRLEVBQUUsR0FBRztnQkFDYixTQUFTLEVBQUUsSUFBSTtnQkFDZixRQUFRO2dCQUNSLEdBQUc7YUFDSixDQUFDO1NBQ0gsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLFFBQVEsQ0FBQyxFQUFFLEVBQUUsQ0FBQztZQUNqQixNQUFNLElBQUksS0FBSyxDQUFDLHVCQUF1QixRQUFRLENBQUMsTUFBTSxFQUFFLENBQUMsQ0FBQztRQUM1RCxDQUFDO1FBRUQsTUFBTSxXQUFXLEdBQUcsTUFBTSxRQUFRLENBQUMsV0FBVyxFQUFFLENBQUM7UUFFakQsb0NBQW9DO1FBQ3BDLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLGtDQUFrQztRQUN0RCxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsQ0FBQyxtQ0FBbUM7UUFFeEQsSUFBSSxTQUFvQixDQUFDO1FBRXpCLElBQUksQ0FBQztZQUNILFNBQVMsR0FBRyxJQUFJLFNBQVMsQ0FDdkIsSUFBSSxpQkFBaUIsQ0FBQyxXQUFXLENBQUMsRUFDbEMsS0FBSyxFQUNMLE1BQU0sQ0FDUCxDQUFDO1FBQ0osQ0FBQztRQUFDLE1BQU0sQ0FBQztZQUNQLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLHFCQUFxQjtZQUN6QyxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsQ0FBQyxzQkFBc0I7WUFFM0MsdUJBQXVCO1lBQ3ZCLE1BQU0sVUFBVSxHQUFHLElBQUksaUJBQWlCLENBQUMsS0FBSyxHQUFHLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLHlCQUF5QjtZQUN2RixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsVUFBVSxDQUFDLE1BQU0sRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7Z0JBQzlDLFVBQVUsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxJQUFJO2dCQUN2QixVQUFVLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUk7Z0JBQzNCLFVBQVUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsSUFBSTtnQkFDM0IsVUFBVSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxtQkFBbUI7WUFDOUMsQ0FBQztZQUVELFNBQVMsR0FBRyxJQUFJLFNBQVMsQ0FBQyxVQUFVLEVBQUUsS0FBSyxFQUFFLE1BQU0sQ0FBQyxDQUFDO1FBQ3ZELENBQUM7UUFDRCxNQUFNLFdBQVcsR0FBRyxNQUFNLGlCQUFpQixDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQ3ZELE9BQU8sV0FBVyxDQUFDO0lBQ3JCLENBQUM7Q0FDRiJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmZtcGVnLWNsaWVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvdXRpbHMvdmlkZW8vZmZtcGVnLWNsaWVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCO1FBQ0UsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUM7WUFDckIsTUFBTSxJQUFJLEtBQUssQ0FBQyw2Q0FBNkMsQ0FBQyxDQUFDO1FBQ2pFLENBQUM7SUFDSCxDQUFDO0lBRU0sS0FBSyxDQUFDLFFBQVEsQ0FDbkIsRUFBVSxFQUNWLEdBQVcsRUFDWCxJQUFZLEVBQ1osUUFBZ0IsRUFDaEIsR0FBVztRQUVYLE1BQU0sUUFBUSxHQUFHLE1BQU0sS0FBSyxDQUFDLHFDQUFxQyxFQUFFO1lBQ2xFLE1BQU0sRUFBRSxNQUFNO1lBQ2QsT0FBTyxFQUFFO2dCQUNQLDJCQUEyQjtnQkFDM0IsY0FBYyxFQUFFLGtCQUFrQjthQUNuQztZQUNELElBQUksRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDO2dCQUNuQixFQUFFO2dCQUNGLFFBQVEsRUFBRSxHQUFHO2dCQUNiLFNBQVMsRUFBRSxJQUFJO2dCQUNmLFFBQVE7Z0JBQ1IsR0FBRzthQUNKLENBQUM7U0FDSCxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsUUFBUSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ2pCLE1BQU0sSUFBSSxLQUFLLENBQUMsdUJBQXVCLFFBQVEsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDO1FBQzVELENBQUM7UUFFRCxNQUFNLEtBQUssR0FBRyxRQUFRLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsZUFBZSxDQUFDLElBQUksTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQzVFLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FDckIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxNQUFNLEVBQ2hELEVBQUUsQ0FDSCxDQUFDO1FBRUYsTUFBTSxXQUFXLEdBQUcsTUFBTSxRQUFRLENBQUMsV0FBVyxFQUFFLENBQUM7UUFFakQsTUFBTSxTQUFTLEdBQUcsSUFBSSxTQUFTLENBQzdCLElBQUksaUJBQWlCLENBQUMsV0FBVyxDQUFDLEVBQ2xDLEtBQUssRUFDTCxNQUFNLENBQ1AsQ0FBQztRQUVGLE1BQU0sV0FBVyxHQUFHLE1BQU0saUJBQWlCLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDdkQsT0FBTyxXQUFXLENBQUM7SUFDckIsQ0FBQztDQUNGIn0=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revideo/2d",
-  "version": "0.5.7-alpha.1084+4580e7ac",
+  "version": "0.5.8-alpha.1082+e524d024",
   "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.1084+4580e7ac",
+    "@revideo/ui": "^0.5.8-alpha.1082+e524d024",
     "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.1084+4580e7ac",
+    "@revideo/core": "^0.5.8-alpha.1082+e524d024",
     "@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": "4580e7ac3430f58ef720a31e7e46a99c22c9f261"
+  "gitHead": "e524d024fbe1f3ad82b309989146cb537dfa04ab"
 }

package/src/lib/components/Media.ts

@@ -7,6 +7,7 @@ import {
   isReactive,
   useLogger,
   useThread,
+  viaProxy,
 } from '@revideo/core';
 import {computed, initial, nodeName, signal} from '../decorators';
 import {Asset} from './Asset';
@@ -21,6 +22,7 @@ export interface MediaProps extends RectProps {
   time?: SignalValue<number>;
   play?: boolean;
   awaitCanPlay?: SignalValue<boolean>;
+  allowVolumeAmplificationInPreview?: SignalValue<boolean>;
 }
 
 @nodeName('Media')
@@ -45,8 +47,23 @@ export abstract class Media extends Asset {
   @signal()
   protected declare readonly awaitCanPlay: SimpleSignal<boolean, this>;
 
+  @initial(false)
+  @signal()
+  protected declare readonly allowVolumeAmplificationInPreview: SimpleSignal<
+    boolean,
+    this
+  >;
+
   protected declare volume: number;
 
+  protected static readonly amplificationPool: Record<
+    string,
+    {
+      audioContext: AudioContext;
+      sourceNode: MediaElementAudioSourceNode;
+      gainNode: GainNode;
+    }
+  > = {};
   protected lastTime = -1;
 
   public constructor(props: MediaProps) {
@@ -78,6 +95,10 @@ export abstract class Media extends Asset {
     return this.volume;
   }
 
+  public getUrl(): string {
+    return this.mediaElement().src;
+  }
+
   public override dispose() {
     this.pause();
     this.remove();
@@ -124,12 +145,49 @@ export abstract class Media extends Asset {
         `volumes cannot be negative - the value will be clamped to 0.`,
       );
     }
+    const media = this.mediaElement();
+    media.volume = Math.min(Math.max(volume, 0), 1);
+
     if (volume > 1) {
+      if (this.allowVolumeAmplificationInPreview()) {
+        this.amplify(media, volume);
+        return;
+      }
       console.warn(
-        `the browser does not natively support volumes higher than 1 - your preview will have a volume of 1, but your exported video will have a volume of ${volume}`,
+        `you have set the volume of node ${this.key} to ${volume} - your video will be exported with the correct volume, but the browser does not support volumes higher than 1 by default. To enable volume amplification in the preview, set the "allowVolumeAmplificationInPreview" of your <Video/> or <Audio/> tag to true. Note that amplification for previews will not work if you use autoplay within the player due to browser autoplay policies: https://developer.chrome.com/blog/autoplay/#webaudio.`,
       );
     }
-    this.mediaElement().volume = Math.min(Math.max(volume, 0), 1);
+  }
+
+  @computed()
+  protected amplify(node: HTMLMediaElement, volume: number) {
+    const key = `${viaProxy(this.fullSource())}/${this.key}`;
+
+    if (Media.amplificationPool[key]) {
+      Media.amplificationPool[key].gainNode.gain.value = volume;
+      return;
+    }
+
+    const audioContext = new AudioContext();
+    const sourceNode = audioContext.createMediaElementSource(node);
+    const gainNode = audioContext.createGain();
+
+    gainNode.gain.value = volume;
+    sourceNode.connect(gainNode);
+    gainNode.connect(audioContext.destination);
+
+    Media.amplificationPool[key] = {audioContext, sourceNode, gainNode};
+
+    if (typeof window === 'undefined' || audioContext.state !== 'suspended') {
+      return;
+    }
+
+    // Start audio context after user interation, neccessary due to browser autoplay policies
+    const handleInteraction = () => {
+      Media.amplificationPool[key].audioContext.resume();
+      window.removeEventListener('click', handleInteraction);
+    };
+    window.addEventListener('click', handleInteraction);
   }
 
   protected setPlaybackRate(playbackRate: number) {

package/src/lib/components/Video.ts

@@ -197,7 +197,7 @@ export class Video extends Media {
     return video;
   }
 
-  protected lastFrame: any | null = null;
+  protected lastFrame: ImageBitmap | null = null;
 
   protected async webcodecSeekedVideo(): Promise<CanvasImageSource> {
     const video = this.video();

package/src/lib/scenes/Scene2D.ts

@@ -170,7 +170,8 @@ export class Scene2D extends GeneratorScene<View2D> implements Inspectable {
       ...playingVideos.map(vid => ({
         key: vid.key,
         type: 'video' as const,
-        src: vid.fullSource(),
+        src: vid.getUrl(),
+        decoder: vid.decoder(),
         playbackRate:
           typeof vid.playbackRate === 'function'
             ? vid.playbackRate()

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

@@ -3,22 +3,6 @@ export class ImageCommunication {
     if (!import.meta.hot) {
       throw new Error('FfmpegVideoFrame can only be used with HMR.');
     }
-
-    import.meta.hot.on(
-      'revideo:ffmpeg-decoder:video-frame-res',
-      this.handler.bind(this),
-    );
-  }
-
-  private nextFrameHandlers: ((event: MessageEvent) => void)[] = [];
-
-  private handler(event: MessageEvent) {
-    const handlers = this.nextFrameHandlers;
-    this.nextFrameHandlers = [];
-
-    for (const handler of handlers) {
-      handler(event);
-    }
   }
 
   public async getFrame(
@@ -31,7 +15,7 @@ export class ImageCommunication {
     const response = await fetch('/revideo-ffmpeg-decoder/video-frame', {
       method: 'POST',
       headers: {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
+        // eslint-disable-next-line
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
@@ -47,35 +31,20 @@ export class ImageCommunication {
       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: ImageData;
+    const width = parseInt(response.headers.get('X-Frame-Width') || '1080', 10);
+    const height = parseInt(
+      response.headers.get('X-Frame-Height') || '1920',
+      10,
+    );
 
-    try {
-      imageData = new ImageData(
-        new Uint8ClampedArray(arrayBuffer),
-        width,
-        height,
-      );
-    } catch {
-      const width = 1080; // your desired width
-      const height = 1920; // your desired height
+    const arrayBuffer = await response.arrayBuffer();
 
-      // 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)
-      }
+    const imageData = new ImageData(
+      new Uint8ClampedArray(arrayBuffer),
+      width,
+      height,
+    );
 
-      imageData = new ImageData(blackFrame, width, height);
-    }
     const imageBitmap = await createImageBitmap(imageData);
     return imageBitmap;
   }