@remotion/studio 4.0.496 → 4.0.498

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -265,6 +265,28 @@ const getTimelineMarqueeSelection = ({ candidates, lockedSelectionKind, marqueeR
     };
 };
 exports.getTimelineMarqueeSelection = getTimelineMarqueeSelection;
+const extendTimelineMarqueeSelection = ({ currentSelection, marqueeSelection, }) => {
+    if (marqueeSelection.length === 0) {
+        return currentSelection;
+    }
+    const marqueeKind = getTimelineMarqueeSelectionKind(marqueeSelection[0]);
+    if (marqueeKind === null) {
+        return marqueeSelection;
+    }
+    const selectedKeys = new Set(currentSelection.map((item) => (0, exports.getTimelineSelectionKey)(item)));
+    return [
+        ...currentSelection.filter((item) => isTimelineSelectionCompatibleWithMarqueeKind(item, marqueeKind)),
+        ...marqueeSelection.filter((item) => {
+            const key = (0, exports.getTimelineSelectionKey)(item);
+            if (selectedKeys.has(key)) {
+                return false;
+            }
+            selectedKeys.add(key);
+            return true;
+        }),
+    ];
+};
+exports.extendTimelineMarqueeSelection = extendTimelineMarqueeSelection;
 const defaultTimelineSelectionContextValue = {
     canSelect: false,
     selectedItems: [],
@@ -573,7 +595,7 @@ const TimelineSelectionProvider = ({ children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const timelineSelectionScope = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const { expandParentTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const canSelect = interactivity_enabled_1.studioInteractivityEnabled &&
+    const canSelect = (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         previewServerState.type === 'connected' &&
         !window.remotion_isReadOnlyStudio;
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
@@ -864,7 +886,7 @@ const useCurrentTimelineSelectionStateAsRef = () => {
 };
 exports.useCurrentTimelineSelectionStateAsRef = useCurrentTimelineSelectionStateAsRef;
 const useTimelineMarqueeSelection = () => {
-    const { canSelect, getMarqueeSelection, selectItems } = (0, exports.useTimelineSelection)();
+    const { canSelect, getMarqueeSelection, selectedItems, selectItems } = (0, exports.useTimelineSelection)();
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const [marqueeRect, setMarqueeRect] = (0, react_1.useState)(null);
     const onPointerDownCapture = (0, react_1.useCallback)((event) => {
@@ -874,7 +896,7 @@ const useTimelineMarqueeSelection = () => {
         if (event.button !== 0 || !canSelect) {
             return;
         }
-        if (event.shiftKey || event.metaKey || event.ctrlKey) {
+        if (event.shiftKey) {
             return;
         }
         if (!(event.target instanceof Element)) {
@@ -908,6 +930,8 @@ const useTimelineMarqueeSelection = () => {
         document.body.style.webkitUserSelect = 'none';
         let hasDragged = false;
         let lockedSelectionKind = null;
+        const extendSelection = event.metaKey || event.ctrlKey;
+        const selectionBeforeMarquee = selectedItems;
         const cleanup = () => {
             var _a;
             window.removeEventListener('pointermove', onPointerMove);
@@ -941,7 +965,12 @@ const useTimelineMarqueeSelection = () => {
             const nextSelection = getMarqueeSelection(rect, lockedSelectionKind);
             lockedSelectionKind = nextSelection.lockedSelectionKind;
             setMarqueeRect(rect);
-            selectItems(nextSelection.selectedItems);
+            selectItems(extendSelection
+                ? (0, exports.extendTimelineMarqueeSelection)({
+                    currentSelection: selectionBeforeMarquee,
+                    marqueeSelection: nextSelection.selectedItems,
+                })
+                : nextSelection.selectedItems);
         };
         const onPointerMove = (moveEvent) => {
             updateSelection(moveEvent.clientX, moveEvent.clientY);
@@ -956,7 +985,13 @@ const useTimelineMarqueeSelection = () => {
         window.addEventListener('pointermove', onPointerMove);
         window.addEventListener('pointerup', onPointerUp);
         window.addEventListener('pointercancel', onPointerCancel);
-    }, [canSelect, getMarqueeSelection, isHighestContext, selectItems]);
+    }, [
+        canSelect,
+        getMarqueeSelection,
+        isHighestContext,
+        selectedItems,
+        selectItems,
+    ]);
     return { marqueeRect, onPointerDownCapture };
 };
 exports.useTimelineMarqueeSelection = useTimelineMarqueeSelection;

package/dist/components/Timeline/TimelineSequence.js

@@ -43,6 +43,7 @@ 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 is_video_with_last_frame_hold_1 = require("../../helpers/is-video-with-last-frame-hold");
 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");
@@ -56,6 +57,7 @@ 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 get_timeline_media_visualization_layout_1 = require("./get-timeline-media-visualization-layout");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineImageInfo_1 = require("./TimelineImageInfo");
@@ -159,6 +161,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const video = remotion_1.Internals.useVideo();
     const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
+    const extendVideoLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(s.getStack);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -180,15 +183,15 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
             : undefined;
     }, [propStatuses, nodePath]);
-    const durationCanUpdate = Boolean(interactivity_enabled_1.studioInteractivityEnabled &&
+    const durationCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         ((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
-    const fromCanUpdate = Boolean(interactivity_enabled_1.studioInteractivityEnabled &&
+    const fromCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         ((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
-    const trimBeforeCanUpdate = Boolean(interactivity_enabled_1.studioInteractivityEnabled &&
+    const trimBeforeCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         ((_c = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.trimBefore) === null || _c === void 0 ? void 0 : _c.status) === 'static');
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
+    const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     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)();
@@ -343,7 +346,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             disableInteractivityDisabled,
             duplicateDisabled,
             fileLocation,
-            includeSourceEditItems: interactivity_enabled_1.studioInteractivityEnabled,
+            includeSourceEditItems: (0, interactivity_enabled_1.isStudioInteractivityEnabled)(),
             onDeleteSequenceFromSource,
             onDisableSequenceInteractivity,
             onDuplicateSequenceFromSource,
@@ -351,7 +354,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             originalLocation,
             selectAsset,
             sequence: s,
-            sourceActions: interactivity_enabled_1.studioInteractivityEnabled && freezeFrameMenuItem
+            sourceActions: (0, interactivity_enabled_1.isStudioInteractivityEnabled)() && freezeFrameMenuItem
                 ? [freezeFrameMenuItem]
                 : [],
         });
@@ -407,6 +410,20 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         video,
         windowWidth,
     ]);
+    const mediaVisualizationLayout = (0, react_1.useMemo)(() => {
+        return (0, get_timeline_media_visualization_layout_1.getTimelineMediaVisualizationLayout)({
+            visualizationWidth: width,
+            premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0,
+            postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0,
+        });
+    }, [postmountWidth, premountWidth, width]);
+    const mediaVisualizationStyle = (0, react_1.useMemo)(() => {
+        return {
+            width: mediaVisualizationLayout.width,
+            marginLeft: mediaVisualizationLayout.marginLeft,
+            height: '100%',
+        };
+    }, [mediaVisualizationLayout]);
     const style = (0, react_1.useMemo)(() => {
         return {
             background: s.type === 'audio'
@@ -430,21 +447,16 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         nodePath !== null &&
         validatedLocation !== null &&
         durationCanUpdate;
-    const showLeftEdgeDragHandle = (s.type === 'sequence' ||
-        s.type === 'image' ||
-        s.type === 'audio' ||
-        s.type === 'video') &&
-        !s.isInsideSeries &&
+    const showLeftEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceLeftEdgeDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
-        Boolean(s.controls) &&
-        fromCanUpdate &&
+        ((0, TimelineSequenceRightEdgeDragHandle_1.isCascadingSequence)(s) || fromCanUpdate) &&
         durationCanUpdate &&
         trimBeforeCanUpdate;
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(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("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: mediaVisualizationLayout.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: mediaVisualizationLayout.width }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showLeftEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_h = video.durationInFrames) !== null && _h !== void 0 ? _h : 1 })) : null, showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1 })) : null] }));
     return previewConnected ? (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.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequenceFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
+const snowflake_1 = require("../../icons/snowflake");
 const relativeFrameStyle = {
     alignItems: 'center',
     display: 'flex',
@@ -20,11 +21,8 @@ const snowflakeStyle = {
     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: colors_1.CURRENT_COLOR, 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
+    return (jsx_runtime_1.jsxs("div", { style: relativeFrameStyle, children: [frozenFrame === null ? null : (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: snowflakeStyle, color: colors_1.CURRENT_COLOR })), frozenFrame !== null && frozenFrame !== void 0 ? frozenFrame : (premounted
                 ? '0 (Premounted)'
                 : postmounted !== null
                     ? `${postmounted} (Postmounted)`

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -177,7 +177,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
+    const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -504,6 +504,8 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             ? JSON.stringify(fieldSchema.default)
             : null;
         (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes: [
                 {
                     fileName: validatedLocation.source,
@@ -547,7 +549,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             }
             : inner;
     }, [effectDropHovered, inner]);
-    const hasExpandableContent = interactivity_enabled_1.studioInteractivityEnabled &&
+    const hasExpandableContent = (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         (Boolean(sequence.controls) || sequence.effects.length > 0);
     const canToggleVisibility = previewInteractive &&
         Boolean(sequence.controls) &&
@@ -680,7 +682,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             disableInteractivityDisabled,
             duplicateDisabled,
             fileLocation,
-            includeSourceEditItems: interactivity_enabled_1.studioInteractivityEnabled,
+            includeSourceEditItems: (0, interactivity_enabled_1.isStudioInteractivityEnabled)(),
             onDeleteSequenceFromSource,
             onDisableSequenceInteractivity,
             onDuplicateSequenceFromSource,
@@ -688,7 +690,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             originalLocation,
             selectAsset,
             sequence,
-            sourceActions: interactivity_enabled_1.studioInteractivityEnabled
+            sourceActions: (0, interactivity_enabled_1.isStudioInteractivityEnabled)()
                 ? [
                     ...((nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects)
                         ? [
@@ -817,7 +819,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                     ] })) : null] }) }));
     const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
-                interactivity_enabled_1.studioInteractivityEnabled &&
+                (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -77,6 +77,8 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
             return Promise.resolve();
         }
         return (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes: [
                 {
                     fileName: validatedLocation.source,
@@ -219,6 +221,8 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             : null;
         const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
         (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes: [
                 {
                     fileName: validatedLocation.source,

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

@@ -4,9 +4,11 @@ import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-s
 import type { MoveEffectKeyframeChange, MoveSequenceKeyframeChange } from './call-move-keyframe';
 import { type SaveSequencePropChange } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
+export declare const timelineSequenceFromDragSnapThresholdPx = 10;
 export type TimelineSequenceDurationDragTarget = {
     readonly fileName: string;
     readonly initialDuration: number;
+    readonly minimumDuration: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
 };
@@ -15,10 +17,14 @@ export type TimelineSequenceLeftEdgeDragTarget = {
     readonly initialDuration: number;
     readonly initialFrom: number;
     readonly initialTrimBefore: number;
+    readonly minimumDuration: number;
     readonly nodePath: SequencePropsSubscriptionKey;
+    readonly playbackRate: number;
+    readonly positionField: 'from' | null;
     readonly schema: InteractivitySchema;
 };
 export type TimelineSequenceFromDragTarget = {
+    readonly canSnapToTimelineStart: boolean;
     readonly effectKeyframes: TimelineSequenceEffectKeyframeDragTarget[];
     readonly fileName: string;
     readonly initialFrom: number;
@@ -33,21 +39,29 @@ type TimelineSequenceKeyframeDragTarget = {
 type TimelineSequenceEffectKeyframeDragTarget = TimelineSequenceKeyframeDragTarget & {
     readonly effectIndex: number;
 };
+export declare const isTransitionSeriesSequence: (sequence: TSequence) => boolean;
+export declare const isCascadingSequence: (sequence: TSequence) => boolean;
 export declare const isTimelineSequenceDurationDraggable: (sequence: TSequence) => boolean;
-export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, }: {
+export declare const isTimelineSequenceLeftEdgeDraggable: (sequence: TSequence) => boolean;
+export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, minimumDuration, }: {
     readonly initialDuration: number;
     readonly deltaFrames: number;
+    readonly minimumDuration?: number | undefined;
 }) => number;
-export declare const getTimelineSequenceLeftEdgeDragDelta: ({ initialDuration, initialTrimBefore, deltaFrames, }: {
+export declare const getTimelineSequenceLeftEdgeDragDelta: ({ initialDuration, initialTrimBefore, deltaFrames, playbackRate, minimumDuration, }: {
     readonly initialDuration: number;
     readonly initialTrimBefore: number;
     readonly deltaFrames: number;
+    readonly playbackRate: number;
+    readonly minimumDuration?: number | undefined;
 }) => number;
-export declare const getTimelineSequenceLeftEdgeDragValues: ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, }: {
+export declare const getTimelineSequenceLeftEdgeDragValues: ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, playbackRate, minimumDuration, }: {
     readonly initialDuration: number;
     readonly initialFrom: number;
     readonly initialTrimBefore: number;
     readonly deltaFrames: number;
+    readonly playbackRate: number;
+    readonly minimumDuration?: number | undefined;
 }) => {
     durationInFrames: number;
     from: number;
@@ -65,6 +79,12 @@ export declare const getTimelineSequenceFromDragValue: ({ initialFrom, deltaFram
     readonly initialFrom: number;
     readonly deltaFrames: number;
 }) => number;
+export declare const getTimelineSequenceFromDragDelta: ({ deltaFrames, pxPerFrame, snappingEnabled, targets, }: {
+    readonly deltaFrames: number;
+    readonly pxPerFrame: number;
+    readonly snappingEnabled: boolean;
+    readonly targets: readonly TimelineSequenceFromDragTarget[];
+}) => number;
 export declare const getTimelineSequenceFromDragChanges: ({ targets, deltaFrames, }: {
     readonly targets: readonly TimelineSequenceFromDragTarget[];
     readonly deltaFrames: number;