@remotion/media 4.0.393 → 4.0.395

package/dist/audio-extraction/extract-audio.js

@@ -38,17 +38,17 @@ const extractAudioInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds,
     if (timeInSeconds === null) {
         return { data: null, durationInSeconds: mediaDurationInSeconds };
     }
-    const sampleIterator = await audioManager.getIterator({
-        src,
-        timeInSeconds,
-        audioSampleSink: audio.sampleSink,
-        isMatroska,
-        actualMatroskaTimestamps,
-        logLevel,
-        maxCacheSize,
-    });
-    const durationInSeconds = durationNotYetApplyingPlaybackRate * playbackRate;
     try {
+        const sampleIterator = await audioManager.getIterator({
+            src,
+            timeInSeconds,
+            audioSampleSink: audio.sampleSink,
+            isMatroska,
+            actualMatroskaTimestamps,
+            logLevel,
+            maxCacheSize,
+        });
+        const durationInSeconds = durationNotYetApplyingPlaybackRate * playbackRate;
         const samples = await sampleIterator.getSamples(timeInSeconds, durationInSeconds);
         audioManager.logOpenFrames();
         const audioDataArray = [];

package/dist/esm/index.mjs

@@ -3085,17 +3085,17 @@ var extractAudioInternal = async ({
   if (timeInSeconds === null) {
     return { data: null, durationInSeconds: mediaDurationInSeconds };
   }
-  const sampleIterator = await audioManager.getIterator({
-    src,
-    timeInSeconds,
-    audioSampleSink: audio.sampleSink,
-    isMatroska,
-    actualMatroskaTimestamps,
-    logLevel,
-    maxCacheSize
-  });
-  const durationInSeconds = durationNotYetApplyingPlaybackRate * playbackRate;
   try {
+    const sampleIterator = await audioManager.getIterator({
+      src,
+      timeInSeconds,
+      audioSampleSink: audio.sampleSink,
+      isMatroska,
+      actualMatroskaTimestamps,
+      logLevel,
+      maxCacheSize
+    });
+    const durationInSeconds = durationNotYetApplyingPlaybackRate * playbackRate;
     const samples = await sampleIterator.getSamples(timeInSeconds, durationInSeconds);
     audioManager.logOpenFrames();
     const audioDataArray = [];
@@ -3387,8 +3387,26 @@ var extractFrameAndAudio = async ({
   }
 };
 
-// src/video-extraction/extract-frame-via-broadcast-channel.ts
-if (typeof window !== "undefined" && window.remotion_broadcastChannel && window.remotion_isMainTab) {
+// src/video-extraction/add-broadcast-channel-listener.ts
+var emitReadiness = (channel) => {
+  channel.postMessage({
+    type: "main-tab-ready"
+  });
+  let times = 0;
+  const interval = setInterval(() => {
+    channel.postMessage({
+      type: "main-tab-ready"
+    });
+    times++;
+    if (times > 30) {
+      clearInterval(interval);
+    }
+  }, 300);
+};
+var addBroadcastChannelListener = () => {
+  if (!(typeof window !== "undefined" && window.remotion_broadcastChannel && window.remotion_isMainTab)) {
+    return;
+  }
   window.remotion_broadcastChannel.addEventListener("message", async (event) => {
     const data = event.data;
     if (data.type === "request") {
@@ -3467,8 +3485,29 @@ if (typeof window !== "undefined" && window.remotion_broadcastChannel && window.
       throw new Error("Invalid message: " + JSON.stringify(data));
     }
   });
-}
-var extractFrameViaBroadcastChannel = ({
+  emitReadiness(window.remotion_broadcastChannel);
+};
+var mainTabIsReadyProm = null;
+var waitForMainTabToBeReady = (channel) => {
+  if (mainTabIsReadyProm) {
+    return mainTabIsReadyProm;
+  }
+  mainTabIsReadyProm = new Promise((resolve) => {
+    const onMessage = (event) => {
+      const data = event.data;
+      if (data.type === "main-tab-ready") {
+        resolve();
+        channel.removeEventListener("message", onMessage);
+      }
+    };
+    channel.addEventListener("message", onMessage);
+  });
+  return mainTabIsReadyProm;
+};
+
+// src/video-extraction/extract-frame-via-broadcast-channel.ts
+addBroadcastChannelListener();
+var extractFrameViaBroadcastChannel = async ({
   src,
   timeInSeconds,
   logLevel,
@@ -3501,6 +3540,7 @@ var extractFrameViaBroadcastChannel = ({
       maxCacheSize
     });
   }
+  await waitForMainTabToBeReady(window.remotion_broadcastChannel);
   const requestId = crypto.randomUUID();
   const resolvePromise = new Promise((resolve, reject) => {
     const onMessage = (event) => {
@@ -3508,6 +3548,9 @@ var extractFrameViaBroadcastChannel = ({
       if (!data) {
         return;
       }
+      if (data.type === "main-tab-ready") {
+        return;
+      }
       if (data.id !== requestId) {
         return;
       }

package/dist/is-network-error.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Utility to check if error is network error
+ * @param error
+ * @returns
+ */
+export declare function isNetworkError(error: Error): boolean;

package/dist/is-network-error.js

@@ -0,0 +1,17 @@
+/**
+ * Utility to check if error is network error
+ * @param error
+ * @returns
+ */
+export function isNetworkError(error) {
+    if (
+    // Chrome
+    error.message.includes('Failed to fetch') ||
+        // Safari
+        error.message.includes('Load failed') ||
+        // Firefox
+        error.message.includes('NetworkError when attempting to fetch resource')) {
+        return true;
+    }
+    return false;
+}

package/dist/video-extraction/add-broadcast-channel-listener.d.ts

@@ -0,0 +1,48 @@
+import type { LogLevel } from 'remotion';
+import type { PcmS16AudioData } from '../convert-audiodata/convert-audiodata';
+export type MessageFromMainTab = {
+    type: 'response-success';
+    id: string;
+    frame: ImageBitmap | null;
+    audio: PcmS16AudioData | null;
+    durationInSeconds: number | null;
+} | {
+    type: 'response-error';
+    id: string;
+    errorStack: string;
+} | {
+    type: 'response-cannot-decode';
+    id: string;
+    durationInSeconds: number | null;
+} | {
+    type: 'response-cannot-decode-alpha';
+    id: string;
+    durationInSeconds: number | null;
+} | {
+    type: 'response-network-error';
+    id: string;
+} | {
+    type: 'response-unknown-container-format';
+    id: string;
+} | {
+    type: 'main-tab-ready';
+};
+export type ExtractFrameRequest = {
+    type: 'request';
+    src: string;
+    timeInSeconds: number;
+    durationInSeconds: number;
+    playbackRate: number;
+    id: string;
+    logLevel: LogLevel;
+    includeAudio: boolean;
+    includeVideo: boolean;
+    loop: boolean;
+    audioStreamIndex: number;
+    trimAfter: number | undefined;
+    trimBefore: number | undefined;
+    fps: number;
+    maxCacheSize: number;
+};
+export declare const addBroadcastChannelListener: () => void;
+export declare const waitForMainTabToBeReady: (channel: BroadcastChannel) => Promise<void>;

package/dist/video-extraction/add-broadcast-channel-listener.js

@@ -0,0 +1,125 @@
+import { extractFrameAndAudio } from '../extract-frame-and-audio';
+// Send to other channels a message to let them know that the
+// tab was loaded and is ready to receive requests.
+// Emit "readiness" messages for approximately 10 seconds.
+const emitReadiness = (channel) => {
+    channel.postMessage({
+        type: 'main-tab-ready',
+    });
+    let times = 0;
+    const interval = setInterval(() => {
+        channel.postMessage({
+            type: 'main-tab-ready',
+        });
+        times++;
+        if (times > 30) {
+            clearInterval(interval);
+        }
+    }, 300);
+};
+export const addBroadcastChannelListener = () => {
+    // Doesn't exist in studio
+    if (!(typeof window !== 'undefined' &&
+        window.remotion_broadcastChannel &&
+        window.remotion_isMainTab)) {
+        return;
+    }
+    window.remotion_broadcastChannel.addEventListener('message', async (event) => {
+        const data = event.data;
+        if (data.type === 'request') {
+            try {
+                const result = await extractFrameAndAudio({
+                    src: data.src,
+                    timeInSeconds: data.timeInSeconds,
+                    logLevel: data.logLevel,
+                    durationInSeconds: data.durationInSeconds,
+                    playbackRate: data.playbackRate,
+                    includeAudio: data.includeAudio,
+                    includeVideo: data.includeVideo,
+                    loop: data.loop,
+                    audioStreamIndex: data.audioStreamIndex,
+                    trimAfter: data.trimAfter,
+                    trimBefore: data.trimBefore,
+                    fps: data.fps,
+                    maxCacheSize: data.maxCacheSize,
+                });
+                if (result.type === 'cannot-decode') {
+                    const cannotDecodeResponse = {
+                        type: 'response-cannot-decode',
+                        id: data.id,
+                        durationInSeconds: result.durationInSeconds,
+                    };
+                    window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
+                    return;
+                }
+                if (result.type === 'cannot-decode-alpha') {
+                    const cannotDecodeAlphaResponse = {
+                        type: 'response-cannot-decode-alpha',
+                        id: data.id,
+                        durationInSeconds: result.durationInSeconds,
+                    };
+                    window.remotion_broadcastChannel.postMessage(cannotDecodeAlphaResponse);
+                    return;
+                }
+                if (result.type === 'network-error') {
+                    const networkErrorResponse = {
+                        type: 'response-network-error',
+                        id: data.id,
+                    };
+                    window.remotion_broadcastChannel.postMessage(networkErrorResponse);
+                    return;
+                }
+                if (result.type === 'unknown-container-format') {
+                    const unknownContainerFormatResponse = {
+                        type: 'response-unknown-container-format',
+                        id: data.id,
+                    };
+                    window.remotion_broadcastChannel.postMessage(unknownContainerFormatResponse);
+                    return;
+                }
+                const { frame, audio, durationInSeconds } = result;
+                const imageBitmap = frame ? await createImageBitmap(frame) : null;
+                if (frame) {
+                    frame.close();
+                }
+                const response = {
+                    type: 'response-success',
+                    id: data.id,
+                    frame: imageBitmap,
+                    audio,
+                    durationInSeconds: durationInSeconds ?? null,
+                };
+                window.remotion_broadcastChannel.postMessage(response);
+            }
+            catch (error) {
+                const response = {
+                    type: 'response-error',
+                    id: data.id,
+                    errorStack: error.stack ?? 'No stack trace',
+                };
+                window.remotion_broadcastChannel.postMessage(response);
+            }
+        }
+        else {
+            throw new Error('Invalid message: ' + JSON.stringify(data));
+        }
+    });
+    emitReadiness(window.remotion_broadcastChannel);
+};
+let mainTabIsReadyProm = null;
+export const waitForMainTabToBeReady = (channel) => {
+    if (mainTabIsReadyProm) {
+        return mainTabIsReadyProm;
+    }
+    mainTabIsReadyProm = new Promise((resolve) => {
+        const onMessage = (event) => {
+            const data = event.data;
+            if (data.type === 'main-tab-ready') {
+                resolve();
+                channel.removeEventListener('message', onMessage);
+            }
+        };
+        channel.addEventListener('message', onMessage);
+    });
+    return mainTabIsReadyProm;
+};

package/dist/video-extraction/extract-frame-via-broadcast-channel.js

@@ -1,90 +1,7 @@
 import { extractFrameAndAudio } from '../extract-frame-and-audio';
-// Doesn't exist in studio
-if (typeof window !== 'undefined' &&
-    window.remotion_broadcastChannel &&
-    window.remotion_isMainTab) {
-    window.remotion_broadcastChannel.addEventListener('message', async (event) => {
-        const data = event.data;
-        if (data.type === 'request') {
-            try {
-                const result = await extractFrameAndAudio({
-                    src: data.src,
-                    timeInSeconds: data.timeInSeconds,
-                    logLevel: data.logLevel,
-                    durationInSeconds: data.durationInSeconds,
-                    playbackRate: data.playbackRate,
-                    includeAudio: data.includeAudio,
-                    includeVideo: data.includeVideo,
-                    loop: data.loop,
-                    audioStreamIndex: data.audioStreamIndex,
-                    trimAfter: data.trimAfter,
-                    trimBefore: data.trimBefore,
-                    fps: data.fps,
-                    maxCacheSize: data.maxCacheSize,
-                });
-                if (result.type === 'cannot-decode') {
-                    const cannotDecodeResponse = {
-                        type: 'response-cannot-decode',
-                        id: data.id,
-                        durationInSeconds: result.durationInSeconds,
-                    };
-                    window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
-                    return;
-                }
-                if (result.type === 'cannot-decode-alpha') {
-                    const cannotDecodeAlphaResponse = {
-                        type: 'response-cannot-decode-alpha',
-                        id: data.id,
-                        durationInSeconds: result.durationInSeconds,
-                    };
-                    window.remotion_broadcastChannel.postMessage(cannotDecodeAlphaResponse);
-                    return;
-                }
-                if (result.type === 'network-error') {
-                    const networkErrorResponse = {
-                        type: 'response-network-error',
-                        id: data.id,
-                    };
-                    window.remotion_broadcastChannel.postMessage(networkErrorResponse);
-                    return;
-                }
-                if (result.type === 'unknown-container-format') {
-                    const unknownContainerFormatResponse = {
-                        type: 'response-unknown-container-format',
-                        id: data.id,
-                    };
-                    window.remotion_broadcastChannel.postMessage(unknownContainerFormatResponse);
-                    return;
-                }
-                const { frame, audio, durationInSeconds } = result;
-                const imageBitmap = frame ? await createImageBitmap(frame) : null;
-                if (frame) {
-                    frame.close();
-                }
-                const response = {
-                    type: 'response-success',
-                    id: data.id,
-                    frame: imageBitmap,
-                    audio,
-                    durationInSeconds: durationInSeconds ?? null,
-                };
-                window.remotion_broadcastChannel.postMessage(response);
-            }
-            catch (error) {
-                const response = {
-                    type: 'response-error',
-                    id: data.id,
-                    errorStack: error.stack ?? 'No stack trace',
-                };
-                window.remotion_broadcastChannel.postMessage(response);
-            }
-        }
-        else {
-            throw new Error('Invalid message: ' + JSON.stringify(data));
-        }
-    });
-}
-export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, maxCacheSize, }) => {
+import { addBroadcastChannelListener, waitForMainTabToBeReady, } from './add-broadcast-channel-listener';
+addBroadcastChannelListener();
+export const extractFrameViaBroadcastChannel = async ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, maxCacheSize, }) => {
     if (isClientSideRendering || window.remotion_isMainTab) {
         return extractFrameAndAudio({
             logLevel,
@@ -102,6 +19,7 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
             maxCacheSize,
         });
     }
+    await waitForMainTabToBeReady(window.remotion_broadcastChannel);
     const requestId = crypto.randomUUID();
     const resolvePromise = new Promise((resolve, reject) => {
         const onMessage = (event) => {
@@ -109,6 +27,9 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
             if (!data) {
                 return;
             }
+            if (data.type === 'main-tab-ready') {
+                return;
+            }
             if (data.id !== requestId) {
                 return;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.393",
+	"version": "4.0.395",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -21,15 +21,15 @@
 		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
 	},
 	"dependencies": {
-		"mediabunny": "1.27.0",
-		"remotion": "4.0.393"
+		"mediabunny": "1.27.2",
+		"remotion": "4.0.395"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.393",
+		"@remotion/eslint-config-internal": "4.0.395",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",