@remotion/studio 4.0.458 → 4.0.460

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -2,14 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineVideoInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const extract_frames_1 = require("../../helpers/extract-frames");
-const frame_database_1 = require("../../helpers/frame-database");
-const resize_video_frame_1 = require("../../helpers/resize-video-frame");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
-const looped_media_timeline_1 = require("../looped-media-timeline");
 const FILMSTRIP_HEIGHT = timeline_layout_1.TIMELINE_LAYER_HEIGHT_IMAGE - 2;
 const outerStyle = {
     width: '100%',
@@ -26,132 +23,11 @@ const filmstripContainerStyle = {
     fontSize: 10,
     fontFamily: 'Arial, Helvetica',
 };
-const WEBCODECS_TIMESCALE = 1000000;
-const MAX_TIME_DEVIATION = WEBCODECS_TIMESCALE * 0.05;
-const getDurationOfOneFrame = ({ visualizationWidth, aspectRatio, segmentDuration, }) => {
-    const framesFitInWidthUnrounded = visualizationWidth / (FILMSTRIP_HEIGHT * aspectRatio);
-    return (segmentDuration / framesFitInWidthUnrounded) * WEBCODECS_TIMESCALE;
-};
-const fixRounding = (value) => {
-    if (value % 1 >= 0.49999999) {
-        return Math.ceil(value);
-    }
-    return Math.floor(value);
-};
-const calculateTimestampSlots = ({ visualizationWidth, fromSeconds, segmentDuration, aspectRatio, }) => {
-    const framesFitInWidthUnrounded = visualizationWidth / (FILMSTRIP_HEIGHT * aspectRatio);
-    const framesFitInWidth = Math.ceil(framesFitInWidthUnrounded);
-    const durationOfOneFrame = getDurationOfOneFrame({
-        visualizationWidth,
-        aspectRatio,
-        segmentDuration,
-    });
-    const timestampTargets = [];
-    for (let i = 0; i < framesFitInWidth + 1; i++) {
-        const target = fromSeconds * WEBCODECS_TIMESCALE + durationOfOneFrame * (i + 0.5);
-        const snappedToDuration = (Math.round(fixRounding(target / durationOfOneFrame)) - 1) *
-            durationOfOneFrame;
-        timestampTargets.push(snappedToDuration);
-    }
-    return timestampTargets;
-};
-const ensureSlots = ({ filledSlots, naturalWidth, fromSeconds, toSeconds, aspectRatio, }) => {
-    const segmentDuration = toSeconds - fromSeconds;
-    const timestampTargets = calculateTimestampSlots({
-        visualizationWidth: naturalWidth,
-        fromSeconds,
-        segmentDuration,
-        aspectRatio,
-    });
-    for (const timestamp of timestampTargets) {
-        if (!filledSlots.has(timestamp)) {
-            filledSlots.set(timestamp, undefined);
-        }
-    }
-};
-const drawSlot = ({ frame, ctx, filledSlots, visualizationWidth, timestamp, segmentDuration, fromSeconds, }) => {
-    const durationOfOneFrame = getDurationOfOneFrame({
-        visualizationWidth,
-        aspectRatio: frame.displayWidth / frame.displayHeight,
-        segmentDuration,
-    });
-    const relativeTimestamp = timestamp - fromSeconds * WEBCODECS_TIMESCALE;
-    const frameIndex = relativeTimestamp / durationOfOneFrame;
-    const thumbnailWidth = frame.displayWidth / window.devicePixelRatio;
-    const left = Math.floor(frameIndex * thumbnailWidth);
-    const right = Math.ceil((frameIndex + 1) * thumbnailWidth);
-    ctx.drawImage(frame, left, 0, right - left, frame.displayHeight / window.devicePixelRatio);
-    filledSlots.set(timestamp, frame.timestamp);
-};
-const fillWithCachedFrames = ({ ctx, naturalWidth, filledSlots, src, segmentDuration, fromSeconds, }) => {
-    const prefix = (0, frame_database_1.getFrameDatabaseKeyPrefix)(src);
-    const keys = Array.from(frame_database_1.frameDatabase.keys()).filter((k) => k.startsWith(prefix));
-    const targets = Array.from(filledSlots.keys());
-    for (const timestamp of targets) {
-        let bestKey;
-        let bestDistance = Infinity;
-        for (const key of keys) {
-            const distance = Math.abs((0, frame_database_1.getTimestampFromFrameDatabaseKey)(key) - timestamp);
-            if (distance < bestDistance) {
-                bestDistance = distance;
-                bestKey = key;
-            }
-        }
-        if (!bestKey) {
-            continue;
-        }
-        const frame = frame_database_1.frameDatabase.get(bestKey);
-        if (!frame) {
-            continue;
-        }
-        const alreadyFilled = filledSlots.get(timestamp);
-        // Don't fill if a closer frame was already drawn
-        if (alreadyFilled &&
-            Math.abs(alreadyFilled - timestamp) <=
-                Math.abs(frame.frame.timestamp - timestamp)) {
-            continue;
-        }
-        frame.lastUsed = Date.now();
-        drawSlot({
-            ctx,
-            frame: frame.frame,
-            filledSlots,
-            visualizationWidth: naturalWidth,
-            timestamp,
-            segmentDuration,
-            fromSeconds,
-        });
-    }
-};
-const fillFrameWhereItFits = ({ frame, filledSlots, ctx, visualizationWidth, segmentDuration, fromSeconds, }) => {
-    const slots = Array.from(filledSlots.keys());
-    for (let i = 0; i < slots.length; i++) {
-        const slot = slots[i];
-        if (Math.abs(slot - frame.timestamp) > MAX_TIME_DEVIATION) {
-            continue;
-        }
-        const filled = filledSlots.get(slot);
-        // Don't fill if a better timestamp was already filled
-        if (filled &&
-            Math.abs(filled - slot) <= Math.abs(filled - frame.timestamp)) {
-            continue;
-        }
-        drawSlot({
-            ctx,
-            frame,
-            filledSlots,
-            visualizationWidth,
-            timestamp: slot,
-            segmentDuration,
-            fromSeconds,
-        });
-    }
-};
 const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
-    const aspectRatio = (0, react_1.useRef)((0, frame_database_1.getAspectRatioFromCache)(src));
+    const aspectRatio = (0, react_1.useRef)((0, timeline_utils_1.getAspectRatioFromCache)(src));
     // for rendering frames
     (0, react_1.useEffect)(() => {
         if (error) {
@@ -170,11 +46,11 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
             return;
         }
         current.appendChild(canvas);
-        const loopWidth = (0, looped_media_timeline_1.getLoopDisplayWidth)({
+        const loopWidth = (0, timeline_utils_1.getLoopDisplayWidth)({
             visualizationWidth: naturalWidth,
             loopDisplay,
         });
-        const shouldRepeatVideo = (0, looped_media_timeline_1.shouldTileLoopDisplay)(loopDisplay);
+        const shouldRepeatVideo = (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay);
         const targetCanvas = shouldRepeatVideo
             ? document.createElement('canvas')
             : canvas;
@@ -211,20 +87,23 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         const toSeconds = fromSeconds + (visibleDurationInFrames * playbackRate) / fps;
         const targetWidth = shouldRepeatVideo ? targetCanvas.width : naturalWidth;
         if (aspectRatio.current !== null) {
-            ensureSlots({
+            (0, timeline_utils_1.ensureSlots)({
                 filledSlots,
                 naturalWidth: targetWidth,
                 fromSeconds,
                 toSeconds,
                 aspectRatio: aspectRatio.current,
+                frameHeight: FILMSTRIP_HEIGHT,
             });
-            fillWithCachedFrames({
+            (0, timeline_utils_1.fillWithCachedFrames)({
                 ctx: targetCtx,
                 naturalWidth: targetWidth,
                 filledSlots,
                 src,
                 segmentDuration: toSeconds - fromSeconds,
                 fromSeconds,
+                devicePixelRatio: window.devicePixelRatio,
+                frameHeight: FILMSTRIP_HEIGHT,
             });
             repeatTarget();
             const unfilled = Array.from(filledSlots.keys()).filter((timestamp) => !filledSlots.get(timestamp));
@@ -235,18 +114,19 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                 };
             }
         }
-        (0, extract_frames_1.extractFrames)({
+        (0, timeline_utils_1.extractFrames)({
             timestampsInSeconds: ({ track, }) => {
                 aspectRatio.current = track.width / track.height;
-                frame_database_1.aspectRatioCache.set(src, aspectRatio.current);
-                ensureSlots({
+                timeline_utils_1.aspectRatioCache.set(src, aspectRatio.current);
+                (0, timeline_utils_1.ensureSlots)({
                     filledSlots,
                     fromSeconds,
                     toSeconds,
                     naturalWidth: targetWidth,
                     aspectRatio: aspectRatio.current,
+                    frameHeight: FILMSTRIP_HEIGHT,
                 });
-                return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
+                return Array.from(filledSlots.keys()).map((timestamp) => timestamp / timeline_utils_1.WEBCODECS_TIMESCALE);
             },
             src,
             onVideoSample: (sample) => {
@@ -254,7 +134,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                 try {
                     frame = sample.toVideoFrame();
                     const scale = (FILMSTRIP_HEIGHT / frame.displayHeight) * window.devicePixelRatio;
-                    const transformed = (0, resize_video_frame_1.resizeVideoFrame)({
+                    const transformed = (0, timeline_utils_1.resizeVideoFrame)({
                         frame,
                         scale,
                     });
@@ -262,25 +142,28 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                         frame.close();
                     }
                     frame = undefined;
-                    const databaseKey = (0, frame_database_1.makeFrameDatabaseKey)(src, transformed.timestamp);
-                    (0, frame_database_1.addFrameToCache)(databaseKey, transformed);
+                    const databaseKey = (0, timeline_utils_1.makeFrameDatabaseKey)(src, transformed.timestamp);
+                    (0, timeline_utils_1.addFrameToCache)(databaseKey, transformed);
                     if (aspectRatio.current === null) {
                         throw new Error('Aspect ratio is not set');
                     }
-                    ensureSlots({
+                    (0, timeline_utils_1.ensureSlots)({
                         filledSlots,
                         fromSeconds,
                         toSeconds,
                         naturalWidth: targetWidth,
                         aspectRatio: aspectRatio.current,
+                        frameHeight: FILMSTRIP_HEIGHT,
                     });
-                    fillFrameWhereItFits({
+                    (0, timeline_utils_1.fillFrameWhereItFits)({
                         ctx: targetCtx,
                         filledSlots,
                         visualizationWidth: targetWidth,
                         frame: transformed,
                         segmentDuration: toSeconds - fromSeconds,
                         fromSeconds,
+                        devicePixelRatio: window.devicePixelRatio,
+                        frameHeight: FILMSTRIP_HEIGHT,
                     });
                     repeatTarget();
                 }
@@ -300,13 +183,15 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
             if (controller.signal.aborted) {
                 return;
             }
-            fillWithCachedFrames({
+            (0, timeline_utils_1.fillWithCachedFrames)({
                 ctx: targetCtx,
                 naturalWidth: targetWidth,
                 filledSlots,
                 src,
                 segmentDuration: toSeconds - fromSeconds,
                 fromSeconds,
+                devicePixelRatio: window.devicePixelRatio,
+                frameHeight: FILMSTRIP_HEIGHT,
             });
             repeatTarget();
         })

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

@@ -1,19 +1,16 @@
-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;
+import { callApi } from '../call-api';
+type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
+type ApplyResult = (result: SubscribeResult) => void;
+export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, clientId, applyOnce, applyEach, }: {
     fileName: string;
     line: number;
     column: number;
     schema: SequenceSchema;
-    subscribeToEvent: SubscribeToEvent;
-    onChange: (snapshot: SequencePropsSnapshot) => void;
-}) => () => void;
+    clientId: string;
+    applyOnce: ApplyResult;
+    applyEach: ApplyResult;
+}) => {
+    release: () => void;
+};
 export {};

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

@@ -3,149 +3,82 @@ 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 makeKey = (fileName, line, column) => `${fileName}\0${line}\0${column}`;
 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 acquireSequencePropsSubscription = ({ fileName, line, column, schema, clientId, applyOnce, applyEach, }) => {
     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', {
+        const promise = (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
             fileName,
             line,
             column,
             schema,
             clientId,
-        })
+        });
+        const created = {
+            refCount: 0,
+            promise,
+            fileName,
+            clientId,
+            applyOnce,
+        };
+        entries.set(key, created);
+        entry = created;
+        promise
             .then((result) => {
-            if (newEntry.tornDown) {
-                if (result.canUpdate) {
-                    fireUnsubscribe(fileName, result.nodePath, clientId);
-                }
+            const current = entries.get(key);
+            if (current !== created || !current.applyOnce) {
                 return;
             }
-            if (result.canUpdate) {
-                newEntry.snapshot = {
-                    nodePath: result.nodePath,
-                    jsxInMapCallback: result.jsxInMapCallback,
-                    props: result.props,
-                };
-            }
-            else {
-                newEntry.snapshot = INITIAL_SNAPSHOT;
-            }
-            notify(newEntry);
+            const cb = current.applyOnce;
+            current.applyOnce = null;
+            cb(result);
         })
             .catch((err) => {
-            if (newEntry.tornDown) {
+            const current = entries.get(key);
+            if (current !== created) {
                 return;
             }
+            current.applyOnce = null;
             remotion_1.Internals.Log.error(err);
-            newEntry.snapshot = INITIAL_SNAPSHOT;
-            notify(newEntry);
         });
-        entry = newEntry;
     }
-    entry.refCount += 1;
-    entry.listeners.add(onChange);
-    onChange(entry.snapshot);
+    entry.refCount++;
+    const acquired = entry;
+    acquired.promise.then(applyEach).catch(() => {
+        // Error already logged by the first acquirer.
+    });
     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();
+    return {
+        release: () => {
+            if (released) {
+                return;
+            }
+            released = true;
+            acquired.refCount--;
+            if (acquired.refCount > 0) {
+                return;
+            }
+            if (entries.get(key) === acquired) {
+                entries.delete(key);
+            }
+            acquired.promise
+                .then((result) => {
+                if (!result.canUpdate) {
+                    return;
+                }
+                return (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
+                    fileName: acquired.fileName,
+                    nodePath: result.nodePath,
+                    clientId: acquired.clientId,
+                });
+            })
+                .catch(() => {
+                // Ignore — either the subscribe failed (nothing to clean up) or
+                // the unsubscribe failed (server-side TTL will handle it).
+            });
+        },
     };
 };
 exports.acquireSequencePropsSubscription = acquireSequencePropsSubscription;

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

@@ -1,7 +1,7 @@
-import type { SequenceNodePath } from '@remotion/studio-shared';
-import type { TSequence } from 'remotion';
+import type { SequenceSchema } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: (sequence: TSequence, originalLocation: OriginalPosition | null, visualModeEnabled: boolean) => {
-    nodePath: SequenceNodePath | null;
-    jsxInMapCallback: boolean;
-};
+export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, schema, }: {
+    overrideId: string;
+    schema: SequenceSchema;
+    originalLocation: OriginalPosition | null;
+}) => void;

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

@@ -5,22 +5,11 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 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, _b;
-    var _c, _d, _e, _f;
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
-    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;
-        }
-        setCodeValues(overrideId, statuses);
-    }, [overrideId, setCodeValues]);
-    const { previewServerState: state, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, }) => {
+    var _a, _b, _c;
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
+    const { previewServerState: state } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const clientId = state.type === 'connected' ? state.clientId : undefined;
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -35,67 +24,48 @@ const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnab
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
-    const [subscriptionState, setSubscriptionState] = (0, react_1.useState)(EMPTY_STATE);
-    const isMountedRef = (0, react_1.useRef)(true);
-    (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;
+    const locationSource = (_a = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _a !== void 0 ? _a : null;
+    const locationLine = (_b = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.line) !== null && _b !== void 0 ? _b : null;
+    const locationColumn = (_c = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.column) !== null && _c !== void 0 ? _c : null;
     (0, react_1.useEffect)(() => {
-        if (!visualModeEnabled) {
-            setPropStatusesForSequence(null);
-            setSubscriptionState(EMPTY_STATE);
-            return;
-        }
         if (!clientId ||
             !locationSource ||
             !locationLine ||
             locationColumn === null ||
             !schema) {
-            setPropStatusesForSequence(null);
-            setSubscriptionState(EMPTY_STATE);
             return;
         }
-        const onChange = (snapshot) => {
-            setSubscriptionState({
-                nodePath: snapshot.nodePath,
-                jsxInMapCallback: snapshot.jsxInMapCallback,
-            });
-            setPropStatusesForSequence(snapshot.props);
-        };
-        const release = (0, sequence_props_subscription_store_1.acquireSequencePropsSubscription)({
-            clientId,
+        const { release } = (0, sequence_props_subscription_store_1.acquireSequencePropsSubscription)({
             fileName: locationSource,
             line: locationLine,
             column: locationColumn,
             schema,
-            subscribeToEvent,
-            onChange,
+            clientId,
+            applyOnce: (result) => {
+                if (!result.canUpdate) {
+                    return;
+                }
+                setCodeValues(result.nodePath, result);
+            },
+            applyEach: (result) => {
+                if (!result.canUpdate) {
+                    return;
+                }
+                setOverrideIdToNodePath(overrideId, result.nodePath);
+            },
         });
         return () => {
             release();
-            // Only clear props on true unmount, not on re-subscribe due to
-            // location changes — avoids flicker while re-subscribing.
-            if (!isMountedRef.current) {
-                setPropStatusesForSequence(null);
-            }
         };
     }, [
         clientId,
         locationColumn,
         locationLine,
         locationSource,
+        overrideId,
         schema,
-        setPropStatusesForSequence,
-        subscribeToEvent,
-        visualModeEnabled,
+        setCodeValues,
+        setOverrideIdToNodePath,
     ]);
-    return subscriptionState;
 };
 exports.useSequencePropsSubscription = useSequencePropsSubscription;

package/dist/components/Timeline/use-timeline-height.d.ts

@@ -0,0 +1,5 @@
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const useTimelineHeight: ({ shown, hasBeenCut, }: {
+    shown: TrackWithHash[];
+    hasBeenCut: boolean;
+}) => number;