remotion 4.1.0-alpha4 → 4.1.0-alpha7

package/dist/cjs/Composition.d.ts

@@ -10,32 +10,47 @@ 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 {};

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,
@@ -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)(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;
 };

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>>;
+}, "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "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" | "height" | "width" | "loading" | "referrerPolicy" | "alt" | "decoding" | "sizes" | "srcSet" | "useMap" | "maxRetries"> & React.RefAttributes<HTMLImageElement>>;

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/Audio.d.ts

@@ -9,4 +9,4 @@ export declare const Audio: React.ForwardRefExoticComponent<Pick<Omit<React.Deta
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;
     allowAmplificationDuringRender?: boolean | undefined;
-} & RemotionMainAudioProps, "id" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "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" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "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" | "volume" | "allowAmplificationDuringRender" | "controlsList" | "crossOrigin" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "playbackRate" | "acceptableTimeShiftInSeconds" | keyof RemotionMainAudioProps> & React.RefAttributes<HTMLAudioElement>>;
+} & RemotionMainAudioProps, "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "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" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "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" | "volume" | "allowAmplificationDuringRender" | "controlsList" | "crossOrigin" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "playbackRate" | "acceptableTimeShiftInSeconds" | keyof RemotionMainAudioProps> & React.RefAttributes<HTMLAudioElement>>;

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/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,5 +1,5 @@
 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';
@@ -8,7 +8,7 @@ declare global {
         remotion_renderReady: boolean;
         remotion_cancelledError: string | undefined;
         remotion_getCompositionNames: () => string[];
-        getStaticCompositions: () => Promise<AnyCompMetadata[]>;
+        getStaticCompositions: () => Promise<VideoConfig[]>;
         remotion_calculateComposition: (compId: string) => Promise<VideoConfig>;
         remotion_setBundleMode: (bundleMode: BundleState) => void;
         remotion_staticBase: string;
@@ -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: '5';
+        siteVersion: '7';
         remotion_version: string;
         remotion_imported: string | boolean;
     }
@@ -43,7 +43,7 @@ export type BundleState = {
 } | {
     type: 'composition';
     compositionName: string;
-    compositionDefaultProps: Record<string, unknown>;
+    props: Record<string, unknown>;
     compositionHeight: number;
     compositionDurationInFrames: number;
     compositionWidth: number;
@@ -53,7 +53,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);
         };
     },