remotion 4.0.21 → 4.0.23

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/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/interpolate-colors.js

@@ -323,8 +323,7 @@ function normalizeColor(color) {
         if ((match = matchers.hsl.exec(color))) {
             return ((hslToRgb(parse360(match[1]), // h
             parsePercentage(match[2]), // s
-            parsePercentage(match[3]) // l
-            ) |
+            parsePercentage(match[3])) |
                 0x000000ff) >>> // a
                 0);
         }
@@ -333,8 +332,7 @@ function normalizeColor(color) {
         if ((match = matchers.hsla.exec(color))) {
             return ((hslToRgb(parse360(match[1]), // h
             parsePercentage(match[2]), // s
-            parsePercentage(match[3]) // l
-            ) |
+            parsePercentage(match[3])) |
                 parse1(match[4])) >>> // a
                 0);
         }

package/dist/cjs/use-delay-render.d.ts

@@ -0,0 +1,7 @@
+type ContinueRenderFnBinded = () => void;
+/**
+ * @description Same as delayRender(), but as a hook.
+ * @see [Documentation](https://remotion.dev/docs/use-delay-render)
+ */
+export declare const useDelayRender: (label?: string) => ContinueRenderFnBinded;
+export {};

package/dist/cjs/use-delay-render.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDelayRender = void 0;
+const react_1 = require("react");
+const delay_render_js_1 = require("./delay-render.js");
+/**
+ * @description Same as delayRender(), but as a hook.
+ * @see [Documentation](https://remotion.dev/docs/use-delay-render)
+ */
+const useDelayRender = (label) => {
+    const [handle] = (0, react_1.useState)(() => (0, delay_render_js_1.delayRender)(label));
+    return (0, react_1.useCallback)(() => {
+        (0, delay_render_js_1.continueRender)(handle);
+    }, [handle]);
+};
+exports.useDelayRender = useDelayRender;

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.21";
+export declare const VERSION = "4.0.23";

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.21';
+exports.VERSION = '4.0.23';

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: (0, video_fragment_js_1.isIosSafari)() ? 'metadata' : 'auto', 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.21';
+const VERSION = '4.0.23';
 
 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);
         }
@@ -3546,8 +3616,7 @@ function normalizeColor(color) {
         if ((match = matchers.hsl.exec(color))) {
             return ((hslToRgb(parse360(match[1]), // h
             parsePercentage(match[2]), // s
-            parsePercentage(match[3]) // l
-            ) |
+            parsePercentage(match[3])) |
                 0x000000ff) >>> // a
                 0);
         }
@@ -3556,8 +3625,7 @@ function normalizeColor(color) {
         if ((match = matchers.hsla.exec(color))) {
             return ((hslToRgb(parse360(match[1]), // h
             parsePercentage(match[2]), // s
-            parsePercentage(match[3]) // l
-            ) |
+            parsePercentage(match[3])) |
                 parse1(match[4])) >>> // a
                 0);
         }
@@ -4296,61 +4364,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 +4462,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: isIosSafari() ? 'metadata' : 'auto', 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.21';
+const VERSION = '4.0.23';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.21",
+  "version": "4.0.23",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
     "eslint": "8.42.0",
     "eslint-plugin-require-extensions": "^0.1.2",
     "jsdom": "21.1.0",
-    "prettier": "^2.7.1",
+    "prettier": "3.0.2",
     "prettier-plugin-organize-imports": "^3.2.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",