remotion 4.0.85 → 4.0.87

package/dist/cjs/buffering.d.ts

@@ -14,10 +14,10 @@ type AddBlock = (block: Block) => {
     unblock: () => void;
 };
 type BufferManager = {
-    blocks: Block[];
     addBlock: AddBlock;
     listenForBuffering: ListenForBuffering;
     listenForResume: ListenForResume;
+    buffering: React.MutableRefObject<boolean>;
 };
 export declare const BufferingContextReact: React.Context<BufferManager | null>;
 export declare const BufferingProvider: React.FC<{

package/dist/cjs/buffering.js

@@ -26,47 +26,50 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BufferingProvider = exports.BufferingContextReact = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const createBufferManager = () => {
-    let blocks = [];
-    let onBufferingCallback = [];
-    let onResumeCallback = [];
-    const addBlock = (block) => {
-        blocks.push(block);
-        onBufferingCallback.forEach((callback) => callback());
+const useBufferManager = () => {
+    const [blocks, setBlocks] = (0, react_1.useState)([]);
+    const [onBufferingCallbacks, setOnBufferingCallbacks] = (0, react_1.useState)([]);
+    const [onResumeCallbacks, setOnResumeCallbacks] = (0, react_1.useState)([]);
+    const buffering = (0, react_1.useRef)(false);
+    const addBlock = (0, react_1.useCallback)((block) => {
+        setBlocks((b) => [...b, block]);
         return {
             unblock: () => {
-                blocks = blocks.filter((b) => b !== block);
+                setBlocks((b) => b.filter((bx) => bx !== block));
             },
         };
-    };
-    const listenForBuffering = (callback) => {
-        onBufferingCallback.push(callback);
+    }, []);
+    const listenForBuffering = (0, react_1.useCallback)((callback) => {
+        setOnBufferingCallbacks((c) => [...c, callback]);
         return {
             remove: () => {
-                onBufferingCallback = onBufferingCallback.filter((c) => c !== callback);
+                setOnBufferingCallbacks((c) => c.filter((cb) => cb !== callback));
             },
         };
-    };
-    const listenForResume = (callback) => {
-        onResumeCallback.push(callback);
+    }, []);
+    const listenForResume = (0, react_1.useCallback)((callback) => {
+        setOnResumeCallbacks((c) => [...c, callback]);
         return {
             remove: () => {
-                onResumeCallback = onResumeCallback.filter((c) => c !== callback);
+                setOnResumeCallbacks((c) => c.filter((cb) => cb !== callback));
             },
         };
-    };
-    return {
-        blocks,
-        addBlock,
-        listenForBuffering,
-        listenForResume,
-    };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (blocks.length > 0) {
+            onBufferingCallbacks.forEach((c) => c());
+        }
+        else {
+            onResumeCallbacks.forEach((c) => c());
+        }
+    }, [blocks, onBufferingCallbacks, onResumeCallbacks]);
+    return (0, react_1.useMemo)(() => {
+        return { addBlock, listenForBuffering, listenForResume, buffering };
+    }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
 exports.BufferingContextReact = react_1.default.createContext(null);
 const BufferingProvider = ({ children }) => {
-    const [bufferManager] = (0, react_1.useState)(() => {
-        return createBufferManager();
-    });
+    const bufferManager = useBufferManager();
     return ((0, jsx_runtime_1.jsx)(exports.BufferingContextReact.Provider, { value: bufferManager, children: children }));
 };
 exports.BufferingProvider = BufferingProvider;

package/dist/cjs/get-timeline-clip-name.d.ts

@@ -0,0 +1 @@
+export declare const getTimelineClipName: (children: React.ReactNode) => string;

package/dist/cjs/get-timeline-clip-name.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineClipName = void 0;
+const react_1 = require("react");
+const HIDDEN_NAMES = ['__WEBPACK_DEFAULT_EXPORT__'];
+const getTimelineClipName = (children) => {
+    var _a;
+    const tree = (_a = react_1.Children.map(children, (ch) => {
+        if (!(0, react_1.isValidElement)(ch)) {
+            return null;
+        }
+        // Must be name, not ID
+        const name = typeof ch.type !== 'string' && ch.type.name;
+        if (name && !HIDDEN_NAMES.includes(name)) {
+            return name;
+        }
+        if (ch.props.children) {
+            const chName = (0, exports.getTimelineClipName)(ch.props.children);
+            return chName;
+        }
+        return null;
+    })) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
+    return (tree === null || tree === void 0 ? void 0 : tree.length) ? tree[0] : '';
+};
+exports.getTimelineClipName = getTimelineClipName;

package/dist/cjs/use-buffer.js

@@ -8,13 +8,13 @@ const useBuffer = () => {
     if (!buffer) {
         throw new TypeError('Can only use useBuffer() inside a Remotion composition');
     }
-    return {
+    return (0, react_1.useMemo)(() => ({
         delayPlayback: () => {
             const { unblock } = buffer.addBlock({
                 id: String(Math.random()),
             });
             return { unblock };
         },
-    };
+    }), [buffer]);
 };
 exports.useBuffer = useBuffer;

package/dist/cjs/use-media-playback.js

@@ -57,12 +57,10 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             mediaRef.current.playbackRate = playbackRateToSet;
         }
         const desiredUnclampedTime = (0, get_current_time_js_1.getMediaTime)({
-            fps,
             frame,
-            src,
             playbackRate: localPlaybackRate,
             startFrom: -mediaStartsAt,
-            mediaType,
+            fps,
         });
         const { duration } = mediaRef.current;
         const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.85";
+export declare const VERSION = "4.0.87";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '4.0.85';
+exports.VERSION = '4.0.87';

package/dist/cjs/video/VideoForRendering.js

@@ -15,8 +15,8 @@ const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
-const warn_about_non_seekable_media_js_1 = require("../warn-about-non-seekable-media.js");
 const get_current_time_js_1 = require("./get-current-time.js");
+const seek_until_right_js_1 = require("./seek-until-right.js");
 const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, ...props }, ref) => {
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
@@ -96,16 +96,12 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         if (!current) {
             return;
         }
-        const currentTime = (() => {
-            return (0, get_current_time_js_1.getMediaTime)({
-                fps: videoConfig.fps,
-                frame,
-                src: props.src,
-                playbackRate: playbackRate || 1,
-                startFrom: -mediaStartsAt,
-                mediaType: 'video',
-            });
-        })();
+        const currentTime = (0, get_current_time_js_1.getMediaTime)({
+            frame,
+            playbackRate: playbackRate || 1,
+            startFrom: -mediaStartsAt,
+            fps: videoConfig.fps,
+        });
         const handle = (0, delay_render_js_1.delayRender)(`Rendering <Video /> with src="${props.src}"`);
         if (process.env.NODE_ENV === 'test') {
             (0, delay_render_js_1.continueRender)(handle);
@@ -124,25 +120,13 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
                 current.removeEventListener('loadeddata', loadedDataHandler);
             };
         }
-        current.currentTime = currentTime;
-        const seekedHandler = () => {
-            (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(current, 'exception');
-            if (window.navigator.platform.startsWith('Mac')) {
-                // Improve me: This is ensures frame perfectness but slows down render.
-                // Please see this issue for context: https://github.com/remotion-dev/remotion/issues/200
-                // Only affects macOS since it uses VideoToolbox decoding.
-                setTimeout(() => {
-                    (0, delay_render_js_1.continueRender)(handle);
-                }, 100);
-            }
-            else {
-                (0, delay_render_js_1.continueRender)(handle);
-            }
-        };
-        current.addEventListener('seeked', seekedHandler, { once: true });
         const endedHandler = () => {
             (0, delay_render_js_1.continueRender)(handle);
         };
+        const seek = (0, seek_until_right_js_1.seekToTimeMultipleUntilRight)(current, currentTime, videoConfig.fps);
+        seek.prom.then(() => {
+            (0, delay_render_js_1.continueRender)(handle);
+        });
         current.addEventListener('ended', endedHandler, { once: true });
         const errorHandler = () => {
             var _a;
@@ -162,9 +146,9 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         current.addEventListener('error', errorHandler, { once: true });
         // If video skips to another frame or unmounts, we clear the created handle
         return () => {
+            seek.cancel();
             current.removeEventListener('ended', endedHandler);
             current.removeEventListener('error', errorHandler);
-            current.removeEventListener('seeked', seekedHandler);
             (0, delay_render_js_1.continueRender)(handle);
         };
     }, [

package/dist/cjs/video/get-current-time.d.ts

@@ -3,11 +3,9 @@ export declare const getExpectedMediaFrameUncorrected: ({ frame, playbackRate, s
     playbackRate: number;
     startFrom: number;
 }) => number;
-export declare const getMediaTime: ({ fps, frame, src, playbackRate, startFrom, mediaType, }: {
+export declare const getMediaTime: ({ fps, frame, playbackRate, startFrom, }: {
     fps: number;
     frame: number;
-    src: string;
     playbackRate: number;
     startFrom: number;
-    mediaType: 'video' | 'audio';
 }) => number;

package/dist/cjs/video/get-current-time.js

@@ -7,26 +7,13 @@ const getExpectedMediaFrameUncorrected = ({ frame, playbackRate, startFrom, }) =
     return (0, interpolate_js_1.interpolate)(frame, [-1, startFrom, startFrom + 1], [-1, startFrom, startFrom + playbackRate]);
 };
 exports.getExpectedMediaFrameUncorrected = getExpectedMediaFrameUncorrected;
-const getMediaTime = ({ fps, frame, src, playbackRate, startFrom, mediaType, }) => {
+const getMediaTime = ({ fps, frame, playbackRate, startFrom, }) => {
     const expectedFrame = (0, exports.getExpectedMediaFrameUncorrected)({
         frame,
         playbackRate,
         startFrom,
     });
-    const isChrome = typeof window !== 'undefined' &&
-        window.navigator.userAgent.match(/Chrome\/([0-9]+)/);
-    if (isChrome &&
-        Number(isChrome[1]) < 112 &&
-        mediaType === 'video' &&
-        src.endsWith('.mp4')) {
-        // In Chrome, for MP4s, if 30fps, the first frame is still displayed at 0.033333
-        // even though after that it increases by 0.033333333 each.
-        // So frame = 0 in Remotion is like frame = 1 for the browser
-        return (expectedFrame + 1) / fps;
-    }
-    // For WebM videos, we need to add a little bit of shift to get the right frame.
     const msPerFrame = 1000 / fps;
-    const msShift = msPerFrame / 2;
-    return (expectedFrame * msPerFrame + msShift) / 1000;
+    return (expectedFrame * msPerFrame) / 1000;
 };
 exports.getMediaTime = getMediaTime;

package/dist/cjs/video/seek-until-right.d.ts

@@ -0,0 +1,8 @@
+export declare const seekToTime: (element: HTMLVideoElement, desiredTime: number) => {
+    wait: Promise<number>;
+    cancel: () => void;
+};
+export declare const seekToTimeMultipleUntilRight: (element: HTMLVideoElement, desiredTime: number, fps: number) => {
+    prom: Promise<void>;
+    cancel: () => void;
+};

package/dist/cjs/video/seek-until-right.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.seekToTimeMultipleUntilRight = exports.seekToTime = void 0;
+const seekToTime = (element, desiredTime) => {
+    element.currentTime = desiredTime;
+    let cancel;
+    let cancelSeeked = null;
+    const prom = new Promise((resolve) => {
+        cancel = element.requestVideoFrameCallback((now, metadata) => {
+            const displayIn = metadata.expectedDisplayTime - now;
+            if (displayIn <= 0) {
+                resolve(metadata.mediaTime);
+                return;
+            }
+            setTimeout(() => {
+                resolve(metadata.mediaTime);
+            }, displayIn + 150);
+        });
+    });
+    const waitForSeekedEvent = new Promise((resolve) => {
+        const onDone = () => {
+            resolve();
+        };
+        element.addEventListener('seeked', onDone, {
+            once: true,
+        });
+        cancelSeeked = () => {
+            element.removeEventListener('seeked', onDone);
+        };
+    });
+    return {
+        wait: Promise.all([prom, waitForSeekedEvent]).then(([time]) => time),
+        cancel: () => {
+            cancelSeeked === null || cancelSeeked === void 0 ? void 0 : cancelSeeked();
+            element.cancelVideoFrameCallback(cancel);
+        },
+    };
+};
+exports.seekToTime = seekToTime;
+const seekToTimeMultipleUntilRight = (element, desiredTime, fps) => {
+    const threshold = 1 / fps / 2;
+    let currentCancel = () => undefined;
+    const prom = new Promise((resolve, reject) => {
+        const firstSeek = (0, exports.seekToTime)(element, desiredTime + threshold);
+        firstSeek.wait.then((seekedTo) => {
+            const difference = Math.abs(desiredTime - seekedTo);
+            if (difference < threshold) {
+                return resolve();
+            }
+            const sign = desiredTime > seekedTo ? 1 : -1;
+            const newSeek = (0, exports.seekToTime)(element, seekedTo + threshold * sign);
+            currentCancel = newSeek.cancel;
+            newSeek.wait
+                .then((newTime) => {
+                const newDifference = Math.abs(desiredTime - newTime);
+                if (newDifference < threshold) {
+                    return resolve();
+                }
+                const thirdSeek = (0, exports.seekToTime)(element, desiredTime);
+                currentCancel = thirdSeek.cancel;
+                thirdSeek.wait.then(() => {
+                    resolve();
+                });
+            })
+                .catch((err) => {
+                reject(err);
+            });
+        });
+        currentCancel = firstSeek.cancel;
+    });
+    return {
+        prom,
+        cancel: () => {
+            currentCancel();
+        },
+    };
+};
+exports.seekToTimeMultipleUntilRight = seekToTimeMultipleUntilRight;

package/dist/esm/index.mjs

@@ -132,7 +132,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.85';
+const VERSION = '4.0.87';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -1843,27 +1843,14 @@ function interpolate(input, inputRange, outputRange, options) {
 const getExpectedMediaFrameUncorrected = ({ frame, playbackRate, startFrom, }) => {
     return interpolate(frame, [-1, startFrom, startFrom + 1], [-1, startFrom, startFrom + playbackRate]);
 };
-const getMediaTime = ({ fps, frame, src, playbackRate, startFrom, mediaType, }) => {
+const getMediaTime = ({ fps, frame, playbackRate, startFrom, }) => {
     const expectedFrame = getExpectedMediaFrameUncorrected({
         frame,
         playbackRate,
         startFrom,
     });
-    const isChrome = typeof window !== 'undefined' &&
-        window.navigator.userAgent.match(/Chrome\/([0-9]+)/);
-    if (isChrome &&
-        Number(isChrome[1]) < 112 &&
-        mediaType === 'video' &&
-        src.endsWith('.mp4')) {
-        // In Chrome, for MP4s, if 30fps, the first frame is still displayed at 0.033333
-        // even though after that it increases by 0.033333333 each.
-        // So frame = 0 in Remotion is like frame = 1 for the browser
-        return (expectedFrame + 1) / fps;
-    }
-    // For WebM videos, we need to add a little bit of shift to get the right frame.
     const msPerFrame = 1000 / fps;
-    const msShift = msPerFrame / 2;
-    return (expectedFrame * msPerFrame + msShift) / 1000;
+    return (expectedFrame * msPerFrame) / 1000;
 };
 
 const toSeconds = (time, fps) => {
@@ -2009,12 +1996,10 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             mediaRef.current.playbackRate = playbackRateToSet;
         }
         const desiredUnclampedTime = getMediaTime({
-            fps,
             frame,
-            src,
             playbackRate: localPlaybackRate,
             startFrom: -mediaStartsAt,
-            mediaType,
+            fps,
         });
         const { duration } = mediaRef.current;
         const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
@@ -4785,6 +4770,80 @@ const OffthreadVideo = (props) => {
     return (jsx(VideoForDevelopment, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
 };
 
+const seekToTime = (element, desiredTime) => {
+    element.currentTime = desiredTime;
+    let cancel;
+    let cancelSeeked = null;
+    const prom = new Promise((resolve) => {
+        cancel = element.requestVideoFrameCallback((now, metadata) => {
+            const displayIn = metadata.expectedDisplayTime - now;
+            if (displayIn <= 0) {
+                resolve(metadata.mediaTime);
+                return;
+            }
+            setTimeout(() => {
+                resolve(metadata.mediaTime);
+            }, displayIn + 150);
+        });
+    });
+    const waitForSeekedEvent = new Promise((resolve) => {
+        const onDone = () => {
+            resolve();
+        };
+        element.addEventListener('seeked', onDone, {
+            once: true,
+        });
+        cancelSeeked = () => {
+            element.removeEventListener('seeked', onDone);
+        };
+    });
+    return {
+        wait: Promise.all([prom, waitForSeekedEvent]).then(([time]) => time),
+        cancel: () => {
+            cancelSeeked === null || cancelSeeked === void 0 ? void 0 : cancelSeeked();
+            element.cancelVideoFrameCallback(cancel);
+        },
+    };
+};
+const seekToTimeMultipleUntilRight = (element, desiredTime, fps) => {
+    const threshold = 1 / fps / 2;
+    let currentCancel = () => undefined;
+    const prom = new Promise((resolve, reject) => {
+        const firstSeek = seekToTime(element, desiredTime + threshold);
+        firstSeek.wait.then((seekedTo) => {
+            const difference = Math.abs(desiredTime - seekedTo);
+            if (difference < threshold) {
+                return resolve();
+            }
+            const sign = desiredTime > seekedTo ? 1 : -1;
+            const newSeek = seekToTime(element, seekedTo + threshold * sign);
+            currentCancel = newSeek.cancel;
+            newSeek.wait
+                .then((newTime) => {
+                const newDifference = Math.abs(desiredTime - newTime);
+                if (newDifference < threshold) {
+                    return resolve();
+                }
+                const thirdSeek = seekToTime(element, desiredTime);
+                currentCancel = thirdSeek.cancel;
+                thirdSeek.wait.then(() => {
+                    resolve();
+                });
+            })
+                .catch((err) => {
+                reject(err);
+            });
+        });
+        currentCancel = firstSeek.cancel;
+    });
+    return {
+        prom,
+        cancel: () => {
+            currentCancel();
+        },
+    };
+};
+
 const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, ...props }, ref) => {
     const absoluteFrame = useTimelinePosition();
     const frame = useCurrentFrame();
@@ -4864,16 +4923,12 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         if (!current) {
             return;
         }
-        const currentTime = (() => {
-            return getMediaTime({
-                fps: videoConfig.fps,
-                frame,
-                src: props.src,
-                playbackRate: playbackRate || 1,
-                startFrom: -mediaStartsAt,
-                mediaType: 'video',
-            });
-        })();
+        const currentTime = getMediaTime({
+            frame,
+            playbackRate: playbackRate || 1,
+            startFrom: -mediaStartsAt,
+            fps: videoConfig.fps,
+        });
         const handle = delayRender(`Rendering <Video /> with src="${props.src}"`);
         if (process.env.NODE_ENV === 'test') {
             continueRender(handle);
@@ -4892,25 +4947,13 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
                 current.removeEventListener('loadeddata', loadedDataHandler);
             };
         }
-        current.currentTime = currentTime;
-        const seekedHandler = () => {
-            warnAboutNonSeekableMedia(current, 'exception');
-            if (window.navigator.platform.startsWith('Mac')) {
-                // Improve me: This is ensures frame perfectness but slows down render.
-                // Please see this issue for context: https://github.com/remotion-dev/remotion/issues/200
-                // Only affects macOS since it uses VideoToolbox decoding.
-                setTimeout(() => {
-                    continueRender(handle);
-                }, 100);
-            }
-            else {
-                continueRender(handle);
-            }
-        };
-        current.addEventListener('seeked', seekedHandler, { once: true });
         const endedHandler = () => {
             continueRender(handle);
         };
+        const seek = seekToTimeMultipleUntilRight(current, currentTime, videoConfig.fps);
+        seek.prom.then(() => {
+            continueRender(handle);
+        });
         current.addEventListener('ended', endedHandler, { once: true });
         const errorHandler = () => {
             var _a;
@@ -4930,9 +4973,9 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         current.addEventListener('error', errorHandler, { once: true });
         // If video skips to another frame or unmounts, we clear the created handle
         return () => {
+            seek.cancel();
             current.removeEventListener('ended', endedHandler);
             current.removeEventListener('error', errorHandler);
-            current.removeEventListener('seeked', seekedHandler);
             continueRender(handle);
         };
     }, [

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.85';
+const VERSION = '4.0.87';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.85",
+  "version": "4.0.87",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",