remotion 4.0.84 → 4.0.86

package/dist/cjs/RemotionRoot.js

@@ -14,7 +14,7 @@ const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const duration_state_js_1 = require("./video/duration-state.js");
 const RemotionRoot = ({ children, numberOfAudioTags }) => {
     const [remotionRootId] = (0, react_1.useState)(() => String((0, random_js_1.random)(null)));
-    const [frame, setFrame] = (0, react_1.useState)({});
+    const [frame, setFrame] = (0, react_1.useState)(() => (0, timeline_position_state_js_1.getInitialFrameState)());
     const [playing, setPlaying] = (0, react_1.useState)(false);
     const imperativePlaying = (0, react_1.useRef)(false);
     const [fastRefreshes, setFastRefreshes] = (0, react_1.useState)(0);

package/dist/cjs/buffering.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+type Block = {
+    id: string;
+};
+type OnBufferingCallback = () => void;
+type OnResumeCallback = () => void;
+type ListenForBuffering = (callback: OnBufferingCallback) => {
+    remove: () => void;
+};
+type ListenForResume = (callback: OnResumeCallback) => {
+    remove: () => void;
+};
+type AddBlock = (block: Block) => {
+    unblock: () => void;
+};
+type BufferManager = {
+    blocks: Block[];
+    addBlock: AddBlock;
+    listenForBuffering: ListenForBuffering;
+    listenForResume: ListenForResume;
+};
+export declare const BufferingContextReact: React.Context<BufferManager | null>;
+export declare const BufferingProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/cjs/buffering.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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());
+        return {
+            unblock: () => {
+                blocks = blocks.filter((b) => b !== block);
+                if (blocks.length === 0) {
+                    onResumeCallback.forEach((callback) => callback());
+                }
+            },
+        };
+    };
+    const listenForBuffering = (callback) => {
+        onBufferingCallback.push(callback);
+        return {
+            remove: () => {
+                onBufferingCallback = onBufferingCallback.filter((c) => c !== callback);
+            },
+        };
+    };
+    const listenForResume = (callback) => {
+        onResumeCallback.push(callback);
+        return {
+            remove: () => {
+                onResumeCallback = onResumeCallback.filter((c) => c !== callback);
+            },
+        };
+    };
+    return {
+        blocks,
+        addBlock,
+        listenForBuffering,
+        listenForResume,
+    };
+};
+exports.BufferingContextReact = react_1.default.createContext(null);
+const BufferingProvider = ({ children }) => {
+    const [bufferManager] = (0, react_1.useState)(() => {
+        return createBufferManager();
+    });
+    return ((0, jsx_runtime_1.jsx)(exports.BufferingContextReact.Provider, { value: bufferManager, children: children }));
+};
+exports.BufferingProvider = BufferingProvider;

package/dist/cjs/index.d.ts

@@ -84,7 +84,7 @@ export { interpolateColors } from './interpolate-colors.js';
 export { Loop } from './loop/index.js';
 export { ClipRegion } from './NativeLayers.js';
 export { EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, random, RandomSeed, } from './no-react';
-export { prefetch } from './prefetch.js';
+export { prefetch, PrefetchOnProgress } from './prefetch.js';
 export { registerRoot } from './register-root.js';
 export { LayoutAndStyle, Sequence, SequenceProps, SequencePropsWithoutDuration, } from './Sequence.js';
 export { Series } from './series/index.js';

package/dist/cjs/internals.d.ts

@@ -112,7 +112,9 @@ export declare const Internals: {
     }>>;
     readonly REMOTION_STUDIO_CONTAINER_ELEMENT: "__remotion-studio-container";
     readonly RenderAssetManager: import("react").Context<import("./RenderAssetManager.js").RenderAssetManagerContext>;
-    readonly persistCurrentFrame: (frame: number, composition: string) => void;
+    readonly persistCurrentFrame: (time: {
+        [x: string]: number;
+    }) => void;
     readonly useTimelineSetFrame: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
     readonly FILE_TOKEN: "remotion-file:";
     readonly DATE_TOKEN: "remotion-date:";

package/dist/cjs/prefetch.d.ts

@@ -3,6 +3,10 @@ type FetchAndPreload = {
     free: () => void;
     waitUntilDone: () => Promise<string>;
 };
+export type PrefetchOnProgress = (options: {
+    totalBytes: number | null;
+    loadedBytes: number;
+}) => void;
 /**
  * @description When you call the preFetch() function, an asset will be fetched and kept in memory so it is ready when you want to play it in a <Player>.
  * @see [Documentation](https://www.remotion.dev/docs/prefetch)
@@ -10,5 +14,6 @@ type FetchAndPreload = {
 export declare const prefetch: (src: string, options?: {
     method?: 'blob-url' | 'base64';
     contentType?: string;
+    onProgress?: PrefetchOnProgress;
 }) => FetchAndPreload;
 export {};

package/dist/cjs/prefetch.js

@@ -23,6 +23,31 @@ const blobToBase64 = function (blob) {
         reader.readAsDataURL(blob);
     });
 };
+const getBlobFromReader = async ({ reader, contentType, contentLength, onProgress, }) => {
+    let receivedLength = 0;
+    const chunks = [];
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+            break;
+        }
+        chunks.push(value);
+        receivedLength += value.length;
+        if (onProgress) {
+            onProgress({ loadedBytes: receivedLength, totalBytes: contentLength });
+        }
+    }
+    const chunksAll = new Uint8Array(receivedLength);
+    let position = 0;
+    for (const chunk of chunks) {
+        chunksAll.set(chunk, position);
+        position += chunk.length;
+    }
+    return new Blob([chunksAll], {
+        type: contentType !== null && contentType !== void 0 ? contentType : undefined,
+    });
+};
 /**
  * @description When you call the preFetch() function, an asset will be fetched and kept in memory so it is ready when you want to play it in a <Player>.
  * @see [Documentation](https://www.remotion.dev/docs/prefetch)
@@ -50,6 +75,7 @@ const prefetch = (src, options) => {
         signal: controller.signal,
     })
         .then((res) => {
+        var _a, _b, _c;
         canBeAborted = false;
         if (canceled) {
             return null;
@@ -57,19 +83,33 @@ const prefetch = (src, options) => {
         if (!res.ok) {
             throw new Error(`HTTP error, status = ${res.status}`);
         }
-        return res.blob();
+        const headerContentType = res.headers.get('Content-Type');
+        const contentType = (_a = options === null || options === void 0 ? void 0 : options.contentType) !== null && _a !== void 0 ? _a : headerContentType;
+        const hasProperContentType = contentType &&
+            (contentType.startsWith('video/') ||
+                contentType.startsWith('audio/') ||
+                contentType.startsWith('image/'));
+        if (!hasProperContentType) {
+            // eslint-disable-next-line no-console
+            console.warn(`Called prefetch() on ${src} which returned a "Content-Type" of ${headerContentType}. Prefetched content should have a proper content type (video/... or audio/...) or a contentType passed the options of prefetch(). Otherwise, prefetching will not work properly in all browsers.`);
+        }
+        if (!res.body) {
+            throw new Error(`HTTP response of ${src} has no body`);
+        }
+        const reader = res.body.getReader();
+        return getBlobFromReader({
+            reader,
+            contentType: (_c = (_b = options === null || options === void 0 ? void 0 : options.contentType) !== null && _b !== void 0 ? _b : headerContentType) !== null && _c !== void 0 ? _c : null,
+            contentLength: res.headers.get('Content-Length')
+                ? parseInt(res.headers.get('Content-Length'), 10)
+                : null,
+            onProgress: options === null || options === void 0 ? void 0 : options.onProgress,
+        });
     })
         .then((buf) => {
         if (!buf) {
             return;
         }
-        if (!buf.type.startsWith('video/') &&
-            !buf.type.startsWith('audio/') &&
-            !buf.type.startsWith('image/') &&
-            !(options === null || options === void 0 ? void 0 : options.contentType)) {
-            // eslint-disable-next-line no-console
-            console.warn(`Called prefetch() on ${src} which returned a "Content-Type" of ${buf.type}. Prefetched content should have a proper content type (video/... or audio/...) or a contentType passed the options of prefetch(). Otherwise, prefetching will not work properly in all browsers.`);
-        }
         const actualBlob = (options === null || options === void 0 ? void 0 : options.contentType)
             ? new Blob([buf], { type: options.contentType })
             : buf;

package/dist/cjs/timeline-position-state.d.ts

@@ -18,7 +18,9 @@ export type SetTimelineContextValue = {
 };
 export declare const TimelineContext: import("react").Context<TimelineContextValue>;
 export declare const SetTimelineContext: import("react").Context<SetTimelineContextValue>;
-export declare const persistCurrentFrame: (frame: number, composition: string) => void;
+type CurrentTimePerComposition = Record<string, number>;
+export declare const persistCurrentFrame: (time: CurrentTimePerComposition) => void;
+export declare const getInitialFrameState: () => CurrentTimePerComposition;
 export declare const getFrameForComposition: (composition: string) => number;
 export declare const useTimelinePosition: () => number;
 export declare const useTimelineSetFrame: () => (u: React.SetStateAction<Record<string, number>>) => void;

package/dist/cjs/timeline-position-state.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelinePosition = exports.getFrameForComposition = exports.persistCurrentFrame = exports.SetTimelineContext = exports.TimelineContext = void 0;
+exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelinePosition = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = exports.SetTimelineContext = exports.TimelineContext = void 0;
 const react_1 = require("react");
 const use_video_js_1 = require("./use-video.js");
 exports.TimelineContext = (0, react_1.createContext)({
@@ -24,19 +24,27 @@ exports.SetTimelineContext = (0, react_1.createContext)({
         throw new Error('default');
     },
 });
-const makeKey = (composition) => {
-    return `remotion.time.${composition}`;
+const makeKey = () => {
+    return `remotion.time-all`;
 };
-const persistCurrentFrame = (frame, composition) => {
-    localStorage.setItem(makeKey(composition), String(frame));
+const persistCurrentFrame = (time) => {
+    localStorage.setItem(makeKey(), JSON.stringify(time));
 };
 exports.persistCurrentFrame = persistCurrentFrame;
+const getInitialFrameState = () => {
+    var _a;
+    const item = (_a = localStorage.getItem(makeKey())) !== null && _a !== void 0 ? _a : '{}';
+    const obj = JSON.parse(item);
+    return obj;
+};
+exports.getInitialFrameState = getInitialFrameState;
 const getFrameForComposition = (composition) => {
-    var _a, _b;
-    const frame = localStorage.getItem(makeKey(composition));
-    return frame
-        ? Number(frame)
-        : (_b = (typeof window === 'undefined' ? 0 : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
+    var _a, _b, _c;
+    const item = (_a = localStorage.getItem(makeKey())) !== null && _a !== void 0 ? _a : '{}';
+    const obj = JSON.parse(item);
+    return obj[composition]
+        ? Number(obj[composition])
+        : (_c = (typeof window === 'undefined' ? 0 : (_b = window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0)) !== null && _c !== void 0 ? _c : 0;
 };
 exports.getFrameForComposition = getFrameForComposition;
 const useTimelinePosition = () => {

package/dist/cjs/use-buffer.d.ts

@@ -0,0 +1,5 @@
+export declare const useBuffer: () => {
+    delayPlayback: () => {
+        unblock: () => void;
+    };
+};

package/dist/cjs/use-buffer.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBuffer = void 0;
+const react_1 = require("react");
+const buffering_1 = require("./buffering");
+const useBuffer = () => {
+    const buffer = (0, react_1.useContext)(buffering_1.BufferingContextReact);
+    if (!buffer) {
+        throw new TypeError('Can only use useBuffer() inside a Remotion composition');
+    }
+    return {
+        delayPlayback: () => {
+            const { unblock } = buffer.addBlock({
+                id: String(Math.random()),
+            });
+            return { unblock };
+        },
+    };
+};
+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.84";
+export declare const VERSION = "4.0.86";

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.84';
+exports.VERSION = '4.0.86';

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.js

@@ -4,14 +4,34 @@ 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((_cb, metadata) => {
-            resolve(metadata.mediaTime);
+        cancel = element.requestVideoFrameCallback((now, metadata) => {
+            const displayIn = metadata.expectedDisplayTime - now;
+            if (displayIn <= 0) {
+                resolve(metadata.mediaTime);
+                return;
+            }
+            setTimeout(() => {
+                resolve(metadata.mediaTime);
+            }, displayIn + 50);
+        });
+    });
+    const waitForSeekedEvent = new Promise((resolve) => {
+        const onDone = () => {
+            resolve();
+        };
+        element.addEventListener('seeked', onDone, {
+            once: true,
         });
+        cancelSeeked = () => {
+            element.removeEventListener('seeked', onDone);
+        };
     });
     return {
-        wait: prom,
+        wait: Promise.all([prom, waitForSeekedEvent]).then(([time]) => time),
         cancel: () => {
+            cancelSeeked === null || cancelSeeked === void 0 ? void 0 : cancelSeeked();
             element.cancelVideoFrameCallback(cancel);
         },
     };
@@ -24,7 +44,6 @@ const seekToTimeMultipleUntilRight = (element, desiredTime, fps) => {
         const firstSeek = (0, exports.seekToTime)(element, desiredTime + threshold);
         firstSeek.wait.then((seekedTo) => {
             const difference = Math.abs(desiredTime - seekedTo);
-            const ident = Math.random();
             if (difference < threshold) {
                 return resolve();
             }
@@ -34,7 +53,6 @@ const seekToTimeMultipleUntilRight = (element, desiredTime, fps) => {
             newSeek.wait
                 .then((newTime) => {
                 const newDifference = Math.abs(desiredTime - newTime);
-                console.log(ident, 'before', seekedTo, 'after', newTime, 'desired', desiredTime);
                 if (newDifference < threshold) {
                     return resolve();
                 }

package/dist/cjs/warn-about-non-seekable-media.js

@@ -18,7 +18,13 @@ const warnAboutNonSeekableMedia = (ref, type) => {
     }
     const range = { start: ref.seekable.start(0), end: ref.seekable.end(0) };
     if (range.start === 0 && range.end === 0) {
-        const msg = `The media ${ref.src} cannot be seeked. This could be one of two reasons: 1) The media resource was replaced while the video is playing but it was not loaded yet. 2) The media does not support seeking. Please see https://remotion.dev/docs/non-seekable-media for assistance.`;
+        const msg = [
+            `The media ${ref.src} cannot be seeked. This could be one of few reasons:`,
+            '1) The media resource was replaced while the video is playing but it was not loaded yet.',
+            '2) The media does not support seeking.',
+            '3) The media was loaded with security headers prventing it from being included.',
+            'Please see https://remotion.dev/docs/non-seekable-media for assistance.',
+        ].join('\n');
         if (type === 'console-error') {
             // eslint-disable-next-line no-console
             console.error(msg);

package/dist/esm/index.mjs

@@ -132,7 +132,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.84';
+const VERSION = '4.0.86';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -864,18 +864,25 @@ const SetTimelineContext = createContext({
         throw new Error('default');
     },
 });
-const makeKey = (composition) => {
-    return `remotion.time.${composition}`;
+const makeKey = () => {
+    return `remotion.time-all`;
 };
-const persistCurrentFrame = (frame, composition) => {
-    localStorage.setItem(makeKey(composition), String(frame));
+const persistCurrentFrame = (time) => {
+    localStorage.setItem(makeKey(), JSON.stringify(time));
+};
+const getInitialFrameState = () => {
+    var _a;
+    const item = (_a = localStorage.getItem(makeKey())) !== null && _a !== void 0 ? _a : '{}';
+    const obj = JSON.parse(item);
+    return obj;
 };
 const getFrameForComposition = (composition) => {
-    var _a, _b;
-    const frame = localStorage.getItem(makeKey(composition));
-    return frame
-        ? Number(frame)
-        : (_b = (typeof window === 'undefined' ? 0 : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
+    var _a, _b, _c;
+    const item = (_a = localStorage.getItem(makeKey())) !== null && _a !== void 0 ? _a : '{}';
+    const obj = JSON.parse(item);
+    return obj[composition]
+        ? Number(obj[composition])
+        : (_c = (typeof window === 'undefined' ? 0 : (_b = window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0)) !== null && _c !== void 0 ? _c : 0;
 };
 const useTimelinePosition = () => {
     var _a, _b;
@@ -906,6 +913,7 @@ var TimelinePosition = /*#__PURE__*/Object.freeze({
     TimelineContext: TimelineContext,
     SetTimelineContext: SetTimelineContext,
     persistCurrentFrame: persistCurrentFrame,
+    getInitialFrameState: getInitialFrameState,
     getFrameForComposition: getFrameForComposition,
     useTimelinePosition: useTimelinePosition,
     useTimelineSetFrame: useTimelineSetFrame,
@@ -1258,6 +1266,31 @@ const blobToBase64 = function (blob) {
         reader.readAsDataURL(blob);
     });
 };
+const getBlobFromReader = async ({ reader, contentType, contentLength, onProgress, }) => {
+    let receivedLength = 0;
+    const chunks = [];
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+            break;
+        }
+        chunks.push(value);
+        receivedLength += value.length;
+        if (onProgress) {
+            onProgress({ loadedBytes: receivedLength, totalBytes: contentLength });
+        }
+    }
+    const chunksAll = new Uint8Array(receivedLength);
+    let position = 0;
+    for (const chunk of chunks) {
+        chunksAll.set(chunk, position);
+        position += chunk.length;
+    }
+    return new Blob([chunksAll], {
+        type: contentType !== null && contentType !== void 0 ? contentType : undefined,
+    });
+};
 /**
  * @description When you call the preFetch() function, an asset will be fetched and kept in memory so it is ready when you want to play it in a <Player>.
  * @see [Documentation](https://www.remotion.dev/docs/prefetch)
@@ -1285,6 +1318,7 @@ const prefetch = (src, options) => {
         signal: controller.signal,
     })
         .then((res) => {
+        var _a, _b, _c;
         canBeAborted = false;
         if (canceled) {
             return null;
@@ -1292,19 +1326,33 @@ const prefetch = (src, options) => {
         if (!res.ok) {
             throw new Error(`HTTP error, status = ${res.status}`);
         }
-        return res.blob();
+        const headerContentType = res.headers.get('Content-Type');
+        const contentType = (_a = options === null || options === void 0 ? void 0 : options.contentType) !== null && _a !== void 0 ? _a : headerContentType;
+        const hasProperContentType = contentType &&
+            (contentType.startsWith('video/') ||
+                contentType.startsWith('audio/') ||
+                contentType.startsWith('image/'));
+        if (!hasProperContentType) {
+            // eslint-disable-next-line no-console
+            console.warn(`Called prefetch() on ${src} which returned a "Content-Type" of ${headerContentType}. Prefetched content should have a proper content type (video/... or audio/...) or a contentType passed the options of prefetch(). Otherwise, prefetching will not work properly in all browsers.`);
+        }
+        if (!res.body) {
+            throw new Error(`HTTP response of ${src} has no body`);
+        }
+        const reader = res.body.getReader();
+        return getBlobFromReader({
+            reader,
+            contentType: (_c = (_b = options === null || options === void 0 ? void 0 : options.contentType) !== null && _b !== void 0 ? _b : headerContentType) !== null && _c !== void 0 ? _c : null,
+            contentLength: res.headers.get('Content-Length')
+                ? parseInt(res.headers.get('Content-Length'), 10)
+                : null,
+            onProgress: options === null || options === void 0 ? void 0 : options.onProgress,
+        });
     })
         .then((buf) => {
         if (!buf) {
             return;
         }
-        if (!buf.type.startsWith('video/') &&
-            !buf.type.startsWith('audio/') &&
-            !buf.type.startsWith('image/') &&
-            !(options === null || options === void 0 ? void 0 : options.contentType)) {
-            // eslint-disable-next-line no-console
-            console.warn(`Called prefetch() on ${src} which returned a "Content-Type" of ${buf.type}. Prefetched content should have a proper content type (video/... or audio/...) or a contentType passed the options of prefetch(). Otherwise, prefetching will not work properly in all browsers.`);
-        }
         const actualBlob = (options === null || options === void 0 ? void 0 : options.contentType)
             ? new Blob([buf], { type: options.contentType })
             : buf;
@@ -1795,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) => {
@@ -1892,7 +1927,13 @@ const warnAboutNonSeekableMedia = (ref, type) => {
     }
     const range = { start: ref.seekable.start(0), end: ref.seekable.end(0) };
     if (range.start === 0 && range.end === 0) {
-        const msg = `The media ${ref.src} cannot be seeked. This could be one of two reasons: 1) The media resource was replaced while the video is playing but it was not loaded yet. 2) The media does not support seeking. Please see https://remotion.dev/docs/non-seekable-media for assistance.`;
+        const msg = [
+            `The media ${ref.src} cannot be seeked. This could be one of few reasons:`,
+            '1) The media resource was replaced while the video is playing but it was not loaded yet.',
+            '2) The media does not support seeking.',
+            '3) The media was loaded with security headers prventing it from being included.',
+            'Please see https://remotion.dev/docs/non-seekable-media for assistance.',
+        ].join('\n');
         if (type === 'console-error') {
             // eslint-disable-next-line no-console
             console.error(msg);
@@ -1955,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)
@@ -3472,7 +3511,7 @@ const waitForRoot = (fn) => {
 
 const RemotionRoot = ({ children, numberOfAudioTags }) => {
     const [remotionRootId] = useState(() => String(random(null)));
-    const [frame, setFrame] = useState({});
+    const [frame, setFrame] = useState(() => getInitialFrameState());
     const [playing, setPlaying] = useState(false);
     const imperativePlaying = useRef(false);
     const [fastRefreshes, setFastRefreshes] = useState(0);
@@ -4731,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 + 50);
+        });
+    });
+    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();
@@ -4810,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);
@@ -4838,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;
@@ -4876,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.84';
+const VERSION = '4.0.86';
 
 export { VERSION };

package/package.json

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

package/dist/cjs/CatchError.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-export declare class CatchError extends React.Component {
-    state: {
-        hasError: boolean;
-    };
-    constructor(props: {
-        children: React.ReactNode;
-    });
-    static getDerivedStateFromError(error: Error): {
-        hasError: boolean;
-    };
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    render(): React.ReactNode;
-}
-export declare const StackTraceFetcher: () => JSX.Element;

package/dist/cjs/CatchError.js

@@ -1,68 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StackTraceFetcher = exports.CatchError = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const ErrorThrower = () => {
-    const [trigger, setTrigger] = react_1.default.useState(false);
-    (0, react_1.useEffect)(() => {
-        setTrigger(true);
-    }, []);
-    if (trigger) {
-        // throw new Error('lol');
-    }
-    return null;
-};
-class CatchError extends react_1.default.Component {
-    // eslint-disable-next-line no-useless-constructor
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false };
-    }
-    static getDerivedStateFromError(error) {
-        console.log('DERIVED STATE');
-        console.error(error);
-        return { hasError: true };
-    }
-    componentDidCatch(error, errorInfo) {
-        console.log('DID CATCH');
-        console.error(error, errorInfo);
-    }
-    render() {
-        console.log('state', this);
-        if (this.state.hasError) {
-            console.log('null');
-            return null;
-        }
-        // @ts-expect-error
-        return this.props.children;
-    }
-}
-exports.CatchError = CatchError;
-const StackTraceFetcher = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(CatchError, { children: (0, jsx_runtime_1.jsx)(ErrorThrower, {}) }) }));
-};
-exports.StackTraceFetcher = StackTraceFetcher;