remotion 4.1.0-alpha3 → 4.1.0-alpha5

package/dist/cjs/Composition.d.ts

@@ -10,26 +10,26 @@ 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> = {
+export type StillProps<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> & {
+export type CompositionProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = StillProps<Schema, Props> & {
     fps: number;
     durationInFrames: number;
 };
@@ -37,5 +37,5 @@ export type CompositionProps<Schema extends AnyZodObject, Props extends Record<s
  * @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

@@ -104,14 +104,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,7 +3,7 @@ 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> = {
+export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     width: number;
     height: number;
     fps: number;
@@ -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/ResolveCompositionConfig.js

@@ -152,7 +152,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 +162,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 : {},
                 },
             };
         }
@@ -171,14 +172,15 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                 type: 'success',
                 result: {
                     ...composition,
-                    defaultProps: {
-                        ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
+                    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/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;
@@ -31,7 +31,7 @@ declare global {
         remotion_isPlayer: boolean;
         remotion_isBuilding: undefined | (() => void);
         remotion_finishedBuilding: undefined | (() => void);
-        siteVersion: '5';
+        siteVersion: '6';
         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/internals.d.ts

@@ -21,7 +21,7 @@ export declare const Internals: {
         numberOfAudioTags: number;
     }>;
     useVideo: () => (import("./video-config.js").VideoConfig & {
-        component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown> | undefined>>;
+        component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown>>>;
     }) | null;
     getRoot: () => import("react").FC<{}> | null;
     useMediaVolumeState: () => readonly [number, (u: number) => void];
@@ -65,13 +65,13 @@ export declare const Internals: {
     SharedAudioContextProvider: import("react").FC<{
         numberOfAudioTags: number;
         children: import("react").ReactNode;
-        component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown> | undefined>> | null;
+        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<{
-        getCompositions: () => import("./CompositionManager.js").TCompMetadataWithCalcFunction<import("zod").AnyZodObject, Record<string, unknown> | undefined>[];
+        getCompositions: () => import("./CompositionManager.js").TCompMetadataWithCalcFunction<import("zod").AnyZodObject, Record<string, unknown>>[];
     }>;
     DELAY_RENDER_CALLSTACK_TOKEN: string;
     portalNode: () => HTMLElement;
@@ -104,7 +104,7 @@ export declare const Internals: {
     processColor: typeof processColor;
     NonceContext: import("react").Context<import("./nonce.js").TNonceContext>;
     resolveVideoConfig: ({ composition, editorProps: editorPropsOrUndefined, signal, }: {
-        composition: import("./CompositionManager.js").TCompMetadataWithCalcFunction<import("zod").AnyZodObject, Record<string, unknown> | undefined>;
+        composition: import("./CompositionManager.js").TCompMetadataWithCalcFunction<import("zod").AnyZodObject, Record<string, unknown>>;
         editorProps: object;
         signal: AbortSignal;
     }) => import("./video-config.js").VideoConfig | Promise<import("./video-config.js").VideoConfig>;

package/dist/cjs/props-if-has-props.d.ts

@@ -1,10 +1,10 @@
 import type { AnyZodObject, z } from 'zod';
 type And<A extends boolean, B extends boolean> = A extends true ? B extends true ? true : false : false;
-export type PropsIfHasProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = And<AnyZodObject extends Schema ? true : false, {} extends Props ? true : false> extends true ? {
+export type PropsIfHasProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = And<AnyZodObject extends Schema ? true : false, {} extends Props ? true : false> extends true ? {
     defaultProps?: {};
 } : {
     defaultProps: InferProps<Schema, Props>;
 };
-export type InferProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = AnyZodObject extends Schema ? {} extends Props ? Record<string, unknown> : Props : {} extends Props ? z.infer<Schema> : // Props and schema specified
+export type InferProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = AnyZodObject extends Schema ? {} extends Props ? Record<string, unknown> : Props : {} extends Props ? z.infer<Schema> : // Props and schema specified
 z.infer<Schema> & Props;
 export {};

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

@@ -2,7 +2,7 @@ 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, }: {
-    composition: TCompMetadataWithCalcFunction<AnyZodObject, Record<string, unknown> | undefined>;
+    composition: TCompMetadataWithCalcFunction<AnyZodObject, Record<string, unknown>>;
     editorProps: object;
     signal: AbortSignal;
 }) => VideoConfig | Promise<VideoConfig>;

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

@@ -6,7 +6,7 @@ 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const calculatedProm = composition.calculateMetadata
         ? composition.calculateMetadata({
             defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
@@ -26,7 +26,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         typeof calculatedProm === 'object' &&
         'then' in calculatedProm) {
         return calculatedProm.then((c) => {
-            var _a, _b;
+            var _a, _b, _c;
             const { height, width, durationInFrames, fps } = validateCalculated({
                 calculated: c,
                 composition,
@@ -37,7 +37,8 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
                 fps,
                 durationInFrames,
                 id: composition.id,
-                defaultProps: (_b = (_a = c.props) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {},
+                defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
+                props: (_c = (_b = c.props) !== null && _b !== void 0 ? _b : composition.defaultProps) !== null && _c !== void 0 ? _c : {},
             };
         });
     }
@@ -49,13 +50,15 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         return {
             ...data,
             id: composition.id,
-            defaultProps: (_d = composition === null || composition === void 0 ? void 0 : composition.defaultProps) !== null && _d !== void 0 ? _d : {},
+            defaultProps: (_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {},
+            props: (_e = composition.defaultProps) !== null && _e !== void 0 ? _e : {},
         };
     }
     return {
         ...data,
         id: composition.id,
-        defaultProps: (_f = (_e = calculatedProm === null || calculatedProm === void 0 ? void 0 : calculatedProm.props) !== null && _e !== void 0 ? _e : composition.defaultProps) !== null && _f !== void 0 ? _f : {},
+        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 : {},
     };
 };
 exports.resolveVideoConfig = resolveVideoConfig;

package/dist/cjs/series/index.js

@@ -38,7 +38,7 @@ const Series = ({ children }) => {
                 throw new TypeError(`A <Series.Sequence /> component (${debugInfo}) was detected to not have any children. Delete it to fix this error.`);
             }
             const durationInFramesProp = castedChild.props.durationInFrames;
-            const { durationInFrames, children: _children, ...passedProps } = castedChild.props;
+            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)({

package/dist/cjs/use-unsafe-video-config.js

@@ -13,7 +13,7 @@ const useUnsafeVideoConfig = () => {
         if (!video) {
             return null;
         }
-        const { id, durationInFrames, fps, height, width, defaultProps } = video;
+        const { id, durationInFrames, fps, height, width, defaultProps, props } = video;
         return {
             id,
             width,
@@ -21,6 +21,7 @@ const useUnsafeVideoConfig = () => {
             fps,
             durationInFrames: ctxDuration !== null && ctxDuration !== void 0 ? ctxDuration : durationInFrames,
             defaultProps,
+            props,
         };
     }, [ctxDuration, video]);
 };

package/dist/cjs/use-video.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentType, LazyExoticComponent } from 'react';
 import type { VideoConfig } from './video-config.js';
 type ReturnType = (VideoConfig & {
-    component: LazyExoticComponent<ComponentType<Record<string, unknown> | undefined>>;
+    component: LazyExoticComponent<ComponentType<Record<string, unknown>>>;
 }) | null;
 export declare const useVideo: () => ReturnType;
 export {};

package/dist/cjs/use-video.js

@@ -11,7 +11,7 @@ const useVideo = () => {
     });
     const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(context.currentComposition);
     return (0, react_1.useMemo)(() => {
-        var _a;
+        var _a, _b;
         if (!resolved) {
             return null;
         }
@@ -26,11 +26,11 @@ const useVideo = () => {
         }
         return {
             ...resolved.result,
-            defaultProps: selected.defaultProps,
+            defaultProps: (_a = selected.defaultProps) !== null && _a !== void 0 ? _a : {},
             id: selected.id,
             // We override the selected metadata with the metadata that was passed to renderMedia(),
             // and don't allow it to be changed during render anymore
-            ...((_a = context.currentCompositionMetadata) !== null && _a !== void 0 ? _a : {}),
+            ...((_b = context.currentCompositionMetadata) !== null && _b !== void 0 ? _b : {}),
             component: selected.component,
         };
     }, [context.currentCompositionMetadata, resolved, selected]);

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.1.0-alpha3";
+export declare const VERSION = "4.1.0-alpha5";

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-alpha3';
+exports.VERSION = '4.1.0-alpha5';

package/dist/cjs/video/OffthreadVideo.js

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

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

@@ -4,5 +4,6 @@ export type VideoConfig = {
     fps: number;
     durationInFrames: number;
     id: string;
-    defaultProps: Record<string, unknown> | undefined;
+    defaultProps: Record<string, unknown>;
+    props: Record<string, unknown>;
 };

package/dist/esm/index.mjs

@@ -58,7 +58,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.1.0-alpha3';
+const VERSION = '4.1.0-alpha5';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -378,7 +378,7 @@ const validateDurationInFrames = ({ allowFloats, component, durationInFrames, })
 };
 
 const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const calculatedProm = composition.calculateMetadata
         ? composition.calculateMetadata({
             defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
@@ -398,7 +398,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         typeof calculatedProm === 'object' &&
         'then' in calculatedProm) {
         return calculatedProm.then((c) => {
-            var _a, _b;
+            var _a, _b, _c;
             const { height, width, durationInFrames, fps } = validateCalculated({
                 calculated: c,
                 composition,
@@ -409,7 +409,8 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
                 fps,
                 durationInFrames,
                 id: composition.id,
-                defaultProps: (_b = (_a = c.props) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {},
+                defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
+                props: (_c = (_b = c.props) !== null && _b !== void 0 ? _b : composition.defaultProps) !== null && _c !== void 0 ? _c : {},
             };
         });
     }
@@ -421,13 +422,15 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         return {
             ...data,
             id: composition.id,
-            defaultProps: (_d = composition === null || composition === void 0 ? void 0 : composition.defaultProps) !== null && _d !== void 0 ? _d : {},
+            defaultProps: (_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {},
+            props: (_e = composition.defaultProps) !== null && _e !== void 0 ? _e : {},
         };
     }
     return {
         ...data,
         id: composition.id,
-        defaultProps: (_f = (_e = calculatedProm === null || calculatedProm === void 0 ? void 0 : calculatedProm.props) !== null && _e !== void 0 ? _e : composition.defaultProps) !== null && _f !== void 0 ? _f : {},
+        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 : {},
     };
 };
 const validateCalculated = ({ composition, calculated, }) => {
@@ -601,7 +604,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
         return composition ? (_a = allEditorProps[composition.id]) !== null && _a !== void 0 ? _a : {} : {};
     }, [allEditorProps, composition]);
     return useMemo(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!composition) {
             return null;
         }
@@ -611,7 +614,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 : {},
                 },
             };
         }
@@ -620,14 +624,15 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                 type: 'success',
                 result: {
                     ...composition,
-                    defaultProps: {
-                        ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
+                    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' ||
                             getRemotionEnvironment() === 'player-development' ||
                             getRemotionEnvironment() === 'player-production'
                             ? {}
-                            : (_c = getInputProps()) !== null && _c !== void 0 ? _c : {}),
+                            : (_d = getInputProps()) !== null && _d !== void 0 ? _d : {}),
                     },
                 },
             };
@@ -646,7 +651,7 @@ const useVideo = () => {
     });
     const resolved = useResolvedVideoConfig(context.currentComposition);
     return useMemo(() => {
-        var _a;
+        var _a, _b;
         if (!resolved) {
             return null;
         }
@@ -661,11 +666,11 @@ const useVideo = () => {
         }
         return {
             ...resolved.result,
-            defaultProps: selected.defaultProps,
+            defaultProps: (_a = selected.defaultProps) !== null && _a !== void 0 ? _a : {},
             id: selected.id,
             // We override the selected metadata with the metadata that was passed to renderMedia(),
             // and don't allow it to be changed during render anymore
-            ...((_a = context.currentCompositionMetadata) !== null && _a !== void 0 ? _a : {}),
+            ...((_b = context.currentCompositionMetadata) !== null && _b !== void 0 ? _b : {}),
             component: selected.component,
         };
     }, [context.currentCompositionMetadata, resolved, selected]);
@@ -736,7 +741,7 @@ const useUnsafeVideoConfig = () => {
         if (!video) {
             return null;
         }
-        const { id, durationInFrames, fps, height, width, defaultProps } = video;
+        const { id, durationInFrames, fps, height, width, defaultProps, props } = video;
         return {
             id,
             width,
@@ -744,6 +749,7 @@ const useUnsafeVideoConfig = () => {
             fps,
             durationInFrames: ctxDuration !== null && ctxDuration !== void 0 ? ctxDuration : durationInFrames,
             defaultProps,
+            props,
         };
     }, [ctxDuration, video]);
 };
@@ -2493,14 +2499,14 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
         if (resolved === null || resolved.type !== 'success') {
             return null;
         }
-        return createPortal(jsx(ClipComposition, { children: jsx(CanUseRemotionHooksProvider, { children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Comp, { ...((_a = resolved.result.defaultProps) !== null && _a !== void 0 ? _a : {}) }) }) }) }), portalNode());
+        return createPortal(jsx(ClipComposition, { children: jsx(CanUseRemotionHooksProvider, { children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Comp, { ...((_a = resolved.result.props) !== null && _a !== void 0 ? _a : {}) }) }) }) }), portalNode());
     }
     if (environment === 'rendering' && video && video.component === lazy) {
         const Comp = lazy;
         if (resolved === null || resolved.type !== 'success') {
             return null;
         }
-        return createPortal(jsx(CanUseRemotionHooksProvider, { children: jsx(Suspense, { fallback: jsx(Fallback, {}), children: jsx(Comp, { ...((_b = resolved.result.defaultProps) !== null && _b !== void 0 ? _b : {}) }) }) }), portalNode());
+        return createPortal(jsx(CanUseRemotionHooksProvider, { children: jsx(Suspense, { fallback: jsx(Fallback, {}), children: jsx(Comp, { ...((_b = resolved.result.props) !== null && _b !== void 0 ? _b : {}) }) }) }), portalNode());
     }
     return null;
 };
@@ -3708,7 +3714,7 @@ const Series = ({ children }) => {
                 throw new TypeError(`A <Series.Sequence /> component (${debugInfo}) was detected to not have any children. Delete it to fix this error.`);
             }
             const durationInFramesProp = castedChild.props.durationInFrames;
-            const { durationInFrames, children: _children, ...passedProps } = castedChild.props;
+            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({
@@ -4328,7 +4334,9 @@ const VideoForDevelopment = forwardRef(VideoForDevelopmentRefForwardingFunction)
  * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
  */
 const OffthreadVideo = (props) => {
-    const { startFrom, endAt, imageFormat, ...otherProps } = props;
+    // Should only destruct `startFrom` and `endAt` from props,
+    // rest gets drilled down
+    const { startFrom, endAt, ...otherProps } = props;
     const environment = useRemotionEnvironment();
     const onDuration = useCallback(() => undefined, []);
     if (typeof props.src !== 'string') {
@@ -4345,7 +4353,7 @@ const OffthreadVideo = (props) => {
     }
     validateMediaProps(props, 'Video');
     if (environment === 'rendering') {
-        return (jsx(OffthreadVideoForRendering, { imageFormat: imageFormat, ...otherProps }));
+        return jsx(OffthreadVideoForRendering, { ...otherProps });
     }
     return (jsx(VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));
 };

package/dist/esm/version.mjs

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

package/package.json

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