@remotion/studio 4.0.457 → 4.0.459

package/dist/components/Timeline/TimelineSequence.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
@@ -17,40 +50,81 @@ const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
 const IMAGE_GRADIENT = 'linear-gradient(to top, #2980b9, #3498db)';
-const TimelineSequence = ({ s }) => {
+const TimelineSequenceFn = ({ s }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
         return null;
     }
     return jsx_runtime_1.jsx(Inner, { windowWidth: windowWidth, s: s });
 };
-exports.TimelineSequence = TimelineSequence;
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, }) => {
+    var _a, _b;
+    const frame = (0, remotion_1.useCurrentFrame)();
+    const relativeFrame = frame - s.from;
+    const relativeFrameWithPremount = relativeFrame + ((_a = s.premountDisplay) !== null && _a !== void 0 ? _a : 0);
+    const relativeFrameWithPostmount = relativeFrame - displayDurationInFrames;
+    const roundedFrame = Math.round(relativeFrame * 100) / 100;
+    const isInRange = relativeFrame >= 0 && relativeFrame < displayDurationInFrames;
+    const isPremounting = relativeFrameWithPremount >= 0 &&
+        relativeFrameWithPremount < displayDurationInFrames &&
+        !isInRange;
+    const isPostmounting = relativeFrameWithPostmount >= 0 &&
+        relativeFrameWithPostmount < ((_b = s.postmountDisplay) !== null && _b !== void 0 ? _b : 0) &&
+        !isInRange;
+    const actualStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...style,
+            opacity: isInRange ? 1 : 0.5,
+        };
+    }, [isInRange, style]);
+    return (jsx_runtime_1.jsxs("div", { style: actualStyle, title: s.displayName, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
+                    width: premountWidth,
+                    height: '100%',
+                    background: `repeating-linear-gradient(
+							-45deg,
+							transparent,
+							transparent 2px,
+							rgba(255, 255, 255, ${isPremounting ? 0.5 : 0.2}) 2px,
+							rgba(255, 255, 255, ${isPremounting ? 0.5 : 0.2}) 4px
+						)`,
+                    position: 'absolute',
+                } })) : null, postmountWidth ? (jsx_runtime_1.jsx("div", { style: {
+                    width: postmountWidth,
+                    height: '100%',
+                    background: `repeating-linear-gradient(
+							-45deg,
+							transparent,
+							transparent 2px,
+							rgba(255, 255, 255, ${isPostmounting ? 0.5 : 0.2}) 2px,
+							rgba(255, 255, 255, ${isPostmounting ? 0.5 : 0.2}) 4px
+						)`,
+                    position: 'absolute',
+                    right: 0,
+                } })) : null, children, s.type !== 'audio' &&
+                s.type !== 'video' &&
+                s.type !== 'image' &&
+                s.loopDisplay === undefined &&
+                (isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
+                    paddingLeft: 5 + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }));
+};
 const Inner = ({ s, windowWidth }) => {
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
-    var _a, _b, _c;
+    var _a;
     const video = remotion_1.Internals.useVideo();
     const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_a = video === null || video === void 0 ? void 0 : video.fps) !== null && _a !== void 0 ? _a : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
     if (!video) {
         throw new TypeError('Expected video config');
     }
-    const frame = (0, remotion_1.useCurrentFrame)();
-    const relativeFrame = frame - s.from;
     const displayDurationInFrames = s.loopDisplay
         ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
         : s.duration;
-    const relativeFrameWithPremount = relativeFrame + ((_b = s.premountDisplay) !== null && _b !== void 0 ? _b : 0);
-    const relativeFrameWithPostmount = relativeFrame - displayDurationInFrames;
-    const roundedFrame = Math.round(relativeFrame * 100) / 100;
-    const isInRange = relativeFrame >= 0 && relativeFrame < displayDurationInFrames;
-    const isPremounting = relativeFrameWithPremount >= 0 &&
-        relativeFrameWithPremount < displayDurationInFrames &&
-        !isInRange;
-    const isPostmounting = relativeFrameWithPostmount >= 0 &&
-        relativeFrameWithPostmount < ((_c = s.postmountDisplay) !== null && _c !== void 0 ? _c : 0) &&
-        !isInRange;
     const { marginLeft, width, naturalWidth, premountWidth, postmountWidth } = (0, react_1.useMemo)(() => {
         return (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
             durationInFrames: displayDurationInFrames,
@@ -86,43 +160,11 @@ const Inner = ({ s, windowWidth }) => {
             width,
             color: 'white',
             overflow: 'hidden',
-            opacity: isInRange ? 1 : 0.5,
         };
-    }, [isInRange, marginLeft, s.type, width]);
+    }, [marginLeft, s.type, width]);
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: style, title: s.displayName, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
-                    width: premountWidth,
-                    height: '100%',
-                    background: `repeating-linear-gradient(
-							-45deg,
-							transparent,
-							transparent 2px,
-							rgba(255, 255, 255, ${isPremounting ? 0.5 : 0.2}) 2px,
-							rgba(255, 255, 255, ${isPremounting ? 0.5 : 0.2}) 4px
-						)`,
-                    position: 'absolute',
-                } })) : null, postmountWidth ? (jsx_runtime_1.jsx("div", { style: {
-                    width: postmountWidth,
-                    height: '100%',
-                    background: `repeating-linear-gradient(
-							-45deg,
-							transparent,
-							transparent 2px,
-							rgba(255, 255, 255, ${isPostmounting ? 0.5 : 0.2}) 2px,
-							rgba(255, 255, 255, ${isPostmounting ? 0.5 : 0.2}) 4px
-						)`,
-                    position: 'absolute',
-                    right: 0,
-                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
-                s.type !== 'video' &&
-                s.type !== 'image' &&
-                s.loopDisplay === undefined &&
-                (isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
-                    paddingLeft: 5 + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
-                    height: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }, s.id));
+    return (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }));
 };
+exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineStack/index.js

@@ -127,7 +127,7 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
                 : stackHovered && stackHoverable
                     ? colors_1.LIGHT_TEXT
                     : colors_1.VERY_LIGHT_TEXT,
-            marginLeft: 10,
+            marginLeft: 5,
             cursor: stackHoverable ? 'pointer' : undefined,
             display: 'flex',
             flexDirection: 'row',

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -30,9 +30,12 @@ const secondTick = {
     ...tick,
     height: 15,
 };
+const TICK_LABEL_FONT_SIZE = 12;
+const TICK_LABEL_MARGIN_LEFT = 8;
+const TICK_LABEL_MIN_GAP = 16;
 const tickLabel = {
-    fontSize: 12,
-    marginLeft: 8,
+    fontSize: TICK_LABEL_FONT_SIZE,
+    marginLeft: TICK_LABEL_MARGIN_LEFT,
     marginTop: 7,
     color: colors_1.LIGHT_TEXT,
 };
@@ -101,8 +104,12 @@ const Inner = ({ windowWidth, durationInFrames, fps }) => {
     const ticks = (0, react_1.useMemo)(() => {
         const frameInterval = (0, timeline_scroll_logic_1.getFrameIncrementFromWidth)(durationInFrames, windowWidth);
         const MIN_SPACING_BETWEEN_TICKS_PX = 5;
+        const maxTickLabelWidth = (0, render_frame_1.renderFrame)(durationInFrames - 1, fps).length *
+            TICK_LABEL_FONT_SIZE *
+            0.6;
+        const minSpacingBetweenTickLabelsPx = TICK_LABEL_MARGIN_LEFT + maxTickLabelWidth + TICK_LABEL_MIN_GAP;
         const seconds = Math.floor(durationInFrames / fps);
-        const secondMarkerEveryNth = Math.ceil((MIN_SPACING_BETWEEN_TICKS_PX * fps) / (frameInterval * fps));
+        const secondMarkerEveryNth = Math.ceil(minSpacingBetweenTickLabelsPx / (frameInterval * fps));
         const frameMarkerEveryNth = Math.ceil(MIN_SPACING_BETWEEN_TICKS_PX / frameInterval);
         // Big ticks showing for every second
         const secondTicks = new Array(seconds)

package/dist/components/Timeline/TimelineTracks.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineTracks = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
@@ -18,13 +19,13 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
-const getExpandedPlaceholderStyle = (sequence, expandedTracks) => ({
-    height: (0, timeline_layout_1.getExpandedTrackHeight)(sequence, expandedTracks) +
-        timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+const getExpandedPlaceholderStyle = (sequence, expandedTracks, dragOverrides, codeValues) => ({
+    height: (0, timeline_layout_1.getExpandedTrackHeight)(sequence, expandedTracks, dragOverrides, codeValues) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
 });
 const TimelineTracks = ({ timeline, hasBeenCut }) => {
     const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { dragOverrides, codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
     const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
         previewServerState.type === 'connected';
     const timelineStyle = (0, react_1.useMemo)(() => {
@@ -45,7 +46,7 @@ const TimelineTracks = ({ timeline, hasBeenCut }) => {
                                 jsx_runtime_1.jsx("div", { style: {
                                         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
                                         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle(track.sequence, expandedTracks) })) : null] }, track.sequence.id));
+                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle(track.sequence, expandedTracks, dragOverrides, codeValues) })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = TimelineTracks;

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -0,0 +1,19 @@
+import type { EventSourceEvent, SequenceNodePath } from '@remotion/studio-shared';
+import { type CanUpdateSequencePropStatus } from 'remotion';
+import type { SequenceSchema } from 'remotion';
+export type SequencePropsSnapshot = {
+    nodePath: SequenceNodePath | null;
+    jsxInMapCallback: boolean;
+    props: Record<string, CanUpdateSequencePropStatus> | null;
+};
+type SubscribeToEvent = (type: EventSourceEvent['type'], listener: (event: EventSourceEvent) => void) => () => void;
+export declare const acquireSequencePropsSubscription: ({ clientId, fileName, line, column, schema, subscribeToEvent, onChange, }: {
+    clientId: string;
+    fileName: string;
+    line: number;
+    column: number;
+    schema: SequenceSchema;
+    subscribeToEvent: SubscribeToEvent;
+    onChange: (snapshot: SequencePropsSnapshot) => void;
+}) => () => void;
+export {};

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.acquireSequencePropsSubscription = void 0;
+const remotion_1 = require("remotion");
+const call_api_1 = require("../call-api");
+const INITIAL_SNAPSHOT = {
+    nodePath: null,
+    jsxInMapCallback: false,
+    props: null,
+};
+const entries = new Map();
+let globalUnsubscribe = null;
+const makeKey = (fileName, line, column) => `${fileName}|${line}|${column}`;
+const nodePathsEqual = (a, b) => {
+    if (!a || !b) {
+        return false;
+    }
+    return JSON.stringify(a) === JSON.stringify(b);
+};
+const notify = (entry) => {
+    for (const listener of entry.listeners) {
+        listener(entry.snapshot);
+    }
+};
+const handleEvent = (event) => {
+    if (event.type !== 'sequence-props-updated') {
+        return;
+    }
+    for (const entry of entries.values()) {
+        if (entry.fileName !== event.fileName) {
+            continue;
+        }
+        if (!nodePathsEqual(entry.snapshot.nodePath, event.nodePath)) {
+            continue;
+        }
+        if (event.result.canUpdate) {
+            entry.snapshot = {
+                nodePath: entry.snapshot.nodePath,
+                jsxInMapCallback: event.result.jsxInMapCallback,
+                props: event.result.props,
+            };
+        }
+        else {
+            entry.snapshot = {
+                nodePath: entry.snapshot.nodePath,
+                jsxInMapCallback: false,
+                props: null,
+            };
+        }
+        notify(entry);
+    }
+};
+const ensureGlobalListener = (subscribeToEvent) => {
+    if (globalUnsubscribe) {
+        return;
+    }
+    globalUnsubscribe = subscribeToEvent('sequence-props-updated', handleEvent);
+};
+const teardownGlobalListenerIfEmpty = () => {
+    if (entries.size > 0) {
+        return;
+    }
+    if (globalUnsubscribe) {
+        globalUnsubscribe();
+        globalUnsubscribe = null;
+    }
+};
+const fireUnsubscribe = (fileName, nodePath, clientId) => {
+    (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
+        fileName,
+        nodePath,
+        clientId,
+    }).catch(() => {
+        // Ignore unsubscribe errors
+    });
+};
+const acquireSequencePropsSubscription = ({ clientId, fileName, line, column, schema, subscribeToEvent, onChange, }) => {
+    const key = makeKey(fileName, line, column);
+    let entry = entries.get(key);
+    if (!entry) {
+        const newEntry = {
+            clientId,
+            fileName,
+            refCount: 0,
+            snapshot: INITIAL_SNAPSHOT,
+            listeners: new Set(),
+            tornDown: false,
+        };
+        entries.set(key, newEntry);
+        ensureGlobalListener(subscribeToEvent);
+        (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
+            fileName,
+            line,
+            column,
+            schema,
+            clientId,
+        })
+            .then((result) => {
+            if (newEntry.tornDown) {
+                if (result.canUpdate) {
+                    fireUnsubscribe(fileName, result.nodePath, clientId);
+                }
+                return;
+            }
+            if (result.canUpdate) {
+                newEntry.snapshot = {
+                    nodePath: result.nodePath,
+                    jsxInMapCallback: result.jsxInMapCallback,
+                    props: result.props,
+                };
+            }
+            else {
+                newEntry.snapshot = INITIAL_SNAPSHOT;
+            }
+            notify(newEntry);
+        })
+            .catch((err) => {
+            if (newEntry.tornDown) {
+                return;
+            }
+            remotion_1.Internals.Log.error(err);
+            newEntry.snapshot = INITIAL_SNAPSHOT;
+            notify(newEntry);
+        });
+        entry = newEntry;
+    }
+    entry.refCount += 1;
+    entry.listeners.add(onChange);
+    onChange(entry.snapshot);
+    let released = false;
+    return () => {
+        if (released) {
+            return;
+        }
+        released = true;
+        const e = entry;
+        e.listeners.delete(onChange);
+        e.refCount -= 1;
+        if (e.refCount > 0) {
+            return;
+        }
+        e.tornDown = true;
+        const resolvedNodePath = e.snapshot.nodePath;
+        entries.delete(key);
+        if (resolvedNodePath) {
+            fireUnsubscribe(e.fileName, resolvedNodePath, e.clientId);
+        }
+        teardownGlobalListenerIfEmpty();
+    };
+};
+exports.acquireSequencePropsSubscription = acquireSequencePropsSubscription;

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -4,13 +4,16 @@ exports.useSequencePropsSubscription = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
-const timeline_layout_1 = require("../../helpers/timeline-layout");
-const call_api_1 = require("../call-api");
+const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
+const EMPTY_STATE = {
+    nodePath: null,
+    jsxInMapCallback: false,
+};
 const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnabled) => {
-    var _a;
-    var _b, _c, _d, _e;
+    var _a, _b;
+    var _c, _d, _e, _f;
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
-    const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : null;
+    const overrideId = (_c = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _c !== void 0 ? _c : null;
     const setPropStatusesForSequence = (0, react_1.useCallback)((statuses) => {
         if (!overrideId) {
             return;
@@ -19,8 +22,6 @@ const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnab
     }, [overrideId, setCodeValues]);
     const { previewServerState: state, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const clientId = state.type === 'connected' ? state.clientId : undefined;
-    const schemaFields = (0, react_1.useMemo)(() => (0, timeline_layout_1.getSchemaFields)(sequence.controls), [sequence.controls]);
-    const schemaKeysString = (0, react_1.useMemo)(() => (schemaFields ? schemaFields.map((f) => f.key).join(',') : null), [schemaFields]);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -34,145 +35,67 @@ const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnab
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
-    const locationSource = (_c = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _c !== void 0 ? _c : null;
-    const locationLine = (_d = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.line) !== null && _d !== void 0 ? _d : null;
-    const locationColumn = (_e = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.column) !== null && _e !== void 0 ? _e : null;
-    const currentLocationSource = (0, react_1.useRef)(locationSource);
-    currentLocationSource.current = locationSource;
-    const currentLocationLine = (0, react_1.useRef)(locationLine);
-    currentLocationLine.current = locationLine;
-    const currentLocationColumn = (0, react_1.useRef)(locationColumn);
-    currentLocationColumn.current = locationColumn;
-    const nodePathRef = (0, react_1.useRef)(null);
-    const [nodePath, setNodePath] = (0, react_1.useState)(null);
-    const [jsxInMapCallback, setJsxInMapCallback] = (0, react_1.useState)(false);
+    const [subscriptionState, setSubscriptionState] = (0, react_1.useState)(EMPTY_STATE);
     const isMountedRef = (0, react_1.useRef)(true);
-    const setNodePathBoth = (0, react_1.useCallback)((next) => {
-        nodePathRef.current = next;
-        setNodePath(next);
-    }, []);
     (0, react_1.useEffect)(() => {
         isMountedRef.current = true;
         return () => {
             isMountedRef.current = false;
         };
     }, []);
+    const schema = (_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.schema;
+    const locationSource = (_d = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _d !== void 0 ? _d : null;
+    const locationLine = (_e = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.line) !== null && _e !== void 0 ? _e : null;
+    const locationColumn = (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.column) !== null && _f !== void 0 ? _f : null;
     (0, react_1.useEffect)(() => {
         if (!visualModeEnabled) {
             setPropStatusesForSequence(null);
-            setNodePathBoth(null);
-            setJsxInMapCallback(false);
+            setSubscriptionState(EMPTY_STATE);
             return;
         }
         if (!clientId ||
             !locationSource ||
             !locationLine ||
             locationColumn === null ||
-            !schemaKeysString) {
+            !schema) {
             setPropStatusesForSequence(null);
-            setNodePathBoth(null);
-            setJsxInMapCallback(false);
+            setSubscriptionState(EMPTY_STATE);
             return;
         }
-        const keys = schemaKeysString.split(',');
-        (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
+        const onChange = (snapshot) => {
+            setSubscriptionState({
+                nodePath: snapshot.nodePath,
+                jsxInMapCallback: snapshot.jsxInMapCallback,
+            });
+            setPropStatusesForSequence(snapshot.props);
+        };
+        const release = (0, sequence_props_subscription_store_1.acquireSequencePropsSubscription)({
+            clientId,
             fileName: locationSource,
             line: locationLine,
             column: locationColumn,
-            keys,
-            clientId,
-        })
-            .then((result) => {
-            if (currentLocationSource.current !== locationSource ||
-                currentLocationLine.current !== locationLine ||
-                currentLocationColumn.current !== locationColumn) {
-                return;
-            }
-            if (result.canUpdate) {
-                setNodePathBoth(result.nodePath);
-                setPropStatusesForSequence(result.props);
-                setJsxInMapCallback(result.jsxInMapCallback);
-            }
-            else {
-                setNodePathBoth(null);
-                setPropStatusesForSequence(null);
-                setJsxInMapCallback(false);
-            }
-        })
-            .catch((err) => {
-            setNodePathBoth(null);
-            setJsxInMapCallback(false);
-            remotion_1.Internals.Log.error(err);
-            setPropStatusesForSequence(null);
+            schema,
+            subscribeToEvent,
+            onChange,
         });
         return () => {
-            const currentNodePath = nodePathRef.current;
+            release();
             // Only clear props on true unmount, not on re-subscribe due to
-            // line number changes — avoids flicker while re-subscribing.
+            // location changes — avoids flicker while re-subscribing.
             if (!isMountedRef.current) {
                 setPropStatusesForSequence(null);
             }
-            setNodePathBoth(null);
-            setJsxInMapCallback(false);
-            if (currentNodePath) {
-                (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
-                    fileName: locationSource,
-                    nodePath: currentNodePath,
-                    clientId,
-                }).catch(() => {
-                    // Ignore unsubscribe errors
-                });
-            }
         };
     }, [
-        visualModeEnabled,
         clientId,
-        locationSource,
-        locationLine,
         locationColumn,
-        schemaKeysString,
-        setPropStatusesForSequence,
-        setNodePathBoth,
-    ]);
-    (0, react_1.useEffect)(() => {
-        if (!visualModeEnabled) {
-            return;
-        }
-        if (!locationSource || !locationLine || locationColumn === null) {
-            return;
-        }
-        const listener = (event) => {
-            if (event.type !== 'sequence-props-updated') {
-                return;
-            }
-            if (event.fileName !== currentLocationSource.current ||
-                !nodePathRef.current ||
-                JSON.stringify(event.nodePath) !== JSON.stringify(nodePathRef.current)) {
-                return;
-            }
-            if (event.result.canUpdate) {
-                setPropStatusesForSequence(event.result.props);
-                setJsxInMapCallback(event.result.jsxInMapCallback);
-            }
-            else {
-                setPropStatusesForSequence(null);
-                setNodePathBoth(null);
-                setJsxInMapCallback(false);
-            }
-        };
-        const unsub = subscribeToEvent('sequence-props-updated', listener);
-        return () => {
-            unsub();
-        };
-    }, [
-        visualModeEnabled,
-        locationSource,
         locationLine,
-        locationColumn,
-        subscribeToEvent,
+        locationSource,
+        schema,
         setPropStatusesForSequence,
-        setNodePathBoth,
+        subscribeToEvent,
+        visualModeEnabled,
     ]);
-    return { nodePath, jsxInMapCallback };
+    return subscriptionState;
 };
 exports.useSequencePropsSubscription = useSequencePropsSubscription;

package/dist/components/draw-peaks.js

@@ -10,6 +10,13 @@ const drawBars = (canvas, peaks, color, volume, width) => {
     }
     const { height } = canvas;
     const w = canvas.width;
+    // Skip drawing when the target canvas has not been laid out yet.
+    // `createImageData(0, h)` / `(w, 0)` throws a DOMException, which
+    // surfaces in Studio's console for compositions with many audio
+    // sequences — some segments are 0 px wide at certain zoom levels.
+    if (w === 0 || height === 0) {
+        return;
+    }
     ctx.clearRect(0, 0, w, height);
     if (volume === 0)
         return;

package/dist/esm/audio-waveform-worker.mjs

@@ -22,6 +22,9 @@ var drawBars = (canvas, peaks, color, volume, width) => {
   }
   const { height } = canvas;
   const w = canvas.width;
+  if (w === 0 || height === 0) {
+    return;
+  }
   ctx.clearRect(0, 0, w, height);
   if (volume === 0)
     return;