remotion 4.0.20 → 4.0.22

package/dist/cjs/AssetManager.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { TAsset } from './CompositionManager.js';
+export type AssetManagerContext = {
+    registerAsset: (asset: TAsset) => void;
+    unregisterAsset: (id: string) => void;
+    assets: TAsset[];
+};
+export declare const AssetManager: import("react").Context<AssetManagerContext>;
+export declare const AssetManagerProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/cjs/AssetManager.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetManagerProvider = exports.AssetManager = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.AssetManager = (0, react_1.createContext)({
+    registerAsset: () => undefined,
+    unregisterAsset: () => undefined,
+    assets: [],
+});
+const AssetManagerProvider = ({ children }) => {
+    const [assets, setAssets] = (0, react_1.useState)([]);
+    const registerAsset = (0, react_1.useCallback)((asset) => {
+        setAssets((assts) => {
+            return [...assts, asset];
+        });
+    }, []);
+    const unregisterAsset = (0, react_1.useCallback)((id) => {
+        setAssets((assts) => {
+            return assts.filter((a) => a.id !== id);
+        });
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_collectAssets = () => {
+                setAssets([]); // clear assets at next render
+                return assets;
+            };
+        }
+    }, [assets]);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            registerAsset,
+            unregisterAsset,
+            assets,
+        };
+    }, [assets, registerAsset, unregisterAsset]);
+    return ((0, jsx_runtime_1.jsx)(exports.AssetManager.Provider, { value: contextValue, children: children }));
+};
+exports.AssetManagerProvider = AssetManagerProvider;

package/dist/cjs/Sequence.d.ts

@@ -12,7 +12,13 @@ export type SequenceProps = {
     from?: number;
     durationInFrames?: number;
     name?: string;
+    /**
+     * @deprecated For internal use only.
+     */
     showInTimeline?: boolean;
+    /**
+     * @deprecated For internal use only.
+     */
     loopDisplay?: LoopDisplay;
 } & LayoutAndStyle;
 /**

package/dist/cjs/index.d.ts

@@ -46,6 +46,7 @@ declare global {
         siteVersion: '10';
         remotion_version: string;
         remotion_imported: string | boolean;
+        remotion_unsavedProps: boolean | undefined;
     }
 }
 export type BundleState = {

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

@@ -8,8 +8,20 @@ const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const get_current_time_js_1 = require("./video/get-current-time.js");
+const video_fragment_js_1 = require("./video/video-fragment.js");
 const warn_about_non_seekable_media_js_1 = require("./warn-about-non-seekable-media.js");
 exports.DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
+const seek = (mediaRef, time) => {
+    if (!mediaRef.current) {
+        return;
+    }
+    // iOS seeking does not support multiple decimals
+    if ((0, video_fragment_js_1.isIosSafari)()) {
+        mediaRef.current.currentTime = Number(time.toFixed(1));
+        return;
+    }
+    mediaRef.current.currentTime = time;
+};
 const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, }) => {
     const { playbackRate: globalPlaybackRate } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
@@ -53,7 +65,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (timeShift > acceptableTimeshift) {
             // If scrubbing around, adjust timing
             // or if time shift is bigger than 0.45sec
-            mediaRef.current.currentTime = shouldBeTime;
+            seek(mediaRef, shouldBeTime);
             if (!onlyWarnForMediaSeekingError) {
                 (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
             }
@@ -67,12 +79,12 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
         if (!playing || absoluteFrame === 0) {
             if (makesSenseToSeek) {
-                mediaRef.current.currentTime = shouldBeTime;
+                seek(mediaRef, shouldBeTime);
             }
         }
         if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
             if (makesSenseToSeek) {
-                mediaRef.current.currentTime = shouldBeTime;
+                seek(mediaRef, shouldBeTime);
             }
             (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
         }

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.20";
+export declare const VERSION = "4.0.22";

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.20';
+exports.VERSION = '4.0.22';

package/dist/cjs/video/VideoForDevelopment.js

@@ -111,7 +111,11 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
             current.removeEventListener('loadedmetadata', onLoadedMetadata);
         };
     }, [src]);
-    return ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, src: actualSrc, ...nativeProps }));
+    return ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, 
+        // Without this, on iOS Safari, the video cannot be seeked.
+        // if a seek is triggered before `loadedmetadata` is fired,
+        // the video will not seek, even if `loadedmetadata` is fired afterwards.
+        preload: "metadata", muted: muted || mediaMuted, playsInline: true, src: actualSrc, ...nativeProps }));
 };
 // Copy types from forwardRef but not necessary to remove ref
 exports.VideoForDevelopment = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);

package/dist/cjs/video/video-fragment.d.ts

@@ -4,6 +4,7 @@ export declare const useAppendVideoFragment: ({ actualSrc: initialActualSrc, act
     duration: number;
     fps: number;
 }) => string;
+export declare const isIosSafari: () => boolean;
 export declare const appendVideoFragment: ({ actualSrc, actualFrom, duration, fps, }: {
     actualSrc: string;
     actualFrom: number;

package/dist/cjs/video/video-fragment.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.appendVideoFragment = exports.useAppendVideoFragment = void 0;
+exports.appendVideoFragment = exports.isIosSafari = exports.useAppendVideoFragment = void 0;
 const react_1 = require("react");
 const toSeconds = (time, fps) => {
     return Math.round((time / fps) * 100) / 100;
@@ -27,6 +27,11 @@ const useAppendVideoFragment = ({ actualSrc: initialActualSrc, actualFrom: initi
     return appended;
 };
 exports.useAppendVideoFragment = useAppendVideoFragment;
+const isIosSafari = () => {
+    return (/iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
+        Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/)));
+};
+exports.isIosSafari = isIosSafari;
 // https://github.com/remotion-dev/remotion/issues/1655
 const isIOSSafariCase = (actualSrc) => {
     return typeof window === 'undefined'

package/dist/esm/index.mjs

@@ -59,7 +59,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.20';
+const VERSION = '4.0.22';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -1722,6 +1722,65 @@ const getMediaTime = ({ fps, frame, src, playbackRate, startFrom, mediaType, })
     return (expectedFrame * msPerFrame + msShift) / 1000;
 };
 
+const toSeconds = (time, fps) => {
+    return Math.round((time / fps) * 100) / 100;
+};
+const isSubsetOfDuration = (prevStartFrom, newStartFrom, prevDuration, newDuration) => {
+    return (prevStartFrom <= newStartFrom &&
+        prevStartFrom + prevDuration >= newStartFrom + newDuration);
+};
+const useAppendVideoFragment = ({ actualSrc: initialActualSrc, actualFrom: initialActualFrom, duration: initialDuration, fps, }) => {
+    const actualFromRef = useRef(initialActualFrom);
+    const actualDuration = useRef(initialDuration);
+    const actualSrc = useRef(initialActualSrc);
+    if (!isSubsetOfDuration || initialActualSrc !== actualSrc.current) {
+        actualFromRef.current = initialActualFrom;
+        actualDuration.current = initialDuration;
+        actualSrc.current = initialActualSrc;
+    }
+    const appended = appendVideoFragment({
+        actualSrc: actualSrc.current,
+        actualFrom: actualFromRef.current,
+        duration: actualDuration.current,
+        fps,
+    });
+    return appended;
+};
+const isIosSafari = () => {
+    return (/iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
+        Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/)));
+};
+// https://github.com/remotion-dev/remotion/issues/1655
+const isIOSSafariCase = (actualSrc) => {
+    return typeof window === 'undefined'
+        ? false
+        : /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
+            Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/)) &&
+            actualSrc.startsWith('blob:');
+};
+const appendVideoFragment = ({ actualSrc, actualFrom, duration, fps, }) => {
+    var _a;
+    if (isIOSSafariCase(actualSrc)) {
+        return actualSrc;
+    }
+    if (actualSrc.startsWith('data:')) {
+        return actualSrc;
+    }
+    const existingHash = Boolean(new URL(actualSrc, (_a = (typeof window === 'undefined' ? null : window.location.href)) !== null && _a !== void 0 ? _a : 'http://localhost:3000').hash);
+    if (existingHash) {
+        return actualSrc;
+    }
+    if (!Number.isFinite(actualFrom)) {
+        return actualSrc;
+    }
+    actualSrc += `#t=${toSeconds(-actualFrom, fps)}`;
+    if (!Number.isFinite(duration)) {
+        return actualSrc;
+    }
+    actualSrc += `,${toSeconds(duration, fps)}`;
+    return actualSrc;
+};
+
 const alreadyWarned = {};
 const warnAboutNonSeekableMedia = (ref, type) => {
     // Media is not loaded yet, but this does not yet mean something is wrong with the media
@@ -1754,6 +1813,17 @@ const warnAboutNonSeekableMedia = (ref, type) => {
 };
 
 const DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
+const seek = (mediaRef, time) => {
+    if (!mediaRef.current) {
+        return;
+    }
+    // iOS seeking does not support multiple decimals
+    if (isIosSafari()) {
+        mediaRef.current.currentTime = Number(time.toFixed(1));
+        return;
+    }
+    mediaRef.current.currentTime = time;
+};
 const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, }) => {
     const { playbackRate: globalPlaybackRate } = useContext(TimelineContext);
     const frame = useCurrentFrame();
@@ -1797,7 +1867,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (timeShift > acceptableTimeshift) {
             // If scrubbing around, adjust timing
             // or if time shift is bigger than 0.45sec
-            mediaRef.current.currentTime = shouldBeTime;
+            seek(mediaRef, shouldBeTime);
             if (!onlyWarnForMediaSeekingError) {
                 warnAboutNonSeekableMedia(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
             }
@@ -1811,12 +1881,12 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
         if (!playing || absoluteFrame === 0) {
             if (makesSenseToSeek) {
-                mediaRef.current.currentTime = shouldBeTime;
+                seek(mediaRef, shouldBeTime);
             }
         }
         if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
             if (makesSenseToSeek) {
-                mediaRef.current.currentTime = shouldBeTime;
+                seek(mediaRef, shouldBeTime);
             }
             playAndHandleNotAllowedError(mediaRef, mediaType);
         }
@@ -4296,61 +4366,6 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
     return (jsx(Img, { src: actualSrc, className: className, ...props, onError: onErr }));
 };
 
-const toSeconds = (time, fps) => {
-    return Math.round((time / fps) * 100) / 100;
-};
-const isSubsetOfDuration = (prevStartFrom, newStartFrom, prevDuration, newDuration) => {
-    return (prevStartFrom <= newStartFrom &&
-        prevStartFrom + prevDuration >= newStartFrom + newDuration);
-};
-const useAppendVideoFragment = ({ actualSrc: initialActualSrc, actualFrom: initialActualFrom, duration: initialDuration, fps, }) => {
-    const actualFromRef = useRef(initialActualFrom);
-    const actualDuration = useRef(initialDuration);
-    const actualSrc = useRef(initialActualSrc);
-    if (!isSubsetOfDuration || initialActualSrc !== actualSrc.current) {
-        actualFromRef.current = initialActualFrom;
-        actualDuration.current = initialDuration;
-        actualSrc.current = initialActualSrc;
-    }
-    const appended = appendVideoFragment({
-        actualSrc: actualSrc.current,
-        actualFrom: actualFromRef.current,
-        duration: actualDuration.current,
-        fps,
-    });
-    return appended;
-};
-// https://github.com/remotion-dev/remotion/issues/1655
-const isIOSSafariCase = (actualSrc) => {
-    return typeof window === 'undefined'
-        ? false
-        : /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
-            Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/)) &&
-            actualSrc.startsWith('blob:');
-};
-const appendVideoFragment = ({ actualSrc, actualFrom, duration, fps, }) => {
-    var _a;
-    if (isIOSSafariCase(actualSrc)) {
-        return actualSrc;
-    }
-    if (actualSrc.startsWith('data:')) {
-        return actualSrc;
-    }
-    const existingHash = Boolean(new URL(actualSrc, (_a = (typeof window === 'undefined' ? null : window.location.href)) !== null && _a !== void 0 ? _a : 'http://localhost:3000').hash);
-    if (existingHash) {
-        return actualSrc;
-    }
-    if (!Number.isFinite(actualFrom)) {
-        return actualSrc;
-    }
-    actualSrc += `#t=${toSeconds(-actualFrom, fps)}`;
-    if (!Number.isFinite(duration)) {
-        return actualSrc;
-    }
-    actualSrc += `,${toSeconds(duration, fps)}`;
-    return actualSrc;
-};
-
 const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     var _a, _b;
     const videoRef = useRef(null);
@@ -4449,7 +4464,11 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
             current.removeEventListener('loadedmetadata', onLoadedMetadata);
         };
     }, [src]);
-    return (jsx("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, src: actualSrc, ...nativeProps }));
+    return (jsx("video", { ref: videoRef, 
+        // Without this, on iOS Safari, the video cannot be seeked.
+        // if a seek is triggered before `loadedmetadata` is fired,
+        // the video will not seek, even if `loadedmetadata` is fired afterwards.
+        preload: "metadata", muted: muted || mediaMuted, playsInline: true, src: actualSrc, ...nativeProps }));
 };
 // Copy types from forwardRef but not necessary to remove ref
 const VideoForDevelopment = forwardRef(VideoForDevelopmentRefForwardingFunction);

package/dist/esm/version.mjs

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

package/package.json

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