@remotion/studio 4.0.462 → 4.0.464

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;