@remotion/studio 4.0.493 → 4.0.495

package/dist/components/SvgImportDialog.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgImportDialog = exports.useSvgImportDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../state/modals");
+const Button_1 = require("./Button");
+const layout_1 = require("./layout");
+const ModalButton_1 = require("./ModalButton");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalFooter_1 = require("./ModalFooter");
+const ModalHeader_1 = require("./ModalHeader");
+const content = {
+    padding: 16,
+    fontFamily: 'inherit',
+    fontSize: 14,
+    lineHeight: 1.4,
+    color: 'inherit',
+    minWidth: 560,
+};
+const inlineCode = {
+    fontFamily: 'monospace',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+    color: 'inherit',
+};
+const useSvgImportDialog = () => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    return (0, react_1.useCallback)(() => {
+        return new Promise((resolve) => {
+            let settled = false;
+            const settle = (result) => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                resolve(result);
+            };
+            setSelectedModal({
+                type: 'svg-import-dialog',
+                id: String(Math.random()),
+                onImage: () => settle('image'),
+                onInline: () => settle('inline'),
+                onDismiss: () => settle(null),
+            });
+        });
+    }, [setSelectedModal]);
+};
+exports.useSvgImportDialog = useSvgImportDialog;
+const SvgImportDialog = ({ state }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const settledRef = (0, react_1.useRef)(false);
+    const closeCurrentModal = (0, react_1.useCallback)(() => {
+        setSelectedModal((modal) => (modal === null || modal === void 0 ? void 0 : modal.type) === 'svg-import-dialog' && modal.id === state.id
+            ? null
+            : modal);
+    }, [setSelectedModal, state.id]);
+    const settle = (0, react_1.useCallback)((result) => {
+        if (settledRef.current) {
+            return;
+        }
+        settledRef.current = true;
+        closeCurrentModal();
+        if (result === 'image') {
+            state.onImage();
+        }
+        else if (result === 'inline') {
+            state.onInline();
+        }
+        else {
+            state.onDismiss();
+        }
+    }, [closeCurrentModal, state]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (settledRef.current) {
+                return;
+            }
+            settledRef.current = true;
+            state.onDismiss();
+        };
+    }, [state]);
+    const onImage = (0, react_1.useCallback)(() => {
+        settle('image');
+    }, [settle]);
+    const onInline = (0, react_1.useCallback)(() => {
+        settle('inline');
+    }, [settle]);
+    const onDismiss = (0, react_1.useCallback)(() => {
+        settle(null);
+    }, [settle]);
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onOutsideClick: onDismiss, onEscape: onDismiss, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Add .svg", onClose: onDismiss }), jsx_runtime_1.jsx("div", { style: content, children: "Do you want to import this as an image or as inline SVG?" }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                        jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs(Button_1.Button, { onClick: onImage, children: ["Add to ",
+                                jsx_runtime_1.jsx("code", { style: inlineCode, children: "public" }),
+                                " and import as", ' ', jsx_runtime_1.jsx("code", { style: inlineCode, children: '<CanvasImage>' })
+                            ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onInline, autoFocus: true, children: ["Import as inline ",
+                                jsx_runtime_1.jsx("code", { style: inlineCode, children: '<svg>' })
+                            ] })
+                    ] }) })
+        ] }));
+};
+exports.SvgImportDialog = SvgImportDialog;

package/dist/components/Timeline/Timeline.js

@@ -164,7 +164,9 @@ const TimelineContextMenuArea = ({ children }) => {
                 files,
                 compositionFile,
                 compositionId: currentCompositionId,
+                destinationDimensions: null,
                 dropPosition: null,
+                svgImportMode: 'image',
             });
         }
         finally {

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -5,6 +5,9 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const clipboard_figma_1 = require("../../helpers/clipboard-figma");
+const clipboard_images_1 = require("../../helpers/clipboard-images");
+const clipboard_svg_1 = require("../../helpers/clipboard-svg");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
@@ -532,6 +535,8 @@ const TimelineClipboardKeybindings = () => {
                         setPropStatuses,
                         clientId,
                         confirm,
+                        propStatuses,
+                        timelinePosition: timelinePositionRef.current,
                     });
                     return deletePromise === null || deletePromise === void 0 ? void 0 : deletePromise.then((deleted) => {
                         if (!deleted) {
@@ -565,7 +570,11 @@ const TimelineClipboardKeybindings = () => {
                 return;
             }
             const { selectedItems } = currentSelection.current;
-            if (selectedItems.length === 0 || e.clipboardData === null) {
+            if (selectedItems.length === 0 ||
+                e.clipboardData === null ||
+                (0, clipboard_figma_1.hasClipboardFigmaPayload)(e.clipboardData) ||
+                (0, clipboard_images_1.hasClipboardImage)(e.clipboardData) ||
+                (0, clipboard_svg_1.hasClipboardSvgMarkup)(e.clipboardData)) {
                 return;
             }
             e.preventDefault();
@@ -621,6 +630,7 @@ const TimelineClipboardKeybindings = () => {
                         fieldKey: keyframeTarget.fieldKey,
                         sourceFrame,
                         schema: keyframeTarget.schema,
+                        valueWhenLastKeyframeDeleted: null,
                     }));
                     return (0, call_delete_keyframe_1.callDeleteKeyframes)({
                         sequenceKeyframes: effectIndex === null ? deletions : [],

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -57,6 +57,8 @@ const TimelineDeleteKeybindings = () => {
                 setPropStatuses,
                 clientId,
                 confirm,
+                propStatuses,
+                timelinePosition: timelinePositionRef.current,
             });
             if (deletePromise !== null) {
                 deletePromise

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -213,6 +213,7 @@ const getDeleteChange = (target) => {
         fieldKey: target.fieldKey,
         sourceFrame: target.sourceFrame,
         schema: target.schema,
+        valueWhenLastKeyframeDeleted: null,
     };
     if (target.effectIndex === null) {
         return change;

package/dist/components/Timeline/TimelineList.js

@@ -2,18 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const nest_timeline_tracks_1 = require("./nest-timeline-tracks");
 const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const container = {
     flex: 1,
     background: colors_1.BACKGROUND,
 };
+const TimelineListTrack = ({ nestedTrack }) => {
+    var _a;
+    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 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, {}), timeline.map((track, trackIndex) => {
-                var _a;
-                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { trackIndex: trackIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }, track.sequence.id) }, track.sequence.id));
-            })] }));
+            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), nestedTimeline.map((nestedTrack) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: nestedTrack }, nestedTrack.track.sequence.id)))] }));
 };
 exports.TimelineList = TimelineList;

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

@@ -3,6 +3,7 @@ import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineSequence: React.NamedExoticComponent<{
     readonly s: TSequence;
+    readonly connectedCompositions: readonly import("remotion").AnyComposition[];
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly sequenceFrameOffset: number;
 }>;

package/dist/components/Timeline/TimelineSequence.js

@@ -40,6 +40,7 @@ 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_sequence_double_click_action_1 = require("../../helpers/get-sequence-double-click-action");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
@@ -49,6 +50,7 @@ const AudioWaveform_1 = require("../AudioWaveform");
 const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
+const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
@@ -64,14 +66,14 @@ const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
-const TimelineSequenceFn = ({ s, nodePathInfo, sequenceFrameOffset }) => {
+const TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset }));
+    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, connectedCompositions: connectedCompositions, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset }));
 };
-const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, }) => {
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onDoubleClick, }) => {
     var _a, _b;
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
@@ -114,7 +116,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
             opacity: isInRange ? 1 : 0.5,
         };
     }, [isInRange, style]);
-    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDown: selectable ? onPointerDown : undefined, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDown: selectable ? onPointerDown : undefined, onDoubleClick: onDoubleClick, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
                     width: premountWidth,
                     height: '100%',
                     background: `repeating-linear-gradient(
@@ -148,7 +150,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
                     alignItems: 'center',
                 }, 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 }) => {
+const TimelineSequenceInner = ({ s, connectedCompositions, 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
@@ -190,6 +192,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     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)();
     const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
@@ -205,6 +208,39 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
     }, [canOpenInEditor, originalLocation]);
+    const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
+        if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
+            e.stopPropagation();
+            return;
+        }
+        const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
+            button: e.button,
+            canOpenInEditor,
+            numberOfConnectedCompositions: connectedCompositions.length,
+        });
+        if (action === null) {
+            return;
+        }
+        e.stopPropagation();
+        if (action === 'open-connected-composition') {
+            selectComposition(connectedCompositions[0], true, (0, get_sequence_double_click_action_1.getConnectedCompositionFrame)({
+                timelinePosition,
+                sequence: s,
+                sequenceFrameOffset,
+            }));
+            return;
+        }
+        openInEditor();
+    }, [
+        canOpenInEditor,
+        connectedCompositions,
+        openInEditor,
+        s,
+        selectComposition,
+        sequenceFrameOffset,
+        timelinePosition,
+    ]);
+    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = !previewInteractive || !s.controls || !canDeleteFromSource;
     const duplicateDisabled = deleteDisabled;
@@ -408,7 +444,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     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, 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, 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 })) : 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 })), 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] }));
+    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(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, 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 })) : 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 })), 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 ? (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/TimelineSequenceItem.d.ts

@@ -2,11 +2,12 @@ import React from 'react';
 import type { _InternalTypes, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineSequenceItem: React.FC<{
+    readonly children: React.ReactNode;
     readonly sequence: TSequence;
     readonly connectedCompositions: readonly _InternalTypes['AnyComposition'][];
     readonly nestedDepth: number;
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly keyframeDisplayOffset: number;
     readonly sequenceFrameOffset: number;
-    readonly trackIndex: number;
+    readonly siblingIndex: number;
 }>;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -115,6 +115,14 @@ const sequenceReorderLineBase = {
     right: 0,
     zIndex: 1,
 };
+const sequenceReorderAfterLineWrapper = {
+    height: 0,
+    position: 'relative',
+};
+const sequenceReorderAfterLine = {
+    ...sequenceReorderLineBase,
+    top: -1,
+};
 const sequenceReorderRejectionStyle = {
     backgroundColor: colors_1.BLACK_ALPHA_85,
     border: colors_1.BORDER_WHITE_ALPHA_20,
@@ -147,7 +155,7 @@ const getSequenceReorderDragData = (dataTransfer) => {
     try {
         const parsed = JSON.parse(value);
         if (typeof parsed.nodePathKey === 'string' &&
-            typeof parsed.trackIndex === 'number' &&
+            typeof parsed.siblingIndex === 'number' &&
             (typeof parsed.parentId === 'string' || parsed.parentId === null) &&
             typeof parsed.fileName === 'string' &&
             parsed.nodePath &&
@@ -163,7 +171,7 @@ const getSequenceReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
+const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
     var _a, _b, _c;
     var _d, _e, _f;
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
@@ -328,12 +336,12 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
         }
         const rect = e.currentTarget.getBoundingClientRect();
         const before = e.clientY < rect.top + rect.height / 2;
-        const insertionIndex = before ? trackIndex : trackIndex + 1;
+        const insertionIndex = before ? siblingIndex : siblingIndex + 1;
         const toIndex = getDestinationIndex({
-            fromIndex: dragData.trackIndex,
+            fromIndex: dragData.siblingIndex,
             insertionIndex,
         });
-        if (toIndex === dragData.trackIndex) {
+        if (toIndex === dragData.siblingIndex) {
             return {
                 type: 'invalid',
                 reason: 'This sequence is already in that position.',
@@ -349,7 +357,7 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
         nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath,
         nodePathKey,
         parentId,
-        trackIndex,
+        siblingIndex,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
     const onSequenceDragStart = (0, react_1.useCallback)((e) => {
@@ -363,7 +371,7 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
         const dragData = {
             nodePath,
             nodePathKey,
-            trackIndex,
+            siblingIndex,
             parentId,
             fileName: validatedLocation.source,
         };
@@ -376,7 +384,7 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
         nodePath,
         nodePathKey,
         parentId,
-        trackIndex,
+        siblingIndex,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
     const onSequenceDragEnd = (0, react_1.useCallback)(() => {
@@ -563,11 +571,23 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
         }
         e.stopPropagation();
         if (action === 'open-connected-composition') {
-            selectComposition(connectedCompositions[0], true);
+            selectComposition(connectedCompositions[0], true, (0, get_sequence_double_click_action_1.getConnectedCompositionFrame)({
+                timelinePosition,
+                sequence,
+                sequenceFrameOffset,
+            }));
             return;
         }
         openInEditor();
-    }, [canOpenInEditor, connectedCompositions, openInEditor, selectComposition]);
+    }, [
+        canOpenInEditor,
+        connectedCompositions,
+        openInEditor,
+        selectComposition,
+        sequence,
+        sequenceFrameOffset,
+        timelinePosition,
+    ]);
     const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
@@ -735,12 +755,12 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
         validatedLocation !== null &&
         ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.supportsEffects) === true;
     const sequenceReorderLineStyle = (0, react_1.useMemo)(() => {
-        if (!sequenceDropIndicator) {
+        if (sequenceDropIndicator !== 'before') {
             return null;
         }
         return {
             ...sequenceReorderLineBase,
-            ...(sequenceDropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
+            top: -1,
         };
     }, [sequenceDropIndicator]);
     const onEffectDragOver = (0, react_1.useCallback)((e) => {
@@ -801,6 +821,6 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset })) : null] }));
+                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;

package/dist/components/Timeline/TimelineTrack.js

@@ -44,6 +44,7 @@ const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequence_1 = require("./TimelineSequence");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const TimelineTrackUnmemoized = ({ track }) => {
+    var _a;
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewServerConnected = previewServerState.type === 'connected';
@@ -58,7 +59,7 @@ const TimelineTrackUnmemoized = ({ track }) => {
         previewServerConnected &&
         getIsExpanded(track.nodePathInfo);
     return (jsx_runtime_1.jsxs("div", { children: [
-            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
+            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
                 ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
 };
 exports.TimelineTrack = react_1.default.memo(TimelineTrackUnmemoized);

package/dist/components/Timeline/call-delete-keyframe.d.ts

@@ -6,6 +6,7 @@ export type DeleteSequenceKeyframeChange = {
     fieldKey: string;
     sourceFrame: number;
     schema: InteractivitySchema;
+    valueWhenLastKeyframeDeleted: unknown | null;
 };
 export type DeleteEffectKeyframeChange = DeleteSequenceKeyframeChange & {
     effectIndex: number;

package/dist/components/Timeline/call-delete-keyframe.js

@@ -83,6 +83,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatus
             keyframes: keyframes.map((keyframe) => ({
                 fieldKey: keyframe.fieldKey,
                 frame: keyframe.sourceFrame,
+                valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted,
             })),
         }));
     }
@@ -97,6 +98,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatus
                 effectIndex: keyframe.effectIndex,
                 fieldKey: keyframe.fieldKey,
                 frame: keyframe.sourceFrame,
+                valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted,
             })),
         }));
     }
@@ -107,6 +109,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatus
             key: keyframe.fieldKey,
             frame: keyframe.sourceFrame,
             schema: keyframe.schema,
+            valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted,
         })),
         effectKeyframes: effectKeyframes.map((keyframe) => ({
             fileName: keyframe.fileName,
@@ -115,6 +118,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatus
             key: keyframe.fieldKey,
             frame: keyframe.sourceFrame,
             schema: keyframe.schema,
+            valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted,
         })),
         clientId,
     }).then(() => undefined);

package/dist/components/Timeline/delete-selected-keyframe.d.ts

@@ -1,4 +1,4 @@
-import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { SetPropStatuses } from './save-sequence-prop';
 export declare const deleteSelectedKeyframe: ({ nodePathInfo, frame, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, }: {
@@ -9,7 +9,7 @@ export declare const deleteSelectedKeyframe: ({ nodePathInfo, frame, sequences,
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void> | null;
-export declare const deleteSelectedKeyframes: ({ keyframes, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, }: {
+export declare const deleteSelectedKeyframes: ({ keyframes, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, propStatuses, timelinePosition, }: {
     keyframes: {
         nodePathInfo: SequenceNodePathInfo;
         frame: number;
@@ -18,4 +18,6 @@ export declare const deleteSelectedKeyframes: ({ keyframes, sequences, overrideI
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     setPropStatuses: SetPropStatuses;
     clientId: string;
+    propStatuses: PropStatuses;
+    timelinePosition: number;
 }) => Promise<void> | null;