@remotion/studio 4.0.443 → 4.0.445

package/dist/components/Timeline/TimelinePinchZoom.js

@@ -0,0 +1,240 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelinePinchZoom = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
+const editor_zoom_gestures_1 = require("../../state/editor-zoom-gestures");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
+const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
+/**
+ * Maps wheel deltaY to zoom delta. Must be large enough that typical ctrl+wheel
+ * pinch steps change `TimelineZoomCtx` zoom by at least one 0.1 step after
+ * `Math.round(z * 10) / 10` in `timeline-zoom.tsx` (0.005 was too small).
+ */
+const ZOOM_WHEEL_DELTA = 0.06;
+const TimelinePinchZoom = () => {
+    const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { zoom, setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
+    const zoomRef = (0, react_1.useRef)(zoom);
+    zoomRef.current = zoom;
+    const pinchBaseZoomRef = (0, react_1.useRef)(null);
+    const suppressWheelFromWebKitPinchRef = (0, react_1.useRef)(false);
+    const touchPinchRef = (0, react_1.useRef)(null);
+    const onWheel = (0, react_1.useCallback)((e) => {
+        if (!editorZoomGestures || !isVideoComposition) {
+            return;
+        }
+        const { ctrlKey, metaKey, clientX, deltaY, deltaMode } = e;
+        const wantsToZoom = ctrlKey || metaKey;
+        if (!wantsToZoom) {
+            return;
+        }
+        if (suppressWheelFromWebKitPinchRef.current && wantsToZoom) {
+            e.preventDefault();
+            return;
+        }
+        if (!videoConfig || videoConfig.durationInFrames < 2) {
+            return;
+        }
+        if (!canvasContent || canvasContent.type !== 'composition') {
+            return;
+        }
+        const scrollEl = timeline_refs_1.scrollableRef.current;
+        if (!scrollEl) {
+            return;
+        }
+        e.preventDefault();
+        const anchorContentX = (0, timeline_scroll_logic_1.viewportClientXToScrollContentX)({
+            clientX,
+            scrollEl,
+        });
+        let scaledDeltaY = deltaY;
+        if (deltaMode === WheelEvent.DOM_DELTA_LINE) {
+            scaledDeltaY *= 16;
+        }
+        else if (deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+            scaledDeltaY *= scrollEl.clientHeight;
+        }
+        setZoom(canvasContent.compositionId, (z) => z - scaledDeltaY * ZOOM_WHEEL_DELTA, { anchorFrame: null, anchorContentX });
+    }, [
+        editorZoomGestures,
+        isVideoComposition,
+        videoConfig,
+        canvasContent,
+        setZoom,
+    ]);
+    const supportsWebKitPinch = typeof window !== 'undefined' && 'GestureEvent' in window;
+    (0, react_1.useEffect)(() => {
+        const el = timeline_refs_1.timelineVerticalScroll.current;
+        if (!el) {
+            return;
+        }
+        el.addEventListener('wheel', onWheel, { passive: false });
+        return () => {
+            el.removeEventListener('wheel', onWheel);
+        };
+    }, [onWheel]);
+    (0, react_1.useEffect)(() => {
+        const el = timeline_refs_1.timelineVerticalScroll.current;
+        if (!el || !editorZoomGestures || !supportsWebKitPinch) {
+            return;
+        }
+        const endWebKitPinch = () => {
+            pinchBaseZoomRef.current = null;
+            suppressWheelFromWebKitPinchRef.current = false;
+        };
+        const onGestureStart = (event) => {
+            var _a;
+            const e = event;
+            if (!isVideoComposition) {
+                return;
+            }
+            if (!videoConfig || videoConfig.durationInFrames < 2) {
+                return;
+            }
+            if (!canvasContent || canvasContent.type !== 'composition') {
+                return;
+            }
+            const scrollEl = timeline_refs_1.scrollableRef.current;
+            if (!scrollEl) {
+                return;
+            }
+            e.preventDefault();
+            suppressWheelFromWebKitPinchRef.current = true;
+            pinchBaseZoomRef.current = (_a = zoomRef.current[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        };
+        const onGestureChange = (event) => {
+            const e = event;
+            const base = pinchBaseZoomRef.current;
+            if (base === null ||
+                !isVideoComposition ||
+                !videoConfig ||
+                videoConfig.durationInFrames < 2) {
+                return;
+            }
+            if (!canvasContent || canvasContent.type !== 'composition') {
+                return;
+            }
+            const scrollEl = timeline_refs_1.scrollableRef.current;
+            if (!scrollEl) {
+                return;
+            }
+            e.preventDefault();
+            const anchorContentX = (0, timeline_scroll_logic_1.viewportClientXToScrollContentX)({
+                clientX: e.clientX,
+                scrollEl,
+            });
+            setZoom(canvasContent.compositionId, () => base * e.scale, {
+                anchorFrame: null,
+                anchorContentX,
+            });
+        };
+        const onGestureEnd = () => {
+            endWebKitPinch();
+        };
+        el.addEventListener('gesturestart', onGestureStart, { passive: false });
+        el.addEventListener('gesturechange', onGestureChange, { passive: false });
+        el.addEventListener('gestureend', onGestureEnd);
+        el.addEventListener('gesturecancel', onGestureEnd);
+        return () => {
+            el.removeEventListener('gesturestart', onGestureStart);
+            el.removeEventListener('gesturechange', onGestureChange);
+            el.removeEventListener('gestureend', onGestureEnd);
+            el.removeEventListener('gesturecancel', onGestureEnd);
+        };
+    }, [
+        editorZoomGestures,
+        supportsWebKitPinch,
+        isVideoComposition,
+        videoConfig,
+        canvasContent,
+        setZoom,
+    ]);
+    (0, react_1.useEffect)(() => {
+        const el = timeline_refs_1.timelineVerticalScroll.current;
+        if (!el || !editorZoomGestures) {
+            return;
+        }
+        const onTouchStart = (event) => {
+            var _a;
+            if (event.touches.length !== 2) {
+                touchPinchRef.current = null;
+                return;
+            }
+            if (!isVideoComposition ||
+                !videoConfig ||
+                videoConfig.durationInFrames < 2) {
+                return;
+            }
+            if (!canvasContent || canvasContent.type !== 'composition') {
+                return;
+            }
+            const [t0, t1] = [event.touches[0], event.touches[1]];
+            const initialDistance = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
+            if (initialDistance < 1e-6) {
+                return;
+            }
+            touchPinchRef.current = {
+                initialDistance,
+                initialZoom: (_a = zoomRef.current[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM,
+            };
+        };
+        const onTouchMove = (event) => {
+            const pinch = touchPinchRef.current;
+            if (pinch === null ||
+                event.touches.length !== 2 ||
+                !videoConfig ||
+                videoConfig.durationInFrames < 2) {
+                return;
+            }
+            if (!canvasContent || canvasContent.type !== 'composition') {
+                return;
+            }
+            const scrollEl = timeline_refs_1.scrollableRef.current;
+            if (!scrollEl) {
+                return;
+            }
+            event.preventDefault();
+            const [t0, t1] = [event.touches[0], event.touches[1]];
+            const dist = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
+            const ratio = dist / pinch.initialDistance;
+            const clientX = (t0.clientX + t1.clientX) / 2;
+            const anchorContentX = (0, timeline_scroll_logic_1.viewportClientXToScrollContentX)({
+                clientX,
+                scrollEl,
+            });
+            setZoom(canvasContent.compositionId, () => pinch.initialZoom * ratio, {
+                anchorFrame: null,
+                anchorContentX,
+            });
+        };
+        const onTouchEnd = (event) => {
+            if (event.touches.length < 2) {
+                touchPinchRef.current = null;
+            }
+        };
+        el.addEventListener('touchstart', onTouchStart, { passive: true });
+        el.addEventListener('touchmove', onTouchMove, { passive: false });
+        el.addEventListener('touchend', onTouchEnd);
+        el.addEventListener('touchcancel', onTouchEnd);
+        return () => {
+            el.removeEventListener('touchstart', onTouchStart);
+            el.removeEventListener('touchmove', onTouchMove);
+            el.removeEventListener('touchend', onTouchEnd);
+            el.removeEventListener('touchcancel', onTouchEnd);
+        };
+    }, [
+        editorZoomGestures,
+        isVideoComposition,
+        videoConfig,
+        canvasContent,
+        setZoom,
+    ]);
+    return null;
+};
+exports.TimelinePinchZoom = TimelinePinchZoom;

package/dist/components/Timeline/TimelineSlider.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
 const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineSliderHandle_1 = require("./TimelineSliderHandle");
@@ -32,20 +33,33 @@ const TimelineSlider = () => {
 };
 exports.TimelineSlider = TimelineSlider;
 const Inner = () => {
+    var _a;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const ref = (0, react_1.useRef)(null);
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     if (timelineWidth === null) {
         throw new Error('Unexpectedly did not have timeline width');
     }
-    const style = (0, react_1.useMemo)(() => {
-        const left = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(timelinePosition, videoConfig.durationInFrames, timelineWidth);
-        return {
-            ...container,
-            transform: `translateX(${left}px)`,
-        };
-    }, [timelinePosition, videoConfig.durationInFrames, timelineWidth]);
+    const zoomLevel = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+        ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
+        : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        const el = ref.current;
+        const measuredWidth = (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        if (!el || measuredWidth === undefined || measuredWidth === 0) {
+            return;
+        }
+        el.style.transform = `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(timelinePosition, videoConfig.durationInFrames, measuredWidth)}px)`;
+    }, [
+        timelinePosition,
+        videoConfig.durationInFrames,
+        timelineWidth,
+        zoomLevel,
+    ]);
     (0, react_1.useImperativeHandle)(exports.redrawTimelineSliderFast, () => {
         return {
             draw: (frame, width) => {
@@ -76,7 +90,7 @@ const Inner = () => {
             current.removeEventListener('scroll', onScroll);
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, children: [
+    return (jsx_runtime_1.jsxs("div", { ref: ref, style: container, children: [
             jsx_runtime_1.jsx("div", { style: line }), jsx_runtime_1.jsx(TimelineSliderHandle_1.TimelineSliderHandle, {})
         ] }));
 };

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -151,11 +151,6 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
     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));
-    (0, react_1.useEffect)(() => {
-        return () => {
-            (0, frame_database_1.clearFramesForSrc)(src);
-        };
-    }, [src]);
     // for rendering frames
     (0, react_1.useEffect)(() => {
         if (error) {
@@ -201,11 +196,9 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
             if (unfilled.length === 0) {
                 return () => {
                     current.removeChild(canvas);
-                    (0, frame_database_1.clearOldFrames)();
                 };
             }
         }
-        (0, frame_database_1.clearOldFrames)();
         (0, extract_frames_1.extractFrames)({
             timestampsInSeconds: ({ track, }) => {
                 aspectRatio.current = track.width / track.height;
@@ -234,14 +227,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                     }
                     frame = undefined;
                     const databaseKey = (0, frame_database_1.makeFrameDatabaseKey)(src, transformed.timestamp);
-                    const existingFrame = frame_database_1.frameDatabase.get(databaseKey);
-                    if (existingFrame) {
-                        existingFrame.frame.close();
-                    }
-                    frame_database_1.frameDatabase.set(databaseKey, {
-                        frame: transformed,
-                        lastUsed: Date.now(),
-                    });
+                    (0, frame_database_1.addFrameToCache)(databaseKey, transformed);
                     if (aspectRatio.current === null) {
                         throw new Error('Aspect ratio is not set');
                     }
@@ -288,9 +274,6 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         })
             .catch((e) => {
             setError(e);
-        })
-            .finally(() => {
-            (0, frame_database_1.clearOldFrames)();
         });
         return () => {
             controller.abort();

package/dist/components/Timeline/TimelineZoomControls.js

@@ -33,19 +33,22 @@ const TimelineZoomControls = () => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2));
+        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2), { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
     const onPlusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2));
+        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2), { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
     const onChange = (0, react_1.useCallback)((e) => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, () => Number(e.target.value));
+        setZoom(canvasContent.compositionId, () => Number(e.target.value), {
+            anchorFrame: null,
+            anchorContentX: null,
+        });
     }, [canvasContent, setZoom]);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     if (isStill ||

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -35,9 +35,21 @@ export declare const getFrameFromX: ({ clientX, durationInFrames, width, extrapo
     width: number;
     extrapolate: "clamp" | "extend";
 }) => number;
-export declare const zoomAndPreserveCursor: ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, }: {
+/**
+ * Horizontal position inside the scrollable timeline content (0 … scrollWidth)
+ * for a viewport `clientX`, so pinch-anchoring matches the pointer (not a
+ * rounded frame index).
+ */
+export declare const viewportClientXToScrollContentX: ({ clientX, scrollEl, }: {
+    clientX: number;
+    scrollEl: HTMLDivElement;
+}) => number;
+export declare const zoomAndPreserveCursor: ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }: {
     oldZoom: number;
     newZoom: number;
     currentFrame: number;
     currentDurationInFrames: number;
+    anchorFrame: number | null;
+    /** Prefer this over `anchorFrame` when not null (subpixel-accurate anchor). */
+    anchorContentX: number | null;
 }) => void;

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.zoomAndPreserveCursor = exports.viewportClientXToScrollContentX = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -200,9 +200,18 @@ const getFrameFromX = ({ clientX, durationInFrames, width, extrapolate, }) => {
     return frame;
 };
 exports.getFrameFromX = getFrameFromX;
-const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, }) => {
-    var _a, _b;
-    var _c;
+/**
+ * Horizontal position inside the scrollable timeline content (0 … scrollWidth)
+ * for a viewport `clientX`, so pinch-anchoring matches the pointer (not a
+ * rounded frame index).
+ */
+const viewportClientXToScrollContentX = ({ clientX, scrollEl, }) => {
+    const rect = scrollEl.getBoundingClientRect();
+    const clampedClientX = Math.min(Math.max(clientX, rect.left), rect.right);
+    return clampedClientX + scrollEl.scrollLeft - rect.left;
+};
+exports.viewportClientXToScrollContentX = viewportClientXToScrollContentX;
+const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }) => {
     const ratio = newZoom / oldZoom;
     if (ratio === 1) {
         return;
@@ -212,9 +221,14 @@ const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDuration
         return;
     }
     const frameIncrement = getFrameIncrement(currentDurationInFrames);
-    const prevCursorPosition = frameIncrement * currentFrame + timeline_layout_1.TIMELINE_PADDING;
+    const frameForScroll = anchorFrame !== null && anchorFrame !== void 0 ? anchorFrame : currentFrame;
+    const prevCursorPosition = anchorContentX !== null
+        ? Math.min(Math.max(anchorContentX, 0), current.scrollWidth)
+        : frameIncrement * frameForScroll + timeline_layout_1.TIMELINE_PADDING;
     const newCursorPosition = ratio * (prevCursorPosition - timeline_layout_1.TIMELINE_PADDING) + timeline_layout_1.TIMELINE_PADDING;
     current.scrollLeft += newCursorPosition - prevCursorPosition;
-    (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(currentFrame, ((_c = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0) * ratio);
+    // Playhead position is synced in `TimelineSlider` `useLayoutEffect` using
+    // measured `sliderAreaRef.clientWidth` so it matches layout after zoom
+    // (avoids fighting React `style` with stale `timelineWidth` during pinch).
 };
 exports.zoomAndPreserveCursor = zoomAndPreserveCursor;

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

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

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

@@ -6,7 +6,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
-const useSequencePropsSubscription = (sequence, originalLocation) => {
+const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnabled) => {
     var _a;
     var _b, _c, _d, _e;
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
@@ -44,7 +44,12 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
     const currentLocationColumn = (0, react_1.useRef)(locationColumn);
     currentLocationColumn.current = locationColumn;
     const nodePathRef = (0, react_1.useRef)(null);
+    const [nodePath, setNodePath] = (0, react_1.useState)(null);
     const isMountedRef = (0, react_1.useRef)(true);
+    const setNodePathBoth = (0, react_1.useCallback)((next) => {
+        nodePathRef.current = next;
+        setNodePath(next);
+    }, []);
     (0, react_1.useEffect)(() => {
         isMountedRef.current = true;
         return () => {
@@ -52,12 +57,18 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
         };
     }, []);
     (0, react_1.useEffect)(() => {
+        if (!visualModeEnabled) {
+            setPropStatusesForSequence(null);
+            setNodePathBoth(null);
+            return;
+        }
         if (!clientId ||
             !locationSource ||
             !locationLine ||
             locationColumn === null ||
             !schemaKeysString) {
             setPropStatusesForSequence(null);
+            setNodePathBoth(null);
             return;
         }
         const keys = schemaKeysString.split(',');
@@ -75,16 +86,16 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
                 return;
             }
             if (result.canUpdate) {
-                nodePathRef.current = result.nodePath;
+                setNodePathBoth(result.nodePath);
                 setPropStatusesForSequence(result.props);
             }
             else {
-                nodePathRef.current = null;
+                setNodePathBoth(null);
                 setPropStatusesForSequence(null);
             }
         })
             .catch((err) => {
-            nodePathRef.current = null;
+            setNodePathBoth(null);
             remotion_1.Internals.Log.error(err);
             setPropStatusesForSequence(null);
         });
@@ -95,7 +106,7 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
             if (!isMountedRef.current) {
                 setPropStatusesForSequence(null);
             }
-            nodePathRef.current = null;
+            setNodePathBoth(null);
             if (currentNodePath) {
                 (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
                     fileName: locationSource,
@@ -107,14 +118,19 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
             }
         };
     }, [
+        visualModeEnabled,
         clientId,
         locationSource,
         locationLine,
         locationColumn,
         schemaKeysString,
         setPropStatusesForSequence,
+        setNodePathBoth,
     ]);
     (0, react_1.useEffect)(() => {
+        if (!visualModeEnabled) {
+            return;
+        }
         if (!locationSource || !locationLine || locationColumn === null) {
             return;
         }
@@ -132,6 +148,7 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
             }
             else {
                 setPropStatusesForSequence(null);
+                setNodePathBoth(null);
             }
         };
         const unsub = subscribeToEvent('sequence-props-updated', listener);
@@ -139,12 +156,14 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
             unsub();
         };
     }, [
+        visualModeEnabled,
         locationSource,
         locationLine,
         locationColumn,
         subscribeToEvent,
         setPropStatusesForSequence,
+        setNodePathBoth,
     ]);
-    return nodePathRef.current;
+    return nodePath;
 };
 exports.useSequencePropsSubscription = useSequencePropsSubscription;

package/dist/error-overlay/react-overlay/listen-to-runtime-errors.js

@@ -48,11 +48,7 @@ const crashWithFrames = (crash) => (error) => {
 function listenToRuntimeErrors(crash) {
     const crashWithFramesRunTime = crashWithFrames(crash);
     (0, unhandled_error_1.register)(window, (error) => {
-        return crashWithFramesRunTime({
-            message: error.message,
-            stack: error.stack,
-            name: error.name,
-        });
+        return crashWithFramesRunTime(error);
     });
     (0, unhandled_rejection_1.register)(window, (error) => {
         return crashWithFramesRunTime(error);

package/dist/error-overlay/remotion-overlay/CopyStackTrace.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CopyStackTrace: React.FC<{
+    readonly canHaveKeyboardShortcuts: boolean;
+    readonly errorText: string;
+}>;

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyStackTrace = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../components/Button");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const ShortcutHint_1 = require("./ShortcutHint");
+const CopyStackTrace = ({ canHaveKeyboardShortcuts, errorText }) => {
+    const [copyState, setCopyState] = (0, react_1.useState)('idle');
+    const handleCopyToClipboard = (0, react_1.useCallback)(() => {
+        navigator.clipboard
+            .writeText(errorText)
+            .then(() => {
+            setCopyState('copied');
+            setTimeout(() => setCopyState('idle'), 2000);
+        })
+            .catch(() => {
+            setCopyState('failed');
+            setTimeout(() => setCopyState('idle'), 2000);
+        });
+    }, [errorText]);
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 't',
+            callback: handleCopyToClipboard,
+            commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, handleCopyToClipboard, registerKeybinding]);
+    const label = (0, react_1.useMemo)(() => {
+        if (copyState === 'copied') {
+            return 'Copied!';
+        }
+        if (copyState === 'failed') {
+            return 'Failed!';
+        }
+        return 'Copy Stacktrace';
+    }, [copyState]);
+    return (jsx_runtime_1.jsxs(Button_1.Button, { onClick: handleCopyToClipboard, children: [label, ' ', copyState === 'idle' && canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { cmdOrCtrl: true, keyToPress: "t" })) : null] }));
+};
+exports.CopyStackTrace = CopyStackTrace;