remotion 4.0.0-alpha5 → 4.0.0-alpha6

package/dist/cjs/audio/AudioForDevelopment.js

@@ -36,7 +36,14 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     // Generate a string that's as unique as possible for this asset
     // but at the same time deterministic. We use it to combat strict mode issues.
-    const id = (0, react_1.useMemo)(() => `audio-${(0, random_js_1.random)(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${props.muted}`, [props.muted, src, sequenceContext]);
+    const id = (0, react_1.useMemo)(() => `audio-${(0, random_js_1.random)(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+        src,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
+        props.muted,
+        props.loop,
+    ]);
     const audioRef = (0, shared_audio_tags_js_1.useSharedAudio)(propsToPass, id).el;
     const actualVolume = (0, use_media_tag_volume_js_1.useMediaTagVolume)(audioRef);
     (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
@@ -74,12 +81,12 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
             return;
         }
         if (current.duration) {
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
+            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
             return;
         }
         const onLoadedMetadata = () => {
             var _a;
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
+            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
         };
         current.addEventListener('loadedmetadata', onLoadedMetadata);
         return () => {

package/dist/cjs/spring/index.d.ts

@@ -4,6 +4,7 @@ import type { SpringConfig } from './spring-utils.js';
  * @see [Documentation](https://www.remotion.dev/docs/spring)
  * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
  * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
+ * @param {?boolean} reverse Whether the animation plays in reverse or not. Default `false`.
  * @param {?Object} config optional object that allows you to customize the physical properties of the animation.
  * @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
  * @param {number} [config.damping=10] How hard the animation decelerates.
@@ -13,8 +14,9 @@ import type { SpringConfig } from './spring-utils.js';
  * @param {?number} [config.to] The end value of the animation. Default `1`
  * @param {?number} [config.durationInFrames] Stretch the duration of an animation to  a set value.. Default `undefined`
  * @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
+ * @param {?number} [config.delay] Delay the animation for this amount of frames. Default `0`
  */
-export declare function spring({ frame, fps, config, from, to, durationInFrames, durationRestThreshold, }: {
+export declare function spring({ frame: passedFrame, fps, config, from, to, durationInFrames: passedDurationInFrames, durationRestThreshold, delay, reverse, }: {
     frame: number;
     fps: number;
     config?: Partial<SpringConfig>;
@@ -22,6 +24,8 @@ export declare function spring({ frame, fps, config, from, to, durationInFrames,
     to?: number;
     durationInFrames?: number;
     durationRestThreshold?: number;
+    delay?: number;
+    reverse?: boolean;
 }): number;
 export { measureSpring } from './measure-spring.js';
 export { SpringConfig } from './spring-utils.js';

package/dist/cjs/spring/index.js

@@ -11,6 +11,7 @@ const spring_utils_js_1 = require("./spring-utils.js");
  * @see [Documentation](https://www.remotion.dev/docs/spring)
  * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
  * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
+ * @param {?boolean} reverse Whether the animation plays in reverse or not. Default `false`.
  * @param {?Object} config optional object that allows you to customize the physical properties of the animation.
  * @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
  * @param {number} [config.damping=10] How hard the animation decelerates.
@@ -20,24 +21,44 @@ const spring_utils_js_1 = require("./spring-utils.js");
  * @param {?number} [config.to] The end value of the animation. Default `1`
  * @param {?number} [config.durationInFrames] Stretch the duration of an animation to  a set value.. Default `undefined`
  * @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
+ * @param {?number} [config.delay] Delay the animation for this amount of frames. Default `0`
  */
-function spring({ frame, fps, config = {}, from = 0, to = 1, durationInFrames, durationRestThreshold, }) {
-    (0, validation_spring_duration_js_1.validateSpringDuration)(durationInFrames);
-    (0, validate_frame_js_1.validateFrame)({ frame, durationInFrames: Infinity, allowFloats: true });
+function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durationInFrames: passedDurationInFrames, durationRestThreshold, delay = 0, reverse = false, }) {
+    (0, validation_spring_duration_js_1.validateSpringDuration)(passedDurationInFrames);
+    (0, validate_frame_js_1.validateFrame)({
+        frame: passedFrame,
+        durationInFrames: Infinity,
+        allowFloats: true,
+    });
     (0, validate_fps_js_1.validateFps)(fps, 'to spring()', false);
-    const durationRatio = durationInFrames === undefined
-        ? 1
-        : durationInFrames /
-            (0, measure_spring_js_1.measureSpring)({
-                fps,
-                config,
-                from,
-                to,
-                threshold: durationRestThreshold,
-            });
+    const needsToCalculateNaturalDuration = reverse || typeof passedDurationInFrames !== 'undefined';
+    const naturalDuration = needsToCalculateNaturalDuration
+        ? (0, measure_spring_js_1.measureSpring)({
+            fps,
+            config,
+            from,
+            to,
+            threshold: durationRestThreshold,
+        })
+        : undefined;
+    const naturalDurationGetter = needsToCalculateNaturalDuration
+        ? {
+            get: () => naturalDuration,
+        }
+        : {
+            get: () => {
+                throw new Error('did not calculate natural duration, this is an error with Remotion. Please report');
+            },
+        };
+    const frame = reverse
+        ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
+        : passedFrame;
     const spr = (0, spring_utils_js_1.springCalculation)({
         fps,
-        frame: frame / durationRatio,
+        frame: (passedDurationInFrames === undefined
+            ? frame
+            : frame / (passedDurationInFrames / naturalDurationGetter.get())) -
+            delay,
         config,
         from,
         to,

package/dist/cjs/static-file.d.ts

@@ -1,5 +1,33 @@
+declare const problematicCharacters: {
+    '%3A': string;
+    '%2F': string;
+    '%3F': string;
+    '%23': string;
+    '%5B': string;
+    '%5D': string;
+    '%40': string;
+    '%21': string;
+    '%24': string;
+    '%26': string;
+    '%27': string;
+    '%28': string;
+    '%29': string;
+    '%2A': string;
+    '%2B': string;
+    '%2C': string;
+    '%3B': string;
+};
+declare type HexCode = keyof typeof problematicCharacters;
+export declare type HexInfo = {
+    containsHex: false;
+} | {
+    containsHex: true;
+    hexCode: HexCode;
+};
+export declare const includesHexOfUnsafeChar: (path: string) => HexInfo;
 /**
  * @description Reference a file from the public/ folder. If the file does not appear in the autocomplete, type the path manually.
  * @see [Documentation](https://www.remotion.dev/docs/staticfile)
  */
 export declare const staticFile: (path: string) => string;
+export {};

package/dist/cjs/static-file.js

@@ -1,9 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.staticFile = void 0;
+exports.staticFile = exports.includesHexOfUnsafeChar = void 0;
+const problematicCharacters = {
+    '%3A': ':',
+    '%2F': '/',
+    '%3F': '?',
+    '%23': '#',
+    '%5B': '[',
+    '%5D': ']',
+    '%40': '@',
+    '%21': '!',
+    '%24': '$',
+    '%26': '&',
+    '%27': "'",
+    '%28': '(',
+    '%29': ')',
+    '%2A': '*',
+    '%2B': '+',
+    '%2C': ',',
+    '%3B': ';',
+};
+const didWarn = {};
+const warnOnce = (message) => {
+    if (didWarn[message]) {
+        return;
+    }
+    console.warn(message);
+    didWarn[message] = true;
+};
+const includesHexOfUnsafeChar = (path) => {
+    for (const key of Object.keys(problematicCharacters)) {
+        if (path.includes(key)) {
+            return { containsHex: true, hexCode: key };
+        }
+    }
+    return { containsHex: false };
+};
+exports.includesHexOfUnsafeChar = includesHexOfUnsafeChar;
 const trimLeadingSlash = (path) => {
     if (path.startsWith('/')) {
-        return trimLeadingSlash(path.substr(1));
+        return trimLeadingSlash(path.substring(1));
     }
     return path;
 };
@@ -38,7 +74,11 @@ const staticFile = (path) => {
     if (path.startsWith('public/')) {
         throw new TypeError(`Do not include the public/ prefix when using staticFile() - got "${path}". See: https://remotion.dev/docs/staticfile-relative-paths`);
     }
-    const preparsed = inner(path);
+    const includesHex = (0, exports.includesHexOfUnsafeChar)(path);
+    if (includesHex.containsHex) {
+        warnOnce(`WARNING: You seem to pass an already encoded path (path contains ${includesHex.hexCode}). The encoding gets automatically handled by staticFile()  `);
+    }
+    const preparsed = inner(encodeURIComponent(path));
     if (!preparsed.startsWith('/')) {
         return `/${preparsed}`;
     }

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

@@ -51,12 +51,21 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
                 (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
             }
         }
+        // Only perform a seek if the time is not already the same.
+        // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
+        // therefore a threshold is allowed.
+        // Refer to the https://github.com/remotion-dev/video-buffering-example
+        // which is fixed by only seeking conditionally.
+        const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
         if (!playing || absoluteFrame === 0) {
-            mediaRef.current.currentTime = shouldBeTime;
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
         }
         if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
-            const { current } = mediaRef;
-            current.currentTime = shouldBeTime;
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = 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.0-alpha5";
+export declare const VERSION = "4.0.0-alpha6";

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.0-alpha5';
+exports.VERSION = '4.0.0-alpha6';

package/dist/cjs/video/OffthreadVideo.js

@@ -14,7 +14,7 @@ const VideoForDevelopment_js_1 = require("./VideoForDevelopment.js");
  * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
  */
 const OffthreadVideo = (props) => {
-    const { startFrom, endAt, ...otherProps } = props;
+    const { startFrom, endAt, imageFormat, ...otherProps } = props;
     const environment = (0, get_environment_js_1.useRemotionEnvironment)();
     const onDuration = (0, react_1.useCallback)(() => undefined, []);
     if (typeof props.src !== 'string') {
@@ -31,7 +31,7 @@ const OffthreadVideo = (props) => {
     }
     (0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
     if (environment === 'rendering') {
-        return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { ...otherProps });
+        return ((0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { imageFormat: imageFormat, ...otherProps }));
     }
     return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));
 };

package/dist/cjs/video/VideoForDevelopment.js

@@ -75,7 +75,11 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
             var _a;
             if (current === null || current === void 0 ? void 0 : current.error) {
                 console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
-                throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help`);
+                // If user is handling the error, we don't cause an unhandled exception
+                if (props.onError) {
+                    return;
+                }
+                throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
             }
             else {
                 throw new Error('The browser threw an error');
@@ -85,7 +89,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         return () => {
             current.removeEventListener('error', errorHandler);
         };
-    }, [src]);
+    }, [props.onError, src]);
     const currentOnDurationCallback = (0, react_1.useRef)();
     currentOnDurationCallback.current = onDuration;
     (0, react_1.useEffect)(() => {

package/dist/cjs/video/VideoForRendering.js

@@ -146,7 +146,11 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             var _a;
             if (current === null || current === void 0 ? void 0 : current.error) {
                 console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
-                throw new Error(`The browser threw an error while playing the video ${props.src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help`);
+                // If user is handling the error, we don't cause an unhandled exception
+                if (onError) {
+                    return;
+                }
+                throw new Error(`The browser threw an error while playing the video ${props.src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
             }
             else {
                 throw new Error('The browser threw an error');
@@ -167,6 +171,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         videoConfig.fps,
         frame,
         mediaStartsAt,
+        onError,
     ]);
     const { src } = props;
     // If video source switches, make new handle

package/dist/cjs/video/props.d.ts

@@ -19,6 +19,7 @@ declare type DeprecatedOffthreadVideoProps = {
 export declare type OffthreadVideoProps = {
     src: string;
     className?: string;
+    id?: string;
     style?: React.CSSProperties;
     volume?: VolumeProp;
     playbackRate?: number;

package/dist/esm/index.mjs

@@ -58,7 +58,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.0-alpha5';
+const VERSION = '4.0.0-alpha6';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -1176,13 +1176,13 @@ const evaluateVolume = ({ frame, volume, mediaVolume = 1, allowAmplificationDuri
     return Math.max(0, Math.min(maxVolume, evaluated));
 };
 
-const didWarn = {};
-const warnOnce = (message) => {
-    if (didWarn[message]) {
+const didWarn$1 = {};
+const warnOnce$1 = (message) => {
+    if (didWarn$1[message]) {
         return;
     }
     console.warn(message);
-    didWarn[message] = true;
+    didWarn$1[message] = true;
 };
 const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }) => {
     const videoConfig = useVideoConfig();
@@ -1220,7 +1220,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
     }, [duration, startsAt, volume, mediaVolume]);
     useEffect(() => {
         if (typeof volume === 'number' && volume !== initialVolume) {
-            warnOnce(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/using-audio/#controlling-volume`);
+            warnOnce$1(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/using-audio/#controlling-volume`);
         }
     }, [initialVolume, mediaType, src, volume]);
     useEffect(() => {
@@ -1505,12 +1505,21 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
                 warnAboutNonSeekableMedia(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
             }
         }
+        // Only perform a seek if the time is not already the same.
+        // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
+        // therefore a threshold is allowed.
+        // Refer to the https://github.com/remotion-dev/video-buffering-example
+        // which is fixed by only seeking conditionally.
+        const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
         if (!playing || absoluteFrame === 0) {
-            mediaRef.current.currentTime = shouldBeTime;
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
         }
         if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
-            const { current } = mediaRef;
-            current.currentTime = shouldBeTime;
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
             playAndHandleNotAllowedError(mediaRef, mediaType);
         }
     }, [
@@ -1626,7 +1635,14 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     const sequenceContext = useContext(SequenceContext);
     // Generate a string that's as unique as possible for this asset
     // but at the same time deterministic. We use it to combat strict mode issues.
-    const id = useMemo(() => `audio-${random(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${props.muted}`, [props.muted, src, sequenceContext]);
+    const id = useMemo(() => `audio-${random(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+        src,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
+        props.muted,
+        props.loop,
+    ]);
     const audioRef = useSharedAudio(propsToPass, id).el;
     const actualVolume = useMediaTagVolume(audioRef);
     useSyncVolumeWithMediaTag({
@@ -1664,12 +1680,12 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
             return;
         }
         if (current.duration) {
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
+            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
             return;
         }
         const onLoadedMetadata = () => {
             var _a;
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
+            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
         };
         current.addEventListener('loadedmetadata', onLoadedMetadata);
         return () => {
@@ -3552,6 +3568,7 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
  * @see [Documentation](https://www.remotion.dev/docs/spring)
  * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
  * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
+ * @param {?boolean} reverse Whether the animation plays in reverse or not. Default `false`.
  * @param {?Object} config optional object that allows you to customize the physical properties of the animation.
  * @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
  * @param {number} [config.damping=10] How hard the animation decelerates.
@@ -3561,24 +3578,44 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
  * @param {?number} [config.to] The end value of the animation. Default `1`
  * @param {?number} [config.durationInFrames] Stretch the duration of an animation to  a set value.. Default `undefined`
  * @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
+ * @param {?number} [config.delay] Delay the animation for this amount of frames. Default `0`
  */
-function spring({ frame, fps, config = {}, from = 0, to = 1, durationInFrames, durationRestThreshold, }) {
-    validateSpringDuration(durationInFrames);
-    validateFrame({ frame, durationInFrames: Infinity, allowFloats: true });
+function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durationInFrames: passedDurationInFrames, durationRestThreshold, delay = 0, reverse = false, }) {
+    validateSpringDuration(passedDurationInFrames);
+    validateFrame({
+        frame: passedFrame,
+        durationInFrames: Infinity,
+        allowFloats: true,
+    });
     validateFps(fps, 'to spring()', false);
-    const durationRatio = durationInFrames === undefined
-        ? 1
-        : durationInFrames /
-            measureSpring({
-                fps,
-                config,
-                from,
-                to,
-                threshold: durationRestThreshold,
-            });
+    const needsToCalculateNaturalDuration = reverse || typeof passedDurationInFrames !== 'undefined';
+    const naturalDuration = needsToCalculateNaturalDuration
+        ? measureSpring({
+            fps,
+            config,
+            from,
+            to,
+            threshold: durationRestThreshold,
+        })
+        : undefined;
+    const naturalDurationGetter = needsToCalculateNaturalDuration
+        ? {
+            get: () => naturalDuration,
+        }
+        : {
+            get: () => {
+                throw new Error('did not calculate natural duration, this is an error with Remotion. Please report');
+            },
+        };
+    const frame = reverse
+        ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
+        : passedFrame;
     const spr = springCalculation({
         fps,
-        frame: frame / durationRatio,
+        frame: (passedDurationInFrames === undefined
+            ? frame
+            : frame / (passedDurationInFrames / naturalDurationGetter.get())) -
+            delay,
         config,
         from,
         to,
@@ -3592,9 +3629,44 @@ function spring({ frame, fps, config = {}, from = 0, to = 1, durationInFrames, d
     return Math.max(spr.current, to);
 }
 
+const problematicCharacters = {
+    '%3A': ':',
+    '%2F': '/',
+    '%3F': '?',
+    '%23': '#',
+    '%5B': '[',
+    '%5D': ']',
+    '%40': '@',
+    '%21': '!',
+    '%24': '$',
+    '%26': '&',
+    '%27': "'",
+    '%28': '(',
+    '%29': ')',
+    '%2A': '*',
+    '%2B': '+',
+    '%2C': ',',
+    '%3B': ';',
+};
+const didWarn = {};
+const warnOnce = (message) => {
+    if (didWarn[message]) {
+        return;
+    }
+    console.warn(message);
+    didWarn[message] = true;
+};
+const includesHexOfUnsafeChar = (path) => {
+    for (const key of Object.keys(problematicCharacters)) {
+        if (path.includes(key)) {
+            return { containsHex: true, hexCode: key };
+        }
+    }
+    return { containsHex: false };
+};
 const trimLeadingSlash = (path) => {
     if (path.startsWith('/')) {
-        return trimLeadingSlash(path.substr(1));
+        return trimLeadingSlash(path.substring(1));
     }
     return path;
 };
@@ -3629,7 +3701,11 @@ const staticFile = (path) => {
     if (path.startsWith('public/')) {
         throw new TypeError(`Do not include the public/ prefix when using staticFile() - got "${path}". See: https://remotion.dev/docs/staticfile-relative-paths`);
     }
-    const preparsed = inner(path);
+    const includesHex = includesHexOfUnsafeChar(path);
+    if (includesHex.containsHex) {
+        warnOnce(`WARNING: You seem to pass an already encoded path (path contains ${includesHex.hexCode}). The encoding gets automatically handled by staticFile()  `);
+    }
+    const preparsed = inner(encodeURIComponent(path));
     if (!preparsed.startsWith('/')) {
         return `/${preparsed}`;
     }
@@ -3852,7 +3928,11 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
             var _a;
             if (current === null || current === void 0 ? void 0 : current.error) {
                 console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
-                throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help`);
+                // If user is handling the error, we don't cause an unhandled exception
+                if (props.onError) {
+                    return;
+                }
+                throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
             }
             else {
                 throw new Error('The browser threw an error');
@@ -3862,7 +3942,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         return () => {
             current.removeEventListener('error', errorHandler);
         };
-    }, [src]);
+    }, [props.onError, src]);
     const currentOnDurationCallback = useRef();
     currentOnDurationCallback.current = onDuration;
     useEffect(() => {
@@ -3894,7 +3974,7 @@ const VideoForDevelopment = forwardRef(VideoForDevelopmentRefForwardingFunction)
  * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
  */
 const OffthreadVideo = (props) => {
-    const { startFrom, endAt, ...otherProps } = props;
+    const { startFrom, endAt, imageFormat, ...otherProps } = props;
     const environment = useRemotionEnvironment();
     const onDuration = useCallback(() => undefined, []);
     if (typeof props.src !== 'string') {
@@ -3911,7 +3991,7 @@ const OffthreadVideo = (props) => {
     }
     validateMediaProps(props, 'Video');
     if (environment === 'rendering') {
-        return jsx(OffthreadVideoForRendering, { ...otherProps });
+        return (jsx(OffthreadVideoForRendering, { imageFormat: imageFormat, ...otherProps }));
     }
     return (jsx(VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));
 };
@@ -4045,7 +4125,11 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             var _a;
             if (current === null || current === void 0 ? void 0 : current.error) {
                 console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
-                throw new Error(`The browser threw an error while playing the video ${props.src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help`);
+                // If user is handling the error, we don't cause an unhandled exception
+                if (onError) {
+                    return;
+                }
+                throw new Error(`The browser threw an error while playing the video ${props.src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
             }
             else {
                 throw new Error('The browser threw an error');
@@ -4066,6 +4150,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         videoConfig.fps,
         frame,
         mediaStartsAt,
+        onError,
     ]);
     const { src } = props;
     // If video source switches, make new handle

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.0-alpha5';
+const VERSION = '4.0.0-alpha6';
 
 export { VERSION };

package/package.json

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