remotion 4.0.432 → 4.0.434

package/dist/cjs/Composition.js

@@ -69,7 +69,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
             folderName,
             component: lazy,
             defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((defaultProps !== null && defaultProps !== void 0 ? defaultProps : {})),
-            nonce,
+            nonce: nonce.get(),
             parentFolderName: parentName,
             schema: schema !== null && schema !== void 0 ? schema : null,
             calculateMetadata: (_a = compProps.calculateMetadata) !== null && _a !== void 0 ? _a : null,

package/dist/cjs/CompositionManager.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import type { AnyZodObject } from './any-zod-type.js';
 import type { CalculateMetadataFunction } from './Composition.js';
 import type { DownloadBehavior } from './download-behavior.js';
+import type { NonceHistory } from './nonce.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
 import type { SequenceSchema } from './sequence-field-schema.js';
 export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
@@ -14,7 +15,7 @@ export type TComposition<Schema extends AnyZodObject, Props extends Record<strin
     folderName: string | null;
     parentFolderName: string | null;
     component: LazyExoticComponent<ComponentType<Props>> | ComponentType<Props>;
-    nonce: number;
+    nonce: NonceHistory;
     schema: Schema | null;
     calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>> | null;
 } & PropsIfHasProps<Schema, Props>;
@@ -57,7 +58,7 @@ export type TSequence = {
     parent: string | null;
     rootId: string;
     showInTimeline: boolean;
-    nonce: number;
+    nonce: NonceHistory;
     loopDisplay: LoopDisplay | undefined;
     stack: string | null;
     premountDisplay: number | null;

package/dist/cjs/CompositionManagerContext.d.ts

@@ -2,6 +2,7 @@ import type React from 'react';
 import type { AnyZodObject } from './any-zod-type.js';
 import type { AnyComposition, TComposition } from './CompositionManager.js';
 import type { TFolder } from './Folder.js';
+import type { NonceHistory } from './nonce.js';
 import type { VideoConfig } from './video-config.js';
 export type BaseMetadata = Pick<VideoConfig, 'durationInFrames' | 'fps' | 'props' | 'height' | 'width' | 'defaultCodec' | 'defaultOutName' | 'defaultVideoImageFormat' | 'defaultPixelFormat' | 'defaultProResProfile'>;
 export type CanvasContent = {
@@ -24,7 +25,7 @@ export type CanvasContent = {
 export type CompositionManagerSetters = {
     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;
+    registerFolder: (name: string, parent: string | null, nonce: NonceHistory) => void;
     unregisterFolder: (name: string, parent: string | null) => void;
     setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
     updateCompositionDefaultProps: (id: string, newDefaultProps: Record<string, unknown>) => void;

package/dist/cjs/CompositionManagerProvider.js

@@ -23,10 +23,7 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
             if (comps.find((c) => c.id === comp.id)) {
                 throw new Error(`Multiple composition with id ${comp.id} are registered.`);
             }
-            const value = [...comps, comp]
-                .slice()
-                .sort((a, b) => a.nonce - b.nonce);
-            return value;
+            return [...comps, comp];
         });
     }, [updateCompositions]);
     const unregisterComposition = (0, react_1.useCallback)((id) => {
@@ -34,13 +31,14 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
             return comps.filter((c) => c.id !== id);
         });
     }, []);
-    const registerFolder = (0, react_1.useCallback)((name, parent) => {
+    const registerFolder = (0, react_1.useCallback)((name, parent, nonce) => {
         setFolders((prevFolders) => {
             return [
                 ...prevFolders,
                 {
                     name,
                     parent,
+                    nonce,
                 },
             ];
         });

package/dist/cjs/Folder.d.ts

@@ -1,7 +1,9 @@
 import type { FC } from 'react';
+import type { NonceHistory } from './nonce.js';
 export type TFolder = {
     name: string;
     parent: string | null;
+    nonce: NonceHistory;
 };
 type FolderContextType = {
     folderName: string | null;

package/dist/cjs/Folder.js

@@ -4,6 +4,7 @@ exports.Folder = exports.FolderContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
+const nonce_js_1 = require("./nonce.js");
 const truthy_js_1 = require("./truthy.js");
 const validate_folder_name_js_1 = require("./validation/validate-folder-name.js");
 exports.FolderContext = (0, react_1.createContext)({
@@ -17,6 +18,7 @@ exports.FolderContext = (0, react_1.createContext)({
 const Folder = ({ name, children }) => {
     const parent = (0, react_1.useContext)(exports.FolderContext);
     const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
+    const nonce = (0, nonce_js_1.useNonce)();
     (0, validate_folder_name_js_1.validateFolderName)(name);
     const parentNameArr = [parent.parentName, parent.folderName].filter(truthy_js_1.truthy);
     const parentName = parentNameArr.length === 0 ? null : parentNameArr.join('/');
@@ -27,11 +29,18 @@ const Folder = ({ name, children }) => {
         };
     }, [name, parentName]);
     (0, react_1.useEffect)(() => {
-        registerFolder(name, parentName);
+        registerFolder(name, parentName, nonce.get());
         return () => {
             unregisterFolder(name, parentName);
         };
-    }, [name, parent.folderName, parentName, registerFolder, unregisterFolder]);
+    }, [
+        name,
+        parent.folderName,
+        parentName,
+        registerFolder,
+        unregisterFolder,
+        nonce,
+    ]);
     return ((0, jsx_runtime_1.jsx)(exports.FolderContext.Provider, { value: value, children: children }));
 };
 exports.Folder = Folder;

package/dist/cjs/RemotionRoot.d.ts

@@ -8,6 +8,5 @@ export declare const RemotionRootContexts: React.FC<{
     readonly videoEnabled: boolean;
     readonly audioEnabled: boolean;
     readonly frameState: Record<string, number> | null;
-    readonly nonceContextSeed: number;
     readonly visualModeEnabled: boolean;
 }>;

package/dist/cjs/RemotionRoot.js

@@ -13,14 +13,13 @@ const SequenceManager_js_1 = require("./SequenceManager.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_media_enabled_js_1 = require("./use-media-enabled.js");
 const duration_state_js_1 = require("./video/duration-state.js");
-const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, videoEnabled, audioEnabled, frameState, nonceContextSeed, visualModeEnabled, }) => {
+const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, videoEnabled, audioEnabled, frameState, visualModeEnabled, }) => {
     const nonceContext = (0, react_1.useMemo)(() => {
         let counter = 0;
         return {
             getNonce: () => counter++,
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [nonceContextSeed]);
+    }, []);
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);

package/dist/cjs/Sequence.js

@@ -11,7 +11,6 @@ const PremountContext_js_1 = require("./PremountContext.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
-const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_current_frame_1 = require("./use-current-frame");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
@@ -21,7 +20,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const { rootId } = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
+    const { rootId } = (0, timeline_position_state_js_1.useTimelineContext)();
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
@@ -110,7 +109,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             type: 'sequence',
             rootId,
             showInTimeline,
-            nonce,
+            nonce: nonce.get(),
             loopDisplay,
             stack: stack !== null && stack !== void 0 ? stack : inheritedStack,
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
@@ -203,7 +202,7 @@ const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
         styleWhilePremounted,
         styleWhilePostmounted,
     ]);
-    const { playing } = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
+    const { playing } = (0, timeline_position_state_js_1.useTimelineContext)();
     const premountFramesRemaining = premountingActive ? from - frame : 0;
     const premountContextValue = (0, react_1.useMemo)(() => {
         return {

package/dist/cjs/TimelineContext.d.ts

@@ -15,8 +15,8 @@ export type SetTimelineContextValue = {
     setPlaying: (u: React.SetStateAction<boolean>) => void;
 };
 export declare const SetTimelineContext: React.Context<SetTimelineContextValue>;
-export declare const TimelineContext: React.Context<TimelineContextValue>;
-export declare const AbsoluteTimeContext: React.Context<TimelineContextValue>;
+export declare const TimelineContext: React.Context<TimelineContextValue | null>;
+export declare const AbsoluteTimeContext: React.Context<TimelineContextValue | null>;
 export declare const TimelineContextProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly frameState: Record<string, number> | null;

package/dist/cjs/TimelineContext.js

@@ -14,32 +14,8 @@ exports.SetTimelineContext = (0, react_1.createContext)({
         throw new Error('default');
     },
 });
-exports.TimelineContext = (0, react_1.createContext)({
-    frame: {},
-    playing: false,
-    playbackRate: 1,
-    rootId: '',
-    imperativePlaying: {
-        current: false,
-    },
-    setPlaybackRate: () => {
-        throw new Error('default');
-    },
-    audioAndVideoTags: { current: [] },
-});
-exports.AbsoluteTimeContext = (0, react_1.createContext)({
-    frame: {},
-    playing: false,
-    playbackRate: 1,
-    rootId: '',
-    imperativePlaying: {
-        current: false,
-    },
-    setPlaybackRate: () => {
-        throw new Error('default');
-    },
-    audioAndVideoTags: { current: [] },
-});
+exports.TimelineContext = (0, react_1.createContext)(null);
+exports.AbsoluteTimeContext = (0, react_1.createContext)(null);
 const TimelineContextProvider = ({ children, frameState }) => {
     const [playing, setPlaying] = (0, react_1.useState)(false);
     const imperativePlaying = (0, react_1.useRef)(false);

package/dist/cjs/freeze.js

@@ -4,6 +4,7 @@ exports.Freeze = void 0;
 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 TimelineContext_js_1 = require("./TimelineContext.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
 const use_video_config_js_1 = require("./use-video-config.js");
@@ -35,7 +36,7 @@ const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
             return active(frame);
         }
     }, [active, frame]);
-    const timelineContext = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
+    const timelineContext = (0, timeline_position_state_js_1.useTimelineContext)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const relativeFrom = (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0;
     const timelineValue = (0, react_1.useMemo)(() => {

package/dist/cjs/get-effective-visual-mode-value.d.ts

@@ -1,7 +1,8 @@
 import type { CanUpdateSequencePropStatus } from './use-schema';
-export declare const getEffectiveVisualModeValue: ({ codeValue, runtimeValue, dragOverrideValue, defaultValue, }: {
+export declare const getEffectiveVisualModeValue: ({ codeValue, runtimeValue, dragOverrideValue, defaultValue, shouldResortToDefaultValueIfUndefined, }: {
     codeValue: CanUpdateSequencePropStatus | null;
     runtimeValue: unknown;
     dragOverrideValue: unknown;
     defaultValue: unknown;
+    shouldResortToDefaultValueIfUndefined: boolean;
 }) => unknown;

package/dist/cjs/get-effective-visual-mode-value.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEffectiveVisualModeValue = void 0;
-const getEffectiveVisualModeValue = ({ codeValue, runtimeValue, dragOverrideValue, defaultValue, }) => {
+const getEffectiveVisualModeValue = ({ codeValue, runtimeValue, dragOverrideValue, defaultValue, shouldResortToDefaultValueIfUndefined = false, }) => {
     if (dragOverrideValue !== undefined) {
         return dragOverrideValue;
     }
@@ -11,7 +11,8 @@ const getEffectiveVisualModeValue = ({ codeValue, runtimeValue, dragOverrideValu
     if (!codeValue.canUpdate) {
         return runtimeValue;
     }
-    if (codeValue.codeValue === undefined) {
+    if (codeValue.codeValue === undefined &&
+        shouldResortToDefaultValueIfUndefined) {
         return defaultValue;
     }
     return codeValue.codeValue;

package/dist/cjs/index.d.ts

@@ -105,6 +105,7 @@ export { DownloadBehavior } from './download-behavior.js';
 export * from './easing.js';
 export * from './Folder.js';
 export * from './freeze.js';
+export type { NonceHistory } from './nonce.js';
 export { getRemotionEnvironment } from './get-remotion-environment.js';
 export { getStaticFiles, StaticFile } from './get-static-files.js';
 export * from './IFrame.js';

package/dist/cjs/internals.d.ts

@@ -6,6 +6,7 @@ import type { CompositionManagerContext } from './CompositionManagerContext.js';
 import * as CSSUtils from './default-css.js';
 import type { SerializedJSONWithCustomFields } from './input-props-serialization.js';
 import type { LoggingContextValue } from './log-level-context.js';
+import type { NonceHistory } from './nonce.js';
 import type { RemotionEnvironment } from './remotion-environment-context.js';
 import type { SequenceFieldSchema, SequenceSchema } from './sequence-field-schema.js';
 import type { ResolvedStackLocation } from './sequence-stack-traces.js';
@@ -84,6 +85,9 @@ export declare const Internals: {
         controls: import("./CompositionManager.js").SequenceControls | undefined;
         values: T;
     };
+    readonly wrapInSchema: <S extends SequenceSchema, Props extends object>(Component: React.ComponentType<Props & {
+        readonly controls: import("./CompositionManager.js").SequenceControls | undefined;
+    }>, schema: S) => React.ComponentType<Props>;
     readonly useSequenceControlOverride: (key: string) => unknown | undefined;
     readonly RemotionRootContexts: import("react").FC<{
         readonly children: React.ReactNode;
@@ -93,7 +97,6 @@ export declare const Internals: {
         readonly videoEnabled: boolean;
         readonly audioEnabled: boolean;
         readonly frameState: Record<string, number> | null;
-        readonly nonceContextSeed: number;
         readonly visualModeEnabled: boolean;
     }>;
     readonly CompositionManagerProvider: ({ children, onlyRenderComposition, currentCompositionMetadata, initialCompositions, initialCanvasContent, }: {
@@ -277,6 +280,7 @@ export declare const Internals: {
     readonly persistCurrentFrame: (time: {
         [x: string]: number;
     }) => void;
+    readonly useTimelineContext: () => TimelineContextValue;
     readonly useTimelineSetFrame: () => ((u: React.SetStateAction<Record<string, number>>) => void);
     readonly isIosSafari: () => boolean;
     readonly WATCH_REMOTION_STATIC_FILES: "remotion_staticFilesChanged";
@@ -407,7 +411,7 @@ export declare const Internals: {
         volumes: string | number;
         duration: number;
         doesVolumeChange: boolean;
-        nonce: number;
+        nonce: import("./nonce.js").NonceHistoryContext;
         rootId: string;
         isStudio: boolean;
         finalDisplayName: string;
@@ -432,17 +436,18 @@ export declare const Internals: {
     }) => boolean;
     readonly TimelinePosition: typeof TimelinePosition;
     readonly DelayRenderContextType: import("react").Context<import("./delay-render.js").DelayRenderScope | null>;
-    readonly TimelineContext: import("react").Context<TimelineContextValue>;
-    readonly AbsoluteTimeContext: import("react").Context<TimelineContextValue>;
+    readonly TimelineContext: import("react").Context<TimelineContextValue | null>;
+    readonly AbsoluteTimeContext: import("react").Context<TimelineContextValue | null>;
     readonly RenderAssetManagerProvider: import("react").FC<{
         children: React.ReactNode;
         collectAssets: null | React.RefObject<import("./RenderAssetManager.js").CollectAssetsRef | null>;
     }>;
-    readonly getEffectiveVisualModeValue: ({ codeValue, runtimeValue, dragOverrideValue, defaultValue, }: {
+    readonly getEffectiveVisualModeValue: ({ codeValue, runtimeValue, dragOverrideValue, defaultValue, shouldResortToDefaultValueIfUndefined, }: {
         codeValue: CanUpdateSequencePropStatus | null;
         runtimeValue: unknown;
         dragOverrideValue: unknown;
         defaultValue: unknown;
+        shouldResortToDefaultValueIfUndefined: boolean;
     }) => unknown;
 };
-export type { CompositionManagerContext, ResolvedStackLocation, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SequenceFieldSchema, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, ScheduleAudioNodeOptions, CanUpdateSequencePropStatus, ScheduleAudioNodeResult, };
+export type { CompositionManagerContext, ResolvedStackLocation, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SequenceFieldSchema, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, ScheduleAudioNodeOptions, CanUpdateSequencePropStatus, ScheduleAudioNodeResult, NonceHistory, };

package/dist/cjs/internals.js

@@ -98,6 +98,7 @@ const volume_position_state_js_1 = require("./volume-position-state.js");
 const volume_prop_js_1 = require("./volume-prop.js");
 const volume_safeguard_js_1 = require("./volume-safeguard.js");
 const watch_static_file_js_1 = require("./watch-static-file.js");
+const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 const wrap_remotion_context_js_1 = require("./wrap-remotion-context.js");
 // needs to be in core package so gets deduplicated in studio
 const compositionSelectorRef = (0, react_1.createRef)();
@@ -123,6 +124,7 @@ exports.Internals = {
     SequenceStackTracesUpdateContext: sequence_stack_traces_js_1.SequenceStackTracesUpdateContext,
     SequenceVisibilityToggleContext: SequenceManager_js_1.SequenceVisibilityToggleContext,
     useSchema: use_schema_js_1.useSchema,
+    wrapInSchema: wrap_in_schema_js_1.wrapInSchema,
     useSequenceControlOverride: use_sequence_control_override_js_1.useSequenceControlOverride,
     RemotionRootContexts: RemotionRoot_js_1.RemotionRootContexts,
     CompositionManagerProvider: CompositionManagerProvider_js_1.CompositionManagerProvider,
@@ -170,6 +172,7 @@ exports.Internals = {
     REMOTION_STUDIO_CONTAINER_ELEMENT: get_preview_dom_element_js_1.REMOTION_STUDIO_CONTAINER_ELEMENT,
     RenderAssetManager: RenderAssetManager_js_1.RenderAssetManager,
     persistCurrentFrame: timeline_position_state_js_1.persistCurrentFrame,
+    useTimelineContext: timeline_position_state_js_1.useTimelineContext,
     useTimelineSetFrame: timeline_position_state_js_1.useTimelineSetFrame,
     isIosSafari: video_fragment_js_1.isIosSafari,
     WATCH_REMOTION_STATIC_FILES: watch_static_file_js_1.WATCH_REMOTION_STATIC_FILES,

package/dist/cjs/nonce.d.ts

@@ -1,5 +1,11 @@
 export type TNonceContext = {
     getNonce: () => number;
 };
+type NonceHistoryItem = [number, number];
+export type NonceHistory = NonceHistoryItem[];
+export type NonceHistoryContext = {
+    get: () => NonceHistory;
+};
 export declare const NonceContext: import("react").Context<TNonceContext>;
-export declare const useNonce: () => number;
+export declare const useNonce: () => NonceHistoryContext;
+export {};

package/dist/cjs/nonce.js

@@ -5,18 +5,38 @@ const react_1 = require("react");
 exports.NonceContext = (0, react_1.createContext)({
     getNonce: () => 0,
 });
+let fastRefreshNonce = 0;
+try {
+    if (typeof __webpack_module__ !== 'undefined') {
+        if (__webpack_module__.hot) {
+            __webpack_module__.hot.addStatusHandler((status) => {
+                if (status === 'idle') {
+                    fastRefreshNonce++;
+                }
+            });
+        }
+    }
+}
+catch (_a) {
+    // __webpack_module__ may throw ReferenceError in some environments
+}
 const useNonce = () => {
     const context = (0, react_1.useContext)(exports.NonceContext);
-    const [nonce, setNonce] = (0, react_1.useState)(() => context.getNonce());
-    const lastContext = (0, react_1.useRef)(context);
-    // Only if context changes, but not initially
-    (0, react_1.useEffect)(() => {
-        if (lastContext.current === context) {
-            return;
+    const nonce = context.getNonce();
+    const nonceRef = (0, react_1.useRef)(nonce);
+    nonceRef.current = nonce;
+    const history = (0, react_1.useRef)([[fastRefreshNonce, nonce]]);
+    const get = (0, react_1.useCallback)(() => {
+        if (fastRefreshNonce !== history.current[history.current.length - 1][0]) {
+            history.current = [
+                ...history.current,
+                [fastRefreshNonce, nonceRef.current],
+            ];
         }
-        lastContext.current = context;
-        setNonce(context.getNonce);
-    }, [context]);
-    return nonce;
+        return history.current;
+    }, [history]);
+    return (0, react_1.useMemo)(() => {
+        return { get };
+    }, [get]);
 };
 exports.useNonce = useNonce;

package/dist/cjs/sequence-field-schema.d.ts

@@ -11,6 +11,18 @@ export type BooleanFieldSchema = {
     default: boolean;
     description?: string;
 };
-export type SequenceFieldSchema = NumberFieldSchema | BooleanFieldSchema;
+export type RotationFieldSchema = {
+    type: 'rotation';
+    step?: number;
+    default: string | undefined;
+    description?: string;
+};
+export type TranslateFieldSchema = {
+    type: 'translate';
+    step?: number;
+    default: string | undefined;
+    description?: string;
+};
+export type SequenceFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationFieldSchema | TranslateFieldSchema;
 export type SequenceSchema = Record<string, SequenceFieldSchema>;
 export type SchemaKeysRecord<S extends SequenceSchema> = Record<keyof S, unknown>;

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

@@ -1,4 +1,5 @@
 import type { MutableRefObject } from 'react';
+import { type TimelineContextValue } from './TimelineContext.js';
 export type PlayableMediaTag = {
     play: (reason: string) => void;
     id: string;
@@ -7,6 +8,7 @@ type CurrentTimePerComposition = Record<string, number>;
 export declare const persistCurrentFrame: (time: CurrentTimePerComposition) => void;
 export declare const getInitialFrameState: () => CurrentTimePerComposition;
 export declare const getFrameForComposition: (composition: string) => number;
+export declare const useTimelineContext: () => TimelineContextValue;
 export declare const useTimelinePosition: () => number;
 export declare const useAbsoluteTimelinePosition: () => number;
 export declare const useTimelineSetFrame: () => ((u: React.SetStateAction<Record<string, number>>) => void);

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePlayingState = exports.useTimelineSetFrame = exports.useAbsoluteTimelinePosition = exports.useTimelinePosition = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
+exports.usePlayingState = exports.useTimelineSetFrame = exports.useAbsoluteTimelinePosition = exports.useTimelinePosition = exports.useTimelineContext = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
 const react_1 = require("react");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -44,13 +44,24 @@ const useTimelinePositionFromContext = (state) => {
     const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : (env.isPlayer ? 0 : (0, exports.getFrameForComposition)(videoConfig.id));
     return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
-const useTimelinePosition = () => {
+const useTimelineContext = () => {
     const state = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
+    if (state === null) {
+        throw new Error('TimelineContext is not available. This hook must be used inside a <Player> or the Remotion Studio.');
+    }
+    return state;
+};
+exports.useTimelineContext = useTimelineContext;
+const useTimelinePosition = () => {
+    const state = (0, exports.useTimelineContext)();
     return useTimelinePositionFromContext(state);
 };
 exports.useTimelinePosition = useTimelinePosition;
 const useAbsoluteTimelinePosition = () => {
     const state = (0, react_1.useContext)(TimelineContext_js_1.AbsoluteTimeContext);
+    if (state === null) {
+        throw new Error('AbsoluteTimeContext is not available. This hook must be used inside a <Player> or the Remotion Studio.');
+    }
     return useTimelinePositionFromContext(state);
 };
 exports.useAbsoluteTimelinePosition = useAbsoluteTimelinePosition;
@@ -60,7 +71,7 @@ const useTimelineSetFrame = () => {
 };
 exports.useTimelineSetFrame = useTimelineSetFrame;
 const usePlayingState = () => {
-    const { playing, imperativePlaying } = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
+    const { playing, imperativePlaying } = (0, exports.useTimelineContext)();
     const { setPlaying } = (0, react_1.useContext)(TimelineContext_js_1.SetTimelineContext);
     return (0, react_1.useMemo)(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
 };

package/dist/cjs/use-media-in-timeline.d.ts

@@ -13,7 +13,7 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType,
     volumes: string | number;
     duration: number;
     doesVolumeChange: boolean;
-    nonce: number;
+    nonce: import("./nonce.js").NonceHistoryContext;
     rootId: string;
     isStudio: boolean;
     finalDisplayName: string;

package/dist/cjs/use-media-in-timeline.js

@@ -8,7 +8,7 @@ const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
 const nonce_js_1 = require("./nonce.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
-const TimelineContext_js_1 = require("./TimelineContext.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const volume_prop_js_1 = require("./volume-prop.js");
@@ -60,7 +60,7 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
     }, [initialVolume, mediaType, src, volume]);
     const doesVolumeChange = typeof volume === 'function';
     const nonce = (0, nonce_js_1.useNonce)();
-    const { rootId } = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
+    const { rootId } = (0, timeline_position_state_js_1.useTimelineContext)();
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     return {
         volumes,
@@ -109,7 +109,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             rootId,
             volume: volumes,
             showInTimeline: true,
-            nonce,
+            nonce: nonce.get(),
             startMediaFrom: 0 - startsAt,
             doesVolumeChange,
             loopDisplay,

package/dist/cjs/use-media-playback.js

@@ -12,7 +12,6 @@ const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-al
 const playback_logging_js_1 = require("./playback-logging.js");
 const seek_js_1 = require("./seek.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
-const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
 const use_media_buffering_js_1 = require("./use-media-buffering.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -21,7 +20,7 @@ const use_video_config_js_1 = require("./use-video-config.js");
 const get_current_time_js_1 = require("./video/get-current-time.js");
 const warn_about_non_seekable_media_js_1 = require("./warn-about-non-seekable-media.js");
 const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, isPostmounting, onAutoPlayError, }) => {
-    const { playbackRate: globalPlaybackRate } = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
+    const { playbackRate: globalPlaybackRate } = (0, timeline_position_state_js_1.useTimelineContext)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const [playing] = (0, timeline_position_state_js_1.usePlayingState)();

package/dist/cjs/use-media-tag.js

@@ -4,10 +4,10 @@ exports.useMediaTag = void 0;
 const react_1 = require("react");
 const log_level_context_js_1 = require("./log-level-context.js");
 const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
-const TimelineContext_js_1 = require("./TimelineContext.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const useMediaTag = ({ mediaRef, id, mediaType, onAutoPlayError, isPremounting, isPostmounting, }) => {
-    const { audioAndVideoTags, imperativePlaying } = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
+    const { audioAndVideoTags, imperativePlaying } = (0, timeline_position_state_js_1.useTimelineContext)();
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const mountTime = (0, log_level_context_js_1.useMountTime)();
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();

package/dist/cjs/use-schema.js

@@ -60,6 +60,7 @@ const useSchema = (schema, currentValue) => {
                 runtimeValue: currentValue[key],
                 dragOverrideValue: overrideValues[key],
                 defaultValue: (_c = schema[key]) === null || _c === void 0 ? void 0 : _c.default,
+                shouldResortToDefaultValueIfUndefined: false,
             });
         }
         return {

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.432";
+export declare const VERSION = "4.0.434";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.432';
+exports.VERSION = '4.0.434';

package/dist/cjs/wrap-in-schema.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { SequenceControls } from './CompositionManager.js';
+import type { SequenceSchema } from './sequence-field-schema.js';
+export declare const wrapInSchema: <S extends SequenceSchema, Props extends object>(Component: React.ComponentType<Props & {
+    readonly controls: SequenceControls | undefined;
+}>, schema: S) => React.ComponentType<Props>;