remotion 4.0.0-alpha5 → 4.0.0-alpha7

package/dist/cjs/CompositionManager.d.ts

@@ -37,6 +37,11 @@ declare type EnhancedTSequenceData = {
     startMediaFrom: number;
     playbackRate: number;
 };
+export declare type LoopDisplay = {
+    numberOfTimes: number;
+    startOffset: number;
+    durationInFrames: number;
+};
 export declare type TSequence = {
     from: number;
     duration: number;
@@ -46,7 +51,7 @@ export declare type TSequence = {
     rootId: string;
     showInTimeline: boolean;
     nonce: number;
-    showLoopTimesInTimeline: number | undefined;
+    loopDisplay: LoopDisplay | undefined;
 } & EnhancedTSequenceData;
 export declare type TAsset = {
     type: 'audio' | 'video';

package/dist/cjs/Sequence.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { LoopDisplay } from './CompositionManager.js';
 export declare type LayoutAndStyle = {
     layout: 'none';
 } | {
@@ -12,7 +13,7 @@ export declare type SequenceProps = {
     durationInFrames?: number;
     name?: string;
     showInTimeline?: boolean;
-    showLoopTimesInTimeline?: number;
+    loopDisplay?: LoopDisplay;
 } & LayoutAndStyle;
 /**
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.

package/dist/cjs/Sequence.js

@@ -11,7 +11,7 @@ const nonce_js_1 = require("./nonce.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_video_config_js_1 = require("./use-video-config.js");
-const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, showLoopTimesInTimeline, ...other }, ref) => {
+const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, loopDisplay, ...other }, ref) => {
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -81,7 +81,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
             rootId,
             showInTimeline,
             nonce,
-            showLoopTimesInTimeline,
+            loopDisplay,
         });
         return () => {
             unregisterSequence(id);
@@ -99,7 +99,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         from,
         showInTimeline,
         nonce,
-        showLoopTimesInTimeline,
+        loopDisplay,
         environment,
     ]);
     const endThreshold = cumulatedFrom + from + durationInFrames - 1;

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/loop/index.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const Sequence_js_1 = require("../Sequence.js");
+const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
 /**
@@ -10,6 +12,7 @@ const validate_duration_in_frames_js_1 = require("../validation/validate-duratio
  * @see [Documentation](https://www.remotion.dev/docs/loop)
  */
 const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
+    const currentFrame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { durationInFrames: compDuration } = (0, use_video_config_js_1.useVideoConfig)();
     (0, validate_duration_in_frames_js_1.validateDurationInFrames)({
         durationInFrames,
@@ -28,10 +31,16 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
     const maxTimes = Math.ceil(compDuration / durationInFrames);
     const actualTimes = Math.min(maxTimes, times);
     const style = props.layout === 'none' ? undefined : props.style;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: new Array(actualTimes).fill(true).map((_, i) => {
-            return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence
-            // eslint-disable-next-line react/no-array-index-key
-            , { durationInFrames: durationInFrames, from: i * durationInFrames, name: name, showLoopTimesInTimeline: actualTimes, showInTimeline: i === 0, layout: props.layout, style: style, children: children }, `loop-${i}`));
-        }) }));
+    const maxFrame = durationInFrames * (actualTimes - 1);
+    const start = Math.floor(currentFrame / durationInFrames) * durationInFrames;
+    const from = Math.min(start, maxFrame);
+    const loopDisplay = (0, react_1.useMemo)(() => {
+        return {
+            numberOfTimes: actualTimes,
+            startOffset: -from,
+            durationInFrames,
+        };
+    }, [actualTimes, durationInFrames, from]);
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name, loopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
 };
 exports.Loop = Loop;

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

@@ -84,7 +84,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
             nonce,
             startMediaFrom: 0 - startsAt,
             doesVolumeChange,
-            showLoopTimesInTimeline: undefined,
+            loopDisplay: undefined,
             playbackRate,
         });
         return () => {

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-alpha7";

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-alpha7';

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-alpha7';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -666,7 +666,7 @@ const useVideoConfig = () => {
     return videoConfig;
 };
 
-const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, showLoopTimesInTimeline, ...other }, ref) => {
+const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, loopDisplay, ...other }, ref) => {
     const { layout = 'absolute-fill' } = other;
     const [id] = useState(() => String(Math.random()));
     const parentSequence = useContext(SequenceContext);
@@ -736,7 +736,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
             rootId,
             showInTimeline,
             nonce,
-            showLoopTimesInTimeline,
+            loopDisplay,
         });
         return () => {
             unregisterSequence(id);
@@ -754,7 +754,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         from,
         showInTimeline,
         nonce,
-        showLoopTimesInTimeline,
+        loopDisplay,
         environment,
     ]);
     const endThreshold = cumulatedFrom + from + durationInFrames - 1;
@@ -781,6 +781,26 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
  */
 const Sequence = forwardRef(SequenceRefForwardingFunction);
 
+/**
+ * @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
+ * @see [Documentation](https://remotion.dev/docs/use-current-frame)
+ */
+const useCurrentFrame = () => {
+    const canUseRemotionHooks = useContext(CanUseRemotionHooks);
+    if (!canUseRemotionHooks) {
+        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+            throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
+        }
+        throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
+    }
+    const frame = useTimelinePosition();
+    const context = useContext(SequenceContext);
+    const contextOffset = context
+        ? context.cumulatedFrom + context.relativeFrom
+        : 0;
+    return frame - contextOffset;
+};
+
 const validateDurationInFrames = ({ allowFloats, component, durationInFrames, }) => {
     if (typeof durationInFrames !== 'number') {
         throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
@@ -801,6 +821,7 @@ const validateDurationInFrames = ({ allowFloats, component, durationInFrames, })
  * @see [Documentation](https://www.remotion.dev/docs/loop)
  */
 const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
+    const currentFrame = useCurrentFrame();
     const { durationInFrames: compDuration } = useVideoConfig();
     validateDurationInFrames({
         durationInFrames,
@@ -819,11 +840,17 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
     const maxTimes = Math.ceil(compDuration / durationInFrames);
     const actualTimes = Math.min(maxTimes, times);
     const style = props.layout === 'none' ? undefined : props.style;
-    return (jsx(Fragment, { children: new Array(actualTimes).fill(true).map((_, i) => {
-            return (jsx(Sequence
-            // eslint-disable-next-line react/no-array-index-key
-            , { durationInFrames: durationInFrames, from: i * durationInFrames, name: name, showLoopTimesInTimeline: actualTimes, showInTimeline: i === 0, layout: props.layout, style: style, children: children }, `loop-${i}`));
-        }) }));
+    const maxFrame = durationInFrames * (actualTimes - 1);
+    const start = Math.floor(currentFrame / durationInFrames) * durationInFrames;
+    const from = Math.min(start, maxFrame);
+    const loopDisplay = useMemo(() => {
+        return {
+            numberOfTimes: actualTimes,
+            startOffset: -from,
+            durationInFrames,
+        };
+    }, [actualTimes, durationInFrames, from]);
+    return (jsx(Sequence, { durationInFrames: durationInFrames, from: from, name: name, loopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
 };
 
 const validateMediaProps = (props, component) => {
@@ -1067,26 +1094,6 @@ const random = (seed, dummy) => {
     throw new Error('random() argument must be a number or a string');
 };
 
-/**
- * @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
- * @see [Documentation](https://remotion.dev/docs/use-current-frame)
- */
-const useCurrentFrame = () => {
-    const canUseRemotionHooks = useContext(CanUseRemotionHooks);
-    if (!canUseRemotionHooks) {
-        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
-            throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
-        }
-        throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
-    }
-    const frame = useTimelinePosition();
-    const context = useContext(SequenceContext);
-    const contextOffset = context
-        ? context.cumulatedFrom + context.relativeFrom
-        : 0;
-    return frame - contextOffset;
-};
-
 const useMediaStartsAt = () => {
     var _a;
     const parentSequence = useContext(SequenceContext);
@@ -1176,13 +1183,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 +1227,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(() => {
@@ -1248,7 +1255,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
             nonce,
             startMediaFrom: 0 - startsAt,
             doesVolumeChange,
-            showLoopTimesInTimeline: undefined,
+            loopDisplay: undefined,
             playbackRate,
         });
         return () => {
@@ -1505,12 +1512,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 +1642,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 +1687,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 +3575,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 +3585,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 +3636,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 +3708,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 +3935,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 +3949,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         return () => {
             current.removeEventListener('error', errorHandler);
         };
-    }, [src]);
+    }, [props.onError, src]);
     const currentOnDurationCallback = useRef();
     currentOnDurationCallback.current = onDuration;
     useEffect(() => {
@@ -3894,7 +3981,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 +3998,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 +4132,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 +4157,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-alpha7';
 
 export { VERSION };

package/package.json

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

package/dist/cjs/config.d.ts

@@ -1,294 +0,0 @@
-/**
- * The configuration has moved to @remotion/cli.
- * For the moment the type definitions are going to stay here
- */
-import type { Configuration } from 'webpack';
-declare type Concurrency = number | null;
-declare type BrowserExecutable = string | null;
-declare type FrameRange = number | [number, number];
-declare type FfmpegExecutable = string | null;
-declare type Loop = number | null;
-declare type CodecOrUndefined = 'h264' | 'h265' | 'vp8' | 'vp9' | 'mp3' | 'aac' | 'wav' | 'prores' | 'h264-mkv' | 'gif' | undefined;
-declare type Crf = number | undefined;
-export declare type WebpackConfiguration = Configuration;
-export declare type WebpackOverrideFn = (currentConfiguration: WebpackConfiguration) => WebpackConfiguration;
-declare type FlatConfig = RemotionConfigObject['Bundling'] & RemotionConfigObject['Log'] & RemotionConfigObject['Preview'] & RemotionConfigObject['Puppeteer'] & RemotionConfigObject['Output'] & RemotionConfigObject['Rendering'] & {
-    /**
-     * Set the audio codec to use for the output video.
-     * See the Encoding guide in the docs for defaults and available options.
-     */
-    setAudioCodec: (codec: 'pcm-16' | 'aac' | 'mp3' | 'opus') => void;
-};
-declare global {
-    interface RemotionBundlingOptions {
-        /**
-         * Specify the entry point so you don't have to specify it in the
-         * CLI command
-         */
-        readonly setEntryPoint: (src: string) => void;
-        /**
-         * Whether Webpack bundles should be cached to make
-         * subsequent renders faster. Default: true
-         */
-        readonly setCachingEnabled: (flag: boolean) => void;
-        /**
-         * Define on which port Remotion should start it's HTTP servers during preview and rendering.
-         * By default, Remotion will try to find a free port.
-         * If you specify a port, but it's not available, Remotion will throw an error.
-         */
-        readonly setPort: (port: number | undefined) => void;
-        /**
-         * Define the location of the public/ directory.
-         * By default it is a folder named "public" inside the current working directory.
-         * You can set an absolute path or a relative path that will be resolved from the closest package.json location.
-         */
-        readonly setPublicDir: (publicDir: string | null) => void;
-        readonly overrideWebpackConfig: (f: WebpackOverrideFn) => void;
-    }
-    interface RemotionConfigObject {
-        /**
-         * @deprecated New flat config format: You can now replace `Config.Preview.` with `Config.`
-         */
-        readonly Preview: {
-            /**
-             * Change the maximum amount of tracks that are shown in the timeline.
-             * @param maxTracks The maximum amount of timeline tracks that you would like to show.
-             * @default 15
-             */
-            readonly setMaxTimelineTracks: (maxTracks: number) => void;
-            /**
-             * Enable Keyboard shortcuts in the Remotion Preview.
-             * @param enabled Boolean whether to enable the keyboard shortcuts
-             * @default true
-             */
-            readonly setKeyboardShortcutsEnabled: (enableShortcuts: boolean) => void;
-            /**
-             * Set number of shared audio tags. https://www.remotion.dev/docs/player/autoplay#use-the-numberofsharedaudiotags-property
-             * @param numberOfAudioTags
-             * @default 0
-             */
-            readonly setNumberOfSharedAudioTags: (numberOfAudioTags: number) => void;
-            /**
-             * Enable Webpack polling instead of file system listeners for hot reloading in the preview.
-             * This is useful if you are using a remote directory or a virtual machine.
-             * @param interval
-             * @default null
-             */
-            readonly setWebpackPollingInMilliseconds: (interval: number | null) => void;
-            /**
-             * Whether Remotion should open a browser when starting the Preview.
-             * @param should
-             * @default true
-             */
-            readonly setShouldOpenBrowser: (should: boolean) => void;
-        };
-        /**
-         * @deprecated New flat config format: You can now replace `Config.Bundling.` with `Config.`
-         */
-        readonly Bundling: RemotionBundlingOptions;
-        /**
-         * @deprecated New flat config format: You can now replace `Config.Log.` with `Config.`
-         */
-        readonly Log: {
-            /**
-             * Set the log level.
-             * Acceptable values: 'error' | 'warning' | 'info' | 'verbose'
-             * Default value: 'info'
-             *
-             * Set this to 'verbose' to get browser logs and other IO.
-             */
-            readonly setLevel: (newLogLevel: 'verbose' | 'info' | 'warn' | 'error') => void;
-        };
-        /**
-         * @deprecated New flat config format: You can now replace `Config.Puppeteer.` with `Config.`
-         */
-        readonly Puppeteer: {
-            /**
-             * Specify executable path for the browser to use.
-             * Default: null, which will make Remotion find or download a version of said browser.
-             */
-            readonly setBrowserExecutable: (newBrowserExecutablePath: BrowserExecutable) => void;
-            /**
-             * Set how many milliseconds a frame may take to render before it times out.
-             * Default: `30000`
-             */
-            readonly setDelayRenderTimeoutInMilliseconds: (newPuppeteerTimeout: number) => void;
-            /**
-             * @deprecated Renamed to `setDelayRenderTimeoutInMilliseconds`.
-             * Set how many milliseconds a frame may take to render before it times out.
-             * Default: `30000`
-             */
-            readonly setTimeoutInMilliseconds: (newPuppeteerTimeout: number) => void;
-            /**
-             * Setting deciding whether to disable CORS and other Chrome security features.
-             * Default: false
-             */
-            readonly setChromiumDisableWebSecurity: (should: boolean) => void;
-            /**
-             * Setting whether to ignore any invalid SSL certificates, such as self-signed ones.
-             * Default: false
-             */
-            readonly setChromiumIgnoreCertificateErrors: (should: boolean) => void;
-            /**
-             * If false, will open an actual browser during rendering to observe progress.
-             * Default: true
-             */
-            readonly setChromiumHeadlessMode: (should: boolean) => void;
-            /**
-             * Set the OpenGL rendering backend for Chrome. Possible values: 'egl', 'angle', 'swiftshader' and 'swangle'.
-             * Default: 'swangle' in Lambda, null elsewhere.
-             */
-            readonly setChromiumOpenGlRenderer: (renderer: 'swangle' | 'angle' | 'egl' | 'swiftshader') => void;
-            /**
-             * Set the user agent for Chrome. Only works during rendering.
-             * Default:
-             */
-            readonly setChromiumUserAgent: (userAgent: string | null) => void;
-        };
-        /**
-         * @deprecated New flat config format: You can now replace `Config.Rendering.` with `Config.`
-         */
-        readonly Rendering: {
-            /**
-             * Set a custom location for a .env file.
-             * Default: `.env`
-             */
-            readonly setDotEnvLocation: (file: string) => void;
-            /**
-             * Sets how many Puppeteer instances will work on rendering your video in parallel.
-             * Default: `null`, meaning half of the threads available on your CPU.
-             */
-            readonly setConcurrency: (newConcurrency: Concurrency) => void;
-            /**
-             * Set the JPEG quality for the frames.
-             * Must be between 0 and 100.
-             * Must be between 0 and 100.
-             * Default: 80
-             */
-            readonly setQuality: (q: number | undefined) => void;
-            /** Decide in which image format to render. Can be either 'jpeg' or 'png'.
-             * PNG is slower, but supports transparency.
-             */
-            readonly setImageFormat: (format: 'png' | 'jpeg' | 'none') => void;
-            /**
-             * Render only a subset of a video.
-             * Pass in a tuple [20, 30] to only render frames 20-30 into a video.
-             * Pass in a single number `20` to only render a single frame as an image.
-             * The frame count starts at 0.
-             */
-            readonly setFrameRange: (newFrameRange: FrameRange | null) => void;
-            /**
-             * Specify local ffmpeg executable.
-             * Default: null, which will use ffmpeg available in PATH.
-             */
-            readonly setFfmpegExecutable: (ffmpegPath: FfmpegExecutable) => void;
-            /**
-             * Specify local ffprobe executable.
-             * Default: null, which will use ffprobe available in PATH.
-             */
-            readonly setFfprobeExecutable: (ffprobePath: FfmpegExecutable) => void;
-            /**
-             * Scales the output dimensions by a factor.
-             * Default: 1.
-             */
-            readonly setScale: (newScale: number) => void;
-            /**
-             * Specify which frames should be picked for rendering a GIF
-             * Default: 1, which means every frame
-             * https://remotion.dev/docs/render-as-gif
-             */
-            readonly setEveryNthFrame: (frame: number) => void;
-            /**
-             * Specify the number of Loop a GIF should have.
-             * Default: null (means GIF will loop infinite)
-             */
-            readonly setNumberOfGifLoops: (newLoop: Loop) => void;
-            /**
-             * Disable audio output.
-             * Default: false
-             */
-            readonly setMuted: (muted: boolean) => void;
-            /**
-             * Don't render an audio track if it would be silent.
-             * Default: true
-             */
-            readonly setEnforceAudioTrack: (enforceAudioTrack: boolean) => void;
-        };
-        /**
-         * @deprecated New flat config format: You can now replace `Config.Output.` with `Config.`
-         */
-        readonly Output: {
-            /**
-             * Set the output file location string. Default: `out/{composition}.{codec}`
-             */
-            readonly setOutputLocation: (newOutputLocation: string) => void;
-            /**
-             * If the video file already exists, should Remotion overwrite
-             * the output? Default: true
-             */
-            readonly setOverwriteOutput: (newOverwrite: boolean) => void;
-            /**
-             * Sets the pixel format in FFMPEG.
-             * See https://trac.ffmpeg.org/wiki/Chroma%20Subsampling for an explanation.
-             * You can override this using the `--pixel-format` Cli flag.
-             */
-            readonly setPixelFormat: (format: 'yuv420p' | 'yuva420p' | 'yuv422p' | 'yuv444p' | 'yuv420p10le' | 'yuv422p10le' | 'yuv444p10le' | 'yuva444p10le') => void;
-            /**
-             * @deprecated Use setCodec() and setImageSequence() instead.
-             * Specify what kind of output you, either `mp4` or `png-sequence`.
-             */
-            readonly setOutputFormat: (newLegacyFormat: 'mp4' | 'png-sequence') => void;
-            /**
-             * Specify the codec for stitching the frames into a video.
-             * Can be `h264` (default), `h265`, `vp8` or `vp9`
-             */
-            readonly setCodec: (newCodec: CodecOrUndefined) => void;
-            /**
-             * Set the Constant Rate Factor to pass to FFMPEG.
-             * Lower values mean better quality, but be aware that the ranges of
-             * possible values greatly differs between codecs.
-             */
-            readonly setCrf: (newCrf: Crf) => void;
-            /**
-             * Set to true if don't want a video but an image sequence as the output.
-             */
-            readonly setImageSequence: (newImageSequence: boolean) => void;
-            /**
-             * Overrides the height of a composition
-             */
-            readonly overrideHeight: (newHeight: number) => void;
-            /**
-             * Overrides the width of a composition
-             */
-            readonly overrideWidth: (newWidth: number) => void;
-            /**
-             * Set the ProRes profile.
-             * This method is only valid if the codec has been set to 'prores'.
-             * Possible values: 4444-xq, 4444, hq, standard, light, proxy. Default: 'hq'
-             * See https://avpres.net/FFmpeg/im_ProRes.html for meaning of possible values.
-             */
-            readonly setProResProfile: (profile: '4444-xq' | '4444' | 'hq' | 'standard' | 'light' | 'proxy' | undefined) => void;
-            /**
-             * Override the arguments that Remotion passes to FFMPEG.
-             * Consult https://remotion.dev/docs/renderer/render-media#ffmpegoverride before using this feature.
-             */
-            readonly overrideFfmpegCommand: (command: (info: {
-                type: 'pre-stitcher' | 'stitcher';
-                args: string[];
-            }) => string[]) => void;
-            /**
-             * Set a target audio bitrate to be passed to FFMPEG.
-             */
-            readonly setAudioBitrate: (bitrate: string | null) => void;
-            /**
-             * Set a target video bitrate to be passed to FFMPEG.
-             * Mutually exclusive with setCrf().
-             */
-            readonly setVideoBitrate: (bitrate: string | null) => void;
-        };
-    }
-}
-export declare type ConfigType = RemotionConfigObject & FlatConfig;
-export type { Concurrency };
-export declare const Config: ConfigType;
-export declare const enableLegacyRemotionConfig: () => void;

package/dist/cjs/config.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.enableLegacyRemotionConfig = exports.Config = void 0;
-const conf = {};
-let enabled = false;
-exports.Config = new Proxy(conf, {
-    get(target, prop, receiver) {
-        if (!enabled) {
-            if (typeof document !== 'undefined') {
-                // We are in the browser
-                return {};
-            }
-            throw new Error('To use the Remotion config file, you need to have @remotion/cli installed.\n- Make sure that all versions of Remotion are the same.\n- Make sure that @remotion/cli is installed.\n- Make sure Config is imported from "@remotion/cli", not "remotion".');
-        }
-        return Reflect.get(target, prop, receiver);
-    },
-});
-const enableLegacyRemotionConfig = () => {
-    enabled = true;
-};
-exports.enableLegacyRemotionConfig = enableLegacyRemotionConfig;

package/dist/cjs/validation/validate-offthreadvideo-image-format.d.ts

@@ -1 +0,0 @@
-export declare const validateOffthreadVideoImageFormat: (input: unknown) => void;

package/dist/cjs/validation/validate-offthreadvideo-image-format.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateOffthreadVideoImageFormat = void 0;
-const validateOffthreadVideoImageFormat = (input) => {
-    if (typeof input === 'undefined') {
-        return;
-    }
-    if (typeof input !== 'string') {
-        throw new TypeError(`<OffthreadVideo imageFormat=""> must be a string, but got ${JSON.stringify(input)} instead.`);
-    }
-    if (input !== 'png' && input !== 'jpeg') {
-        throw new TypeError(`<OffthreadVideo imageFormat=""> must be either "png" or "jpeg", but got ${input}`);
-    }
-};
-exports.validateOffthreadVideoImageFormat = validateOffthreadVideoImageFormat;