@remotion/studio 4.0.518 → 4.0.520

package/dist/components/SidebarRenderButton.js

@@ -9,7 +9,10 @@ const hoverable_1 = require("../helpers/hoverable");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
 const InlineAction_1 = require("./InlineAction");
-const SidebarRenderButton = ({ composition, visible }) => {
+const revealStyle = {
+    display: 'flex',
+};
+const SidebarRenderButton = ({ composition, visible, readOnlyStudio }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
@@ -79,15 +82,21 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
             renderDefaults: defaults,
             initialDarkMode: defaults.darkMode,
-            readOnlyStudio: false,
+            readOnlyStudio,
         });
-    }, [composition.defaultProps, composition.id, props, setSelectedModal]);
+    }, [
+        composition.defaultProps,
+        composition.id,
+        props,
+        readOnlyStudio,
+        setSelectedModal,
+    ]);
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });
     }, [iconStyle]);
-    if (!visible || connectionStatus !== 'connected') {
+    if (!visible || (connectionStatus !== 'connected' && !readOnlyStudio)) {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }));
+    return (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: revealStyle, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }) }));
 };
 exports.SidebarRenderButton = SidebarRenderButton;

package/dist/components/Timeline/SequencePropsObserver.js

@@ -7,6 +7,7 @@ const fast_refresh_context_1 = require("../../fast-refresh-context");
 const client_id_1 = require("../../helpers/client-id");
 const sequence_node_path_mutations_1 = require("../../helpers/sequence-node-path-mutations");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
 const SequencePropsObserver = () => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { remapPropStatuses, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -37,11 +38,13 @@ const SequencePropsObserver = () => {
         }
         const statusRemappings = [];
         const overrideUpdates = [];
+        const overrideIdsToRefresh = new Set();
         for (const [overrideId, previousNodePath] of Object.entries(overrideIdToNodePathMappingsRef.current)) {
             let { nodePath } = previousNodePath;
             let wasRemapped = false;
             let wasDeleted = false;
             let runtimeNodePathExists = true;
+            let runtimeNodePathNeedsRefresh = false;
             const previousNodePathString = JSON.stringify(previousNodePath.nodePath);
             for (const mutation of mutations) {
                 for (const file of mutation.files) {
@@ -49,29 +52,35 @@ const SequencePropsObserver = () => {
                         continue;
                     }
                     // Prop statuses follow source nodes to their new paths. Override IDs,
-                    // however, follow React's runtime instances. After deleting an unkeyed
-                    // sibling, React reuses the instance already at the destination path.
-                    // Keep that mapping in place and only remove mappings for vacated paths.
-                    const runtimeNodePathIsSource = file.remappings.some((item) => JSON.stringify(item.oldNodePath) === previousNodePathString);
+                    // however, follow React's runtime instances. Structural edits may reuse
+                    // the instance already at a path, so only remove mappings from paths
+                    // which are sources without also being destinations.
+                    const runtimeNodePathIsSource = file.remappings.some((item) => item.oldNodePath !== null &&
+                        JSON.stringify(item.oldNodePath) === previousNodePathString);
                     const runtimeNodePathIsDestination = file.remappings.some((item) => item.newNodePath !== null &&
                         JSON.stringify(item.newNodePath) === previousNodePathString);
-                    const runtimeNodePathWasRestored = file.restoredNodePaths.some((item) => JSON.stringify(item) === previousNodePathString);
+                    const runtimeNodePathWasInserted = file.remappings.some((item) => item.oldNodePath === null &&
+                        item.newNodePath !== null &&
+                        JSON.stringify(item.newNodePath) === previousNodePathString);
+                    const runtimeNodePathWasUpdated = file.remappings.some((item) => item.oldNodePath !== null &&
+                        item.newNodePath !== null &&
+                        JSON.stringify(item.oldNodePath) === previousNodePathString &&
+                        JSON.stringify(item.newNodePath) === previousNodePathString);
                     if (runtimeNodePathIsSource) {
-                        runtimeNodePathExists =
-                            runtimeNodePathIsDestination || runtimeNodePathWasRestored;
+                        runtimeNodePathExists = runtimeNodePathIsDestination;
+                        runtimeNodePathNeedsRefresh =
+                            runtimeNodePathWasInserted || runtimeNodePathWasUpdated;
                     }
-                    else if (runtimeNodePathIsDestination ||
-                        runtimeNodePathWasRestored) {
+                    else if (runtimeNodePathIsDestination) {
                         runtimeNodePathExists = true;
+                        runtimeNodePathNeedsRefresh =
+                            runtimeNodePathWasInserted || runtimeNodePathWasUpdated;
                     }
                     if (wasDeleted) {
-                        const wasRestored = file.restoredNodePaths.some((restoredNodePath) => JSON.stringify(restoredNodePath) === JSON.stringify(nodePath));
-                        if (wasRestored) {
-                            wasDeleted = false;
-                        }
                         continue;
                     }
-                    const remapping = file.remappings.find((item) => JSON.stringify(item.oldNodePath) === JSON.stringify(nodePath));
+                    const remapping = file.remappings.find((item) => item.oldNodePath !== null &&
+                        JSON.stringify(item.oldNodePath) === JSON.stringify(nodePath));
                     if (!remapping) {
                         continue;
                     }
@@ -97,11 +106,17 @@ const SequencePropsObserver = () => {
                 overrideId,
                 nodePath: runtimeNodePathExists ? previousNodePath : null,
             });
+            if (runtimeNodePathExists && runtimeNodePathNeedsRefresh) {
+                overrideIdsToRefresh.add(overrideId);
+            }
         }
         remapPropStatuses(statusRemappings);
         for (const event of overrideUpdates) {
             setOverrideIdToNodePath(event.overrideId, event.nodePath);
         }
+        for (const overrideId of overrideIdsToRefresh) {
+            (0, sequence_props_subscription_store_1.refreshSequencePropsSubscription)(overrideId);
+        }
         for (const event of statusRemappings) {
             if (event.nodePath === null) {
                 continue;

package/dist/components/Timeline/Timeline.js

@@ -48,6 +48,7 @@ const is_current_selected_still_1 = require("../../helpers/is-current-selected-s
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const use_sync_external_store_1 = require("../../helpers/use-sync-external-store");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const import_assets_1 = require("../import-assets");
@@ -296,7 +297,7 @@ const TimelineInner = () => {
         overrideIdToNodePathMappings,
         compositions,
     ]);
-    const pendingInsertedElementSelection = (0, react_1.useSyncExternalStore)(inserted_element_selection_1.subscribeToInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection);
+    const pendingInsertedElementSelection = (0, use_sync_external_store_1.useSyncExternalStore)(inserted_element_selection_1.subscribeToInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection);
     const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
     const pendingSelectionStart = (0, react_1.useRef)(null);
     const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();

package/dist/components/Timeline/TimelineAssetField.js

@@ -23,6 +23,7 @@ const sourceActions = {
     display: 'flex',
     flex: 1,
     gap: 4,
+    margin: '0 4px',
     minWidth: 0,
 };
 const standaloneSourceActionStyle = {

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -1,118 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineDeleteKeybindings = 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 use_keybinding_1 = require("../../helpers/use-keybinding");
-const editor_guides_1 = require("../../state/editor-guides");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
-const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const imperative_state_1 = require("./imperative-state");
-const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
 const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const TimelineSelection_1 = require("./TimelineSelection");
-const update_selected_easing_1 = require("./update-selected-easing");
+const use_delete_timeline_items_1 = require("./use-delete-timeline-items");
 const TimelineDeleteKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
-    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { setGuidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
         }
-        const { clientId } = previewServerState;
-        const handleDelete = () => {
-            const timelinePosition = (0, imperative_state_1.getCurrentFrame)();
-            const { selectedItems, clearSelection, selectItems } = currentSelection.current;
-            const sequences = sequencesRef.current;
-            const propStatuses = propStatusesRef.current;
-            if (selectedItems.length === 0) {
-                return;
-            }
-            const selectedGuide = selectedItems.find((item) => item.type === 'guide');
-            if (selectedGuide) {
-                setGuidesList((prevGuides) => {
-                    const newGuides = prevGuides.filter((guide) => guide.id !== selectedGuide.guideId);
-                    (0, editor_guides_1.persistGuidesList)(newGuides);
-                    return newGuides;
-                });
-                clearSelection();
-                return;
-            }
-            const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
-                selections: selectedItems,
-                sequences,
-                overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                setPropStatuses,
-                clientId,
-                confirm,
-                propStatuses,
-                timelinePosition,
-            });
-            if (deletePromise !== null) {
-                deletePromise
-                    .then((deleted) => {
-                    if (deleted) {
-                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
-                            selections: selectedItems,
-                            sequences,
-                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                            propStatuses,
-                            timelinePosition,
-                        });
-                        if (nextSelection.length === 0) {
-                            clearSelection();
-                        }
-                        else {
-                            selectItems(nextSelection);
-                        }
-                    }
-                })
-                    .catch(() => undefined);
-                return;
-            }
-            const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
-            if (easingSelections.length === selectedItems.length) {
-                const resetEasingPromise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
-                    selections: easingSelections,
-                    sequences,
-                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                    propStatuses,
-                    setPropStatuses,
-                    clientId,
-                    easing: studio_shared_1.LINEAR_KEYFRAME_EASING,
-                });
-                if (resetEasingPromise !== null) {
-                    resetEasingPromise.catch(() => undefined);
-                    return;
-                }
-            }
-            const resetPromise = (0, reset_selected_timeline_props_1.resetSelectedTimelineProps)({
-                selections: selectedItems,
-                sequences,
-                overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                propStatuses,
-                setPropStatuses,
-                clientId,
-            });
-            if (resetPromise !== null) {
-                resetPromise.catch(() => undefined);
-            }
-        };
         const backspace = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'Backspace',
-            callback: handleDelete,
+            callback: () => deleteTimelineItems(null),
             commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -121,7 +37,7 @@ const TimelineDeleteKeybindings = () => {
         const deleteKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'Delete',
-            callback: handleDelete,
+            callback: () => deleteTimelineItems(null),
             commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -190,13 +106,12 @@ const TimelineDeleteKeybindings = () => {
         canSelect,
         confirm,
         currentSelection,
+        deleteTimelineItems,
         keybindings,
         overrideIdToNodePathMappings,
         propStatusesRef,
         previewServerState,
         sequencesRef,
-        setGuidesList,
-        setPropStatuses,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineDragHandler.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const get_timeline_max_zoom_1 = require("../../helpers/get-timeline-max-zoom");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const pointer_session_1 = require("../../helpers/pointer-session");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
@@ -73,22 +74,32 @@ const getClientXWithScroll = (x) => {
 };
 const TimelineDragHandler = () => {
     const video = remotion_1.Internals.useUnsafeVideoConfig();
+    const timelineSize = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const containerStyle = (0, react_1.useMemo)(() => {
         var _a;
+        var _b, _c, _d, _e;
         if (!canvasContent) {
             return {};
         }
-        const zoom = canvasContent.type === 'composition'
-            ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
-            : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        const durationInFrames = (_b = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _b !== void 0 ? _b : 1;
+        const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
+            durationInFrames,
+            timelineViewportWidth: (_d = (_c = timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width) !== null && _c !== void 0 ? _c : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _d !== void 0 ? _d : 0,
+            zoom: canvasContent.type === 'composition'
+                ? ((_e = zoomMap[canvasContent.compositionId]) !== null && _e !== void 0 ? _e : null)
+                : null,
+        });
         return {
             ...container,
-            width: 100 * zoom + '%',
+            width: (0, get_timeline_max_zoom_1.getTimelineWidth)({ durationInFrames, zoom }),
             height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
         };
-    }, [canvasContent, zoomMap]);
+    }, [canvasContent, timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width, video === null || video === void 0 ? void 0 : video.durationInFrames, zoomMap]);
     const hasPlayableContent = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ||
         ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
             (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset);
@@ -100,7 +111,6 @@ const TimelineDragHandler = () => {
 exports.TimelineDragHandler = TimelineDragHandler;
 const TimelineDragHandlerInner = () => {
     var _a;
-    var _b, _c;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
@@ -108,8 +118,8 @@ const TimelineDragHandlerInner = () => {
     });
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
-    const left = (_c = size === null || size === void 0 ? void 0 : size.left) !== null && _c !== void 0 ? _c : 0;
+    const width = (0, timeline_scroll_logic_1.getTimelineContentWidth)();
+    const left = (_a = size === null || size === void 0 ? void 0 : size.left) !== null && _a !== void 0 ? _a : 0;
     const [dragging, setDragging] = (0, react_1.useState)({
         dragging: false,
     });

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -65,7 +65,6 @@ const TimelineInOutDragHandler = () => {
 exports.TimelineInOutDragHandler = TimelineInOutDragHandler;
 const TimelineInOutDragHandlerInner = () => {
     var _a;
-    var _b, _c;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
@@ -82,8 +81,8 @@ const TimelineInOutDragHandlerInner = () => {
         }
         return (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth);
     }, [timelineWidth, videoConfig.durationInFrames]);
-    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
-    const left = (_c = size === null || size === void 0 ? void 0 : size.left) !== null && _c !== void 0 ? _c : 0;
+    const width = (0, timeline_scroll_logic_1.getTimelineContentWidth)();
+    const left = (_a = size === null || size === void 0 ? void 0 : size.left) !== null && _a !== void 0 ? _a : 0;
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const onInPointerDown = (0, react_1.useCallback)((e) => {

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -206,6 +206,7 @@ const hasTargetKeyframeAtCurrentFrame = (target) => {
     return (0, get_keyframe_navigation_1.hasKeyframeAtSourceFrame)(target.propStatus.keyframes, target.sourceFrame);
 };
 const getAddChange = (target) => {
+    var _a;
     if (target.propStatus.status === 'computed' ||
         !(0, studio_shared_1.isSchemaFieldKeyframable)({ schema: target.schema, key: target.fieldKey }) ||
         hasTargetKeyframeAtCurrentFrame(target)) {
@@ -213,7 +214,8 @@ const getAddChange = (target) => {
     }
     const value = getCurrentKeyframeValue({
         propStatus: target.propStatus,
-        jsxFrame: target.sourceFrame,
+        jsxFrame: target.sourceFrame +
+            ((_a = target.propStatus.keyframeDisplayOffsetAdjustment) !== null && _a !== void 0 ? _a : 0),
         defaultValue: target.defaultValue,
         dragOverrideValue: target.dragOverrideValue,
     });

package/dist/components/Timeline/TimelinePinchZoom.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelinePinchZoom = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_timeline_max_zoom_1 = require("../../helpers/get-timeline-max-zoom");
 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");
@@ -22,6 +23,15 @@ const TimelinePinchZoom = () => {
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const zoomRef = (0, react_1.useRef)(zoom);
     zoomRef.current = zoom;
+    const getCurrentTimelineZoom = (0, react_1.useCallback)((compositionId) => {
+        var _a;
+        var _b, _c, _d;
+        return (0, get_timeline_max_zoom_1.getTimelineZoom)({
+            durationInFrames: (_b = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _b !== void 0 ? _b : 1,
+            timelineViewportWidth: (_c = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _c !== void 0 ? _c : 0,
+            zoom: (_d = zoomRef.current[compositionId]) !== null && _d !== void 0 ? _d : null,
+        });
+    }, [videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames]);
     const pinchBaseZoomRef = (0, react_1.useRef)(null);
     const suppressWheelFromWebKitPinchRef = (0, react_1.useRef)(false);
     const touchPinchRef = (0, react_1.useRef)(null);
@@ -89,7 +99,6 @@ const TimelinePinchZoom = () => {
             suppressWheelFromWebKitPinchRef.current = false;
         };
         const onGestureStart = (event) => {
-            var _a;
             const e = event;
             if (!isVideoComposition) {
                 return;
@@ -106,7 +115,7 @@ const TimelinePinchZoom = () => {
             }
             e.preventDefault();
             suppressWheelFromWebKitPinchRef.current = true;
-            pinchBaseZoomRef.current = (_a = zoomRef.current[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+            pinchBaseZoomRef.current = getCurrentTimelineZoom(canvasContent.compositionId);
         };
         const onGestureChange = (event) => {
             const e = event;
@@ -153,6 +162,7 @@ const TimelinePinchZoom = () => {
         isVideoComposition,
         videoConfig,
         canvasContent,
+        getCurrentTimelineZoom,
         setZoom,
     ]);
     (0, react_1.useEffect)(() => {
@@ -161,7 +171,6 @@ const TimelinePinchZoom = () => {
             return;
         }
         const onTouchStart = (event) => {
-            var _a;
             if (event.touches.length !== 2) {
                 touchPinchRef.current = null;
                 return;
@@ -181,7 +190,7 @@ const TimelinePinchZoom = () => {
             }
             touchPinchRef.current = {
                 initialDistance,
-                initialZoom: (_a = zoomRef.current[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM,
+                initialZoom: getCurrentTimelineZoom(canvasContent.compositionId),
             };
         };
         const onTouchMove = (event) => {
@@ -233,6 +242,7 @@ const TimelinePinchZoom = () => {
         isVideoComposition,
         videoConfig,
         canvasContent,
+        getCurrentTimelineZoom,
         setZoom,
     ]);
     return null;

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelinePlayCursorSyncer = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_timeline_max_zoom_1 = require("../../helpers/get-timeline-max-zoom");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
@@ -10,9 +11,10 @@ const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 let lastTimelinePositionWhileScrolling = null;
 const TimelinePlayCursorSyncer = () => {
     var _a;
+    var _b, _c, _d;
     const video = remotion_1.Internals.useVideo();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const playing = remotion_1.Internals.usePlaying();
     const { playbackRate } = remotion_1.Internals.usePlaybackRate();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
@@ -21,9 +23,11 @@ const TimelinePlayCursorSyncer = () => {
         : null;
     // Asset previews have a synthetic video config, but no composition ID
     // with which to look up a persisted timeline zoom.
-    const zoom = compositionId
-        ? ((_a = zoomMap[compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
-        : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+    const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
+        durationInFrames: (_b = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _b !== void 0 ? _b : 1,
+        timelineViewportWidth: (_c = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _c !== void 0 ? _c : 0,
+        zoom: compositionId ? ((_d = zoomMap[compositionId]) !== null && _d !== void 0 ? _d : null) : null,
+    });
     if (video) {
         (0, imperative_state_1.setCurrentFrame)(timelinePosition);
         (0, imperative_state_1.setCurrentZoom)(zoom);

package/dist/components/Timeline/TimelineRowChrome.js

@@ -91,8 +91,10 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
     }, [onSelect]);
     const onContextMenu = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
-        onSelect();
-    }, [onSelect]);
+        if (!selected) {
+            onSelect();
+        }
+    }, [onSelect, selected]);
     const onDoubleClickIfNotInteractive = (0, react_1.useCallback)((e) => {
         const { target } = e;
         if (target instanceof Element &&