@remotion/studio 4.0.463 → 4.0.465

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-resolved-stack.d.ts

@@ -1,2 +1,3 @@
 import type { ResolvedStackLocation } from 'remotion';
+export declare const hasResolvedStack: (stack: string | null) => boolean;
 export declare const useResolvedStack: (stack: string | null) => ResolvedStackLocation | null;

package/dist/components/Timeline/use-resolved-stack.js

@@ -1,10 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResolvedStack = void 0;
+exports.useResolvedStack = exports.hasResolvedStack = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_stack_1 = require("./TimelineStack/get-stack");
 const resolvedCache = new Map();
+const hasResolvedStack = (stack) => {
+    if (!stack) {
+        return true;
+    }
+    return resolvedCache.has(stack);
+};
+exports.hasResolvedStack = hasResolvedStack;
 const inFlight = new Set();
 const subscribers = new Map();
 const useResolvedStack = (stack) => {
@@ -40,6 +47,8 @@ const useResolvedStack = (stack) => {
                 .catch((err) => {
                 // eslint-disable-next-line no-console
                 console.error('Could not get original location of Sequence', err);
+                resolvedCache.set(stack, null);
+                subs.forEach((fn) => fn(null));
             })
                 .finally(() => {
                 inFlight.delete(stack);

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 };