@remotion/studio 4.0.504 → 4.0.506

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedKeyframeRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
@@ -65,4 +66,34 @@ const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasin
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsx("div", { style: { ...rowClipper, height, width: timelineWidth !== null && timelineWidth !== void 0 ? timelineWidth : undefined }, children: jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] }) })
         ] }));
 };
-exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);
+const areTimelineExpandedKeyframeRowPropsEqual = (prevProps, nextProps) => {
+    if (prevProps.height !== nextProps.height ||
+        prevProps.canEditEasing !== nextProps.canEditEasing ||
+        prevProps.showSeparator !== nextProps.showSeparator ||
+        prevProps.keyframes.length !== nextProps.keyframes.length ||
+        prevProps.nodePathInfo.index !== nextProps.nodePathInfo.index ||
+        prevProps.nodePathInfo.numberOfSequencesWithThisNodePath !==
+            nextProps.nodePathInfo.numberOfSequencesWithThisNodePath ||
+        prevProps.nodePathInfo.supportsEffects !==
+            nextProps.nodePathInfo.supportsEffects ||
+        (0, studio_shared_1.stringifySequenceSubscriptionKey)(prevProps.nodePathInfo.sequenceSubscriptionKey) !==
+            (0, studio_shared_1.stringifySequenceSubscriptionKey)(nextProps.nodePathInfo.sequenceSubscriptionKey) ||
+        prevProps.nodePathInfo.auxiliaryKeys.length !==
+            nextProps.nodePathInfo.auxiliaryKeys.length) {
+        return false;
+    }
+    const prevVideoConfig = prevProps.nodePathInfo.sequenceSubscriptionKey.videoConfigValues;
+    const nextVideoConfig = nextProps.nodePathInfo.sequenceSubscriptionKey.videoConfigValues;
+    if (prevVideoConfig !== nextVideoConfig &&
+        (prevVideoConfig === null ||
+            nextVideoConfig === null ||
+            prevVideoConfig.durationInFrames !== nextVideoConfig.durationInFrames ||
+            prevVideoConfig.fps !== nextVideoConfig.fps ||
+            prevVideoConfig.height !== nextVideoConfig.height ||
+            prevVideoConfig.width !== nextVideoConfig.width)) {
+        return false;
+    }
+    return (prevProps.keyframes.every((keyframe, index) => keyframe.frame === nextProps.keyframes[index].frame) &&
+        prevProps.nodePathInfo.auxiliaryKeys.every((key, index) => key === nextProps.nodePathInfo.auxiliaryKeys[index]));
+};
+exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized, areTimelineExpandedKeyframeRowPropsEqual);

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

@@ -5,7 +5,7 @@ import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-s
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
 import type { GetIsExpanded } from '../ExpandedTracksProvider';
 import type { TimelineKeyframeControlsMode } from './TimelineKeyframeControls';
-export declare const TimelineExpandedRow: React.FC<{
+type TimelineExpandedRowProps = {
     readonly node: TimelineTreeNode;
     readonly depth: number;
     readonly nestedDepth: number;
@@ -17,4 +17,6 @@ export declare const TimelineExpandedRow: React.FC<{
     readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
     readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
-}>;
+};
+export declare const TimelineExpandedRow: React.NamedExoticComponent<TimelineExpandedRowProps>;
+export {};

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -21,7 +21,7 @@ const rowLabel = {
     color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
 };
-const TimelineExpandedRow = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
+const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
     const rowDepth = (rowDepthBase !== null && rowDepthBase !== void 0 ? rowDepthBase : (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: 0 })) + depth;
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(node.nodePathInfo);
     const labelStyle = react_1.default.useMemo(() => ({
@@ -60,4 +60,4 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, rowDepthBase, getIsExpa
             height: (0, timeline_layout_1.getTreeRowHeight)(node),
         }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
 };
-exports.TimelineExpandedRow = TimelineExpandedRow;
+exports.TimelineExpandedRow = react_1.default.memo(TimelineExpandedRowInner);

package/dist/components/Timeline/TimelineFontFamilyField.js

@@ -343,7 +343,9 @@ const TimelineFontFamilyField = ({ field, propStatus, effectiveValue, onSave, on
                 await onSave(option.value);
                 return;
             }
-            await (0, install_required_package_1.installRequiredPackages)(['@remotion/google-fonts']);
+            await (0, install_required_package_1.installRequiredPackages)([
+                { name: '@remotion/google-fonts', version: null },
+            ]);
             const googleFont = getGoogleFontSourceEdit({
                 fontFamily: (_a = option.value) !== null && _a !== void 0 ? _a : option.label,
                 importName: option.googleFontImportName,

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

@@ -3,5 +3,6 @@ import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort
 export declare const TimelineHeightContainer: React.NamedExoticComponent<{
     readonly shown: TimelineTrackData[];
     readonly hasBeenCut: boolean;
+    readonly isStill: boolean;
     readonly children: React.ReactNode;
 }>;

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -45,8 +45,8 @@ const baseStyle = {
     overflowX: 'hidden',
     backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
 };
-const TimelineHeightContainerInner = ({ shown, hasBeenCut, children }) => {
-    const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut });
+const TimelineHeightContainerInner = ({ shown, hasBeenCut, isStill, children }) => {
+    const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut, isStill });
     const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height }), [height]);
     return jsx_runtime_1.jsx("div", { style: style, children: children });
 };

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -302,7 +302,7 @@ const TimelineInOutDragHandlerInner = () => {
             (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         };
     }, []);
-    const inContextMenu = (0, react_1.useMemo)(() => {
+    const getInContextMenuItems = (0, react_1.useCallback)(() => {
         return [
             {
                 id: 'hide-in',
@@ -330,7 +330,7 @@ const TimelineInOutDragHandlerInner = () => {
             },
         ];
     }, [setInAndOutFrames, videoConfig.id]);
-    const outContextMenu = (0, react_1.useMemo)(() => {
+    const getOutContextMenuItems = (0, react_1.useCallback)(() => {
         return [
             {
                 id: 'hide-out',
@@ -358,6 +358,6 @@ const TimelineInOutDragHandlerInner = () => {
             },
         ];
     }, [setInAndOutFrames, videoConfig.id]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: inContextMenu, onOpen: null, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in', onPointerDown: onInPointerDown }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: outContextMenu, onOpen: null, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame, onPointerDown: onOutPointerDown }) }))] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getInContextMenuItems, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in', onPointerDown: onInPointerDown }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getOutContextMenuItems, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame, onPointerDown: onOutPointerDown }) }))] }));
 };
 const TimelineInOutDragHandlerInnerMemo = react_1.default.memo(TimelineInOutDragHandlerInner);

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -131,6 +131,7 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
         propStatuses,
         includeTextContent: false,
         includeSourceControls: false,
+        runtimeValues: null,
     });
     const fieldNode = findFieldNode(tree, (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo));
     if (fieldNode === null || fieldNode.field === null) {

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

@@ -4,10 +4,12 @@ export declare const getTimelineKeyframeEasingLineStyle: (selected: boolean) =>
 export declare const TimelineKeyframeEasingLineVisual: React.NamedExoticComponent<{
     readonly selected: boolean;
 }>;
-export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<{
+type TimelineKeyframeEasingLineProps = {
     readonly fromFrame: number;
     readonly toFrame: number;
     readonly rowHeight: number;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly segmentIndex: number;
-}>;
+};
+export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<TimelineKeyframeEasingLineProps>;
+export {};

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -77,10 +77,8 @@ const TimelineKeyframeEasingLineVisualUnmemoized = ({ selected }) => {
     return jsx_runtime_1.jsx("div", { style: lineStyle });
 };
 exports.TimelineKeyframeEasingLineVisual = react_1.default.memo(TimelineKeyframeEasingLineVisualUnmemoized);
-const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
+const TimelineKeyframeEasingLineInteraction = ({ fromFrame, toFrame, nodePathInfo, segmentIndex, style }) => {
     const buttonRef = (0, react_1.useRef)(null);
-    const videoConfig = (0, remotion_1.useVideoConfig)();
-    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { selected, onSelect, selectable, selectionItem } = (0, TimelineSelection_1.useTimelineEasingSelection)({
         nodePathInfo,
         fromFrame,
@@ -88,6 +86,10 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         segmentIndex,
     });
     (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, buttonRef);
+    const interactiveStyle = (0, react_1.useMemo)(() => ({
+        ...style,
+        pointerEvents: selectable ? 'auto' : 'none',
+    }), [selectable, style]);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
@@ -120,7 +122,16 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         sequencesRef,
         setPropStatuses,
     ]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)((event) => {
+        if (!selectable) {
+            return false;
+        }
+        if (!selected) {
+            onSelect({
+                shiftKey: event.shiftKey,
+                toggleKey: event.metaKey || event.ctrlKey,
+            });
+        }
         return [
             {
                 type: 'item',
@@ -147,19 +158,20 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
                 value: preset.id,
             })),
         ];
-    }, [previewServerState.type, updateEasing]);
-    const onOpenContextMenu = (0, react_1.useCallback)((event) => {
-        if (!selectable) {
-            return false;
-        }
-        if (!selected) {
-            onSelect({
-                shiftKey: event.shiftKey,
-                toggleKey: event.metaKey || event.ctrlKey,
-            });
-        }
-        return contextMenuValues;
-    }, [contextMenuValues, onSelect, selectable, selected]);
+    }, [onSelect, previewServerState.type, selectable, selected, updateEasing]);
+    const onPointerDown = (0, use_timeline_keyframe_drag_1.useTimelineEasingKeyframeDrag)({
+        onSelect,
+        selectable,
+        selected,
+        selectionItem,
+    });
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: interactiveStyle, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(exports.TimelineKeyframeEasingLineVisual, { selected: selected }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, getItems: getContextMenuItems })
+        ] }));
+};
+const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const style = (0, react_1.useMemo)(() => {
         if (timelineWidth === null) {
             return null;
@@ -174,29 +186,19 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         return {
             ...easingLineButton,
             left,
-            pointerEvents: selectable ? 'auto' : 'none',
             top: rowHeight / 2,
             width,
         };
     }, [
         fromFrame,
         rowHeight,
-        selectable,
         timelineWidth,
         toFrame,
         videoConfig.durationInFrames,
     ]);
-    const onPointerDown = (0, use_timeline_keyframe_drag_1.useTimelineEasingKeyframeDrag)({
-        onSelect,
-        selectable,
-        selected,
-        selectionItem,
-    });
     if (style === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(exports.TimelineKeyframeEasingLineVisual, { selected: selected }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, values: contextMenuValues, onOpen: onOpenContextMenu })
-        ] }));
+    return (jsx_runtime_1.jsx(TimelineKeyframeEasingLineInteraction, { fromFrame: fromFrame, toFrame: toFrame, rowHeight: rowHeight, nodePathInfo: nodePathInfo, segmentIndex: segmentIndex, style: style }));
 };
 exports.TimelineKeyframeEasingLine = react_1.default.memo(TimelineKeyframeEasingLineUnmemoized);

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

@@ -2,4 +2,5 @@ import React from 'react';
 import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineList: React.FC<{
     readonly timeline: TimelineTrackData[];
+    readonly showTimePadding: boolean;
 }>;

package/dist/components/Timeline/TimelineList.js

@@ -16,9 +16,8 @@ const TimelineListTrack = ({ nestedTrack }) => {
     const { track, children, siblingIndex } = nestedTrack;
     return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { siblingIndex: siblingIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset, children: children.map((child) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: child }, child.track.sequence.id))) }) }));
 };
-const TimelineList = ({ timeline }) => {
+const TimelineList = ({ timeline, showTimePadding }) => {
     const nestedTimeline = (0, react_1.useMemo)(() => (0, nest_timeline_tracks_1.nestTimelineTracks)(timeline), [timeline]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), nestedTimeline.map((nestedTrack) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: nestedTrack }, nestedTrack.track.sequence.id)))] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [showTimePadding ? jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}) : null, nestedTimeline.map((nestedTrack) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: nestedTrack }, nestedTrack.track.sequence.id)))] }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelineScaleField.js

@@ -308,7 +308,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         });
     }, [field.key, linked, scaleLockNodePath, setScaleLockState]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true }), jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink })
         ] }));
 };
 exports.TimelineScaleField = TimelineScaleField;

package/dist/components/Timeline/TimelineSelection.js

@@ -448,6 +448,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
             propStatuses,
             includeTextContent: false,
             includeSourceControls: false,
+            runtimeValues: null,
         });
         const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
             nodes: tree,

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;