@remotion/studio 4.0.459 → 4.0.461

package/dist/components/Timeline/TimelineTranslateField.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineTranslateField: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly codeValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatus;
     readonly effectiveValue: unknown;
-    readonly canUpdate: boolean;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
-    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
 }>;

package/dist/components/Timeline/TimelineTranslateField.js

@@ -23,7 +23,7 @@ const containerStyle = {
     display: 'flex',
     gap: 4,
 };
-const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, onSave, onDragValueChange, onDragEnd, }) => {
+const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
     var _a;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
@@ -41,13 +41,13 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        onDragValueChange(field.key, makeString(newVal, currentY));
-    }, [onDragValueChange, field.key, dragY, codeY, makeString]);
+        onDragValueChange(makeString(newVal, currentY));
+    }, [onDragValueChange, dragY, codeY, makeString]);
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
         const newStr = makeString(newVal, currentY);
-        if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).finally(() => {
+        if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+            onSave(newStr).finally(() => {
                 setDragX(null);
                 onDragEnd();
             });
@@ -56,40 +56,31 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
             setDragX(null);
             onDragEnd();
         }
-    }, [
-        dragY,
-        codeY,
-        makeString,
-        canUpdate,
-        codeValue,
-        onSave,
-        field.key,
-        onDragEnd,
-    ]);
+    }, [dragY, codeY, makeString, propStatus, onSave, onDragEnd]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate) {
+        if (propStatus.canUpdate) {
             const parsed = Number(newVal);
             if (!Number.isNaN(parsed)) {
                 const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
                 const newStr = makeString(parsed, currentY);
-                if (newStr !== codeValue) {
+                if (newStr !== propStatus.codeValue) {
                     setDragX(parsed);
-                    onSave(field.key, newStr);
+                    onSave(newStr);
                 }
             }
         }
-    }, [canUpdate, dragY, codeY, makeString, codeValue, onSave, field.key]);
+    }, [propStatus, dragY, codeY, makeString, onSave]);
     // --- Y callbacks ---
     const onYChange = (0, react_1.useCallback)((newVal) => {
         setDragY(newVal);
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        onDragValueChange(field.key, makeString(currentX, newVal));
-    }, [onDragValueChange, field.key, dragX, codeX, makeString]);
+        onDragValueChange(makeString(currentX, newVal));
+    }, [onDragValueChange, dragX, codeX, makeString]);
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
         const newStr = makeString(currentX, newVal);
-        if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).finally(() => {
+        if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+            onSave(newStr).finally(() => {
                 setDragY(null);
                 onDragEnd();
             });
@@ -98,31 +89,22 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
             setDragY(null);
             onDragEnd();
         }
-    }, [
-        dragX,
-        codeX,
-        makeString,
-        canUpdate,
-        codeValue,
-        onSave,
-        field.key,
-        onDragEnd,
-    ]);
+    }, [dragX, codeX, makeString, propStatus, onSave, onDragEnd]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate) {
+        if (propStatus.canUpdate) {
             const parsed = Number(newVal);
             if (!Number.isNaN(parsed)) {
                 const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
                 const newStr = makeString(currentX, parsed);
-                if (newStr !== codeValue) {
+                if (newStr !== propStatus.codeValue) {
                     setDragY(parsed);
-                    onSave(field.key, newStr).catch(() => {
+                    onSave(newStr).catch(() => {
                         setDragY(null);
                     });
                 }
             }
         }
-    }, [canUpdate, onSave, field.key, codeValue, dragX, codeX, makeString]);
+    }, [propStatus, onSave, dragX, codeX, makeString]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
             jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false })
         ] }));

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.success) {
+                    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;