@remotion/studio 4.0.476 → 4.0.478

package/dist/components/Timeline/TimelineSequence.js

@@ -37,12 +37,24 @@ exports.TimelineSequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const format_file_location_1 = require("../../helpers/format-file-location");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_max_media_duration_1 = require("../../helpers/use-max-media-duration");
 const AudioWaveform_1 = require("../AudioWaveform");
+const call_api_1 = require("../call-api");
+const ConfirmationDialog_1 = require("../ConfirmationDialog");
+const ContextMenu_1 = require("../ContextMenu");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+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 LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
+const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineImageInfo_1 = require("./TimelineImageInfo");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
@@ -60,7 +72,7 @@ const TimelineSequenceFn = ({ s, nodePathInfo, sequenceFrameOffset }) => {
     }
     return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset }));
 };
-const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, onMoveDragPointerDown, }) => {
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, }) => {
     var _a, _b;
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
@@ -135,7 +147,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
                     height: '100%',
                     display: 'flex',
                     alignItems: 'center',
-                }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }));
+                }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame, frozenFrame: frozenFrame }) })) : null] }));
 };
 const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset }) => {
     // If a duration is 1, it is essentially a still and it should have width 0
@@ -169,6 +181,146 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     }, [propStatuses, nodePath]);
     const durationCanUpdate = Boolean(((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
     const fromCanUpdate = Boolean(((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previewConnected = previewServerState.type === 'connected';
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
+        location: originalLocation,
+        root: window.remotion_cwd,
+    }), [originalLocation]);
+    const canOpenInEditor = Boolean(window.remotion_editorName && previewConnected && originalLocation);
+    const openInEditor = (0, react_1.useCallback)(() => {
+        if (!canOpenInEditor || !originalLocation) {
+            return;
+        }
+        (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        });
+    }, [canOpenInEditor, originalLocation]);
+    const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
+    const deleteDisabled = !previewConnected || !s.controls || !canDeleteFromSource;
+    const duplicateDisabled = deleteDisabled;
+    const disableInteractivityDisabled = !previewConnected ||
+        !s.showInTimeline ||
+        !nodePath ||
+        !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
+    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;
+        }
+        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo], confirm).catch(() => undefined);
+    }, [confirm, duplicateDisabled, nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
+    const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
+        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath || deleteDisabled) {
+            return;
+        }
+        if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
+            const shouldDelete = await confirm({
+                title: 'Delete sequence?',
+                message: 'This sequence is programmatically duplicated ' +
+                    nodePathInfo.numberOfSequencesWithThisNodePath +
+                    ' times in the code. Deleting removes all instances. Continue?',
+                confirmLabel: 'Delete',
+            });
+            if (!shouldDelete) {
+                return;
+            }
+        }
+        try {
+            const result = await (0, call_api_1.callApi)('/api/delete-jsx-node', {
+                nodes: [
+                    {
+                        fileName: validatedLocation.source,
+                        nodePath: nodePath.nodePath,
+                    },
+                ],
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [
+        confirm,
+        deleteDisabled,
+        nodePath,
+        nodePathInfo,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
+    const onDisableSequenceInteractivity = (0, react_1.useCallback)(() => {
+        if (disableInteractivityDisabled ||
+            !nodePath ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
+            previewServerState.type !== 'connected') {
+            return;
+        }
+        (0, disable_sequence_interactivity_1.disableSequenceInteractivity)({
+            fileName: validatedLocation.source,
+            nodePath,
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+        });
+    }, [
+        disableInteractivityDisabled,
+        nodePath,
+        previewServerState,
+        setPropStatuses,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        if (!previewConnected) {
+            return [];
+        }
+        return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
+            assetLinkInfo,
+            canOpenInEditor,
+            deleteDisabled,
+            disableInteractivityDisabled,
+            duplicateDisabled,
+            fileLocation,
+            includeSourceEditItems: true,
+            onDeleteSequenceFromSource,
+            onDisableSequenceInteractivity,
+            onDuplicateSequenceFromSource,
+            openInEditor,
+            originalLocation,
+            selectAsset,
+            sequence: s,
+        });
+    }, [
+        assetLinkInfo,
+        canOpenInEditor,
+        deleteDisabled,
+        disableInteractivityDisabled,
+        duplicateDisabled,
+        fileLocation,
+        onDeleteSequenceFromSource,
+        onDisableSequenceInteractivity,
+        onDuplicateSequenceFromSource,
+        openInEditor,
+        originalLocation,
+        previewConnected,
+        s,
+        selectAsset,
+    ]);
+    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,
@@ -226,6 +378,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, onMoveDragPointerDown: onMoveDragPointerDown, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: 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, trimBefore: s.startMediaFrom, 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 })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_f = video.durationInFrames) !== null && _f !== void 0 ? _f : 1 })) : 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, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: 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, trimBefore: s.startMediaFrom, 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 })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_f = video.durationInFrames) !== null && _f !== void 0 ? _f : 1 })) : null] }));
+    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: onContextMenuOpen, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const TimelineSequenceFrame: React.FC<{
     readonly roundedFrame: number;
+    readonly frozenFrame: number | null;
     readonly premounted: boolean;
     readonly postmounted: number | null;
 }>;

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -3,19 +3,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequenceFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const relativeFrameStyle = {
+    alignItems: 'center',
+    display: 'flex',
     fontSize: 11,
     fontFamily: 'Arial, Helvetica, sans-serif',
+    gap: 4,
     color: 'white',
     opacity: 0.5,
     whiteSpace: 'nowrap',
     pointerEvents: 'none',
     userSelect: 'none',
 };
-const TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
-    return (jsx_runtime_1.jsx("div", { style: relativeFrameStyle, children: premounted
-            ? '0 (Premounted)'
-            : postmounted !== null
-                ? `${postmounted} (Postmounted)`
-                : roundedFrame }));
+const snowflakeStyle = {
+    flexShrink: 0,
+    height: 12,
+    width: 12,
+};
+const FreezeFrameIcon = () => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: snowflakeStyle, fill: "currentColor", children: jsx_runtime_1.jsx("path", { d: "M288 32l0-32-64 0 0 88.4-64-64-39.6 39.6 103.6 103.6 0 56.4-56.4 0-103.6-103.6-39.6 39.6 64 64-88.4 0 0 64 88.4 0c-33.5 33.5-54.9 54.9-64 64L64 391.6c2.5-2.5 37.1-37.1 103.6-103.6l56.4 0 0 56.4C157.5 410.9 122.9 445.5 120.4 448L160 487.6c9.1-9.1 30.5-30.5 64-64l0 88.4 64 0 0-88.4 64 64 39.6-39.6-103.6-103.6 0-56.4 56.4 0 103.6 103.6 39.6-39.6-64-64 88.4 0 0-64-88.4 0c33.5-33.5 54.9-54.9 64-64L448 120.4c-2.5 2.5-37.1 37.1-103.6 103.6l-56.4 0 0-56.4C354.5 101.1 389.1 66.5 391.6 64L352 24.4c-9.1 9.1-30.5 30.5-64 64L288 32z" }) }));
+};
+const TimelineSequenceFrame = ({ roundedFrame, frozenFrame, premounted, postmounted }) => {
+    return (jsx_runtime_1.jsxs("div", { style: relativeFrameStyle, children: [frozenFrame === null ? null : jsx_runtime_1.jsx(FreezeFrameIcon, {}), frozenFrame !== null && frozenFrame !== void 0 ? frozenFrame : (premounted
+                ? '0 (Premounted)'
+                : postmounted !== null
+                    ? `${postmounted} (Postmounted)`
+                    : roundedFrame)] }));
 };
 exports.TimelineSequenceFrame = TimelineSequenceFrame;

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

@@ -6,5 +6,6 @@ export declare const TimelineSequenceItem: React.FC<{
     readonly nestedDepth: number;
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly keyframeDisplayOffset: number;
+    readonly sequenceFrameOffset: number;
     readonly trackIndex: number;
 }>;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -37,7 +37,6 @@ exports.TimelineSequenceItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../../helpers/client-id");
 const format_file_location_1 = require("../../helpers/format-file-location");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -52,6 +51,7 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 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 save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
@@ -137,7 +137,7 @@ const getSequenceReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, trackIndex, }) => {
+const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
     var _a, _b, _c;
     var _d, _e;
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
@@ -156,6 +156,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     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, 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,
@@ -615,167 +616,126 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         }
         setIsRenaming(true);
     }, [canRenameThisSequence]);
+    const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
+    const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
+        typeof freezeStatus.codeValue === 'number';
+    const canToggleFreeze = previewConnected &&
+        Boolean(sequence.controls) &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        freezeStatus !== undefined &&
+        freezeStatus !== null &&
+        freezeStatus.status === 'static';
+    const onToggleFreezeFrame = (0, react_1.useCallback)(() => {
+        if (!canToggleFreeze ||
+            !sequence.controls ||
+            !nodePath ||
+            !validatedLocation ||
+            previewServerState.type !== 'connected') {
+            return;
+        }
+        const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
+        const maxFrame = Number.isFinite(sequence.duration)
+            ? Math.max(0, sequence.duration - 1)
+            : rawFreezeFrame;
+        const freezeFrame = Math.min(Math.max(0, rawFreezeFrame), maxFrame);
+        const remove = isFrozen;
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: 'freeze',
+                    value: remove ? null : freezeFrame,
+                    defaultValue: null,
+                    schema: sequence.controls.schema,
+                },
+            ],
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+            undoLabel: remove ? 'Unfreeze sequence' : 'Freeze sequence',
+            redoLabel: remove ? 'Freeze sequence again' : 'Unfreeze sequence again',
+        });
+    }, [
+        canToggleFreeze,
+        isFrozen,
+        nodePath,
+        previewServerState,
+        sequence.controls,
+        sequence.duration,
+        sequence.from,
+        sequenceFrameOffset,
+        setPropStatuses,
+        timelinePosition,
+        validatedLocation,
+    ]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
             return [];
         }
-        const editorName = window.remotion_editorName;
-        const { documentationLink } = sequence;
-        return [
-            editorName
-                ? {
+        return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
+            assetLinkInfo,
+            canOpenInEditor,
+            deleteDisabled,
+            disableInteractivityDisabled,
+            duplicateDisabled,
+            fileLocation,
+            includeSourceEditItems: true,
+            onDeleteSequenceFromSource,
+            onDisableSequenceInteractivity,
+            onDuplicateSequenceFromSource,
+            openInEditor,
+            originalLocation,
+            selectAsset,
+            sequence,
+            sourceActions: [
+                {
                     type: 'item',
-                    id: 'show-in-editor',
+                    id: 'rename-sequence',
                     keyHint: null,
-                    label: `Show in ${editorName}`,
+                    label: 'Rename...',
                     leftItem: null,
-                    disabled: !canOpenInEditor,
+                    disabled: !canRenameThisSequence,
                     onClick: () => {
-                        openInEditor();
+                        onRenameSequence();
                     },
                     quickSwitcherLabel: null,
                     subMenu: null,
-                    value: 'show-in-editor',
-                }
-                : null,
-            {
-                type: 'item',
-                id: 'copy-file-location',
-                keyHint: null,
-                label: 'Copy file location',
-                leftItem: null,
-                disabled: !fileLocation,
-                onClick: () => {
-                    if (!fileLocation) {
-                        return;
-                    }
-                    navigator.clipboard
-                        .writeText(fileLocation)
-                        .then(() => {
-                        (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
-                    })
-                        .catch((err) => {
-                        (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
-                    });
+                    value: 'rename-sequence',
                 },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'copy-file-location',
-            },
-            documentationLink
-                ? {
-                    type: 'item',
-                    id: 'open-component-docs',
-                    keyHint: null,
-                    label: 'Open component docs',
-                    leftItem: null,
-                    disabled: false,
-                    onClick: () => {
-                        window.open(documentationLink, '_blank', 'noopener,noreferrer');
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    value: 'open-component-docs',
-                }
-                : null,
-            assetLinkInfo
-                ? {
+                {
                     type: 'item',
-                    id: 'show-asset',
+                    id: 'toggle-freeze-frame',
                     keyHint: null,
-                    label: 'Show asset',
+                    label: isFrozen ? 'Unfreeze frame' : 'Freeze frame',
                     leftItem: null,
-                    disabled: false,
+                    disabled: !canToggleFreeze,
                     onClick: () => {
-                        (0, timeline_asset_link_1.openTimelineAssetLink)(assetLinkInfo, selectAsset);
+                        onToggleFreezeFrame();
                     },
                     quickSwitcherLabel: null,
                     subMenu: null,
-                    value: 'show-asset',
-                }
-                : null,
-            documentationLink
-                ? {
-                    type: 'divider',
-                    id: 'open-component-docs-divider',
-                }
-                : null,
-            {
-                type: 'item',
-                id: 'rename-sequence',
-                keyHint: 'Enter',
-                label: 'Rename...',
-                leftItem: null,
-                disabled: !canRenameThisSequence,
-                onClick: () => {
-                    onRenameSequence();
+                    value: 'toggle-freeze-frame',
                 },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'rename-sequence',
-            },
-            {
-                type: 'item',
-                id: 'disable-interactivity',
-                keyHint: null,
-                label: 'Disable interactivity',
-                leftItem: null,
-                disabled: disableInteractivityDisabled,
-                onClick: () => {
-                    onDisableSequenceInteractivity();
-                },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'disable-interactivity',
-            },
-            {
-                type: 'item',
-                id: 'duplicate-sequence',
-                keyHint: null,
-                label: 'Duplicate',
-                leftItem: null,
-                disabled: duplicateDisabled,
-                onClick: () => {
-                    if (duplicateDisabled) {
-                        return;
-                    }
-                    onDuplicateSequenceFromSource();
-                },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'duplicate-sequence',
-            },
-            {
-                type: 'item',
-                id: 'delete-sequence',
-                keyHint: null,
-                label: 'Delete',
-                leftItem: null,
-                disabled: deleteDisabled,
-                onClick: () => {
-                    if (deleteDisabled) {
-                        return;
-                    }
-                    onDeleteSequenceFromSource();
-                },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'delete-sequence',
-            },
-        ].filter(no_react_1.NoReactInternals.truthy);
+            ],
+        });
     }, [
         assetLinkInfo,
         canOpenInEditor,
         canRenameThisSequence,
+        canToggleFreeze,
         deleteDisabled,
         disableInteractivityDisabled,
         duplicateDisabled,
         fileLocation,
+        isFrozen,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onRenameSequence,
+        onToggleFreezeFrame,
         openInEditor,
+        originalLocation,
         previewConnected,
         selectAsset,
         sequence,

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

@@ -12,4 +12,5 @@ export declare const TimelineVideoInfo: React.FC<{
     readonly premountWidth: number;
     readonly postmountWidth: number;
     readonly loopDisplay: LoopDisplay | undefined;
+    readonly frozenMediaFrame: number | null;
 }>;