@remotion/studio 4.0.503 → 4.0.505

package/dist/components/Timeline/TimelineSelection.js

@@ -17,6 +17,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
+const imperative_state_1 = require("./imperative-state");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
@@ -571,7 +572,6 @@ const TimelineSelectableItemsProvider = ({ children, timeline }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { selectedItems } = (0, exports.useTimelineSelection)();
     const selectableItems = (0, react_1.useMemo)(() => (0, exports.getSelectableTimelineItems)({
         getDragOverrides,
@@ -580,7 +580,7 @@ const TimelineSelectableItemsProvider = ({ children, timeline }) => {
         propStatuses,
         selectedItems,
         timeline,
-        timelinePosition,
+        timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
     }), [
         getDragOverrides,
         getEffectDragOverrides,
@@ -588,7 +588,6 @@ const TimelineSelectableItemsProvider = ({ children, timeline }) => {
         propStatuses,
         selectedItems,
         timeline,
-        timelinePosition,
     ]);
     return (jsx_runtime_1.jsx(exports.TimelineSelectionOrderProvider, { items: selectableItems, children: children }));
 };

package/dist/components/Timeline/TimelineSequence.js

@@ -59,6 +59,7 @@ const disable_sequence_interactivity_1 = require("./disable-sequence-interactivi
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-items");
 const get_timeline_media_visualization_layout_1 = require("./get-timeline-media-visualization-layout");
+const imperative_state_1 = require("./imperative-state");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineImageInfo_1 = require("./TimelineImageInfo");
@@ -158,7 +159,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
     var _a, _b, _c;
-    var _d, _e, _f, _g, _h, _j;
+    var _d, _e, _f, _g, _h;
     const video = remotion_1.Internals.useVideo();
     const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
@@ -200,7 +201,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)((0, use_default_editor_info_1.canUseEditorPicker)(previewConnected));
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
@@ -233,6 +233,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         e.stopPropagation();
         if (action === 'open-connected-composition') {
+            const timelinePosition = (0, imperative_state_1.getCurrentFrame)();
             selectComposition(connectedCompositions[0], true, (0, get_sequence_double_click_action_1.getConnectedCompositionFrame)({
                 timelinePosition,
                 sequence: s,
@@ -248,7 +249,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         s,
         selectComposition,
         sequenceFrameOffset,
-        timelinePosition,
     ]);
     const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
@@ -261,7 +261,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const mediaSrc = s.type === 'audio' || s.type === 'video' || s.type === 'image'
         ? s.src
         : null;
-    const assetLinkInfo = (0, react_1.useMemo)(() => (mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null), [mediaSrc]);
     const onDuplicateSequenceFromSource = (0, react_1.useCallback)(() => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePathInfo || duplicateDisabled) {
             return;
@@ -327,21 +326,25 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         setPropStatuses,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
-    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
-        clientId: previewInteractive && previewServerState.type === 'connected'
-            ? previewServerState.clientId
-            : null,
-        nodePath,
-        propStatusesForOverride,
-        sequence: s,
-        sequenceFrameOffset,
-        setPropStatuses,
-        timelinePosition,
-        validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
-    });
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        var _a;
+        if (selectable) {
+            onSelect({ shiftKey: false, toggleKey: false });
+        }
+        const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
+            clientId: previewInteractive && previewServerState.type === 'connected'
+                ? previewServerState.clientId
+                : null,
+            nodePath,
+            propStatusesForOverride,
+            sequence: s,
+            sequenceFrameOffset,
+            setPropStatuses,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
+            validatedSource: (_a = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _a !== void 0 ? _a : null,
+        });
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
-            assetLinkInfo,
+            assetLinkInfo: mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null,
             canOpenInEditor,
             deleteDisabled,
             disableInteractivityDisabled,
@@ -361,32 +364,35 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                 : [],
         });
     }, [
-        assetLinkInfo,
         canOpenInEditor,
         deleteDisabled,
         disableInteractivityDisabled,
         duplicateDisabled,
         editorInfo,
         fileLocation,
-        freezeFrameMenuItem,
+        mediaSrc,
+        nodePath,
+        onSelect,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         openInEditor,
         originalLocation,
+        previewInteractive,
+        previewServerState,
+        propStatusesForOverride,
         s,
         selectAsset,
+        selectable,
+        sequenceFrameOffset,
+        setPropStatuses,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
-    const onContextMenuOpen = (0, react_1.useCallback)(() => {
-        if (selectable) {
-            onSelect({ shiftKey: false, toggleKey: false });
-        }
-    }, [onSelect, selectable]);
     const { frozenFrame } = s;
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
-        timelineDurationInFrames: (_g = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _g !== void 0 ? _g : 1,
+        timelineDurationInFrames: (_f = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _f !== void 0 ? _f : 1,
     });
     if (!video) {
         throw new TypeError('Expected video config');
@@ -458,7 +464,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: mediaVisualizationLayout.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: mediaVisualizationLayout.width }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showLeftEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_h = video.durationInFrames) !== null && _h !== void 0 ? _h : 1 })) : null, showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1 })) : null] }));
-    return previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: onContextMenuOpen, children: sequence })) : (sequence);
+    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: mediaVisualizationLayout.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: mediaVisualizationLayout.width }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showLeftEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_g = video.durationInFrames) !== null && _g !== void 0 ? _g : 1 })) : null, showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_h = video.durationInFrames) !== null && _h !== void 0 ? _h : 1 })) : null] }));
+    return previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceItem.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import type { _InternalTypes, TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineSequenceItem: React.FC<{
+export declare const TimelineSequenceItem: React.NamedExoticComponent<{
     readonly children: React.ReactNode;
     readonly sequence: TSequence;
-    readonly connectedCompositions: readonly _InternalTypes['AnyComposition'][];
+    readonly connectedCompositions: readonly import("remotion").AnyComposition[];
     readonly nestedDepth: number;
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly keyframeDisplayOffset: number;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -61,6 +61,7 @@ const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-items");
+const imperative_state_1 = require("./imperative-state");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
@@ -173,9 +174,9 @@ const getSequenceReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
+const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
     var _a, _b, _c;
-    var _d, _e, _f;
+    var _d, _e;
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
     const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(nodePathInfo);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -195,7 +196,6 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
     const [sequenceDropIndicator, setSequenceDropIndicator] = (0, react_1.useState)(null);
     const [sequenceDropRejection, setSequenceDropRejection] = (0, react_1.useState)(null);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { canOpenInEditor, editorInfo, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
     const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
         location: originalLocation,
@@ -469,7 +469,6 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         sequence.type === 'image'
         ? sequence.src
         : null;
-    const assetLinkInfo = (0, react_1.useMemo)(() => (mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null), [mediaSrc]);
     const isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         if (nodePathInfo === null) {
@@ -573,6 +572,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         }
         e.stopPropagation();
         if (action === 'open-connected-composition') {
+            const timelinePosition = (0, imperative_state_1.getCurrentFrame)();
             selectComposition(connectedCompositions[0], true, (0, get_sequence_double_click_action_1.getConnectedCompositionFrame)({
                 timelinePosition,
                 sequence,
@@ -588,7 +588,6 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         selectComposition,
         sequence,
         sequenceFrameOffset,
-        timelinePosition,
     ]);
     const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
     const canRenameSelectedSequence = canRenameThisSequence &&
@@ -636,18 +635,6 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         }
         setIsRenaming(true);
     }, [canRenameThisSequence]);
-    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
-        clientId: previewInteractive && previewServerState.type === 'connected'
-            ? previewServerState.clientId
-            : null,
-        nodePath,
-        propStatusesForOverride,
-        sequence,
-        sequenceFrameOffset,
-        setPropStatuses,
-        timelinePosition,
-        validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
-    });
     const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
         previewInteractive &&
         Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
@@ -707,9 +694,25 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             key: selected_outline_types_1.cropFieldKeys.left,
         }, undefined, undefined, { reveal: true });
     }, [canCrop, nodePathInfo, selectItem]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        var _a;
+        if (selectable) {
+            onSelect({ shiftKey: false, toggleKey: false });
+        }
+        const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
+            clientId: previewInteractive && previewServerState.type === 'connected'
+                ? previewServerState.clientId
+                : null,
+            nodePath,
+            propStatusesForOverride,
+            sequence,
+            sequenceFrameOffset,
+            setPropStatuses,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
+            validatedSource: (_a = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _a !== void 0 ? _a : null,
+        });
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
-            assetLinkInfo,
+            assetLinkInfo: mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null,
             canOpenInEditor,
             deleteDisabled,
             disableInteractivityDisabled,
@@ -781,7 +784,6 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                 : [],
         });
     }, [
-        assetLinkInfo,
         canAddEffect,
         canCrop,
         canOpenInEditor,
@@ -791,7 +793,8 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         duplicateDisabled,
         editorInfo,
         fileLocation,
-        freezeFrameMenuItem,
+        mediaSrc,
+        nodePath,
         nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
         onAddEffect,
         onCrop,
@@ -799,10 +802,18 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onRenameSequence,
+        onSelect,
         openInEditor,
         originalLocation,
+        previewInteractive,
+        previewServerState,
+        propStatusesForOverride,
         selectAsset,
+        selectable,
         sequence,
+        sequenceFrameOffset,
+        setPropStatuses,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
     const canDropEffect = previewInteractive &&
         nodePath !== null &&
@@ -870,11 +881,11 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })
                     ] })) : null] }) }));
     const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
                 (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&
                 validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset })) : null, children, sequenceDropIndicator === 'after' ? (jsx_runtime_1.jsx("div", { style: sequenceReorderAfterLineWrapper, children: jsx_runtime_1.jsx("div", { style: sequenceReorderAfterLine }) })) : null] }));
 };
-exports.TimelineSequenceItem = TimelineSequenceItem;
+exports.TimelineSequenceItem = react_1.default.memo(TimelineSequenceItemInner);

package/dist/components/Timeline/TimelineSequencePropItem.d.ts

@@ -4,14 +4,21 @@ import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-s
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
 import { type TimelineKeyframeControlsMode } from './TimelineKeyframeControls';
-export declare const TimelineSequenceKeyframedValue: React.FC<{
+type TimelineSequenceKeyframedValueBaseProps = {
     readonly field: SchemaFieldInfo;
     readonly fileName: string;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+};
+type TimelineSequenceKeyframedValueProps = TimelineSequenceKeyframedValueBaseProps & ({
     readonly sourceFrame: number;
-}>;
+    readonly keyframeDisplayOffset?: never;
+} | {
+    readonly sourceFrame?: never;
+    readonly keyframeDisplayOffset: number;
+});
+export declare const TimelineSequenceKeyframedValue: React.NamedExoticComponent<TimelineSequenceKeyframedValueProps>;
 export declare const TimelineSequencePropItem: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly validatedLocation: CodePosition;
@@ -22,3 +29,4 @@ export declare const TimelineSequencePropItem: React.FC<{
     readonly keyframeDisplayOffset: number;
     readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
 }>;
+export {};

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequencePropItem = exports.TimelineSequenceKeyframedValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
@@ -132,7 +165,16 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
     }, [clearDragOverrides, nodePath]);
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: nodePath }));
 };
-const TimelineSequenceKeyframedValue = ({ field, fileName, nodePath, schema, propStatus, sourceFrame }) => {
+const TimelineSequenceKeyframedValueAtSourceFrame = ({ field, nodePath, propStatus, sourceFrame, dragOverrideValue, onSave, onDragValueChangeAtFrame, onDragEnd, }) => {
+    const onDragValueChange = (0, react_1.useCallback)((value) => onDragValueChangeAtFrame(value, sourceFrame), [onDragValueChangeAtFrame, sourceFrame]);
+    return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, sourceFrame: sourceFrame, dragOverrideValue: dragOverrideValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: nodePath }));
+};
+const TimelineSequenceKeyframedValueAtCurrentFrame = ({ keyframeDisplayOffset, ...props }) => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    return (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtSourceFrame, { ...props, sourceFrame: timelinePosition - keyframeDisplayOffset }));
+};
+const TimelineSequenceKeyframedValueUnmemoized = (props) => {
+    const { field, fileName, nodePath, schema, propStatus } = props;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -158,19 +200,28 @@ const TimelineSequenceKeyframedValue = ({ field, fileName, nodePath, schema, pro
             clientId,
         });
     }, [clientId, field.key, fileName, nodePath, schema, setPropStatuses]);
-    const onKeyframedDragValueChange = (0, react_1.useCallback)((value) => {
+    const onKeyframedDragValueChangeAtFrame = (0, react_1.useCallback)((value, sourceFrame) => {
         setDragOverrides(nodePath, field.key, remotion_1.Internals.makeKeyframedDragOverride({
             status: propStatus,
             frame: sourceFrame,
             value,
         }));
-    }, [propStatus, field.key, nodePath, setDragOverrides, sourceFrame]);
+    }, [propStatus, field.key, nodePath, setDragOverrides]);
     const onKeyframedDragEnd = (0, react_1.useCallback)(() => {
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
-    return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, sourceFrame: sourceFrame, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onKeyframedDragValueChange, onDragEnd: onKeyframedDragEnd, scaleLockNodePath: nodePath }));
+    const valueProps = {
+        field,
+        nodePath,
+        propStatus,
+        dragOverrideValue,
+        onSave: onSaveKeyframed,
+        onDragValueChangeAtFrame: onKeyframedDragValueChangeAtFrame,
+        onDragEnd: onKeyframedDragEnd,
+    };
+    return props.sourceFrame !== undefined ? (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtSourceFrame, { ...valueProps, sourceFrame: props.sourceFrame })) : (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtCurrentFrame, { ...valueProps, keyframeDisplayOffset: props.keyframeDisplayOffset }));
 };
-exports.TimelineSequenceKeyframedValue = TimelineSequenceKeyframedValue;
+exports.TimelineSequenceKeyframedValue = react_1.default.memo(TimelineSequenceKeyframedValueUnmemoized);
 const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
     var _a;
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -178,8 +229,6 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
     const propStatus = (_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
     const dragOverrideValue = (0, react_1.useMemo)(() => {
@@ -257,7 +306,10 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         validatedLocation.source,
         propStatus,
     ]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        if (selection.selectable) {
+            selection.onSelect({ shiftKey: false, toggleKey: false });
+        }
         return [
             {
                 type: 'item',
@@ -272,7 +324,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 value: 'reset-sequence-field',
             },
         ];
-    }, [canShowReset, onReset]);
+    }, [canShowReset, onReset, selection]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
         var _a;
         if (!window.remotion_editorName ||
@@ -288,7 +340,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     if (propStatus === null) {
         return null;
     }
-    const fieldValue = isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, sourceFrame: sourceFrame })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }));
+    const fieldValue = isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }));
     if (field.typeName === 'asset' && field.key === 'src') {
         return (jsx_runtime_1.jsx("div", { style: {
                 ...inlineSourceFieldRow,
@@ -297,6 +349,6 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             }, children: fieldValue }));
     }
     const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: fieldValue }) }));
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
+    return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.d.ts

@@ -121,7 +121,7 @@ export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo,
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceFromDragTarget[] | null;
-export declare const TimelineSequenceLeftEdgeDragHandle: React.FC<{
+export declare const TimelineSequenceLeftEdgeDragHandle: React.NamedExoticComponent<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
@@ -134,7 +134,7 @@ export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth,
     dragging: boolean;
     onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
 };
-export declare const TimelineSequenceRightEdgeDragHandle: React.FC<{
+export declare const TimelineSequenceRightEdgeDragHandle: React.NamedExoticComponent<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.canResizeTimelineSequenceDuration = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
@@ -531,7 +564,7 @@ const clearFromDragOverrides = ({ clearDragOverrides, clearEffectDragOverrides,
         }
     }
 };
-const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
+const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
@@ -721,7 +754,7 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
     };
     return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to trim start", style: style, onPointerDown: onPointerDown }));
 };
-exports.TimelineSequenceLeftEdgeDragHandle = TimelineSequenceLeftEdgeDragHandle;
+exports.TimelineSequenceLeftEdgeDragHandle = react_1.default.memo(TimelineSequenceLeftEdgeDragHandleInner);
 const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides, setEffectDragOverrides, clearEffectDragOverrides, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
@@ -944,7 +977,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
     };
 };
 exports.useTimelineSequenceFromDrag = useTimelineSequenceFromDrag;
-const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
+const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
@@ -1128,4 +1161,4 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
     };
     return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to change duration", style: style, onPointerDown: onPointerDown }));
 };
-exports.TimelineSequenceRightEdgeDragHandle = TimelineSequenceRightEdgeDragHandle;
+exports.TimelineSequenceRightEdgeDragHandle = react_1.default.memo(TimelineSequenceRightEdgeDragHandleInner);