remotion 4.0.65 → 4.0.67

package/dist/cjs/absolute-src.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAbsoluteSrc = void 0;
 const getAbsoluteSrc = (relativeSrc) => {
+    if (typeof window === 'undefined') {
+        return relativeSrc;
+    }
     return new URL(relativeSrc, window.location.origin).href;
 };
 exports.getAbsoluteSrc = getAbsoluteSrc;

package/dist/cjs/audio/Audio.js

@@ -9,6 +9,7 @@ const calculate_loop_js_1 = require("../calculate-loop.js");
 const cancel_render_js_1 = require("../cancel-render.js");
 const get_remotion_environment_js_1 = require("../get-remotion-environment.js");
 const index_js_1 = require("../loop/index.js");
+const prefetch_js_1 = require("../prefetch.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");
@@ -28,23 +29,24 @@ const AudioRefForwardingFunction = (props, ref) => {
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
     }
+    const preloadedSrc = (0, prefetch_js_1.usePreload)(props.src);
     const onError = (0, react_1.useCallback)((e) => {
         console.log(e.currentTarget.error);
         // If there is no `loop` property, we don't need to get the duration
         // and this does not need to be a fatal error
-        const errMessage = `Could not play audio with src ${otherProps.src}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
+        const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
         if (loop) {
             (0, cancel_render_js_1.cancelRender)(new Error(errMessage));
         }
         else {
             console.warn(errMessage);
         }
-    }, [loop, otherProps.src]);
+    }, [loop, preloadedSrc]);
     const onDuration = (0, react_1.useCallback)((src, durationInSeconds) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);
-    if (loop && props.src && durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)] !== undefined) {
-        const duration = Math.floor(durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)] * fps);
+    if (loop && durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)] !== undefined) {
+        const duration = Math.floor(durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)] * fps);
         return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_loop_js_1.calculateLoopDuration)({
                 endAt,
                 mediaDuration: duration,

package/dist/cjs/spring/index.js

@@ -57,7 +57,7 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
     const durationProcessed = passedDurationInFrames === undefined
         ? delayProcessed
         : delayProcessed / (passedDurationInFrames / naturalDurationGetter.get());
-    if (passedDurationInFrames && durationProcessed > passedDurationInFrames) {
+    if (passedDurationInFrames && delayProcessed > passedDurationInFrames) {
         return to;
     }
     const spr = (0, spring_utils_js_1.springCalculation)({

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.65";
+export declare const VERSION = "4.0.67";

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.65';
+exports.VERSION = '4.0.67';

package/dist/cjs/video/Video.js

@@ -8,6 +8,7 @@ const absolute_src_js_1 = require("../absolute-src.js");
 const calculate_loop_js_1 = require("../calculate-loop.js");
 const get_remotion_environment_js_1 = require("../get-remotion-environment.js");
 const index_js_1 = require("../loop/index.js");
+const prefetch_js_1 = require("../prefetch.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");
@@ -28,11 +29,12 @@ const VideoForwardingFunction = (props, ref) => {
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
     }
+    const preloadedSrc = (0, prefetch_js_1.usePreload)(props.src);
     const onDuration = (0, react_1.useCallback)((src, durationInSeconds) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);
-    if (loop && props.src && durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)] !== undefined) {
-        const mediaDuration = durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)] * fps;
+    if (loop && durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)] !== undefined) {
+        const mediaDuration = durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)] * fps;
         return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { durationInFrames: (0, calculate_loop_js_1.calculateLoopDuration)({
                 endAt,
                 mediaDuration,

package/dist/esm/index.mjs

@@ -59,7 +59,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.65';
+const VERSION = '4.0.67';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -133,6 +133,9 @@ const AbsoluteFillRefForwarding = (props, ref) => {
 const AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);
 
 const getAbsoluteSrc = (relativeSrc) => {
+    if (typeof window === 'undefined') {
+        return relativeSrc;
+    }
     return new URL(relativeSrc, window.location.origin).href;
 };
 
@@ -1203,83 +1206,6 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
     return (jsx(Sequence, { durationInFrames: durationInFrames, from: from, name: name, loopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
 };
 
-const validateMediaProps = (props, component) => {
-    if (typeof props.volume !== 'number' &&
-        typeof props.volume !== 'function' &&
-        typeof props.volume !== 'undefined') {
-        throw new TypeError(`You have passed a volume of type ${typeof props.volume} to your <${component} /> component. Volume must be a number or a function with the signature '(frame: number) => number' undefined.`);
-    }
-    if (typeof props.volume === 'number' && props.volume < 0) {
-        throw new TypeError(`You have passed a volume below 0 to your <${component} /> component. Volume must be between 0 and 1`);
-    }
-    if (typeof props.playbackRate !== 'number' &&
-        typeof props.playbackRate !== 'undefined') {
-        throw new TypeError(`You have passed a playbackRate of type ${typeof props.playbackRate} to your <${component} /> component. Playback rate must a real number or undefined.`);
-    }
-    if (typeof props.playbackRate === 'number' &&
-        (isNaN(props.playbackRate) ||
-            !Number.isFinite(props.playbackRate) ||
-            props.playbackRate <= 0)) {
-        throw new TypeError(`You have passed a playbackRate of ${props.playbackRate} to your <${component} /> component. Playback rate must be a real number above 0.`);
-    }
-};
-
-const validateStartFromProps = (startFrom, endAt) => {
-    if (typeof startFrom !== 'undefined') {
-        if (typeof startFrom !== 'number') {
-            throw new TypeError(`type of startFrom prop must be a number, instead got type ${typeof startFrom}.`);
-        }
-        if (isNaN(startFrom) || startFrom === Infinity) {
-            throw new TypeError('startFrom prop can not be NaN or Infinity.');
-        }
-        if (startFrom < 0) {
-            throw new TypeError(`startFrom must be greater than equal to 0 instead got ${startFrom}.`);
-        }
-    }
-    if (typeof endAt !== 'undefined') {
-        if (typeof endAt !== 'number') {
-            throw new TypeError(`type of endAt prop must be a number, instead got type ${typeof endAt}.`);
-        }
-        if (isNaN(endAt)) {
-            throw new TypeError('endAt prop can not be NaN.');
-        }
-        if (endAt <= 0) {
-            throw new TypeError(`endAt must be a positive number, instead got ${endAt}.`);
-        }
-    }
-    if (endAt < startFrom) {
-        throw new TypeError('endAt prop must be greater than startFrom prop.');
-    }
-};
-
-const durationReducer = (state, action) => {
-    switch (action.type) {
-        case 'got-duration':
-            return {
-                ...state,
-                [getAbsoluteSrc(action.src)]: action.durationInSeconds,
-            };
-        default:
-            return state;
-    }
-};
-const DurationsContext = createContext({
-    durations: {},
-    setDurations: () => {
-        throw new Error('context missing');
-    },
-});
-const DurationsContextProvider = ({ children }) => {
-    const [durations, setDurations] = useReducer(durationReducer, {});
-    const value = useMemo(() => {
-        return {
-            durations,
-            setDurations,
-        };
-    }, [durations]);
-    return (jsx(DurationsContext.Provider, { value: value, children: children }));
-};
-
 const PreloadContext = createContext({});
 let preloads = {};
 let updaters = [];
@@ -1414,6 +1340,83 @@ const prefetch = (src, options) => {
     };
 };
 
+const validateMediaProps = (props, component) => {
+    if (typeof props.volume !== 'number' &&
+        typeof props.volume !== 'function' &&
+        typeof props.volume !== 'undefined') {
+        throw new TypeError(`You have passed a volume of type ${typeof props.volume} to your <${component} /> component. Volume must be a number or a function with the signature '(frame: number) => number' undefined.`);
+    }
+    if (typeof props.volume === 'number' && props.volume < 0) {
+        throw new TypeError(`You have passed a volume below 0 to your <${component} /> component. Volume must be between 0 and 1`);
+    }
+    if (typeof props.playbackRate !== 'number' &&
+        typeof props.playbackRate !== 'undefined') {
+        throw new TypeError(`You have passed a playbackRate of type ${typeof props.playbackRate} to your <${component} /> component. Playback rate must a real number or undefined.`);
+    }
+    if (typeof props.playbackRate === 'number' &&
+        (isNaN(props.playbackRate) ||
+            !Number.isFinite(props.playbackRate) ||
+            props.playbackRate <= 0)) {
+        throw new TypeError(`You have passed a playbackRate of ${props.playbackRate} to your <${component} /> component. Playback rate must be a real number above 0.`);
+    }
+};
+
+const validateStartFromProps = (startFrom, endAt) => {
+    if (typeof startFrom !== 'undefined') {
+        if (typeof startFrom !== 'number') {
+            throw new TypeError(`type of startFrom prop must be a number, instead got type ${typeof startFrom}.`);
+        }
+        if (isNaN(startFrom) || startFrom === Infinity) {
+            throw new TypeError('startFrom prop can not be NaN or Infinity.');
+        }
+        if (startFrom < 0) {
+            throw new TypeError(`startFrom must be greater than equal to 0 instead got ${startFrom}.`);
+        }
+    }
+    if (typeof endAt !== 'undefined') {
+        if (typeof endAt !== 'number') {
+            throw new TypeError(`type of endAt prop must be a number, instead got type ${typeof endAt}.`);
+        }
+        if (isNaN(endAt)) {
+            throw new TypeError('endAt prop can not be NaN.');
+        }
+        if (endAt <= 0) {
+            throw new TypeError(`endAt must be a positive number, instead got ${endAt}.`);
+        }
+    }
+    if (endAt < startFrom) {
+        throw new TypeError('endAt prop must be greater than startFrom prop.');
+    }
+};
+
+const durationReducer = (state, action) => {
+    switch (action.type) {
+        case 'got-duration':
+            return {
+                ...state,
+                [getAbsoluteSrc(action.src)]: action.durationInSeconds,
+            };
+        default:
+            return state;
+    }
+};
+const DurationsContext = createContext({
+    durations: {},
+    setDurations: () => {
+        throw new Error('context missing');
+    },
+});
+const DurationsContextProvider = ({ children }) => {
+    const [durations, setDurations] = useReducer(durationReducer, {});
+    const value = useMemo(() => {
+        return {
+            durations,
+            setDurations,
+        };
+    }, [durations]);
+    return (jsx(DurationsContext.Provider, { value: value, children: children }));
+};
+
 /* eslint-disable no-bitwise */
 function mulberry32(a) {
     let t = a + 0x6d2b79f5;
@@ -2593,23 +2596,24 @@ const AudioRefForwardingFunction = (props, ref) => {
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
     }
+    const preloadedSrc = usePreload(props.src);
     const onError = useCallback((e) => {
         console.log(e.currentTarget.error);
         // If there is no `loop` property, we don't need to get the duration
         // and this does not need to be a fatal error
-        const errMessage = `Could not play audio with src ${otherProps.src}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
+        const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
         if (loop) {
             cancelRender(new Error(errMessage));
         }
         else {
             console.warn(errMessage);
         }
-    }, [loop, otherProps.src]);
+    }, [loop, preloadedSrc]);
     const onDuration = useCallback((src, durationInSeconds) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);
-    if (loop && props.src && durations[getAbsoluteSrc(props.src)] !== undefined) {
-        const duration = Math.floor(durations[getAbsoluteSrc(props.src)] * fps);
+    if (loop && durations[getAbsoluteSrc(preloadedSrc)] !== undefined) {
+        const duration = Math.floor(durations[getAbsoluteSrc(preloadedSrc)] * fps);
         return (jsx(Loop, { layout: "none", durationInFrames: calculateLoopDuration({
                 endAt,
                 mediaDuration: duration,
@@ -4391,7 +4395,7 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
     const durationProcessed = passedDurationInFrames === undefined
         ? delayProcessed
         : delayProcessed / (passedDurationInFrames / naturalDurationGetter.get());
-    if (passedDurationInFrames && durationProcessed > passedDurationInFrames) {
+    if (passedDurationInFrames && delayProcessed > passedDurationInFrames) {
         return to;
     }
     const spr = springCalculation({
@@ -4858,11 +4862,12 @@ const VideoForwardingFunction = (props, ref) => {
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
     }
+    const preloadedSrc = usePreload(props.src);
     const onDuration = useCallback((src, durationInSeconds) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);
-    if (loop && props.src && durations[getAbsoluteSrc(props.src)] !== undefined) {
-        const mediaDuration = durations[getAbsoluteSrc(props.src)] * fps;
+    if (loop && durations[getAbsoluteSrc(preloadedSrc)] !== undefined) {
+        const mediaDuration = durations[getAbsoluteSrc(preloadedSrc)] * fps;
         return (jsx(Loop, { durationInFrames: calculateLoopDuration({
                 endAt,
                 mediaDuration,

package/dist/esm/version.mjs

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

package/package.json

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