remotion 4.1.0-alpha5 → 4.1.0-alpha7

package/dist/cjs/Composition.d.ts

@@ -22,17 +22,32 @@ export type CalculateMetadataFunction<T extends Record<string, unknown>> = (opti
     props: T;
     abortSignal: AbortSignal;
 }) => Promise<CalcMetadataReturnType<T>> | CalcMetadataReturnType<T>;
-export type StillProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+type OptionalDimensions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+    width?: number;
+    height?: number;
+    calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>>;
+};
+type MandatoryDimensions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     width: number;
     height: number;
-    id: string;
     calculateMetadata?: CalculateMetadataFunction<InferProps<Schema, Props>>;
-    schema?: Schema;
-} & CompProps<Props> & PropsIfHasProps<Schema, Props>;
-export type CompositionProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = StillProps<Schema, Props> & {
+};
+type StillCalculateMetadataOrExplicit<Schema extends AnyZodObject, Props extends Record<string, unknown>> = OptionalDimensions<Schema, Props> | MandatoryDimensions<Schema, Props>;
+type CompositionCalculateMetadataOrExplicit<Schema extends AnyZodObject, Props extends Record<string, unknown>> = (OptionalDimensions<Schema, Props> & {
+    fps?: number;
+    durationInFrames?: number;
+}) | (MandatoryDimensions<Schema, Props> & {
     fps: number;
     durationInFrames: number;
-};
+});
+export type StillProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+    id: string;
+    schema?: Schema;
+} & StillCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
+export type CompositionProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+    id: string;
+    schema?: Schema;
+} & CompositionCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
 /**
  * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
  * @see [Documentation](https://www.remotion.dev/docs/composition)

package/dist/cjs/Composition.js

@@ -19,9 +19,6 @@ const use_lazy_component_js_1 = require("./use-lazy-component.js");
 const use_video_js_1 = require("./use-video.js");
 const validate_composition_id_js_1 = require("./validation/validate-composition-id.js");
 const validate_default_props_js_1 = require("./validation/validate-default-props.js");
-const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
-const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
-const validate_fps_js_1 = require("./validation/validate-fps.js");
 const Fallback = () => {
     (0, react_1.useEffect)(() => {
         const fallback = (0, delay_render_js_1.delayRender)('Waiting for Root component to unsuspend');
@@ -56,20 +53,12 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
             throw new Error('No id for composition passed.');
         }
         (0, validate_composition_id_js_1.validateCompositionId)(id);
-        (0, validate_dimensions_js_1.validateDimension)(width, 'width', 'of the <Composition/> component');
-        (0, validate_dimensions_js_1.validateDimension)(height, 'height', 'of the <Composition/> component');
-        (0, validate_duration_in_frames_js_1.validateDurationInFrames)({
-            durationInFrames,
-            component: 'of the <Composition/> component',
-            allowFloats: false,
-        });
-        (0, validate_fps_js_1.validateFps)(fps, 'as a prop of the <Composition/> component', false);
         (0, validate_default_props_js_1.validateDefaultAndInputProps)(defaultProps, 'defaultProps', id);
         registerComposition({
-            durationInFrames,
-            fps,
-            height,
-            width,
+            durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : undefined,
+            fps: fps !== null && fps !== void 0 ? fps : undefined,
+            height: height !== null && height !== void 0 ? height : undefined,
+            width: width !== null && width !== void 0 ? width : undefined,
             id,
             folderName,
             component: lazy,

package/dist/cjs/CompositionManager.d.ts

@@ -4,10 +4,10 @@ import type { AnyZodObject } from 'zod';
 import type { CalculateMetadataFunction } from './Composition.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
 export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
-    width: number;
-    height: number;
-    fps: number;
-    durationInFrames: number;
+    width: number | undefined;
+    height: number | undefined;
+    fps: number | undefined;
+    durationInFrames: number | undefined;
     id: string;
     folderName: string | null;
     parentFolderName: string | null;

package/dist/cjs/RemotionRoot.js

@@ -13,9 +13,8 @@ const random_js_1 = require("./random.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const duration_state_js_1 = require("./video/duration-state.js");
 const RemotionRoot = ({ children, numberOfAudioTags }) => {
-    var _a;
     const [remotionRootId] = (0, react_1.useState)(() => String((0, random_js_1.random)(null)));
-    const [frame, setFrame] = (0, react_1.useState)((_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0);
+    const [frame, setFrame] = (0, react_1.useState)({});
     const [playing, setPlaying] = (0, react_1.useState)(false);
     const imperativePlaying = (0, react_1.useRef)(false);
     const [fastRefreshes, setFastRefreshes] = (0, react_1.useState)(0);
@@ -24,9 +23,12 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
-            window.remotion_setFrame = (f) => {
+            window.remotion_setFrame = (f, composition) => {
                 const id = (0, delay_render_js_1.delayRender)(`Setting the current frame to ${f}`);
-                setFrame(f);
+                setFrame((s) => ({
+                    ...s,
+                    [composition]: f,
+                }));
                 requestAnimationFrame(() => (0, delay_render_js_1.continueRender)(id));
             };
             window.remotion_isPlayer = false;

package/dist/cjs/ResolveCompositionConfig.js

@@ -30,12 +30,23 @@ const ResolveCompositionConfig = ({ children }) => {
             : {};
     }, [allEditorProps, renderModalComposition]);
     const doResolution = (0, react_1.useCallback)((composition, editorProps) => {
+        var _a;
         const controller = new AbortController();
         if (currentCompositionMetadata) {
             return controller;
         }
+        const inputProps = typeof window === 'undefined' ||
+            (0, get_environment_js_1.getRemotionEnvironment)() === 'player-development' ||
+            (0, get_environment_js_1.getRemotionEnvironment)() === 'player-production'
+            ? {}
+            : (_a = (0, input_props_js_1.getInputProps)()) !== null && _a !== void 0 ? _a : {};
         const { signal } = controller;
-        const promOrNot = (0, resolve_video_config_js_1.resolveVideoConfig)({ composition, editorProps, signal });
+        const promOrNot = (0, resolve_video_config_js_1.resolveVideoConfig)({
+            composition,
+            editorProps,
+            inputProps,
+            signal,
+        });
         if (typeof promOrNot === 'object' && 'then' in promOrNot) {
             setResolvedConfigs((r) => ({
                 ...r,
@@ -171,7 +182,11 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
             return {
                 type: 'success',
                 result: {
-                    ...composition,
+                    width: composition.width,
+                    height: composition.height,
+                    fps: composition.fps,
+                    id: composition.id,
+                    durationInFrames: composition.durationInFrames,
                     defaultProps: (_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {},
                     props: {
                         ...((_c = composition.defaultProps) !== null && _c !== void 0 ? _c : {}),

package/dist/cjs/freeze.js

@@ -5,11 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 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");
 /**
  * @description This method freezes all of its children to the frame that you specify as a prop
  * @see [Documentation](https://www.remotion.dev/docs/freeze)
  */
 const Freeze = ({ frame, children }) => {
+    const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     if (typeof frame === 'undefined') {
         throw new Error(`The <Freeze /> component requires a 'frame' prop, but none was passed.`);
     }
@@ -30,9 +32,11 @@ const Freeze = ({ frame, children }) => {
             imperativePlaying: {
                 current: false,
             },
-            frame,
+            frame: {
+                [videoConfig.id]: frame,
+            },
         };
-    }, [context, frame]);
+    }, [context, frame, videoConfig.id]);
     return ((0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: null, children: children }) }));
 };
 exports.Freeze = Freeze;

package/dist/cjs/index.d.ts

@@ -18,7 +18,7 @@ declare global {
         remotion_projectName: string;
         remotion_cwd: string;
         remotion_studioServerCommand: string;
-        remotion_setFrame: (frame: number) => void;
+        remotion_setFrame: (frame: number, composition: string) => void;
         remotion_initialFrame: number;
         remotion_proxyPort: number;
         remotion_audioEnabled: boolean;
@@ -31,7 +31,7 @@ declare global {
         remotion_isPlayer: boolean;
         remotion_isBuilding: undefined | (() => void);
         remotion_finishedBuilding: undefined | (() => void);
-        siteVersion: '6';
+        siteVersion: '7';
         remotion_version: string;
         remotion_imported: string | boolean;
     }

package/dist/cjs/index.js

@@ -98,7 +98,7 @@ exports.Config = new Proxy(proxyObj, {
             console.warn('+ Replace:');
             console.warn('import {Config} from "@remotion/cli/config";');
             console.warn();
-            console.warn('For more information, see https://v4.remotion.dev/docs/4-0-migration.');
+            console.warn('For more information, see https://www.remotion.dev/docs/4-0-migration.');
             process.exit(1);
         };
     },

package/dist/cjs/internals.d.ts

@@ -8,45 +8,44 @@ import { processColor } from './interpolate-colors.js';
 import type { SetTimelineContextValue, TimelineContextValue } from './timeline-position-state.js';
 import * as TimelinePosition from './timeline-position-state.js';
 import { truthy } from './truthy.js';
+import { validateDimension } from './validation/validate-dimensions.js';
+import { validateDurationInFrames } from './validation/validate-duration-in-frames.js';
+import { validateFps } from './validation/validate-fps.js';
 import type { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volume-position-state.js';
 import { useRemotionContexts } from './wrap-remotion-context.js';
 declare const Timeline: typeof TimelinePosition;
 export declare const Internals: {
-    useUnsafeVideoConfig: () => import("./video-config.js").VideoConfig | null;
-    Timeline: typeof TimelinePosition;
-    CompositionManager: import("react").Context<CompositionManagerContext>;
-    SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
-    RemotionRoot: import("react").FC<{
+    readonly useUnsafeVideoConfig: () => import("./video-config.js").VideoConfig | null;
+    readonly Timeline: typeof TimelinePosition;
+    readonly CompositionManager: import("react").Context<CompositionManagerContext>;
+    readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
+    readonly RemotionRoot: import("react").FC<{
         children: import("react").ReactNode;
         numberOfAudioTags: number;
     }>;
-    useVideo: () => (import("./video-config.js").VideoConfig & {
+    readonly useVideo: () => (import("./video-config.js").VideoConfig & {
         component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown>>>;
     }) | null;
-    getRoot: () => import("react").FC<{}> | null;
-    useMediaVolumeState: () => readonly [number, (u: number) => void];
-    useMediaMutedState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void];
-    useLazyComponent: <Props>(compProps: CompProps<Props>) => import("react").ExoticComponent<(import("react").PropsWithoutRef<Props> & import("react").RefAttributes<import("react").Component<Props, any, any>>) | import("react").PropsWithRef<Props>> & {
+    readonly getRoot: () => import("react").FC<{}> | null;
+    readonly useMediaVolumeState: () => readonly [number, (u: number) => void];
+    readonly useMediaMutedState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void];
+    readonly useLazyComponent: <Props>(compProps: CompProps<Props>) => import("react").ExoticComponent<(import("react").PropsWithoutRef<Props> & import("react").RefAttributes<import("react").Component<Props, any, any>>) | import("react").PropsWithRef<Props>> & {
         readonly _result: import("react").ComponentType<Props>;
     };
-    truthy: typeof truthy;
-    SequenceContext: import("react").Context<import("./SequenceContext.js").SequenceContextType | null>;
-    useRemotionContexts: typeof useRemotionContexts;
-    RemotionContextProvider: (props: import("./wrap-remotion-context.js").RemotionContextProviderProps) => JSX.Element;
-    CSSUtils: typeof CSSUtils;
-    setupEnvVariables: () => void;
-    MediaVolumeContext: import("react").Context<MediaVolumeContextValue>;
-    SetMediaVolumeContext: import("react").Context<SetMediaVolumeContextValue>;
-    validateDurationInFrames: ({ allowFloats, component, durationInFrames, }: {
-        durationInFrames: number;
-        component: string;
-        allowFloats: boolean;
-    }) => void;
-    validateFps: (fps: number, location: string, isGif: boolean) => void;
-    validateDefaultAndInputProps: (defaultProps: unknown, name: "defaultProps" | "inputProps", compositionId: string | null) => void;
-    validateDimension: (amount: number, nameOfProp: string, location: string) => void;
-    getRemotionEnvironment: () => RemotionEnvironment;
-    SharedAudioContext: import("react").Context<{
+    readonly truthy: typeof truthy;
+    readonly SequenceContext: import("react").Context<import("./SequenceContext.js").SequenceContextType | null>;
+    readonly useRemotionContexts: typeof useRemotionContexts;
+    readonly RemotionContextProvider: (props: import("./wrap-remotion-context.js").RemotionContextProviderProps) => JSX.Element;
+    readonly CSSUtils: typeof CSSUtils;
+    readonly setupEnvVariables: () => void;
+    readonly MediaVolumeContext: import("react").Context<MediaVolumeContextValue>;
+    readonly SetMediaVolumeContext: import("react").Context<SetMediaVolumeContextValue>;
+    readonly validateDurationInFrames: typeof validateDurationInFrames;
+    readonly validateFps: typeof validateFps;
+    readonly validateDefaultAndInputProps: (defaultProps: unknown, name: "defaultProps" | "inputProps", compositionId: string | null) => void;
+    readonly validateDimension: typeof validateDimension;
+    readonly getRemotionEnvironment: () => RemotionEnvironment;
+    readonly SharedAudioContext: import("react").Context<{
         registerAudio: (aud: import("./index.js").RemotionAudioProps, audioId: string) => {
             id: number;
             props: import("./index.js").RemotionAudioProps;
@@ -62,53 +61,54 @@ export declare const Internals: {
         playAllAudios: () => void;
         numberOfAudioTags: number;
     } | null>;
-    SharedAudioContextProvider: import("react").FC<{
+    readonly SharedAudioContextProvider: import("react").FC<{
         numberOfAudioTags: number;
         children: import("react").ReactNode;
         component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown>>> | null;
     }>;
-    invalidCompositionErrorMessage: string;
-    isCompositionIdValid: (id: string) => RegExpMatchArray | null;
-    getPreviewDomElement: () => HTMLElement | null;
-    compositionsRef: import("react").RefObject<{
+    readonly invalidCompositionErrorMessage: string;
+    readonly isCompositionIdValid: (id: string) => RegExpMatchArray | null;
+    readonly getPreviewDomElement: () => HTMLElement | null;
+    readonly compositionsRef: import("react").RefObject<{
         getCompositions: () => import("./CompositionManager.js").TCompMetadataWithCalcFunction<import("zod").AnyZodObject, Record<string, unknown>>[];
     }>;
-    DELAY_RENDER_CALLSTACK_TOKEN: string;
-    portalNode: () => HTMLElement;
-    waitForRoot: (fn: (comp: import("react").FC<{}>) => void) => () => void;
-    CanUseRemotionHooksProvider: import("react").FC<{
+    readonly DELAY_RENDER_CALLSTACK_TOKEN: "The delayRender was called:";
+    readonly portalNode: () => HTMLElement;
+    readonly waitForRoot: (fn: (comp: import("react").FC<{}>) => void) => () => void;
+    readonly CanUseRemotionHooksProvider: import("react").FC<{
         children: import("react").ReactNode;
     }>;
-    CanUseRemotionHooks: import("react").Context<boolean>;
-    PrefetchProvider: import("react").FC<{
+    readonly CanUseRemotionHooks: import("react").Context<boolean>;
+    readonly PrefetchProvider: import("react").FC<{
         children: import("react").ReactNode;
     }>;
-    DurationsContextProvider: import("react").FC<{
+    readonly DurationsContextProvider: import("react").FC<{
         children: import("react").ReactNode;
     }>;
-    IsPlayerContextProvider: import("react").FC<{
+    readonly IsPlayerContextProvider: import("react").FC<{
         children?: import("react").ReactNode;
     }>;
-    useIsPlayer: () => boolean;
-    useRemotionEnvironment: () => RemotionEnvironment;
-    validateFrame: ({ allowFloats, durationInFrames, frame, }: {
+    readonly useIsPlayer: () => boolean;
+    readonly useRemotionEnvironment: () => RemotionEnvironment;
+    readonly validateFrame: ({ allowFloats, durationInFrames, frame, }: {
         frame: number;
         durationInFrames: number;
         allowFloats: boolean;
     }) => void;
-    EditorPropsProvider: import("react").FC<{
+    readonly EditorPropsProvider: import("react").FC<{
         children: import("react").ReactNode;
     }>;
-    EditorPropsContext: import("react").Context<import("./EditorProps.js").EditorPropsContextType>;
-    usePreload: (src: string) => string;
-    processColor: typeof processColor;
-    NonceContext: import("react").Context<import("./nonce.js").TNonceContext>;
-    resolveVideoConfig: ({ composition, editorProps: editorPropsOrUndefined, signal, }: {
+    readonly EditorPropsContext: import("react").Context<import("./EditorProps.js").EditorPropsContextType>;
+    readonly usePreload: (src: string) => string;
+    readonly processColor: typeof processColor;
+    readonly NonceContext: import("react").Context<import("./nonce.js").TNonceContext>;
+    readonly resolveVideoConfig: ({ composition, editorProps: editorPropsOrUndefined, signal, inputProps, }: {
         composition: import("./CompositionManager.js").TCompMetadataWithCalcFunction<import("zod").AnyZodObject, Record<string, unknown>>;
         editorProps: object;
         signal: AbortSignal;
+        inputProps: Record<string, unknown>;
     }) => import("./video-config.js").VideoConfig | Promise<import("./video-config.js").VideoConfig>;
-    useResolvedVideoConfig: (preferredCompositionId: string | null) => ({
+    readonly useResolvedVideoConfig: (preferredCompositionId: string | null) => ({
         type: "loading";
     } | {
         type: "success";
@@ -117,15 +117,17 @@ export declare const Internals: {
         type: "error";
         error: Error;
     }) | null;
-    resolveCompositionsRef: import("react").RefObject<{
+    readonly resolveCompositionsRef: import("react").RefObject<{
         setCurrentRenderModalComposition: (compositionId: string | null) => void;
         reloadCurrentlySelectedComposition: () => void;
     }>;
-    ResolveCompositionConfig: import("react").FC<import("react").PropsWithChildren<{
+    readonly ResolveCompositionConfig: import("react").FC<import("react").PropsWithChildren<{
         children: import("react").ReactNode;
     }>>;
-    REMOTION_STUDIO_CONTAINER_ELEMENT: string;
-    AssetManager: import("react").Context<import("./AssetManager.js").AssetManagerContext>;
-    bundleName: string;
+    readonly REMOTION_STUDIO_CONTAINER_ELEMENT: "__remotion-studio-container";
+    readonly AssetManager: import("react").Context<import("./AssetManager.js").AssetManagerContext>;
+    readonly bundleName: "bundle.js";
+    readonly persistCurrentFrame: (frame: number, composition: string) => void;
+    readonly useTimelineSetFrame: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, };

package/dist/cjs/internals.js

@@ -47,6 +47,7 @@ const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const setup_env_variables_js_1 = require("./setup-env-variables.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const TimelinePosition = __importStar(require("./timeline-position-state.js"));
 const truthy_js_1 = require("./truthy.js");
 const use_lazy_component_js_1 = require("./use-lazy-component.js");
@@ -117,4 +118,6 @@ exports.Internals = {
     REMOTION_STUDIO_CONTAINER_ELEMENT: get_preview_dom_element_js_1.REMOTION_STUDIO_CONTAINER_ELEMENT,
     AssetManager: AssetManager_js_1.AssetManager,
     bundleName: 'bundle.js',
+    persistCurrentFrame: timeline_position_state_js_1.persistCurrentFrame,
+    useTimelineSetFrame: timeline_position_state_js_1.useTimelineSetFrame,
 };

package/dist/cjs/loop/index.js

@@ -14,8 +14,7 @@ const validate_duration_in_frames_js_1 = require("../validation/validate-duratio
 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,
+    (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFrames, {
         component: 'of the <Loop /> component',
         allowFloats: true,
     });

package/dist/cjs/resolve-video-config.d.ts

@@ -1,8 +1,9 @@
 import type { AnyZodObject } from 'zod';
 import type { TCompMetadataWithCalcFunction } from './CompositionManager.js';
 import type { VideoConfig } from './video-config.js';
-export declare const resolveVideoConfig: ({ composition, editorProps: editorPropsOrUndefined, signal, }: {
+export declare const resolveVideoConfig: ({ composition, editorProps: editorPropsOrUndefined, signal, inputProps, }: {
     composition: TCompMetadataWithCalcFunction<AnyZodObject, Record<string, unknown>>;
     editorProps: object;
     signal: AbortSignal;
+    inputProps: Record<string, unknown>;
 }) => VideoConfig | Promise<VideoConfig>;

package/dist/cjs/resolve-video-config.js

@@ -1,23 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveVideoConfig = void 0;
-const input_props_js_1 = require("./config/input-props.js");
-const get_environment_js_1 = require("./get-environment.js");
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
 const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
-const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+const validate_fps_js_1 = require("./validation/validate-fps.js");
+const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, inputProps, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const calculatedProm = composition.calculateMetadata
         ? composition.calculateMetadata({
             defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
             props: {
                 ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
                 ...(editorPropsOrUndefined !== null && editorPropsOrUndefined !== void 0 ? editorPropsOrUndefined : {}),
-                ...(typeof window === 'undefined' ||
-                    (0, get_environment_js_1.getRemotionEnvironment)() === 'player-development' ||
-                    (0, get_environment_js_1.getRemotionEnvironment)() === 'player-production'
-                    ? {}
-                    : (_c = (0, input_props_js_1.getInputProps)()) !== null && _c !== void 0 ? _c : {}),
+                ...inputProps,
             },
             abortSignal: signal,
         })
@@ -50,43 +45,35 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         return {
             ...data,
             id: composition.id,
-            defaultProps: (_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {},
-            props: (_e = composition.defaultProps) !== null && _e !== void 0 ? _e : {},
+            defaultProps: (_c = composition.defaultProps) !== null && _c !== void 0 ? _c : {},
+            props: {
+                ...((_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {}),
+                ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
+            },
         };
     }
     return {
         ...data,
         id: composition.id,
-        defaultProps: (_f = composition.defaultProps) !== null && _f !== void 0 ? _f : {},
-        props: (_h = (_g = calculatedProm.props) !== null && _g !== void 0 ? _g : composition.defaultProps) !== null && _h !== void 0 ? _h : {},
+        defaultProps: (_e = composition.defaultProps) !== null && _e !== void 0 ? _e : {},
+        props: (_g = (_f = calculatedProm.props) !== null && _f !== void 0 ? _f : composition.defaultProps) !== null && _g !== void 0 ? _g : {},
     };
 };
 exports.resolveVideoConfig = resolveVideoConfig;
 const validateCalculated = ({ composition, calculated, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const potentialErrorLocation = `calculated by calculateMetadata() for the composition "${composition.id}"`;
-    const width = (_b = (_a = calculated === null || calculated === void 0 ? void 0 : calculated.width) !== null && _a !== void 0 ? _a : composition.width) !== null && _b !== void 0 ? _b : null;
-    if (!width) {
-        throw new TypeError('Composition width was neither specified via the `width` prop nor the `calculateMetadata()` function.');
-    }
-    (0, validate_dimensions_js_1.validateDimension)(width, 'width', potentialErrorLocation);
-    const height = (_d = (_c = calculated === null || calculated === void 0 ? void 0 : calculated.height) !== null && _c !== void 0 ? _c : composition.height) !== null && _d !== void 0 ? _d : null;
-    if (!height) {
-        throw new TypeError('Composition height was neither specified via the `height` prop nor the `calculateMetadata()` function.');
-    }
-    (0, validate_dimensions_js_1.validateDimension)(width, 'height', potentialErrorLocation);
+    const calculateMetadataErrorLocation = `calculated by calculateMetadata() for the composition "${composition.id}"`;
+    const defaultErrorLocation = `of the "<Composition />" component with the id "${composition.id}"`;
+    const width = (_b = (_a = calculated === null || calculated === void 0 ? void 0 : calculated.width) !== null && _a !== void 0 ? _a : composition.width) !== null && _b !== void 0 ? _b : undefined;
+    (0, validate_dimensions_js_1.validateDimension)(width, 'width', (calculated === null || calculated === void 0 ? void 0 : calculated.width) ? calculateMetadataErrorLocation : defaultErrorLocation);
+    const height = (_d = (_c = calculated === null || calculated === void 0 ? void 0 : calculated.height) !== null && _c !== void 0 ? _c : composition.height) !== null && _d !== void 0 ? _d : undefined;
+    (0, validate_dimensions_js_1.validateDimension)(height, 'height', (calculated === null || calculated === void 0 ? void 0 : calculated.height) ? calculateMetadataErrorLocation : defaultErrorLocation);
     const fps = (_f = (_e = calculated === null || calculated === void 0 ? void 0 : calculated.fps) !== null && _e !== void 0 ? _e : composition.fps) !== null && _f !== void 0 ? _f : null;
-    if (!fps) {
-        throw new TypeError('Composition fps was neither specified via the `fps` prop nor the `calculateMetadata()` function.');
-    }
+    (0, validate_fps_js_1.validateFps)(fps, (calculated === null || calculated === void 0 ? void 0 : calculated.fps) ? calculateMetadataErrorLocation : defaultErrorLocation, false);
     const durationInFrames = (_h = (_g = calculated === null || calculated === void 0 ? void 0 : calculated.durationInFrames) !== null && _g !== void 0 ? _g : composition.durationInFrames) !== null && _h !== void 0 ? _h : null;
-    if (!durationInFrames) {
-        throw new TypeError('Composition durationInFrames was neither specified via the `durationInFrames` prop nor the `calculateMetadata()` function.');
-    }
-    (0, validate_duration_in_frames_js_1.validateDurationInFrames)({
-        durationInFrames,
-        component: potentialErrorLocation,
+    (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFrames, {
         allowFloats: false,
+        component: `of the "<Composition />" component with the id "${composition.id}"`,
     });
     return { width, height, fps, durationInFrames };
 };

package/dist/cjs/series/index.js

@@ -41,8 +41,7 @@ const Series = ({ children }) => {
             const { durationInFrames, children: _children, from, ...passedProps } = castedChild.props; // `from` is not accepted and must be filtered out if used in JS
             if (i !== flattenedChildren.length - 1 ||
                 durationInFramesProp !== Infinity) {
-                (0, validate_duration_in_frames_js_1.validateDurationInFrames)({
-                    durationInFrames: durationInFramesProp,
+                (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFramesProp, {
                     component: `of a <Series.Sequence /> component`,
                     allowFloats: true,
                 });

package/dist/cjs/spring/index.js

@@ -52,7 +52,7 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
         };
     const frame = (reverse
         ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
-        : passedFrame) - delay;
+        : passedFrame) - (reverse ? -delay : delay);
     const spr = (0, spring_utils_js_1.springCalculation)({
         fps,
         frame: passedDurationInFrames === undefined

package/dist/cjs/static-file.js

@@ -49,6 +49,14 @@ const inner = (path) => {
     }
     return `/${trimLeadingSlash(path)}`;
 };
+const encodeBySplitting = (path) => {
+    const splitBySlash = path.split('/');
+    const encodedArray = splitBySlash.map((element) => {
+        return encodeURIComponent(element);
+    });
+    const merged = encodedArray.join('/');
+    return merged;
+};
 /**
  * @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)
@@ -76,9 +84,10 @@ const staticFile = (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()  `);
+        warnOnce(`WARNING: You seem to pass an already encoded path (path contains ${includesHex.hexCode}). Since Remotion 4.0, the encoding is done by staticFile() itself. You may want to remove a encodeURIComponent() wrapping.`);
     }
-    const preparsed = inner(encodeURIComponent(path));
+    const preprocessed = encodeBySplitting(path);
+    const preparsed = inner(preprocessed);
     if (!preparsed.startsWith('/')) {
         return `/${preparsed}`;
     }

package/dist/cjs/timeline-position-state.d.ts

@@ -4,7 +4,7 @@ export type PlayableMediaTag = {
     id: string;
 };
 export type TimelineContextValue = {
-    frame: number;
+    frame: Record<string, number>;
     playing: boolean;
     rootId: string;
     playbackRate: number;
@@ -13,13 +13,15 @@ export type TimelineContextValue = {
     audioAndVideoTags: MutableRefObject<PlayableMediaTag[]>;
 };
 export type SetTimelineContextValue = {
-    setFrame: (u: React.SetStateAction<number>) => void;
+    setFrame: (u: React.SetStateAction<Record<string, number>>) => void;
     setPlaying: (u: React.SetStateAction<boolean>) => void;
 };
 export declare const TimelineContext: import("react").Context<TimelineContextValue>;
 export declare const SetTimelineContext: import("react").Context<SetTimelineContextValue>;
+export declare const persistCurrentFrame: (frame: number, composition: string) => void;
+export declare const getFrameForComposition: (composition: string) => number;
 export declare const useTimelinePosition: () => number;
-export declare const useTimelineSetFrame: () => (u: React.SetStateAction<number>) => void;
+export declare const useTimelineSetFrame: () => (u: React.SetStateAction<Record<string, number>>) => void;
 type PlayingReturnType = readonly [
     boolean,
     (u: React.SetStateAction<boolean>) => void,

package/dist/cjs/timeline-position-state.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelinePosition = exports.SetTimelineContext = exports.TimelineContext = void 0;
+exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelinePosition = exports.getFrameForComposition = exports.persistCurrentFrame = exports.SetTimelineContext = exports.TimelineContext = void 0;
 const react_1 = require("react");
 const use_video_js_1 = require("./use-video.js");
 exports.TimelineContext = (0, react_1.createContext)({
-    frame: 0,
+    frame: {},
     playing: false,
     playbackRate: 1,
     rootId: '',
@@ -24,16 +24,34 @@ exports.SetTimelineContext = (0, react_1.createContext)({
         throw new Error('default');
     },
 });
+const makeKey = (composition) => {
+    return `remotion.time.${composition}`;
+};
+const persistCurrentFrame = (frame, composition) => {
+    localStorage.setItem(makeKey(composition), String(frame));
+};
+exports.persistCurrentFrame = persistCurrentFrame;
+const getFrameForComposition = (composition) => {
+    var _a, _b;
+    const frame = localStorage.getItem(makeKey(composition));
+    return frame
+        ? Number(frame)
+        : (_b = (typeof window === 'undefined' ? 0 : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
+};
+exports.getFrameForComposition = getFrameForComposition;
 const useTimelinePosition = () => {
+    var _a, _b;
     const videoConfig = (0, use_video_js_1.useVideo)();
     const state = (0, react_1.useContext)(exports.TimelineContext);
-    // A dynamically calculated duration using calculateMetadata()
-    // may lead to the frame being bigger than the duration.
-    // If we have the config, we clamp the frame to the duration.
     if (!videoConfig) {
-        return state.frame;
+        return typeof window === 'undefined'
+            ? 0
+            : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0;
     }
-    return Math.min(videoConfig.durationInFrames - 1, state.frame);
+    const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : (typeof window !== 'undefined' && window.remotion_isPlayer
+        ? 0
+        : (0, exports.getFrameForComposition)(videoConfig.id));
+    return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
 exports.useTimelinePosition = useTimelinePosition;
 const useTimelineSetFrame = () => {

package/dist/cjs/validation/validate-dimensions.d.ts

@@ -1 +1 @@
-export declare const validateDimension: (amount: number, nameOfProp: string, location: string) => void;
+export declare function validateDimension(amount: unknown, nameOfProp: string, location: string): asserts amount is number;

package/dist/cjs/validation/validate-dimensions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateDimension = void 0;
-const validateDimension = (amount, nameOfProp, location) => {
+function validateDimension(amount, nameOfProp, location) {
     if (typeof amount !== 'number') {
         throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
     }
@@ -17,5 +17,5 @@ const validateDimension = (amount, nameOfProp, location) => {
     if (amount <= 0) {
         throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
     }
-};
+}
 exports.validateDimension = validateDimension;

package/dist/cjs/validation/validate-duration-in-frames.d.ts

@@ -1,5 +1,4 @@
-export declare const validateDurationInFrames: ({ allowFloats, component, durationInFrames, }: {
-    durationInFrames: number;
+export declare function validateDurationInFrames(durationInFrames: unknown, options: {
     component: string;
     allowFloats: boolean;
-}) => void;
+}): asserts durationInFrames is number;

package/dist/cjs/validation/validate-duration-in-frames.js

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateDurationInFrames = void 0;
-const validateDurationInFrames = ({ allowFloats, component, durationInFrames, }) => {
+function validateDurationInFrames(durationInFrames, options) {
+    const { allowFloats, component } = options;
+    if (typeof durationInFrames === 'undefined') {
+        throw new Error(`The "durationInFrames" prop ${component} is missing.`);
+    }
     if (typeof durationInFrames !== 'number') {
         throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
     }
@@ -14,5 +18,5 @@ const validateDurationInFrames = ({ allowFloats, component, durationInFrames, })
     if (!Number.isFinite(durationInFrames)) {
         throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
     }
-};
+}
 exports.validateDurationInFrames = validateDurationInFrames;

package/dist/cjs/validation/validate-fps.d.ts

@@ -1 +1 @@
-export declare const validateFps: (fps: number, location: string, isGif: boolean) => void;
+export declare function validateFps(fps: unknown, location: string, isGif: boolean): asserts fps is number;

package/dist/cjs/validation/validate-fps.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateFps = void 0;
-const validateFps = (fps, location, isGif) => {
+function validateFps(fps, location, isGif) {
     if (typeof fps !== 'number') {
         throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
     }
@@ -17,5 +17,5 @@ const validateFps = (fps, location, isGif) => {
     if (isGif && fps > 50) {
         throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
     }
-};
+}
 exports.validateFps = validateFps;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.1.0-alpha5";
+export declare const VERSION = "4.1.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.1.0-alpha5';
+exports.VERSION = '4.1.0-alpha7';

package/dist/esm/index.mjs

@@ -58,7 +58,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.1.0-alpha5';
+const VERSION = '4.1.0-alpha7';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -344,7 +344,7 @@ const EditorPropsProvider = ({ children }) => {
     return (jsx(EditorPropsContext.Provider, { value: ctx, children: children }));
 };
 
-const validateDimension = (amount, nameOfProp, location) => {
+function validateDimension(amount, nameOfProp, location) {
     if (typeof amount !== 'number') {
         throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
     }
@@ -360,9 +360,13 @@ const validateDimension = (amount, nameOfProp, location) => {
     if (amount <= 0) {
         throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
     }
-};
+}
 
-const validateDurationInFrames = ({ allowFloats, component, durationInFrames, }) => {
+function validateDurationInFrames(durationInFrames, options) {
+    const { allowFloats, component } = options;
+    if (typeof durationInFrames === 'undefined') {
+        throw new Error(`The "durationInFrames" prop ${component} is missing.`);
+    }
     if (typeof durationInFrames !== 'number') {
         throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
     }
@@ -375,21 +379,35 @@ const validateDurationInFrames = ({ allowFloats, component, durationInFrames, })
     if (!Number.isFinite(durationInFrames)) {
         throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
     }
-};
+}
 
-const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+function validateFps(fps, location, isGif) {
+    if (typeof fps !== 'number') {
+        throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
+    }
+    if (!Number.isFinite(fps)) {
+        throw new Error(`"fps" must be a finite, but you passed ${fps} ${location}`);
+    }
+    if (isNaN(fps)) {
+        throw new Error(`"fps" must not be NaN, but got ${fps} ${location}`);
+    }
+    if (fps <= 0) {
+        throw new TypeError(`"fps" must be positive, but got ${fps} ${location}`);
+    }
+    if (isGif && fps > 50) {
+        throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
+    }
+}
+
+const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, inputProps, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const calculatedProm = composition.calculateMetadata
         ? composition.calculateMetadata({
             defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
             props: {
                 ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
                 ...(editorPropsOrUndefined !== null && editorPropsOrUndefined !== void 0 ? editorPropsOrUndefined : {}),
-                ...(typeof window === 'undefined' ||
-                    getRemotionEnvironment() === 'player-development' ||
-                    getRemotionEnvironment() === 'player-production'
-                    ? {}
-                    : (_c = getInputProps()) !== null && _c !== void 0 ? _c : {}),
+                ...inputProps,
             },
             abortSignal: signal,
         })
@@ -422,42 +440,34 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         return {
             ...data,
             id: composition.id,
-            defaultProps: (_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {},
-            props: (_e = composition.defaultProps) !== null && _e !== void 0 ? _e : {},
+            defaultProps: (_c = composition.defaultProps) !== null && _c !== void 0 ? _c : {},
+            props: {
+                ...((_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {}),
+                ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
+            },
         };
     }
     return {
         ...data,
         id: composition.id,
-        defaultProps: (_f = composition.defaultProps) !== null && _f !== void 0 ? _f : {},
-        props: (_h = (_g = calculatedProm.props) !== null && _g !== void 0 ? _g : composition.defaultProps) !== null && _h !== void 0 ? _h : {},
+        defaultProps: (_e = composition.defaultProps) !== null && _e !== void 0 ? _e : {},
+        props: (_g = (_f = calculatedProm.props) !== null && _f !== void 0 ? _f : composition.defaultProps) !== null && _g !== void 0 ? _g : {},
     };
 };
 const validateCalculated = ({ composition, calculated, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const potentialErrorLocation = `calculated by calculateMetadata() for the composition "${composition.id}"`;
-    const width = (_b = (_a = calculated === null || calculated === void 0 ? void 0 : calculated.width) !== null && _a !== void 0 ? _a : composition.width) !== null && _b !== void 0 ? _b : null;
-    if (!width) {
-        throw new TypeError('Composition width was neither specified via the `width` prop nor the `calculateMetadata()` function.');
-    }
-    validateDimension(width, 'width', potentialErrorLocation);
-    const height = (_d = (_c = calculated === null || calculated === void 0 ? void 0 : calculated.height) !== null && _c !== void 0 ? _c : composition.height) !== null && _d !== void 0 ? _d : null;
-    if (!height) {
-        throw new TypeError('Composition height was neither specified via the `height` prop nor the `calculateMetadata()` function.');
-    }
-    validateDimension(width, 'height', potentialErrorLocation);
+    const calculateMetadataErrorLocation = `calculated by calculateMetadata() for the composition "${composition.id}"`;
+    const defaultErrorLocation = `of the "<Composition />" component with the id "${composition.id}"`;
+    const width = (_b = (_a = calculated === null || calculated === void 0 ? void 0 : calculated.width) !== null && _a !== void 0 ? _a : composition.width) !== null && _b !== void 0 ? _b : undefined;
+    validateDimension(width, 'width', (calculated === null || calculated === void 0 ? void 0 : calculated.width) ? calculateMetadataErrorLocation : defaultErrorLocation);
+    const height = (_d = (_c = calculated === null || calculated === void 0 ? void 0 : calculated.height) !== null && _c !== void 0 ? _c : composition.height) !== null && _d !== void 0 ? _d : undefined;
+    validateDimension(height, 'height', (calculated === null || calculated === void 0 ? void 0 : calculated.height) ? calculateMetadataErrorLocation : defaultErrorLocation);
     const fps = (_f = (_e = calculated === null || calculated === void 0 ? void 0 : calculated.fps) !== null && _e !== void 0 ? _e : composition.fps) !== null && _f !== void 0 ? _f : null;
-    if (!fps) {
-        throw new TypeError('Composition fps was neither specified via the `fps` prop nor the `calculateMetadata()` function.');
-    }
+    validateFps(fps, (calculated === null || calculated === void 0 ? void 0 : calculated.fps) ? calculateMetadataErrorLocation : defaultErrorLocation, false);
     const durationInFrames = (_h = (_g = calculated === null || calculated === void 0 ? void 0 : calculated.durationInFrames) !== null && _g !== void 0 ? _g : composition.durationInFrames) !== null && _h !== void 0 ? _h : null;
-    if (!durationInFrames) {
-        throw new TypeError('Composition durationInFrames was neither specified via the `durationInFrames` prop nor the `calculateMetadata()` function.');
-    }
-    validateDurationInFrames({
-        durationInFrames,
-        component: potentialErrorLocation,
+    validateDurationInFrames(durationInFrames, {
         allowFloats: false,
+        component: `of the "<Composition />" component with the id "${composition.id}"`,
     });
     return { width, height, fps, durationInFrames };
 };
@@ -484,12 +494,23 @@ const ResolveCompositionConfig = ({ children }) => {
             : {};
     }, [allEditorProps, renderModalComposition]);
     const doResolution = useCallback((composition, editorProps) => {
+        var _a;
         const controller = new AbortController();
         if (currentCompositionMetadata) {
             return controller;
         }
+        const inputProps = typeof window === 'undefined' ||
+            getRemotionEnvironment() === 'player-development' ||
+            getRemotionEnvironment() === 'player-production'
+            ? {}
+            : (_a = getInputProps()) !== null && _a !== void 0 ? _a : {};
         const { signal } = controller;
-        const promOrNot = resolveVideoConfig({ composition, editorProps, signal });
+        const promOrNot = resolveVideoConfig({
+            composition,
+            editorProps,
+            inputProps,
+            signal,
+        });
         if (typeof promOrNot === 'object' && 'then' in promOrNot) {
             setResolvedConfigs((r) => ({
                 ...r,
@@ -623,7 +644,11 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
             return {
                 type: 'success',
                 result: {
-                    ...composition,
+                    width: composition.width,
+                    height: composition.height,
+                    fps: composition.fps,
+                    id: composition.id,
+                    durationInFrames: composition.durationInFrames,
                     defaultProps: (_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {},
                     props: {
                         ...((_c = composition.defaultProps) !== null && _c !== void 0 ? _c : {}),
@@ -677,7 +702,7 @@ const useVideo = () => {
 };
 
 const TimelineContext = createContext({
-    frame: 0,
+    frame: {},
     playing: false,
     playbackRate: 1,
     rootId: '',
@@ -697,16 +722,32 @@ const SetTimelineContext = createContext({
         throw new Error('default');
     },
 });
+const makeKey = (composition) => {
+    return `remotion.time.${composition}`;
+};
+const persistCurrentFrame = (frame, composition) => {
+    localStorage.setItem(makeKey(composition), String(frame));
+};
+const getFrameForComposition = (composition) => {
+    var _a, _b;
+    const frame = localStorage.getItem(makeKey(composition));
+    return frame
+        ? Number(frame)
+        : (_b = (typeof window === 'undefined' ? 0 : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
+};
 const useTimelinePosition = () => {
+    var _a, _b;
     const videoConfig = useVideo();
     const state = useContext(TimelineContext);
-    // A dynamically calculated duration using calculateMetadata()
-    // may lead to the frame being bigger than the duration.
-    // If we have the config, we clamp the frame to the duration.
     if (!videoConfig) {
-        return state.frame;
+        return typeof window === 'undefined'
+            ? 0
+            : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0;
     }
-    return Math.min(videoConfig.durationInFrames - 1, state.frame);
+    const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : (typeof window !== 'undefined' && window.remotion_isPlayer
+        ? 0
+        : getFrameForComposition(videoConfig.id));
+    return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
 const useTimelineSetFrame = () => {
     const { setFrame } = useContext(SetTimelineContext);
@@ -722,6 +763,8 @@ var TimelinePosition = /*#__PURE__*/Object.freeze({
     __proto__: null,
     TimelineContext: TimelineContext,
     SetTimelineContext: SetTimelineContext,
+    persistCurrentFrame: persistCurrentFrame,
+    getFrameForComposition: getFrameForComposition,
     useTimelinePosition: useTimelinePosition,
     useTimelineSetFrame: useTimelineSetFrame,
     usePlayingState: usePlayingState
@@ -923,8 +966,7 @@ const useCurrentFrame = () => {
 const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
     const currentFrame = useCurrentFrame();
     const { durationInFrames: compDuration } = useVideoConfig();
-    validateDurationInFrames({
-        durationInFrames,
+    validateDurationInFrames(durationInFrames, {
         component: 'of the <Loop /> component',
         allowFloats: true,
     });
@@ -2399,24 +2441,6 @@ const validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
     }
 };
 
-const validateFps = (fps, location, isGif) => {
-    if (typeof fps !== 'number') {
-        throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
-    }
-    if (!Number.isFinite(fps)) {
-        throw new Error(`"fps" must be a finite, but you passed ${fps} ${location}`);
-    }
-    if (isNaN(fps)) {
-        throw new Error(`"fps" must not be NaN, but got ${fps} ${location}`);
-    }
-    if (fps <= 0) {
-        throw new TypeError(`"fps" must be positive, but got ${fps} ${location}`);
-    }
-    if (isGif && fps > 50) {
-        throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
-    }
-};
-
 const Fallback = () => {
     useEffect(() => {
         const fallback = delayRender('Waiting for Root component to unsuspend');
@@ -2451,20 +2475,12 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
             throw new Error('No id for composition passed.');
         }
         validateCompositionId(id);
-        validateDimension(width, 'width', 'of the <Composition/> component');
-        validateDimension(height, 'height', 'of the <Composition/> component');
-        validateDurationInFrames({
-            durationInFrames,
-            component: 'of the <Composition/> component',
-            allowFloats: false,
-        });
-        validateFps(fps, 'as a prop of the <Composition/> component', false);
         validateDefaultAndInputProps(defaultProps, 'defaultProps', id);
         registerComposition({
-            durationInFrames,
-            fps,
-            height,
-            width,
+            durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : undefined,
+            fps: fps !== null && fps !== void 0 ? fps : undefined,
+            height: height !== null && height !== void 0 ? height : undefined,
+            width: width !== null && width !== void 0 ? width : undefined,
             id,
             folderName,
             component: lazy,
@@ -2718,6 +2734,7 @@ class Easing {
  * @see [Documentation](https://www.remotion.dev/docs/freeze)
  */
 const Freeze = ({ frame, children }) => {
+    const videoConfig = useVideoConfig();
     if (typeof frame === 'undefined') {
         throw new Error(`The <Freeze /> component requires a 'frame' prop, but none was passed.`);
     }
@@ -2738,9 +2755,11 @@ const Freeze = ({ frame, children }) => {
             imperativePlaying: {
                 current: false,
             },
-            frame,
+            frame: {
+                [videoConfig.id]: frame,
+            },
         };
-    }, [context, frame]);
+    }, [context, frame, videoConfig.id]);
     return (jsx(TimelineContext.Provider, { value: value, children: jsx(SequenceContext.Provider, { value: null, children: children }) }));
 };
 
@@ -3461,9 +3480,8 @@ const waitForRoot = (fn) => {
 };
 
 const RemotionRoot = ({ children, numberOfAudioTags }) => {
-    var _a;
     const [remotionRootId] = useState(() => String(random(null)));
-    const [frame, setFrame] = useState((_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0);
+    const [frame, setFrame] = useState({});
     const [playing, setPlaying] = useState(false);
     const imperativePlaying = useRef(false);
     const [fastRefreshes, setFastRefreshes] = useState(0);
@@ -3472,9 +3490,12 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useLayoutEffect(() => {
-            window.remotion_setFrame = (f) => {
+            window.remotion_setFrame = (f, composition) => {
                 const id = delayRender(`Setting the current frame to ${f}`);
-                setFrame(f);
+                setFrame((s) => ({
+                    ...s,
+                    [composition]: f,
+                }));
                 requestAnimationFrame(() => continueRender(id));
             };
             window.remotion_isPlayer = false;
@@ -3668,6 +3689,8 @@ const Internals = {
     REMOTION_STUDIO_CONTAINER_ELEMENT,
     AssetManager,
     bundleName: 'bundle.js',
+    persistCurrentFrame,
+    useTimelineSetFrame,
 };
 
 const flattenChildren = (children) => {
@@ -3717,8 +3740,7 @@ const Series = ({ children }) => {
             const { durationInFrames, children: _children, from, ...passedProps } = castedChild.props; // `from` is not accepted and must be filtered out if used in JS
             if (i !== flattenedChildren.length - 1 ||
                 durationInFramesProp !== Infinity) {
-                validateDurationInFrames({
-                    durationInFrames: durationInFramesProp,
+                validateDurationInFrames(durationInFramesProp, {
                     component: `of a <Series.Sequence /> component`,
                     allowFloats: true,
                 });
@@ -3970,7 +3992,7 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
         };
     const frame = (reverse
         ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
-        : passedFrame) - delay;
+        : passedFrame) - (reverse ? -delay : delay);
     const spr = springCalculation({
         fps,
         frame: passedDurationInFrames === undefined
@@ -4036,6 +4058,14 @@ const inner = (path) => {
     }
     return `/${trimLeadingSlash(path)}`;
 };
+const encodeBySplitting = (path) => {
+    const splitBySlash = path.split('/');
+    const encodedArray = splitBySlash.map((element) => {
+        return encodeURIComponent(element);
+    });
+    const merged = encodedArray.join('/');
+    return merged;
+};
 /**
  * @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)
@@ -4063,9 +4093,10 @@ const staticFile = (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()  `);
+        warnOnce(`WARNING: You seem to pass an already encoded path (path contains ${includesHex.hexCode}). Since Remotion 4.0, the encoding is done by staticFile() itself. You may want to remove a encodeURIComponent() wrapping.`);
     }
-    const preparsed = inner(encodeURIComponent(path));
+    const preprocessed = encodeBySplitting(path);
+    const preparsed = inner(preprocessed);
     if (!preparsed.startsWith('/')) {
         return `/${preparsed}`;
     }
@@ -4622,7 +4653,7 @@ const Config = new Proxy(proxyObj, {
             console.warn('+ Replace:');
             console.warn('import {Config} from "@remotion/cli/config";');
             console.warn();
-            console.warn('For more information, see https://v4.remotion.dev/docs/4-0-migration.');
+            console.warn('For more information, see https://www.remotion.dev/docs/4-0-migration.');
             process.exit(1);
         };
     },

package/dist/esm/version.mjs

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

package/package.json

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