remotion 4.0.431 → 4.0.433

package/README.md

@@ -10,7 +10,6 @@
 [![Discord Shield](https://img.shields.io/discord/809501355504959528?color=000000&label=Discord&logo=fdgssdf)](https://remotion.dev/discord)
 [![NPM Version](https://img.shields.io/npm/v/remotion.svg?style=flat&color=black)](https://www.npmjs.org/package/remotion)
 [![NPM Downloads](https://img.shields.io/npm/dm/remotion.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/remotion?minimal=true)
-[![Open Bounties](https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2Fremotion%2Fbounties%3Fstatus%3Dopen&style=flat&color=black&labelColor=grey&label=Open+Bounties)](https://github.com/remotion-dev/remotion/issues?q=is%3Aopen+label%3A%22%F0%9F%92%8E+Bounty%22+sort%3Aupdated-desc)
 <a href="https://twitter.com/remotion"><img src="https://img.shields.io/twitter/follow/remotion?label=Twitter&color=black" alt="Twitter"></a>
 
 Remotion is a framework for **creating videos programmatically using React.**

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/Img.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Img = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const cancel_render_js_1 = require("./cancel-render.js");
 const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
 const prefetch_js_1 = require("./prefetch.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
@@ -49,6 +48,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
             imageRef.current.setAttribute('src', newSrc);
         }, timeout);
     }, []);
+    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const didGetError = (0, react_1.useCallback)((e) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (!errors.current) {
@@ -68,9 +68,14 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
             retryIn(backoff);
             return;
         }
-        (0, cancel_render_js_1.cancelRender)('Error loading image with src: ' + ((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
-    }, [maxRetries, onError, retryIn]);
-    const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
+        try {
+            cancelRender('Error loading image with src: ' + ((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
+        }
+        catch (_m) {
+            // cancelRender() intentionally throws after storing the error in scope.
+            // In async image callbacks, we rely on the stored error for renderer propagation.
+        }
+    }, [cancelRender, maxRetries, onError, retryIn]);
     if (typeof window !== 'undefined') {
         const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
         const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
@@ -125,7 +130,11 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                 // fall back to onload event if decode() fails
                 // eslint-disable-next-line no-console
                 console.warn(err);
-                if (current.complete) {
+                // HTMLImageElement.complete is also true for broken images (e.g. 404),
+                // so only treat it as loaded if intrinsic dimensions are available.
+                if (current.complete &&
+                    current.naturalWidth > 0 &&
+                    current.naturalHeight > 0) {
                     onComplete();
                 }
                 else {

package/dist/cjs/RemotionRoot.d.ts

@@ -8,5 +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,17 +13,16 @@ 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, }) => {
+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]);
-    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { visualModeEnabled: visualModeEnabled, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRootContexts = RemotionRootContexts;

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,
@@ -169,7 +168,8 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
 const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-    const frame = (0, use_current_frame_1.useCurrentFrame)();
+    const parentPremountContext = (0, react_1.useContext)(PremountContext_js_1.PremountContext);
+    const frame = (0, use_current_frame_1.useCurrentFrame)() - parentPremountContext.premountFramesRemaining;
     if (props.layout === 'none') {
         throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
     }
@@ -202,10 +202,8 @@ const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
         styleWhilePremounted,
         styleWhilePostmounted,
     ]);
-    const parentPremountContext = (0, react_1.useContext)(PremountContext_js_1.PremountContext);
-    const { playing } = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
-    const premountFramesRemaining = parentPremountContext.premountFramesRemaining +
-        (premountingActive ? from - frame : 0);
+    const { playing } = (0, timeline_position_state_js_1.useTimelineContext)();
+    const premountFramesRemaining = premountingActive ? from - frame : 0;
     const premountContextValue = (0, react_1.useMemo)(() => {
         return {
             premountFramesRemaining,

package/dist/cjs/SequenceManager.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { TSequence } from './CompositionManager.js';
+import type { CanUpdateSequencePropStatus } from './use-schema.js';
 export type SequenceManagerContext = {
     registerSequence: (seq: TSequence) => void;
     unregisterSequence: (id: string) => void;
@@ -11,12 +12,16 @@ export type SequenceVisibilityToggleState = {
     setHidden: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
 };
 export declare const SequenceVisibilityToggleContext: React.Context<SequenceVisibilityToggleState>;
-export type SequenceControlOverrideState = {
-    overrides: Record<string, Record<string, unknown>>;
-    setOverride: (sequenceId: string, key: string, value: unknown) => void;
-    clearOverrides: (sequenceId: string) => void;
+export type VisualModeOverrides = {
+    visualModeEnabled: boolean;
+    dragOverrides: Record<string, Record<string, unknown>>;
+    setDragOverrides: (sequenceId: string, key: string, value: unknown) => void;
+    clearDragOverrides: (sequenceId: string) => void;
+    codeValues: Record<string, Record<string, CanUpdateSequencePropStatus>>;
+    setCodeValues: (sequenceId: string, values: Record<string, CanUpdateSequencePropStatus> | null) => void;
 };
-export declare const SequenceControlOverrideContext: React.Context<SequenceControlOverrideState>;
+export declare const VisualModeOverridesContext: React.Context<VisualModeOverrides>;
 export declare const SequenceManagerProvider: React.FC<{
     readonly children: React.ReactNode;
+    readonly visualModeEnabled: boolean;
 }>;

package/dist/cjs/SequenceManager.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceManagerProvider = exports.SequenceControlOverrideContext = exports.SequenceVisibilityToggleContext = exports.SequenceManager = void 0;
+exports.SequenceManagerProvider = exports.VisualModeOverridesContext = exports.SequenceVisibilityToggleContext = exports.SequenceManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 exports.SequenceManager = react_1.default.createContext({
@@ -51,22 +51,28 @@ exports.SequenceVisibilityToggleContext = react_1.default.createContext({
         throw new Error('SequenceVisibilityToggle not initialized');
     },
 });
-exports.SequenceControlOverrideContext = react_1.default.createContext({
-    overrides: {},
-    setOverride: () => {
-        throw new Error('SequenceControlOverrideContext not initialized');
+exports.VisualModeOverridesContext = react_1.default.createContext({
+    dragOverrides: {},
+    setDragOverrides: () => {
+        throw new Error('VisualModeOverridesContext not initialized');
     },
-    clearOverrides: () => {
-        throw new Error('SequenceControlOverrideContext not initialized');
+    clearDragOverrides: () => {
+        throw new Error('VisualModeOverridesContext not initialized');
     },
+    codeValues: {},
+    setCodeValues: () => {
+        throw new Error('VisualModeOverridesContext not initialized');
+    },
+    visualModeEnabled: false,
 });
-const SequenceManagerProvider = ({ children }) => {
+const SequenceManagerProvider = ({ children, visualModeEnabled }) => {
     const [sequences, setSequences] = (0, react_1.useState)([]);
     const [hidden, setHidden] = (0, react_1.useState)({});
-    const [controlOverrides, setControlOverrides] = (0, react_1.useState)({});
-    const controlOverridesRef = (0, react_1.useRef)(controlOverrides);
-    controlOverridesRef.current = controlOverrides;
-    const setOverride = (0, react_1.useCallback)((sequenceId, key, value) => {
+    const [dragOverrides, setControlOverrides] = (0, react_1.useState)({});
+    const controlOverridesRef = (0, react_1.useRef)(dragOverrides);
+    controlOverridesRef.current = dragOverrides;
+    const [codeValues, setCodeValuesMapState] = (0, react_1.useState)({});
+    const setDragOverrides = (0, react_1.useCallback)((sequenceId, key, value) => {
         setControlOverrides((prev) => ({
             ...prev,
             [sequenceId]: {
@@ -75,7 +81,7 @@ const SequenceManagerProvider = ({ children }) => {
             },
         }));
     }, []);
-    const clearOverrides = (0, react_1.useCallback)((sequenceId) => {
+    const clearDragOverrides = (0, react_1.useCallback)((sequenceId) => {
         setControlOverrides((prev) => {
             if (!prev[sequenceId]) {
                 return prev;
@@ -85,6 +91,22 @@ const SequenceManagerProvider = ({ children }) => {
             return next;
         });
     }, []);
+    const setCodeValues = (0, react_1.useCallback)((sequenceId, values) => {
+        setCodeValuesMapState((prev) => {
+            if (prev[sequenceId] === values) {
+                return prev;
+            }
+            if (values === null) {
+                if (!(sequenceId in prev)) {
+                    return prev;
+                }
+                const next = { ...prev };
+                delete next[sequenceId];
+                return next;
+            }
+            return { ...prev, [sequenceId]: values };
+        });
+    }, []);
     const registerSequence = (0, react_1.useCallback)((seq) => {
         setSequences((seqs) => {
             return [...seqs, seq];
@@ -108,11 +130,21 @@ const SequenceManagerProvider = ({ children }) => {
     }, [hidden]);
     const overrideContext = (0, react_1.useMemo)(() => {
         return {
-            overrides: controlOverrides,
-            setOverride,
-            clearOverrides,
+            visualModeEnabled,
+            dragOverrides,
+            setDragOverrides,
+            clearDragOverrides,
+            codeValues,
+            setCodeValues,
         };
-    }, [controlOverrides, setOverride, clearOverrides]);
-    return ((0, jsx_runtime_1.jsx)(exports.SequenceManager.Provider, { value: sequenceContext, children: (0, jsx_runtime_1.jsx)(exports.SequenceVisibilityToggleContext.Provider, { value: hiddenContext, children: (0, jsx_runtime_1.jsx)(exports.SequenceControlOverrideContext.Provider, { value: overrideContext, children: children }) }) }));
+    }, [
+        visualModeEnabled,
+        dragOverrides,
+        setDragOverrides,
+        clearDragOverrides,
+        codeValues,
+        setCodeValues,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(exports.SequenceManager.Provider, { value: sequenceContext, children: (0, jsx_runtime_1.jsx)(exports.SequenceVisibilityToggleContext.Provider, { value: hiddenContext, children: (0, jsx_runtime_1.jsx)(exports.VisualModeOverridesContext.Provider, { value: overrideContext, children: children }) }) }));
 };
 exports.SequenceManagerProvider = SequenceManagerProvider;

package/dist/cjs/TimelineContext.d.ts

@@ -15,7 +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 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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineContextProvider = exports.TimelineContext = exports.SetTimelineContext = void 0;
+exports.TimelineContextProvider = exports.AbsoluteTimeContext = exports.TimelineContext = exports.SetTimelineContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const random_1 = require("./random");
@@ -14,19 +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.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);
@@ -84,6 +73,6 @@ const TimelineContextProvider = ({ children, frameState }) => {
             setPlaying,
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(exports.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.AbsoluteTimeContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(exports.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }) }));
 };
 exports.TimelineContextProvider = TimelineContextProvider;

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

@@ -1,4 +1,4 @@
-import type { AudioHTMLAttributes } from 'react';
+import { type AudioHTMLAttributes } from 'react';
 import React from 'react';
 import type { SharedElementSourceNode } from './shared-element-source-node.js';
 /**
@@ -23,6 +23,21 @@ type AudioElem = {
     audioMounted: boolean;
     cleanupOnMediaTagUnmount: () => void;
 };
+export type ScheduleAudioNodeResult = {
+    type: 'started';
+    scheduledTime: number;
+} | {
+    type: 'not-started';
+};
+export type ScheduleAudioNodeOptions = {
+    readonly node: AudioBufferSourceNode;
+    readonly targetTime: number;
+    readonly mediaTimestamp: number;
+    readonly currentTime: number;
+    readonly sequenceEndTime: number;
+    readonly sequenceStartTime: number;
+    readonly debugAudioScheduling: boolean;
+};
 type SharedContext = {
     registerAudio: (options: {
         aud: AudioHTMLAttributes<HTMLAudioElement>;
@@ -41,6 +56,10 @@ type SharedContext = {
     playAllAudios: () => void;
     numberOfAudioTags: number;
     audioContext: AudioContext | null;
+    audioSyncAnchor: {
+        value: number;
+    };
+    scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
 };
 export declare const SharedAudioContext: React.Context<SharedContext | null>;
 export declare const SharedAudioContextProvider: React.FC<{

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

@@ -37,6 +37,7 @@ exports.useSharedAudio = exports.SharedAudioContextProvider = exports.SharedAudi
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const log_level_context_js_1 = require("../log-level-context.js");
+const log_js_1 = require("../log.js");
 const play_and_handle_not_allowed_error_js_1 = require("../play-and-handle-not-allowed-error.js");
 const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
 const shared_element_source_node_js_1 = require("./shared-element-source-node.js");
@@ -87,6 +88,74 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
         latencyHint: audioLatencyHint,
         audioEnabled,
     });
+    const audioSyncAnchor = (0, react_1.useMemo)(() => ({ value: 0 }), []);
+    const prevEndTimes = (0, react_1.useRef)({ scheduledEndTime: null, mediaEndTime: null });
+    const scheduleAudioNode = (0, react_1.useMemo)(() => {
+        return ({ node, mediaTimestamp, targetTime, currentTime, sequenceEndTime, sequenceStartTime, debugAudioScheduling, }) => {
+            var _a, _b;
+            if (!audioContext) {
+                throw new Error('Audio context not found');
+            }
+            const bufferDuration = (_b = (_a = node.buffer) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0;
+            const unclampedMediaEndTime = mediaTimestamp + bufferDuration;
+            const needsTrimEnd = unclampedMediaEndTime > sequenceEndTime;
+            const needsTrimStart = mediaTimestamp < sequenceStartTime;
+            const offsetBecauseOfTrim = needsTrimStart
+                ? sequenceStartTime - mediaTimestamp
+                : 0;
+            const offsetBecauseOfTooLate = targetTime < 0 ? -targetTime : 0;
+            const offset = offsetBecauseOfTrim + offsetBecauseOfTooLate;
+            const duration = needsTrimEnd
+                ? bufferDuration -
+                    Math.max(0, unclampedMediaEndTime - sequenceEndTime) -
+                    offset
+                : bufferDuration - offset;
+            const scheduledTime = targetTime + currentTime + offset;
+            if (offset < 0) {
+                throw new Error('offset < 0: ' +
+                    JSON.stringify({
+                        offset,
+                        targetTime,
+                        currentTime,
+                        offsetBecauseOfTrim,
+                        offsetBecauseOfTooLate,
+                    }));
+            }
+            if (duration > 0) {
+                node.start(scheduledTime, offset, duration);
+            }
+            const scheduledEndTime = scheduledTime + duration / node.playbackRate.value;
+            const mediaTime = mediaTimestamp + offset;
+            const mediaEndTime = mediaTime + duration;
+            const latency = audioContext.baseLatency + audioContext.outputLatency;
+            const timeDiff = scheduledTime - currentTime - latency;
+            const prev = prevEndTimes.current;
+            const scheduledMismatch = prev.scheduledEndTime !== null &&
+                Math.abs(scheduledTime - prev.scheduledEndTime) > 0.001;
+            const mediaMismatch = prev.mediaEndTime !== null &&
+                Math.abs(mediaTime - prev.mediaEndTime) > 0.001;
+            if (debugAudioScheduling) {
+                log_js_1.Log.info({ logLevel, tag: 'audio-scheduling' }, 'scheduled %c%s%c %s %c%s%c %s %c%s%c %s %s %s', scheduledMismatch ? 'color: red; font-weight: bold' : '', scheduledTime.toFixed(4), '', scheduledEndTime.toFixed(4), mediaMismatch ? 'color: red; font-weight: bold' : '', mediaTime.toFixed(4), '', mediaEndTime.toFixed(4), duration < 0
+                    ? 'color: red; font-weight: bold'
+                    : timeDiff < 0
+                        ? 'color: red; font-weight: bold'
+                        : 'color: blue; font-weight: bold', duration < 0
+                    ? 'missed ' + Math.abs(offset).toFixed(2) + 's'
+                    : Math.abs(timeDiff).toFixed(2) +
+                        (timeDiff < 0 ? ' delay' : ' ahead'), '', 'current=' + currentTime.toFixed(4), 'offset=' + offset.toFixed(4), 'latency=' + latency.toFixed(4), 'state=' + audioContext.state);
+            }
+            prev.scheduledEndTime = scheduledEndTime;
+            prev.mediaEndTime = mediaEndTime;
+            return duration > 0
+                ? {
+                    type: 'started',
+                    scheduledTime,
+                }
+                : {
+                    type: 'not-started',
+                };
+        };
+    }, [audioContext, logLevel]);
     const refs = (0, react_1.useMemo)(() => {
         return new Array(numberOfAudioTags).fill(true).map(() => {
             const ref = (0, react_1.createRef)();
@@ -253,6 +322,8 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
             playAllAudios,
             numberOfAudioTags,
             audioContext,
+            audioSyncAnchor,
+            scheduleAudioNode,
         };
     }, [
         numberOfAudioTags,
@@ -261,6 +332,8 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
         unregisterAudio,
         updateAudio,
         audioContext,
+        audioSyncAnchor,
+        scheduleAudioNode,
     ]);
     return ((0, jsx_runtime_1.jsxs)(exports.SharedAudioContext.Provider, { value: value, children: [refs.map(({ id, ref }) => {
                 return (

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

@@ -0,0 +1,8 @@
+import type { CanUpdateSequencePropStatus } from './use-schema';
+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

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