@remotion/studio 4.0.463 → 4.0.464

package/dist/components/Timeline/save-prop-queue.js

@@ -8,7 +8,7 @@ const getQueue = (nodePath) => {
     const key = remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath);
     let q = queues.get(key);
     if (!q) {
-        q = { chain: Promise.resolve(), cancelled: false, committed: null };
+        q = { chain: Promise.resolve(), cancelled: false };
         queues.set(key, q);
     }
     return q;
@@ -19,15 +19,12 @@ const dropQueue = (nodePath, q) => {
         queues.delete(key);
     }
 };
-const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCall, mergeServerResponse, errorLabel, }) => {
+const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCall, errorLabel, }) => {
     const q = getQueue(nodePath);
     if (q.cancelled) {
         return Promise.resolve();
     }
     setCodeValues(nodePath, (prev) => {
-        if (q.committed === null) {
-            q.committed = prev;
-        }
         return applyOptimistic(prev);
     });
     const myQueue = q;
@@ -36,12 +33,10 @@ const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCa
             return;
         }
         try {
-            const response = await apiCall();
+            await apiCall();
             if (myQueue.cancelled) {
                 return;
             }
-            setCodeValues(nodePath, (prev) => mergeServerResponse(prev, response));
-            myQueue.committed = mergeServerResponse(myQueue.committed, response);
             // If nothing more is queued, reset baseline so the next round starts fresh.
             if (myQueue.chain === next) {
                 dropQueue(nodePath, myQueue);
@@ -49,10 +44,6 @@ const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCa
         }
         catch (err) {
             myQueue.cancelled = true;
-            const { committed } = myQueue;
-            if (committed !== null) {
-                setCodeValues(nodePath, () => committed);
-            }
             dropQueue(nodePath, myQueue);
             (0, NotificationCenter_1.showNotification)(`${errorLabel}: ${err instanceof Error ? err.message : String(err)}`, 4000);
         }

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -1,6 +1,6 @@
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 export type SetCodeValues = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
-export declare const saveSequenceProp: ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, }: {
+export declare const saveSequenceProp: ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
@@ -8,4 +8,5 @@ export declare const saveSequenceProp: ({ fileName, nodePath, fieldKey, value, d
     defaultValue: string | null;
     schema: SequenceSchema;
     setCodeValues: SetCodeValues;
+    clientId: string;
 }) => Promise<void>;

package/dist/components/Timeline/save-sequence-prop.js

@@ -4,7 +4,7 @@ exports.saveSequenceProp = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const save_prop_queue_1 = require("./save-prop-queue");
-const saveSequenceProp = ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, }) => {
+const saveSequenceProp = ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
         setCodeValues,
@@ -21,17 +21,8 @@ const saveSequenceProp = ({ fileName, nodePath, fieldKey, value, defaultValue, s
             value: JSON.stringify(value),
             defaultValue,
             schema,
+            clientId,
         }),
-        mergeServerResponse: (prev, data) => {
-            if (!data.canUpdate) {
-                return data;
-            }
-            return {
-                canUpdate: true,
-                props: data.props,
-                effects: prev.canUpdate ? prev.effects : [],
-            };
-        },
         errorLabel: 'Could not save sequence prop',
     });
 };

package/dist/components/Timeline/should-show-track-in-timeline.d.ts

@@ -0,0 +1,2 @@
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const shouldShowTrackInTimeline: (track: TrackWithHash, durationInFrames: number) => boolean;

package/dist/components/Timeline/should-show-track-in-timeline.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldShowTrackInTimeline = void 0;
+// A track is shown in the timeline list when:
+// - The sequence opted-in via `showInTimeline` (the default).
+//   Children of a sequence with `showInTimeline: false` keep being listed
+//   on their own; their depth is independently flattened by
+//   `getTimelineNestedLevel` so the parent does not contribute an indent.
+// - The sequence has a positive duration.
+// - The sequence starts before the composition ends.
+const shouldShowTrackInTimeline = (track, durationInFrames) => {
+    if (!track.sequence.showInTimeline) {
+        return false;
+    }
+    if (track.sequence.duration <= 0) {
+        return false;
+    }
+    if (track.sequence.from > durationInFrames) {
+        return false;
+    }
+    return true;
+};
+exports.shouldShowTrackInTimeline = shouldShowTrackInTimeline;

package/dist/components/Timeline/timeline-field-row-layout.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const getTimelineFieldLabelRowStyle: (depth: number) => React.CSSProperties;

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineFieldLabelRowStyle = void 0;
+const timeline_row_layout_1 = require("./timeline-row-layout");
+const getTimelineFieldLabelRowStyle = (depth) => {
+    return {
+        flex: `0 0 ${(0, timeline_row_layout_1.getTimelineFieldLabelFlexBasis)(depth)}`,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    };
+};
+exports.getTimelineFieldLabelRowStyle = getTimelineFieldLabelRowStyle;

package/dist/components/Timeline/timeline-indent.d.ts

@@ -0,0 +1 @@
+export declare const TIMELINE_INDENT = 10;

package/dist/components/Timeline/timeline-indent.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TIMELINE_INDENT = void 0;
+exports.TIMELINE_INDENT = 10;

package/dist/components/Timeline/timeline-row-layout.d.ts

@@ -0,0 +1,11 @@
+export declare const TIMELINE_ROW_BASE_PADDING = 5;
+export declare const TIMELINE_EYE_COLUMN_WIDTH = 22;
+export declare const TIMELINE_ARROW_COLUMN_WIDTH = 16;
+export declare const TIMELINE_FIELD_LABEL_EXTRA_WIDTH = 15;
+export declare const getTimelineRowIndentWidth: (depth: number) => number;
+export declare const getTimelineRowLeftChromeWidth: (depth: number) => number;
+export declare const getTimelineFieldLabelFlexBasis: (depth: number) => string;
+export declare const getExpandedRowDepth: ({ nestedDepth, treeDepth, }: {
+    nestedDepth: number;
+    treeDepth: number;
+}) => number;

package/dist/components/Timeline/timeline-row-layout.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getExpandedRowDepth = exports.getTimelineFieldLabelFlexBasis = exports.getTimelineRowLeftChromeWidth = exports.getTimelineRowIndentWidth = exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH = exports.TIMELINE_ARROW_COLUMN_WIDTH = exports.TIMELINE_EYE_COLUMN_WIDTH = exports.TIMELINE_ROW_BASE_PADDING = void 0;
+const timeline_indent_1 = require("./timeline-indent");
+exports.TIMELINE_ROW_BASE_PADDING = 5;
+exports.TIMELINE_EYE_COLUMN_WIDTH = 22;
+exports.TIMELINE_ARROW_COLUMN_WIDTH = 16;
+exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH = 15;
+const getTimelineRowIndentWidth = (depth) => {
+    return depth * timeline_indent_1.TIMELINE_INDENT;
+};
+exports.getTimelineRowIndentWidth = getTimelineRowIndentWidth;
+const getTimelineRowLeftChromeWidth = (depth) => {
+    return (exports.TIMELINE_ROW_BASE_PADDING +
+        exports.TIMELINE_EYE_COLUMN_WIDTH +
+        (0, exports.getTimelineRowIndentWidth)(depth) +
+        exports.TIMELINE_ARROW_COLUMN_WIDTH);
+};
+exports.getTimelineRowLeftChromeWidth = getTimelineRowLeftChromeWidth;
+const getTimelineFieldLabelFlexBasis = (depth) => {
+    return `calc(50% - ${(0, exports.getTimelineRowLeftChromeWidth)(depth) - exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH}px)`;
+};
+exports.getTimelineFieldLabelFlexBasis = getTimelineFieldLabelFlexBasis;
+const getExpandedRowDepth = ({ nestedDepth, treeDepth, }) => {
+    return nestedDepth + 1 + treeDepth;
+};
+exports.getExpandedRowDepth = getExpandedRowDepth;

package/dist/components/Timeline/use-resolved-stack-react-to-change.d.ts

@@ -0,0 +1,2 @@
+import type { ResolvedStackLocation } from 'remotion';
+export declare const useResolveStackAndReactToChange: (getStack: () => string | null) => ResolvedStackLocation | null;

package/dist/components/Timeline/use-resolved-stack-react-to-change.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResolveStackAndReactToChange = void 0;
+const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
+const use_resolved_stack_1 = require("./use-resolved-stack");
+// This case: https://github.com/remotion-dev/remotion/issues/7393
+// A code change has been made and we cannot re-calculate the stack right away.
+// In that case, we wait for fast refresh, wait for the new stack trace, triggering a new event.
+const matchesLostNodePathEvent = (event, location) => {
+    var _a;
+    if (!(location === null || location === void 0 ? void 0 : location.source) || !location.line) {
+        return false;
+    }
+    return (event.fileName === location.source &&
+        event.line === location.line &&
+        event.column === ((_a = location.column) !== null && _a !== void 0 ? _a : 0));
+};
+const useResolveStackAndReactToChange = (getStack) => {
+    const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [stack, setStack] = (0, react_1.useState)(() => getStack());
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    const resolvedLocationRef = (0, react_1.useRef)(resolvedLocation);
+    resolvedLocationRef.current = resolvedLocation;
+    (0, react_1.useEffect)(() => {
+        let interval = null;
+        const handleEvent = (event) => {
+            if (event.type !== 'lost-node-path') {
+                return;
+            }
+            if (!matchesLostNodePathEvent(event, resolvedLocationRef.current)) {
+                return;
+            }
+            const initialStack = getStack();
+            if (interval !== null) {
+                clearInterval(interval);
+            }
+            interval = setInterval(() => {
+                const newStack = getStack();
+                if (newStack !== initialStack) {
+                    if (interval !== null) {
+                        clearInterval(interval);
+                        interval = null;
+                    }
+                    setStack(newStack);
+                }
+            }, 10);
+        };
+        const unsubscribe = subscribeToEvent('lost-node-path', handleEvent);
+        return () => {
+            unsubscribe();
+            if (interval !== null) {
+                clearInterval(interval);
+            }
+        };
+    }, [subscribeToEvent, getStack]);
+    return resolvedLocation;
+};
+exports.useResolveStackAndReactToChange = useResolveStackAndReactToChange;

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

@@ -1,16 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSequencePropsSubscription = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
 const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, effects, }) => {
     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 { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { migrateExpandedTracksForSubscriptionKey } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { previewServerState: state } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previousNodePathRef = (0, react_1.useRef)(null);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useRef)(overrideIdToNodePathMappings);
+    overrideIdToNodePathMappingsRef.current = overrideIdToNodePathMappings;
     const clientId = state.type === 'connected' ? state.clientId : undefined;
+    const effectsSignature = (0, react_1.useMemo)(() => effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect).join('\0')).join('\0\0'), [effects]);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -28,6 +36,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
     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)(() => {
+        var _a;
         if (!clientId ||
             !locationSource ||
             !locationLine ||
@@ -35,6 +44,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
             !schema) {
             return;
         }
+        const nodePathAtResubscribe = (_a = overrideIdToNodePathMappingsRef.current[overrideId]) !== null && _a !== void 0 ? _a : null;
         const { release } = (0, sequence_props_subscription_store_1.acquireSequencePropsSubscription)({
             fileName: locationSource,
             line: locationLine,
@@ -49,10 +59,24 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
                 setCodeValues(result.nodePath, () => result.status);
             },
             applyEach: (result) => {
+                var _a;
                 if (!result.success) {
                     return;
                 }
-                setOverrideIdToNodePath(overrideId, result.nodePath);
+                const newNodePath = result.nodePath;
+                const newNodePathKey = (0, studio_shared_1.stringifySequenceSubscriptionKey)(newNodePath);
+                const previousNodePath = (_a = previousNodePathRef.current) !== null && _a !== void 0 ? _a : nodePathAtResubscribe;
+                const previousNodePathKey = previousNodePath
+                    ? (0, studio_shared_1.stringifySequenceSubscriptionKey)(previousNodePath)
+                    : null;
+                if (previousNodePathKey === newNodePathKey) {
+                    return;
+                }
+                if (previousNodePath) {
+                    migrateExpandedTracksForSubscriptionKey(previousNodePath, newNodePath);
+                }
+                previousNodePathRef.current = newNodePath;
+                setOverrideIdToNodePath(overrideId, newNodePath);
             },
         });
         return () => {
@@ -61,9 +85,11 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
     }, [
         clientId,
         effects,
+        effectsSignature,
         locationColumn,
         locationLine,
         locationSource,
+        migrateExpandedTracksForSubscriptionKey,
         overrideId,
         schema,
         setCodeValues,

package/dist/error-overlay/remotion-overlay/ShortcutHint.js

@@ -12,7 +12,7 @@ const container = {
     marginLeft: 6,
     opacity: 0.6,
     verticalAlign: 'middle',
-    fontSize: 14,
+    fontSize: 'inherit',
 };
 const ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
     const style = (0, react_1.useMemo)(() => {
@@ -20,10 +20,12 @@ const ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
             return {
                 display: 'inline-block',
                 transform: `translateY(2px)`,
-                fontSize: 14,
+                fontSize: 'inherit',
             };
         }
-        return {};
+        return {
+            fontSize: 'inherit',
+        };
     }, [keyToPress]);
     if ((0, use_keybinding_1.areKeyboardShortcutsDisabled)()) {
         return null;

package/dist/esm/chunk-6jf1natv.js

@@ -0,0 +1,25 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+export { __toESM, __require };