remotion 4.0.430 → 4.0.432

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/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

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

package/dist/cjs/RemotionRoot.js

@@ -13,7 +13,7 @@ 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, nonceContextSeed, visualModeEnabled, }) => {
     const nonceContext = (0, react_1.useMemo)(() => {
         let counter = 0;
         return {
@@ -24,6 +24,6 @@ const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLate
     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

@@ -169,7 +169,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 +203,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 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

@@ -16,6 +16,7 @@ export type SetTimelineContextValue = {
 };
 export declare const SetTimelineContext: React.Context<SetTimelineContextValue>;
 export declare const TimelineContext: React.Context<TimelineContextValue>;
+export declare const AbsoluteTimeContext: React.Context<TimelineContextValue>;
 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");
@@ -27,6 +27,19 @@ exports.TimelineContext = (0, react_1.createContext)({
     },
     audioAndVideoTags: { current: [] },
 });
+exports.AbsoluteTimeContext = (0, react_1.createContext)({
+    frame: {},
+    playing: false,
+    playbackRate: 1,
+    rootId: '',
+    imperativePlaying: {
+        current: false,
+    },
+    setPlaybackRate: () => {
+        throw new Error('default');
+    },
+    audioAndVideoTags: { current: [] },
+});
 const TimelineContextProvider = ({ children, frameState }) => {
     const [playing, setPlaying] = (0, react_1.useState)(false);
     const imperativePlaying = (0, react_1.useRef)(false);
@@ -84,6 +97,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/get-effective-visual-mode-value.d.ts

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

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

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

package/dist/cjs/internals.d.ts

@@ -1,3 +1,5 @@
+import type { ScheduleAudioNodeResult } from './audio/shared-audio-tags.js';
+import { type ScheduleAudioNodeOptions } from './audio/shared-audio-tags.js';
 import { type CompProps } from './Composition.js';
 import type { TCompMetadata, TComposition, TRenderAsset, TSequence } from './CompositionManager.js';
 import type { CompositionManagerContext } from './CompositionManagerContext.js';
@@ -6,9 +8,11 @@ import type { SerializedJSONWithCustomFields } from './input-props-serialization
 import type { LoggingContextValue } from './log-level-context.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';
 import * as TimelinePosition from './timeline-position-state.js';
 import { type SetTimelineContextValue, type TimelineContextValue } from './TimelineContext.js';
 import { truthy } from './truthy.js';
+import type { CanUpdateSequencePropStatus } from './use-schema.js';
 import type { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volume-position-state.js';
 import type { WatchRemotionStaticFilesPayload } from './watch-static-file.js';
 import { useRemotionContexts } from './wrap-remotion-context.js';
@@ -17,6 +21,7 @@ export declare const Internals: {
     readonly useUnsafeVideoConfig: () => import("./video-config.js").VideoConfig | null;
     readonly useFrameForVolumeProp: (behavior: import("./audio/use-audio-frame.js").LoopVolumeCurveBehavior) => number;
     readonly useTimelinePosition: () => number;
+    readonly useAbsoluteTimelinePosition: () => number;
     readonly evaluateVolume: ({ frame, volume, mediaVolume, }: {
         frame: number;
         volume: import("./volume-prop.js").VolumeProp | undefined;
@@ -71,10 +76,11 @@ export declare const Internals: {
     }, "ref"> & import("react").RefAttributes<HTMLVideoElement>>;
     readonly CompositionManager: import("react").Context<CompositionManagerContext>;
     readonly CompositionSetters: import("react").Context<import("./CompositionManagerContext.js").CompositionManagerSetters>;
-    readonly SequenceControlOverrideContext: import("react").Context<import("./SequenceManager.js").SequenceControlOverrideState>;
+    readonly VisualModeOverridesContext: import("react").Context<import("./SequenceManager.js").VisualModeOverrides>;
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
+    readonly SequenceStackTracesUpdateContext: import("react").Context<import("./sequence-stack-traces.js").UpdateResolvedStackTraceFn>;
     readonly SequenceVisibilityToggleContext: import("react").Context<import("./SequenceManager.js").SequenceVisibilityToggleState>;
-    readonly useSchema: <T extends Record<string, unknown>>(schema: SequenceSchema | null, currentValue: T | null) => {
+    readonly useSchema: <S extends SequenceSchema, T extends import("./sequence-field-schema.js").SchemaKeysRecord<S>>(schema: S | null, currentValue: (T & Record<Exclude<keyof T, keyof S>, never>) | null) => {
         controls: import("./CompositionManager.js").SequenceControls | undefined;
         values: T;
     };
@@ -88,6 +94,7 @@ export declare const Internals: {
         readonly audioEnabled: boolean;
         readonly frameState: Record<string, number> | null;
         readonly nonceContextSeed: number;
+        readonly visualModeEnabled: boolean;
     }>;
     readonly CompositionManagerProvider: ({ children, onlyRenderComposition, currentCompositionMetadata, initialCompositions, initialCanvasContent, }: {
         readonly children: React.ReactNode;
@@ -161,6 +168,10 @@ export declare const Internals: {
         playAllAudios: () => void;
         numberOfAudioTags: number;
         audioContext: AudioContext | null;
+        audioSyncAnchor: {
+            value: number;
+        };
+        scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
     } | null>;
     readonly SharedAudioContextProvider: import("react").FC<{
         readonly numberOfAudioTags: number;
@@ -422,9 +433,16 @@ export declare const Internals: {
     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 RenderAssetManagerProvider: import("react").FC<{
         children: React.ReactNode;
         collectAssets: null | React.RefObject<import("./RenderAssetManager.js").CollectAssetsRef | null>;
     }>;
+    readonly getEffectiveVisualModeValue: ({ codeValue, runtimeValue, dragOverrideValue, defaultValue, }: {
+        codeValue: CanUpdateSequencePropStatus | null;
+        runtimeValue: unknown;
+        dragOverrideValue: unknown;
+        defaultValue: unknown;
+    }) => unknown;
 };
-export type { CompositionManagerContext, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SequenceFieldSchema, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, };
+export type { CompositionManagerContext, ResolvedStackLocation, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SequenceFieldSchema, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, ScheduleAudioNodeOptions, CanUpdateSequencePropStatus, ScheduleAudioNodeResult, };

package/dist/cjs/internals.js

@@ -49,6 +49,7 @@ const CSSUtils = __importStar(require("./default-css.js"));
 const default_css_js_1 = require("./default-css.js");
 const EditorProps_js_1 = require("./EditorProps.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const get_effective_visual_mode_value_js_1 = require("./get-effective-visual-mode-value.js");
 const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const input_props_override_js_1 = require("./input-props-override.js");
@@ -68,6 +69,7 @@ const RemotionRoot_js_1 = require("./RemotionRoot.js");
 const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
 const resolve_video_config_js_1 = require("./resolve-video-config.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
+const sequence_stack_traces_js_1 = require("./sequence-stack-traces.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const setup_env_variables_js_1 = require("./setup-env-variables.js");
@@ -106,6 +108,7 @@ exports.Internals = {
     useUnsafeVideoConfig: use_unsafe_video_config_js_1.useUnsafeVideoConfig,
     useFrameForVolumeProp: use_audio_frame_js_1.useFrameForVolumeProp,
     useTimelinePosition: TimelinePosition.useTimelinePosition,
+    useAbsoluteTimelinePosition: TimelinePosition.useAbsoluteTimelinePosition,
     evaluateVolume: volume_prop_js_1.evaluateVolume,
     getAbsoluteSrc: absolute_src_js_1.getAbsoluteSrc,
     Timeline: TimelinePosition,
@@ -115,8 +118,9 @@ exports.Internals = {
     VideoForPreview: VideoForPreview_js_1.VideoForPreview,
     CompositionManager: CompositionManagerContext_js_1.CompositionManager,
     CompositionSetters: CompositionManagerContext_js_1.CompositionSetters,
-    SequenceControlOverrideContext: SequenceManager_js_1.SequenceControlOverrideContext,
+    VisualModeOverridesContext: SequenceManager_js_1.VisualModeOverridesContext,
     SequenceManager: SequenceManager_js_1.SequenceManager,
+    SequenceStackTracesUpdateContext: sequence_stack_traces_js_1.SequenceStackTracesUpdateContext,
     SequenceVisibilityToggleContext: SequenceManager_js_1.SequenceVisibilityToggleContext,
     useSchema: use_schema_js_1.useSchema,
     useSequenceControlOverride: use_sequence_control_override_js_1.useSequenceControlOverride,
@@ -200,5 +204,7 @@ exports.Internals = {
     TimelinePosition,
     DelayRenderContextType: use_delay_render_js_1.DelayRenderContextType,
     TimelineContext: TimelineContext_js_1.TimelineContext,
+    AbsoluteTimeContext: TimelineContext_js_1.AbsoluteTimeContext,
     RenderAssetManagerProvider: RenderAssetManager_js_1.RenderAssetManagerProvider,
+    getEffectiveVisualModeValue: get_effective_visual_mode_value_js_1.getEffectiveVisualModeValue,
 };

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

@@ -3,13 +3,14 @@ export type NumberFieldSchema = {
     min?: number;
     max?: number;
     step?: number;
-    default?: number;
+    default: number | undefined;
     description?: string;
 };
 export type BooleanFieldSchema = {
     type: 'boolean';
-    default?: boolean;
+    default: boolean;
     description?: string;
 };
 export type SequenceFieldSchema = NumberFieldSchema | BooleanFieldSchema;
 export type SequenceSchema = Record<string, SequenceFieldSchema>;
+export type SchemaKeysRecord<S extends SequenceSchema> = Record<keyof S, unknown>;

package/dist/cjs/sequence-stack-traces.d.ts

@@ -4,9 +4,5 @@ export type ResolvedStackLocation = {
     column: number | null;
     source: string | null;
 };
-export type SequenceStackTracesContextType = {
-    resolvedStacks: Record<string, ResolvedStackLocation | null>;
-};
-export declare const SequenceStackTracesContext: React.Context<SequenceStackTracesContextType>;
 export type UpdateResolvedStackTraceFn = (stack: string, location: ResolvedStackLocation | null) => void;
 export declare const SequenceStackTracesUpdateContext: React.Context<UpdateResolvedStackTraceFn>;

package/dist/cjs/sequence-stack-traces.js

@@ -3,9 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceStackTracesUpdateContext = exports.SequenceStackTracesContext = void 0;
+exports.SequenceStackTracesUpdateContext = void 0;
 const react_1 = __importDefault(require("react"));
-exports.SequenceStackTracesContext = react_1.default.createContext({
-    resolvedStacks: {},
-});
 exports.SequenceStackTracesUpdateContext = react_1.default.createContext(() => { });

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

@@ -8,6 +8,7 @@ export declare const persistCurrentFrame: (time: CurrentTimePerComposition) => v
 export declare const getInitialFrameState: () => CurrentTimePerComposition;
 export declare const getFrameForComposition: (composition: string) => number;
 export declare const useTimelinePosition: () => number;
+export declare const useAbsoluteTimelinePosition: () => number;
 export declare const useTimelineSetFrame: () => ((u: React.SetStateAction<Record<string, number>>) => void);
 type PlayingReturnType = readonly [
     boolean,