@remotion/studio 4.0.475 → 4.0.477

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,16 +147,16 @@ 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
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
-    var _a, _b;
-    var _c, _d, _e, _f;
+    var _a, _b, _c;
+    var _d, _e, _f, _g;
     const video = remotion_1.Internals.useVideo();
-    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_c = video === null || video === void 0 ? void 0 : video.fps) !== null && _c !== void 0 ? _c : 30);
+    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;
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(s.getStack);
     const validatedLocation = (0, react_1.useMemo)(() => {
@@ -161,7 +173,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         };
     }, [originalLocation]);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
+    const nodePath = (_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _e !== void 0 ? _e : null;
     const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
@@ -169,10 +181,158 @@ 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 freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
+    const runtimeFreezeFrame = typeof ((_c = s.controls) === null || _c === void 0 ? void 0 : _c.currentRuntimeValueDotNotation.freeze) === 'number'
+        ? s.controls.currentRuntimeValueDotNotation.freeze
+        : null;
+    const frozenFrame = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static'
+        ? typeof freezeStatus.codeValue === 'number'
+            ? freezeStatus.codeValue
+            : null
+        : runtimeFreezeFrame;
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
-        timelineDurationInFrames: (_e = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _e !== void 0 ? _e : 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');
@@ -226,6 +386,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 })) : 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: (_g = video.durationInFrames) !== null && _g !== void 0 ? _g : 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;
 }>;