remotion 4.1.0-alpha1 → 4.1.0-alpha11

package/dist/cjs/Composition.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react';
+import type { ComponentType, PropsWithChildren } from 'react';
 import React from 'react';
 import type { AnyZodObject } from 'zod';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
@@ -10,32 +10,48 @@ export type CompProps<Props> = {
 } | {
     component: LooseComponentType<Props>;
 };
-export type CalcMetadataReturnType<T extends Record<string, unknown> | undefined> = {
+export type CalcMetadataReturnType<T extends Record<string, unknown>> = {
     durationInFrames?: number;
     fps?: number;
     width?: number;
     height?: number;
     props?: T;
 };
-export type CalculateMetadataFunction<T extends Record<string, unknown> | undefined> = (options: {
+export type CalculateMetadataFunction<T extends Record<string, unknown>> = (options: {
     defaultProps: T;
     props: T;
     abortSignal: AbortSignal;
 }) => Promise<CalcMetadataReturnType<T>> | CalcMetadataReturnType<T>;
-export type StillProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = {
+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> | undefined> = 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)
  */
-export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined>({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }: CompositionProps<Schema, Props>) => React.ReactPortal | null;
+export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }: CompositionProps<Schema, Props>) => React.ReactPortal | null;
+export declare const ClipComposition: React.FC<PropsWithChildren>;
 export {};

package/dist/cjs/Composition.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Composition = void 0;
+exports.ClipComposition = exports.Composition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
@@ -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,
@@ -104,14 +93,14 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
         if (resolved === null || resolved.type !== 'success') {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ClipComposition, { children: (0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_a = resolved.result.defaultProps) !== null && _a !== void 0 ? _a : {}) }) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.ClipComposition, { children: (0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_a = resolved.result.props) !== null && _a !== void 0 ? _a : {}) }) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     if (environment === 'rendering' && video && video.component === lazy) {
         const Comp = lazy;
         if (resolved === null || resolved.type !== 'success') {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_b = resolved.result.defaultProps) !== null && _b !== void 0 ? _b : {}) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_b = resolved.result.props) !== null && _b !== void 0 ? _b : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     return null;
 };
@@ -130,3 +119,4 @@ const ClipComposition = ({ children }) => {
     }, [clipRegion]);
     return (0, jsx_runtime_1.jsx)(AbsoluteFill_js_1.AbsoluteFill, { style: style, children: children });
 };
+exports.ClipComposition = ClipComposition;

package/dist/cjs/CompositionManager.d.ts

@@ -3,11 +3,11 @@ import React from 'react';
 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> | undefined> = {
-    width: number;
-    height: number;
-    fps: number;
-    durationInFrames: number;
+export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+    width: number | undefined;
+    height: number | undefined;
+    fps: number | undefined;
+    durationInFrames: number | undefined;
     id: string;
     folderName: string | null;
     parentFolderName: string | null;
@@ -16,12 +16,11 @@ export type TComposition<Schema extends AnyZodObject, Props extends Record<strin
     schema: Schema | null;
     calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>> | null;
 } & PropsIfHasProps<Schema, Props>;
-export type AnyComposition = TComposition<AnyZodObject, Record<string, unknown> | undefined>;
-export type TCompMetadataWithCalcFunction<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps' | 'calculateMetadata'>;
-export type TCompMetadata<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
-export type AnyCompMetadata = TCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
-export type SmallTCompMetadata<T extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<T, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition<T, Props>, 'defaultProps'>>;
-export type AnySmallCompMetadata = SmallTCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
+export type AnyComposition = TComposition<AnyZodObject, Record<string, unknown>>;
+export type TCompMetadataWithCalcFunction<Schema extends AnyZodObject, Props extends Record<string, unknown>> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps' | 'calculateMetadata'>;
+export type TCompMetadata<Schema extends AnyZodObject, Props extends Record<string, unknown>> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
+export type AnyCompMetadata = TCompMetadata<AnyZodObject, Record<string, unknown>>;
+export type SmallTCompMetadata<T extends AnyZodObject, Props extends Record<string, unknown>> = Pick<TComposition<T, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition<T, Props>, 'defaultProps'>>;
 type EnhancedTSequenceData = {
     type: 'sequence';
 } | {
@@ -66,7 +65,7 @@ export type TAsset = {
     allowAmplificationDuringRender: boolean;
 };
 export declare const compositionsRef: React.RefObject<{
-    getCompositions: () => TCompMetadataWithCalcFunction<AnyZodObject, Record<string, unknown> | undefined>[];
+    getCompositions: () => TCompMetadataWithCalcFunction<AnyZodObject, Record<string, unknown>>[];
 }>;
 export declare const CompositionManagerProvider: React.FC<{
     children: React.ReactNode;

package/dist/cjs/CompositionManagerContext.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import type { AnyZodObject } from 'zod';
-import type { AnyCompMetadata, AnyComposition, TComposition } from './CompositionManager.js';
+import type { AnyComposition, TComposition } from './CompositionManager.js';
 import type { TFolder } from './Folder.js';
-export type BaseMetadata = Pick<AnyCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
+import type { VideoConfig } from './video-config.js';
+export type BaseMetadata = Pick<VideoConfig, 'durationInFrames' | 'fps' | 'props' | 'height' | 'width'>;
 export type CompositionManagerContext = {
     compositions: AnyComposition[];
-    registerComposition: <Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined>(comp: TComposition<Schema, Props>) => void;
+    registerComposition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(comp: TComposition<Schema, Props>) => void;
     unregisterComposition: (name: string) => void;
     registerFolder: (name: string, parent: string | null) => void;
     unregisterFolder: (name: string, parent: string | null) => void;

package/dist/cjs/Img.d.ts

@@ -6,4 +6,4 @@ import React from 'react';
 export declare const Img: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src"> & {
     maxRetries?: number | undefined;
     src: string;
-}, "id" | "height" | "width" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "crossOrigin" | "src" | "loading" | "referrerPolicy" | "alt" | "decoding" | "sizes" | "srcSet" | "useMap" | "maxRetries"> & React.RefAttributes<HTMLImageElement>>;
+}, "width" | "height" | "id" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "crossOrigin" | "src" | "loading" | "referrerPolicy" | "alt" | "decoding" | "sizes" | "srcSet" | "useMap" | "maxRetries"> & React.RefAttributes<HTMLImageElement>>;

package/dist/cjs/Img.js

@@ -65,7 +65,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
             if (process.env.NODE_ENV === 'test') {
                 return;
             }
-            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + src);
+            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + actualSrc);
             const { current } = imageRef;
             const onComplete = () => {
                 var _a, _b, _c, _d;
@@ -89,7 +89,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
                 current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
                 (0, delay_render_js_1.continueRender)(newHandle);
             };
-        }, [src]);
+        }, [actualSrc]);
     }
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };

package/dist/cjs/NativeLayers.js

@@ -17,13 +17,14 @@ const NativeLayersProvider = ({ children, }) => {
             clipRegion,
         };
     }, [clipRegion, setClipRegion]);
-    (0, react_1.useLayoutEffect)(() => {
-        if (typeof window !== 'undefined') {
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useLayoutEffect)(() => {
             window.remotion_getClipRegion = () => {
                 return clipRegion;
             };
-        }
-    }, [clipRegion, setClipRegion]);
+        }, [clipRegion, setClipRegion]);
+    }
     return ((0, jsx_runtime_1.jsx)(exports.NativeLayersContext.Provider, { value: context, children: children }));
 };
 exports.NativeLayersProvider = NativeLayersProvider;

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,
@@ -152,7 +163,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
         return composition ? (_a = allEditorProps[composition.id]) !== null && _a !== void 0 ? _a : {} : {};
     }, [allEditorProps, composition]);
     return (0, react_1.useMemo)(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!composition) {
             return null;
         }
@@ -162,7 +173,8 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                 result: {
                     ...currentCompositionMetadata,
                     id: composition.id,
-                    defaultProps: (_a = currentCompositionMetadata.defaultProps) !== null && _a !== void 0 ? _a : {},
+                    props: currentCompositionMetadata.props,
+                    defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
                 },
             };
         }
@@ -170,15 +182,20 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
             return {
                 type: 'success',
                 result: {
-                    ...composition,
-                    defaultProps: {
-                        ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
+                    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 : {}),
                         ...(selectedEditorProps !== null && selectedEditorProps !== void 0 ? selectedEditorProps : {}),
                         ...(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 : {}),
+                            : (_d = (0, input_props_js_1.getInputProps)()) !== null && _d !== void 0 ? _d : {}),
                     },
                 },
             };

package/dist/cjs/Still.d.ts

@@ -5,4 +5,4 @@ import type { StillProps } from './Composition.js';
  * @description A `<Still />` is a `<Composition />` that is only 1 frame long.
  * @see [Documentation](https://www.remotion.dev/docs/still)
  */
-export declare const Still: <Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined>(props: StillProps<Schema, Props>) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export declare const Still: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: StillProps<Schema, Props>) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

package/dist/cjs/audio/AudioForDevelopment.js

@@ -96,6 +96,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     if (initialShouldPreMountAudioElements) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)("audio", { ref: audioRef, ...propsToPass });
+    return (0, jsx_runtime_1.jsx)("audio", { ref: audioRef, preload: "metadata", ...propsToPass });
 };
 exports.AudioForDevelopment = (0, react_1.forwardRef)(AudioForDevelopmentForwardRefFunction);

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -33,7 +33,7 @@ export declare const SharedAudioContext: React.Context<SharedContext | null>;
 export declare const SharedAudioContextProvider: React.FC<{
     numberOfAudioTags: number;
     children: React.ReactNode;
-    component: LazyExoticComponent<ComponentType<Record<string, unknown> | undefined>> | null;
+    component: LazyExoticComponent<ComponentType<Record<string, unknown>>> | null;
 }>;
 export declare const useSharedAudio: (aud: RemotionAudioProps, audioId: string) => AudioElem;
 export {};

package/dist/cjs/audio/shared-audio-tags.js

@@ -193,7 +193,11 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component })
         };
     }, [component, resetAudio]);
     return ((0, jsx_runtime_1.jsxs)(exports.SharedAudioContext.Provider, { value: value, children: [refs.map(({ id, ref }) => {
-                return (0, jsx_runtime_1.jsx)("audio", { ref: ref, src: EMPTY_AUDIO }, id);
+                return (
+                // Without preload="metadata", iOS will seek the time internally
+                // but not actually with sound. Adding `preload="metadata"` helps here.
+                // https://discord.com/channels/809501355504959528/817306414069710848/1130519583367888906
+                (0, jsx_runtime_1.jsx)("audio", { ref: ref, preload: "metadata", src: EMPTY_AUDIO }, id));
             }), children] }));
 };
 exports.SharedAudioContextProvider = SharedAudioContextProvider;

package/dist/cjs/config/input-props.d.ts

@@ -1 +1 @@
-export declare const getInputProps: () => any;
+export declare const getInputProps: () => Record<string, unknown>;

package/dist/cjs/config/input-props.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInputProps = void 0;
 const get_environment_js_1 = require("../get-environment.js");
+const input_props_serialization_js_1 = require("../input-props-serialization.js");
 let didWarnSSRImport = false;
 const warnOnceSSRImport = () => {
     if (didWarnSSRImport) {
@@ -25,7 +26,7 @@ const getInputProps = () => {
     if (!param) {
         return {};
     }
-    const parsed = JSON.parse(param);
+    const parsed = (0, input_props_serialization_js_1.deserializeJSONWithCustomFields)(param);
     return parsed;
 };
 exports.getInputProps = getInputProps;

package/dist/cjs/delay-render.js

@@ -7,7 +7,9 @@ if (typeof window !== 'undefined') {
     window.remotion_renderReady = false;
 }
 let handles = [];
-const timeouts = {};
+if (typeof window !== 'undefined') {
+    window.remotion_delayRenderTimeouts = {};
+}
 exports.DELAY_RENDER_CALLSTACK_TOKEN = 'The delayRender was called:';
 const defaultTimeout = 30000;
 /**
@@ -29,18 +31,23 @@ const delayRender = (label) => {
         const timeoutToUse = typeof window === 'undefined'
             ? defaultTimeout
             : ((_c = window.remotion_puppeteerTimeout) !== null && _c !== void 0 ? _c : defaultTimeout) - 2000;
-        timeouts[handle] = setTimeout(() => {
-            const message = [
-                `A delayRender()`,
-                label ? `"${label}"` : null,
-                `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-                exports.DELAY_RENDER_CALLSTACK_TOKEN,
-                called,
-            ]
-                .filter(truthy_js_1.truthy)
-                .join(' ');
-            throw new Error(message);
-        }, timeoutToUse);
+        if (typeof window !== 'undefined') {
+            window.remotion_delayRenderTimeouts[handle] = {
+                label: label !== null && label !== void 0 ? label : null,
+                timeout: setTimeout(() => {
+                    const message = [
+                        `A delayRender()`,
+                        label ? `"${label}"` : null,
+                        `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+                        exports.DELAY_RENDER_CALLSTACK_TOKEN,
+                        called,
+                    ]
+                        .filter(truthy_js_1.truthy)
+                        .join(' ');
+                    throw new Error(message);
+                }, timeoutToUse),
+            };
+        }
     }
     if (typeof window !== 'undefined') {
         window.remotion_renderReady = false;
@@ -64,7 +71,8 @@ const continueRender = (handle) => {
     handles = handles.filter((h) => {
         if (h === handle) {
             if ((0, get_environment_js_1.getRemotionEnvironment)() === 'rendering') {
-                clearTimeout(timeouts[handle]);
+                clearTimeout(window.remotion_delayRenderTimeouts[handle].timeout);
+                delete window.remotion_delayRenderTimeouts[handle];
             }
             return false;
         }

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

@@ -1,15 +1,25 @@
+/// <reference types="node" />
 import './asset-types.js';
-import type { AnyCompMetadata, TAsset } from './CompositionManager.js';
+import type { TAsset } from './CompositionManager.js';
 import type { StaticFile } from './get-static-files.js';
 import type { ClipRegion } from './NativeLayers.js';
 import type { VideoConfig } from './video-config.js';
 declare global {
     interface Window {
         remotion_renderReady: boolean;
+        remotion_delayRenderTimeouts: {
+            [key: string]: {
+                label: string | null;
+                timeout: number | NodeJS.Timeout;
+            };
+        };
         remotion_cancelledError: string | undefined;
         remotion_getCompositionNames: () => string[];
-        getStaticCompositions: () => Promise<AnyCompMetadata[]>;
-        remotion_calculateComposition: (compId: string) => Promise<VideoConfig>;
+        getStaticCompositions: () => Promise<VideoConfig[]>;
+        remotion_calculateComposition: (compId: string) => Promise<Omit<VideoConfig, 'defaultProps' | 'props'> & {
+            serializedDefaultPropsWithCustomSchema: string;
+            serializedResolvedPropsWithCustomSchema: string;
+        }>;
         remotion_setBundleMode: (bundleMode: BundleState) => void;
         remotion_staticBase: string;
         remotion_staticFiles: StaticFile[];
@@ -18,7 +28,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 +41,7 @@ declare global {
         remotion_isPlayer: boolean;
         remotion_isBuilding: undefined | (() => void);
         remotion_finishedBuilding: undefined | (() => void);
-        siteVersion: '5';
+        siteVersion: '9';
         remotion_version: string;
         remotion_imported: string | boolean;
     }
@@ -43,7 +53,7 @@ export type BundleState = {
 } | {
     type: 'composition';
     compositionName: string;
-    compositionDefaultProps: Record<string, unknown>;
+    serializedResolvedPropsWithSchema: string;
     compositionHeight: number;
     compositionDurationInFrames: number;
     compositionWidth: number;
@@ -53,7 +63,7 @@ export * from './AbsoluteFill.js';
 export * from './audio/index.js';
 export { cancelRender } from './cancel-render.js';
 export { CalculateMetadataFunction, Composition, CompositionProps, CompProps, StillProps, } from './Composition.js';
-export { AnyCompMetadata, AnyComposition, AnySmallCompMetadata, SmallTCompMetadata, TAsset, TCompMetadata, } from './CompositionManager.js';
+export { AnyCompMetadata, AnyComposition, SmallTCompMetadata, TAsset, TCompMetadata, } from './CompositionManager.js';
 export { getInputProps } from './config/input-props.js';
 export { continueRender, delayRender } from './delay-render.js';
 export * from './easing.js';

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/input-props-serialization.d.ts

@@ -0,0 +1,15 @@
+export type SerializedJSONWithCustomFields = {
+    serializedString: string;
+    customDateUsed: boolean;
+    customFileUsed: boolean;
+    mapUsed: boolean;
+    setUsed: boolean;
+};
+export declare const DATE_TOKEN = "remotion-date:";
+export declare const FILE_TOKEN = "remotion-file:";
+export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
+    data: Record<string, unknown>;
+    indent: number | undefined;
+    staticBase: string | null;
+}) => SerializedJSONWithCustomFields;
+export declare const deserializeJSONWithCustomFields: (data: string) => Record<string, unknown>;