@remotion/studio 4.0.525 → 4.0.527

package/dist/components/Timeline/TimelineSequence.js

@@ -52,6 +52,7 @@ const AudioWaveform_1 = require("../AudioWaveform");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
+const SequencePropsSubscriptionProvider_1 = require("../SequencePropsSubscriptionProvider");
 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");
@@ -61,6 +62,7 @@ const get_timeline_media_start_frame_1 = require("./get-timeline-media-start-fra
 const get_timeline_sequence_visible_layout_1 = require("./get-timeline-sequence-visible-layout");
 const imperative_state_1 = require("./imperative-state");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
+const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineImageInfo_1 = require("./TimelineImageInfo");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -242,6 +244,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     var _f, _g, _h, _j, _k, _l, _m;
     const video = remotion_1.Internals.useVideo();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useContext)(SequencePropsSubscriptionProvider_1.OverrideIdToNodePathMappingsRefContext);
     const renderWindow = (0, react_1.useContext)(TimelineViewport_1.TimelineViewportContext);
     const mediaDurationDragLimitsRegistry = (0, react_1.useContext)(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceMediaDurationDragLimitsContext);
     const dragAwareDoubleClick = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
@@ -304,8 +307,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
-    const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { onSelect, selectable, selected, selectedItems } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const selectedSequenceNodePathInfos = (0, react_1.useMemo)(() => {
         if (!selected ||
             selectedItems.length < 2 ||
@@ -378,6 +380,26 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
     }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
+    const onSplitSelectedSequences = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
+            return;
+        }
+        (_a = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
+            selections: selectedItems,
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappingsRef.current,
+            propStatuses,
+            splitFrame: (0, imperative_state_1.getCurrentFrame)(),
+        })) === null || _a === void 0 ? void 0 : _a.catch(() => undefined);
+    }, [
+        overrideIdToNodePathMappingsRef,
+        previewInteractive,
+        propStatuses,
+        selectedItems,
+        selectedSequenceNodePathInfos,
+        sequences,
+    ]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(() => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
             !nodePath ||
@@ -434,8 +456,10 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             return (0, get_sequence_context_menu_items_1.getMultiSequenceContextMenuItems)({
                 deleteDisabled: !previewInteractive,
                 duplicateDisabled: !previewInteractive,
+                splitDisabled: !previewInteractive,
                 onDeleteSelectedSequences,
                 onDuplicateSelectedSequences,
+                onSplitSelectedSequences,
             });
         }
         const splitMenuItem = (0, get_sequence_split_menu_item_1.getSequenceSplitMenuItem)({
@@ -462,6 +486,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             assetLinkInfo: mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null,
             canOpenInEditor,
             codingAgentInfo,
+            copyImageElement: null,
             deleteDisabled,
             disableInteractivityDisabled,
             duplicateDisabled,
@@ -513,6 +538,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onDuplicateSelectedSequences,
+        onSplitSelectedSequences,
         openInCodingAgent,
         openInEditor,
         originalLocation,

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -15,6 +15,7 @@ const relativeFrameStyle = {
     whiteSpace: 'nowrap',
     pointerEvents: 'none',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const snowflakeStyle = {
     flexShrink: 0,

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

@@ -10,4 +10,6 @@ export declare const TimelineSequenceItem: React.NamedExoticComponent<{
     readonly keyframeDisplayOffset: number;
     readonly sequenceFrameOffset: number;
     readonly siblingIndex: number;
+    readonly numberOfHiddenDuplicates: number;
+    readonly showProvisionalVisibilityToggle: boolean;
 }>;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -62,6 +62,7 @@ const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const reorder_sequence_api_1 = require("../reorder-sequence-api");
 const selected_outline_types_1 = require("../selected-outline-types");
+const SequencePropsSubscriptionProvider_1 = require("../SequencePropsSubscriptionProvider");
 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");
@@ -69,6 +70,7 @@ const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-i
 const get_sequence_split_menu_item_1 = require("./get-sequence-split-menu-item");
 const imperative_state_1 = require("./imperative-state");
 const save_sequence_prop_1 = require("./save-sequence-prop");
+const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
@@ -106,11 +108,12 @@ const effectDropHighlight = {
     outline: colors_1.BORDER_TIMELINE_DROP_BLUE,
     outlineOffset: -1,
 };
-const TimelineSequenceExpandArrowInner = ({ disabled, isExpanded, nodePathInfo, sequence }) => {
+const TimelineSequenceExpandArrowInner = ({ disabled, isExpanded, nodePathInfo, selectedItems, sequence }) => {
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const hasExpandableContent = (0, use_timeline_expanded_tree_1.useTimelineSequenceHasExpandableContent)({
         sequence,
         nodePathInfo,
+        selectedItems,
     });
     const onToggleExpand = (0, react_1.useCallback)(() => toggleTrack(nodePathInfo), [nodePathInfo, toggleTrack]);
     if (!hasExpandableContent) {
@@ -122,6 +125,7 @@ const areTimelineSequenceExpandArrowPropsEqual = (first, second) => {
     var _a, _b, _c, _d;
     return (first.disabled === second.disabled &&
         first.isExpanded === second.isExpanded &&
+        first.selectedItems === second.selectedItems &&
         ((_a = first.sequence.controls) === null || _a === void 0 ? void 0 : _a.schema) === ((_b = second.sequence.controls) === null || _b === void 0 ? void 0 : _b.schema) &&
         ((_c = first.sequence.controls) === null || _c === void 0 ? void 0 : _c.runtimeValues) ===
             ((_d = second.sequence.controls) === null || _d === void 0 ? void 0 : _d.runtimeValues) &&
@@ -169,10 +173,13 @@ const getSequencePointerDropTargetAtPoint = ({ clientX, clientY, }) => {
     return null;
 };
 const SEQUENCE_REORDER_POINTER_THRESHOLD = 3;
-const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
+const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, numberOfHiddenDuplicates, showProvisionalVisibilityToggle, }) => {
     var _a, _b;
-    var _c, _d, _e, _f;
+    var _c, _d, _e;
     const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useContext)(SequencePropsSubscriptionProvider_1.OverrideIdToNodePathMappingsRefContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(nodePathInfo);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
@@ -187,8 +194,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const assetContextMenu = (0, use_asset_timeline_context_menu_1.useAssetTimelineContextMenu)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
-    const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const { selectItem, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { onSelect, selectable, selected, selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const selectedSequenceNodePathInfos = (0, react_1.useMemo)(() => {
         if (!selected ||
             selectedItems.length < 2 ||
@@ -229,17 +235,16 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const timelineDisplayName = sequence.displayName === '' && connectedCompositions.length === 1
         ? connectedCompositions[0].id
         : displayName;
-    const numberOfHiddenDuplicates = Math.max(0, ((_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _d !== void 0 ? _d : 1) - 1);
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
-    const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
+    const parentId = (_d = sequence.parent) !== null && _d !== void 0 ? _d : null;
     const canReorderSequence = previewInteractive &&
         Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
         (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
     const canHandleSequenceDrag = previewInteractive;
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const deleteDisabled = (0, react_1.useMemo)(() => !previewInteractive || !sequence.controls || !canDeleteFromSource, [previewInteractive, sequence.controls, canDeleteFromSource]);
-    const isProgrammaticallyDuplicated = ((_f = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _f !== void 0 ? _f : 1) > 1;
+    const isProgrammaticallyDuplicated = ((_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _e !== void 0 ? _e : 1) > 1;
     const duplicateDisabled = deleteDisabled || isProgrammaticallyDuplicated;
     const disableInteractivityDisabled = !previewInteractive ||
         !sequence.showInTimeline ||
@@ -257,6 +262,26 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
     }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
+    const onSplitSelectedSequences = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
+            return;
+        }
+        (_a = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
+            selections: selectedItems,
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: overrideIdToNodePathMappingsRef.current,
+            propStatuses: propStatusesRef.current,
+            splitFrame: (0, imperative_state_1.getCurrentFrame)(),
+        })) === null || _a === void 0 ? void 0 : _a.catch(() => undefined);
+    }, [
+        overrideIdToNodePathMappingsRef,
+        previewInteractive,
+        propStatusesRef,
+        selectedItems,
+        selectedSequenceNodePathInfos,
+        sequencesRef,
+    ]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(() => {
         if (deleteDisabled ||
             !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
@@ -641,6 +666,8 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.status === 'static';
+    const showVisibilityToggle = canToggleVisibility ||
+        (previewInteractive && showProvisionalVisibilityToggle);
     const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
@@ -704,7 +731,8 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 return;
             }
             if (document.activeElement instanceof HTMLInputElement ||
-                document.activeElement instanceof HTMLTextAreaElement) {
+                document.activeElement instanceof HTMLTextAreaElement ||
+                document.activeElement instanceof HTMLButtonElement) {
                 return;
             }
             e.preventDefault();
@@ -803,8 +831,10 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             return (0, get_sequence_context_menu_items_1.getMultiSequenceContextMenuItems)({
                 deleteDisabled: !previewInteractive,
                 duplicateDisabled: !previewInteractive,
+                splitDisabled: !previewInteractive,
                 onDeleteSelectedSequences,
                 onDuplicateSelectedSequences,
+                onSplitSelectedSequences,
             });
         }
         const splitMenuItem = (0, get_sequence_split_menu_item_1.getSequenceSplitMenuItem)({
@@ -831,6 +861,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             assetLinkInfo: mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null,
             canOpenInEditor,
             codingAgentInfo,
+            copyImageElement: null,
             deleteDisabled,
             disableInteractivityDisabled,
             duplicateDisabled,
@@ -960,6 +991,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onDuplicateSelectedSequences,
+        onSplitSelectedSequences,
         onRenameSequence,
         onSelect,
         openInCodingAgent,
@@ -1034,12 +1066,12 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineLayerChildren_1.TimelineLayerChildrenToggle, { sequence: sequence }), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: showVisibilityToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: canToggleVisibility ? onToggleVisibility : null })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineLayerChildren_1.TimelineLayerChildrenToggle, { sequence: sequence }), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })
-                    ] })) : null, numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineDuplicateCount_1.TimelineDuplicateCount, { count: numberOfHiddenDuplicates })
+                    ] })) : null, hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, selectedItems: selectedItems, sequence: sequence })
                     ] })) : null, mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",

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

@@ -4,6 +4,7 @@ type TimelineRenderWindow = {
     readonly width: number;
 };
 export declare const TimelineViewportContext: React.Context<TimelineRenderWindow | null>;
+export declare const syncTimelineViewport: () => void;
 export declare const getTimelineRenderWindow: (scrollable: HTMLDivElement) => TimelineRenderWindow;
 export declare const TimelineViewportProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/components/Timeline/TimelineViewport.js

@@ -1,9 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineViewportProvider = exports.getTimelineRenderWindow = exports.TimelineViewportContext = void 0;
+exports.TimelineViewportProvider = exports.getTimelineRenderWindow = exports.syncTimelineViewport = exports.TimelineViewportContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.TimelineViewportContext = (0, react_1.createContext)(null);
+let updateTimelineViewport = null;
+const syncTimelineViewport = () => {
+    updateTimelineViewport === null || updateTimelineViewport === void 0 ? void 0 : updateTimelineViewport();
+};
+exports.syncTimelineViewport = syncTimelineViewport;
 const getTimelineRenderWindow = (scrollable) => {
     const viewportWidth = scrollable.clientWidth;
     if (viewportWidth === 0) {
@@ -41,6 +46,7 @@ const TimelineViewportProvider = ({ children, scrollable }) => {
     (0, react_1.useLayoutEffect)(() => {
         let element = null;
         let resizeObserver = null;
+        updateTimelineViewport = update;
         const animationFrame = requestAnimationFrame(() => {
             element = scrollable.current;
             if (!element) {
@@ -52,6 +58,9 @@ const TimelineViewportProvider = ({ children, scrollable }) => {
             element.addEventListener('scroll', update);
         });
         return () => {
+            if (updateTimelineViewport === update) {
+                updateTimelineViewport = null;
+            }
             cancelAnimationFrame(animationFrame);
             resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
             element === null || element === void 0 ? void 0 : element.removeEventListener('scroll', update);

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

@@ -1,10 +1,10 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
 import React from 'react';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackWithDisplayGroup } from './timeline-display-groups';
 export type TimelineVirtualRow = {
     readonly afterDropLineOffset: number;
     readonly siblingIndex: number;
-    readonly track: TimelineTrackData;
+    readonly track: TimelineTrackWithDisplayGroup;
 };
 type TimelineVirtualizationContextValue = {
     readonly rows: readonly TimelineVirtualRow[];
@@ -16,7 +16,7 @@ export declare const TimelineVirtualizationProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly hasBeenCut: boolean;
     readonly isStill: boolean;
-    readonly timeline: readonly TimelineTrackData[];
+    readonly timeline: readonly TimelineTrackWithDisplayGroup[];
 }>;
 export declare const useTimelineVirtualization: () => TimelineVirtualizationContextValue;
 export {};

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSequencesFromSource = void 0;
 const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
-const delete_jsx_node_api_1 = require("../delete-jsx-node-api");
+const delete_jsx_nodes_api_1 = require("../delete-jsx-nodes-api");
 const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const delete_selected_keyframe_1 = require("./delete-selected-keyframe");
@@ -39,7 +39,7 @@ const deleteSequencesFromSource = async (nodePathInfos, confirm) => {
     if (!(await confirmDeletingDuplicatedSequences(nodePathInfos, confirm))) {
         return false;
     }
-    return (0, delete_jsx_node_api_1.deleteJsxNode)({
+    return (0, delete_jsx_nodes_api_1.deleteJsxNodes)({
         nodes: nodePathInfos.map((nodePathInfo) => {
             const nodePath = nodePathInfo.sequenceSubscriptionKey;
             return {

package/dist/components/Timeline/get-sequence-context-menu-items.d.ts

@@ -2,15 +2,19 @@ import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEdito
 import type { ResolvedStackLocation, TSequence } from 'remotion';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import type { TimelineAssetLinkInfo } from './timeline-asset-link';
-export declare const getMultiSequenceContextMenuItems: ({ deleteDisabled, duplicateDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, }: {
+export declare const findCopyableFrameElement: (element: Element | null) => Element | null;
+export declare const getMultiSequenceContextMenuItems: ({ deleteDisabled, duplicateDisabled, splitDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, onSplitSelectedSequences, }: {
     readonly deleteDisabled: boolean;
     readonly duplicateDisabled: boolean;
+    readonly splitDisabled: boolean;
     readonly onDeleteSelectedSequences: () => void;
     readonly onDuplicateSelectedSequences: () => void;
+    readonly onSplitSelectedSequences: () => void;
 }) => ComboboxValue[];
-export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
+export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, copyImageElement, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
     readonly assetLinkInfo: TimelineAssetLinkInfo | null;
     readonly canOpenInEditor: boolean;
+    readonly copyImageElement: Element | null;
     readonly deleteDisabled: boolean;
     readonly disableInteractivityDisabled: boolean;
     readonly duplicateDisabled: boolean;

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSequenceContextMenuItems = exports.getMultiSequenceContextMenuItems = void 0;
+exports.getSequenceContextMenuItems = exports.getMultiSequenceContextMenuItems = exports.findCopyableFrameElement = void 0;
 const no_react_1 = require("remotion/no-react");
 const format_file_location_1 = require("../../helpers/format-file-location");
 const get_git_menu_item_1 = require("../../helpers/get-git-menu-item");
@@ -28,7 +28,75 @@ const normalizeMenuDividers = (items) => {
     return normalized;
 };
 const interactiveSvgComponentIdentity = 'dev.remotion.remotion.Interactive.Svg';
-const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, }) => {
+const findCopyableFrameElement = (element) => {
+    var _a;
+    if ((element === null || element === void 0 ? void 0 : element.tagName) === 'CANVAS' || (element === null || element === void 0 ? void 0 : element.tagName) === 'VIDEO') {
+        return element;
+    }
+    return (_a = element === null || element === void 0 ? void 0 : element.querySelector('canvas, video')) !== null && _a !== void 0 ? _a : null;
+};
+exports.findCopyableFrameElement = findCopyableFrameElement;
+const copyImageToClipboard = async (element) => {
+    let canvas;
+    if (element.tagName === 'CANVAS') {
+        const sourceCanvas = element;
+        canvas = document.createElement('canvas');
+        canvas.width = sourceCanvas.width;
+        canvas.height = sourceCanvas.height;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Could not create canvas context');
+        }
+        context.drawImage(sourceCanvas, 0, 0);
+    }
+    else if (element.tagName === 'IMG') {
+        const image = element;
+        if (image.naturalWidth === 0 || image.naturalHeight === 0) {
+            throw new Error('Image has not loaded');
+        }
+        canvas = document.createElement('canvas');
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Could not create canvas context');
+        }
+        context.drawImage(image, 0, 0);
+    }
+    else if (element.tagName === 'VIDEO') {
+        const video = element;
+        if (video.videoWidth === 0 || video.videoHeight === 0) {
+            throw new Error('Video frame has not loaded');
+        }
+        canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Could not create canvas context');
+        }
+        context.drawImage(video, 0, 0);
+    }
+    else {
+        throw new Error('Expected an image, video, or canvas element');
+    }
+    const blob = new Promise((resolve, reject) => {
+        canvas.toBlob((result) => {
+            if (result) {
+                resolve(result);
+            }
+            else {
+                reject(new Error('Could not convert image to PNG'));
+            }
+        }, 'image/png');
+    });
+    await navigator.clipboard.write([
+        new ClipboardItem({
+            'image/png': blob,
+        }),
+    ]);
+};
+const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, splitDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, onSplitSelectedSequences, }) => {
     return [
         {
             type: 'item',
@@ -42,6 +110,18 @@ const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, o
             subMenu: null,
             value: 'duplicate-selected-sequences',
         },
+        {
+            type: 'item',
+            id: 'split-selected-sequences',
+            keyHint: null,
+            label: 'Split selected at playhead',
+            leftItem: null,
+            disabled: splitDisabled,
+            onClick: onSplitSelectedSequences,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'split-selected-sequences',
+        },
         {
             type: 'divider',
             id: 'duplicate-delete-selected-sequences-divider',
@@ -61,9 +141,9 @@ const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, o
     ];
 };
 exports.getMultiSequenceContextMenuItems = getMultiSequenceContextMenuItems;
-const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
+const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, copyImageElement, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
     var _a, _b, _c;
-    var _d, _e, _f;
+    var _d, _e;
     const isInteractiveSvg = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) === interactiveSvgComponentIdentity;
     const installedEditors = (_d = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _d !== void 0 ? _d : [];
     const defaultEditorId = (0, use_default_editor_info_1.getPreferredEditorId)(editorInfo);
@@ -74,7 +154,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
         ? (0, get_git_menu_item_1.getGitSourceName)(window.remotion_gitSource)
         : null;
     const defaultOpenInName = defaultOpenInTarget === 'editor' ? editorName : gitSourceName;
-    const defaultCodingAgent = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.find((codingAgent) => codingAgent.id === codingAgentInfo.defaultCodingAgent);
+    const copyImageLabel = copyImageElement && sequence.type === 'image' ? 'Copy image' : 'Copy frame';
     const contextForAgents = (0, format_file_location_1.formatContextForAgents)({
         location: originalLocation,
         name: sequence.displayName || ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.componentName) || null,
@@ -83,31 +163,34 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
     const openInCodingAgentWithContext = (codingAgentId, codingAgentName) => {
         openInCodingAgent(codingAgentId, codingAgentName, codingAgentId === 'copilot' ? null : contextForAgents);
     };
-    const openInMenuItems = onConfigureApps
-        ? (0, get_open_in_menu_items_1.getOpenInMenuItems)({
-            codingAgentInfo,
-            editorDisabled: !canOpenInEditor || !originalLocation,
-            editorInfo,
-            excludeCodingAgentId: (_f = defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id) !== null && _f !== void 0 ? _f : null,
-            excludeEditorId: defaultEditorId,
-            fileManagerDisabled: !(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source),
-            folder: false,
-            location: originalLocation,
-            onConfigureApps,
-            onOpenInCodingAgent: openInCodingAgentWithContext,
-            onOpenInEditor: openInEditor,
-            onOpenInFileExplorer: () => {
-                if (!(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source)) {
-                    return;
-                }
-                (0, actions_1.openInFileExplorer)({ directory: originalLocation.source }).catch((err) => {
-                    (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
-                });
-            },
-            onOpenInGitClient: () => undefined,
-            onOpenInTerminal: null,
-        })
-        : [];
+    const openInMenuItems = (0, get_open_in_menu_items_1.getOpenInMenuItems)({
+        canOpenDesktopApps: onConfigureApps !== null,
+        codingAgentInfo,
+        editorDisabled: !canOpenInEditor || !originalLocation,
+        editorInfo,
+        excludeCodingAgentId: null,
+        excludeEditorId: defaultEditorId,
+        excludeGitSource: defaultOpenInTarget === 'git-source',
+        fileManagerDisabled: !(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source),
+        folder: false,
+        gitSourceDisabled: !originalLocation,
+        onConfigureApps,
+        onOpenInCodingAgent: openInCodingAgentWithContext,
+        onOpenInEditor: openInEditor,
+        onOpenInFileExplorer: () => {
+            if (!(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source)) {
+                return;
+            }
+            (0, actions_1.openInFileExplorer)({ directory: originalLocation.source }).catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+            });
+        },
+        onOpenInGitClient: () => undefined,
+        onOpenInGitSource: () => {
+            (0, get_git_menu_item_1.openGitSource)({ folder: false, location: originalLocation });
+        },
+        onOpenInTerminal: null,
+    });
     const items = [
         defaultOpenInTarget && defaultOpenInName
             ? {
@@ -133,21 +216,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                     : 'open-in-git-source',
             }
             : null,
-        defaultCodingAgent
-            ? {
-                type: 'item',
-                id: 'open-in-default-coding-agent',
-                keyHint: null,
-                label: `Open in ${defaultCodingAgent.nameWithType}`,
-                leftItem: null,
-                disabled: false,
-                onClick: () => openInCodingAgentWithContext(defaultCodingAgent.id, defaultCodingAgent.nameWithType),
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'open-in-default-coding-agent',
-            }
-            : null,
-        onConfigureApps
+        openInMenuItems.length > 0
             ? {
                 type: 'item',
                 id: 'open-in-another-app',
@@ -182,7 +251,35 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 value: 'show-asset',
             }
             : null,
-        assetLinkInfo
+        copyImageElement
+            ? {
+                type: 'divider',
+                id: 'copy-image-divider',
+            }
+            : null,
+        copyImageElement
+            ? {
+                type: 'item',
+                id: copyImageLabel === 'Copy image' ? 'copy-image' : 'copy-frame',
+                keyHint: null,
+                label: copyImageLabel,
+                leftItem: null,
+                disabled: false,
+                onClick: () => {
+                    copyImageToClipboard(copyImageElement)
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)(`Copied ${copyImageLabel === 'Copy image' ? 'image' : 'frame'} to clipboard`, 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy ${copyImageLabel === 'Copy image' ? 'image' : 'frame'}: ${err.message}`, 2000);
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: copyImageLabel === 'Copy image' ? 'copy-image' : 'copy-frame',
+            }
+            : null,
+        assetLinkInfo || copyImageElement
             ? {
                 type: 'divider',
                 id: 'sequence-link-divider',

package/dist/components/Timeline/normalize-font-weight-for-keyframe.d.ts

@@ -0,0 +1 @@
+export declare const normalizeFontWeightForKeyframe: (value: unknown) => number | null;