@remotion/studio 4.0.481 → 4.0.483

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -57,7 +57,6 @@ const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
-const TimelineItemStack_1 = require("./TimelineItemStack");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineMediaInfo_1 = require("./TimelineMediaInfo");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
@@ -438,17 +437,6 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         }
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
-    const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
-        if (!canOpenInEditor) {
-            return;
-        }
-        if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
-            e.stopPropagation();
-            return;
-        }
-        e.stopPropagation();
-        openInEditor();
-    }, [canOpenInEditor, openInEditor]);
     const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
@@ -549,6 +537,18 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         codeNameStatus !== undefined &&
         codeNameStatus !== null &&
         codeNameStatus.status === 'static';
+    const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
+        if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
+            e.stopPropagation();
+            return;
+        }
+        e.stopPropagation();
+        if (canRenameThisSequence) {
+            setIsRenaming(true);
+            return;
+        }
+        openInEditor();
+    }, [canRenameThisSequence, openInEditor]);
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
@@ -719,7 +719,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     subMenu: null,
                     value: 'rename-sequence',
                 },
-                freezeFrameMenuItem,
+                ...(freezeFrameMenuItem ? [freezeFrameMenuItem] : []),
             ],
         });
     }, [
@@ -802,13 +802,14 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             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: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewConnected, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canOpenInEditor ? onShowInEditorDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
+    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: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewConnected, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canRenameThisSequence || canOpenInEditor
+            ? onSequenceDoubleClick
+            : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
                 jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })
-                    ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineItemStack_1.TimelineItemStack, { originalLocation: originalLocation })
-            ] }) }));
+                    ] })) : 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 &&
                 isExpanded &&

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence, InteractivitySchema } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type SaveSequencePropChange } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
@@ -8,6 +8,14 @@ export type TimelineSequenceDurationDragTarget = {
     readonly initialDuration: number;
     readonly nodePath: SequencePropsSubscriptionKey;
 };
+export type TimelineSequenceLeftEdgeDragTarget = {
+    readonly fileName: string;
+    readonly initialDuration: number;
+    readonly initialFrom: number;
+    readonly initialTrimBefore: number;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: InteractivitySchema;
+};
 export type TimelineSequenceFromDragTarget = {
     readonly fileName: string;
     readonly initialFrom: number;
@@ -17,6 +25,25 @@ export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, d
     readonly initialDuration: number;
     readonly deltaFrames: number;
 }) => number;
+export declare const getTimelineSequenceLeftEdgeDragDelta: ({ initialDuration, initialTrimBefore, deltaFrames, }: {
+    readonly initialDuration: number;
+    readonly initialTrimBefore: number;
+    readonly deltaFrames: number;
+}) => number;
+export declare const getTimelineSequenceLeftEdgeDragValues: ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, }: {
+    readonly initialDuration: number;
+    readonly initialFrom: number;
+    readonly initialTrimBefore: number;
+    readonly deltaFrames: number;
+}) => {
+    durationInFrames: number;
+    from: number;
+    trimBefore: number;
+};
+export declare const getTimelineSequenceLeftEdgeDragChanges: ({ targets, deltaFrames, }: {
+    readonly targets: readonly TimelineSequenceLeftEdgeDragTarget[];
+    readonly deltaFrames: number;
+}) => SaveSequencePropChange[];
 export declare const getTimelineSequenceDurationDragChanges: ({ targets, deltaFrames, }: {
     readonly targets: readonly TimelineSequenceDurationDragTarget[];
     readonly deltaFrames: number;
@@ -36,6 +63,13 @@ export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathI
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceDurationDragTarget[] | null;
+export declare const getTimelineSequenceLeftEdgeDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    readonly draggedNodePathInfo: SequenceNodePathInfo;
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly propStatuses: PropStatuses;
+}) => TimelineSequenceLeftEdgeDragTarget[] | null;
 export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
     readonly selectedItems: readonly TimelineSelection[];
@@ -43,6 +77,11 @@ export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo,
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceFromDragTarget[] | null;
+export declare const TimelineSequenceLeftEdgeDragHandle: React.FC<{
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly windowWidth: number;
+    readonly timelineDurationInFrames: number;
+}>;
 export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth, timelineDurationInFrames, }: {
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly windowWidth: number;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceDurationDragValue = void 0;
+exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -32,12 +32,25 @@ const canUpdateFrom = ({ propStatuses, nodePath, }) => {
     const status = (_b = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.from) === null || _b === void 0 ? void 0 : _b.status;
     return status === 'static';
 };
+const canUpdateTrimBefore = ({ propStatuses, nodePath, }) => {
+    var _a, _b;
+    const status = (_b = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.trimBefore) === null || _b === void 0 ? void 0 : _b.status;
+    return status === 'static';
+};
 const isDurationDraggableSequence = (sequence) => {
     return ((sequence.type === 'sequence' || sequence.type === 'image') &&
         !sequence.loopDisplay &&
         !sequence.isInsideSeries &&
         Boolean(sequence.controls));
 };
+const isLeftEdgeDraggableSequence = (sequence) => {
+    return (!sequence.isInsideSeries &&
+        Boolean(sequence.controls) &&
+        (sequence.type === 'sequence' ||
+            sequence.type === 'image' ||
+            sequence.type === 'audio' ||
+            sequence.type === 'video'));
+};
 const isFromDraggableSequence = (sequence) => {
     return (!sequence.loopDisplay &&
         !sequence.isInsideSeries &&
@@ -45,6 +58,68 @@ const isFromDraggableSequence = (sequence) => {
 };
 const getTimelineSequenceDurationDragValue = ({ initialDuration, deltaFrames, }) => Math.max(1, initialDuration + deltaFrames);
 exports.getTimelineSequenceDurationDragValue = getTimelineSequenceDurationDragValue;
+const getTimelineSequenceLeftEdgeDragDelta = ({ initialDuration, initialTrimBefore, deltaFrames, }) => {
+    const minDeltaFrames = 0 - initialTrimBefore;
+    const maxDeltaFrames = initialDuration - 1;
+    return Math.max(minDeltaFrames, Math.min(deltaFrames, maxDeltaFrames));
+};
+exports.getTimelineSequenceLeftEdgeDragDelta = getTimelineSequenceLeftEdgeDragDelta;
+const getTimelineSequenceLeftEdgeDragValues = ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, }) => {
+    const clampedDeltaFrames = (0, exports.getTimelineSequenceLeftEdgeDragDelta)({
+        initialDuration,
+        initialTrimBefore,
+        deltaFrames,
+    });
+    return {
+        durationInFrames: initialDuration - clampedDeltaFrames,
+        from: initialFrom + clampedDeltaFrames,
+        trimBefore: initialTrimBefore + clampedDeltaFrames,
+    };
+};
+exports.getTimelineSequenceLeftEdgeDragValues = getTimelineSequenceLeftEdgeDragValues;
+const getTimelineSequenceLeftEdgeDragChanges = ({ targets, deltaFrames, }) => {
+    return targets.flatMap((target) => {
+        const nextValues = (0, exports.getTimelineSequenceLeftEdgeDragValues)({
+            initialDuration: target.initialDuration,
+            initialFrom: target.initialFrom,
+            initialTrimBefore: target.initialTrimBefore,
+            deltaFrames,
+        });
+        const changes = [];
+        if (nextValues.from !== target.initialFrom) {
+            changes.push({
+                fileName: target.fileName,
+                nodePath: target.nodePath,
+                fieldKey: 'from',
+                value: nextValues.from,
+                defaultValue: '0',
+                schema: target.schema,
+            });
+        }
+        if (nextValues.durationInFrames !== target.initialDuration) {
+            changes.push({
+                fileName: target.fileName,
+                nodePath: target.nodePath,
+                fieldKey: 'durationInFrames',
+                value: nextValues.durationInFrames,
+                defaultValue: null,
+                schema: target.schema,
+            });
+        }
+        if (nextValues.trimBefore !== target.initialTrimBefore) {
+            changes.push({
+                fileName: target.fileName,
+                nodePath: target.nodePath,
+                fieldKey: 'trimBefore',
+                value: nextValues.trimBefore,
+                defaultValue: '0',
+                schema: target.schema,
+            });
+        }
+        return changes;
+    });
+};
+exports.getTimelineSequenceLeftEdgeDragChanges = getTimelineSequenceLeftEdgeDragChanges;
 const getTimelineSequenceDurationDragChanges = ({ targets, deltaFrames, }) => {
     return targets.flatMap((target) => {
         const nextValue = (0, exports.getTimelineSequenceDurationDragValue)({
@@ -141,6 +216,60 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
     return [...targets.values()];
 };
 exports.getTimelineSequenceDurationDragTargets = getTimelineSequenceDurationDragTargets;
+const getTimelineSequenceLeftEdgeDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a, _b;
+    const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
+    const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
+    const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
+        draggedSelectionKey);
+    if (draggedItemIsSelected &&
+        selectedSequenceItems.length !== selectedItems.length) {
+        return null;
+    }
+    const targetNodePathInfos = draggedItemIsSelected && selectedSequenceItems.length > 1
+        ? selectedSequenceItems.map((item) => item.nodePathInfo)
+        : [draggedNodePathInfo];
+    const tracks = (0, calculate_timeline_1.calculateTimeline)({ sequences, overrideIdsToNodePaths });
+    const targets = new Map();
+    for (const nodePathInfo of targetNodePathInfos) {
+        const track = findSequenceTrack({ tracks, nodePathInfo });
+        const originalSequence = track
+            ? sequences.find((sequence) => sequence.id === track.sequence.id)
+            : null;
+        if (!track ||
+            !track.nodePathInfo ||
+            !originalSequence ||
+            !isLeftEdgeDraggableSequence(originalSequence)) {
+            return null;
+        }
+        const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
+        const trimsMedia = originalSequence.type === 'audio' || originalSequence.type === 'video';
+        if (!canUpdateFrom({ propStatuses, nodePath }) ||
+            !canUpdateDurationInFrames({ propStatuses, nodePath }) ||
+            !canUpdateTrimBefore({ propStatuses, nodePath })) {
+            return null;
+        }
+        const { controls } = originalSequence;
+        if (!controls) {
+            return null;
+        }
+        const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
+        if (!targets.has(key)) {
+            targets.set(key, {
+                fileName: nodePath.absolutePath,
+                initialDuration: originalSequence.duration,
+                initialFrom: originalSequence.from,
+                initialTrimBefore: trimsMedia
+                    ? ((_a = originalSequence.trimBefore) !== null && _a !== void 0 ? _a : Math.max(0, originalSequence.startMediaFrom))
+                    : ((_b = originalSequence.trimBefore) !== null && _b !== void 0 ? _b : 0),
+                nodePath,
+                schema: controls.schema,
+            });
+        }
+    }
+    return [...targets.values()];
+};
+exports.getTimelineSequenceLeftEdgeDragTargets = getTimelineSequenceLeftEdgeDragTargets;
 const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
     const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
@@ -182,6 +311,11 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
     return [...targets.values()];
 };
 exports.getTimelineSequenceFromDragTargets = getTimelineSequenceFromDragTargets;
+const clearLeftEdgeDragOverrides = ({ clearDragOverrides, targets, }) => {
+    for (const target of targets) {
+        clearDragOverrides(target.nodePath);
+    }
+};
 const clearDurationDragOverrides = ({ clearDragOverrides, targets, }) => {
     for (const target of targets) {
         clearDragOverrides(target.nodePath);
@@ -192,6 +326,179 @@ const clearFromDragOverrides = ({ clearDragOverrides, targets, }) => {
         clearDragOverrides(target.nodePath);
     }
 };
+const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const dragStateRef = (0, react_1.useRef)(null);
+    const latestRef = (0, react_1.useRef)({
+        nodePathInfo,
+        setPropStatuses,
+        setDragOverrides,
+        clearDragOverrides,
+        previewServerState,
+        overrideIdToNodePathMappings,
+    });
+    latestRef.current = {
+        nodePathInfo,
+        setPropStatuses,
+        setDragOverrides,
+        clearDragOverrides,
+        previewServerState,
+        overrideIdToNodePathMappings,
+    };
+    const finishDrag = (0, react_1.useCallback)((commit) => {
+        const dragState = dragStateRef.current;
+        dragStateRef.current = null;
+        document.body.style.userSelect = '';
+        document.body.style.webkitUserSelect = '';
+        (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+        setDragging(false);
+        if (!dragState) {
+            return;
+        }
+        const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
+        const changes = (0, exports.getTimelineSequenceLeftEdgeDragChanges)({
+            targets: dragState.targets,
+            deltaFrames: dragState.latestDeltaFrames,
+        });
+        if (!commit ||
+            latestServerState.type !== 'connected' ||
+            changes.length === 0) {
+            clearLeftEdgeDragOverrides({
+                clearDragOverrides: latestClear,
+                targets: dragState.targets,
+            });
+            return;
+        }
+        const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            changes,
+            setPropStatuses: latestSetPropStatuses,
+            clientId: latestServerState.clientId,
+            undoLabel: dragState.targets.length > 1
+                ? 'Resize selected sequences'
+                : 'Resize sequence',
+            redoLabel: dragState.targets.length > 1
+                ? 'Resize selected sequences back'
+                : 'Resize sequence back',
+        });
+        savePromise
+            .catch((err) => {
+            remotion_1.Internals.Log.error({ logLevel: 'error', tag: null }, 'Could not save left edge drag', err);
+        })
+            .finally(() => {
+            clearLeftEdgeDragOverrides({
+                clearDragOverrides: latestClear,
+                targets: dragState.targets,
+            });
+        });
+    }, []);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        const pxPerFrame = timelineDurationInFrames > 0
+            ? (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2) / timelineDurationInFrames
+            : 0;
+        if (pxPerFrame <= 0) {
+            return;
+        }
+        const { nodePathInfo: latestNodePathInfo, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, } = latestRef.current;
+        const { selectedItems: latestSelectedItems } = currentSelection.current;
+        const targets = (0, exports.getTimelineSequenceLeftEdgeDragTargets)({
+            draggedNodePathInfo: latestNodePathInfo,
+            selectedItems: latestSelectedItems,
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
+            propStatuses: propStatusesRef.current,
+        });
+        if (targets === null || targets.length === 0) {
+            return;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        dragStateRef.current = {
+            initialClientX: e.clientX,
+            latestDeltaFrames: 0,
+            pxPerFrame,
+            pointerId: e.pointerId,
+            targets,
+        };
+        document.body.style.userSelect = 'none';
+        document.body.style.webkitUserSelect = 'none';
+        (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
+        setDragging(true);
+    }, [
+        currentSelection,
+        propStatusesRef,
+        sequencesRef,
+        timelineDurationInFrames,
+        windowWidth,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (!dragging) {
+            return;
+        }
+        const onMove = (e) => {
+            const dragState = dragStateRef.current;
+            if (!dragState || e.pointerId !== dragState.pointerId) {
+                return;
+            }
+            const dx = e.clientX - dragState.initialClientX;
+            const deltaFrames = Math.round(dx / dragState.pxPerFrame);
+            dragState.latestDeltaFrames = deltaFrames;
+            for (const target of dragState.targets) {
+                const nextValues = (0, exports.getTimelineSequenceLeftEdgeDragValues)({
+                    initialDuration: target.initialDuration,
+                    initialFrom: target.initialFrom,
+                    initialTrimBefore: target.initialTrimBefore,
+                    deltaFrames,
+                });
+                latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextValues.from));
+                latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride(nextValues.durationInFrames));
+                latestRef.current.setDragOverrides(target.nodePath, 'trimBefore', remotion_1.Internals.makeStaticDragOverride(nextValues.trimBefore));
+            }
+        };
+        const onUp = (e) => {
+            const dragState = dragStateRef.current;
+            if (!dragState || e.pointerId !== dragState.pointerId) {
+                return;
+            }
+            finishDrag(true);
+        };
+        const onCancel = (e) => {
+            const dragState = dragStateRef.current;
+            if (!dragState || e.pointerId !== dragState.pointerId) {
+                return;
+            }
+            finishDrag(false);
+        };
+        const onWindowBlur = () => {
+            finishDrag(false);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('pointercancel', onCancel);
+        window.addEventListener('blur', onWindowBlur);
+        return () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            window.removeEventListener('pointercancel', onCancel);
+            window.removeEventListener('blur', onWindowBlur);
+        };
+    }, [dragging, finishDrag]);
+    const style = {
+        ...baseStyle,
+        left: 0,
+        background: 'transparent',
+    };
+    return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to trim start", style: style, onPointerDown: onPointerDown }));
+};
+exports.TimelineSequenceLeftEdgeDragHandle = TimelineSequenceLeftEdgeDragHandle;
 const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);

package/dist/components/Timeline/TimelineTrack.js

@@ -48,8 +48,7 @@ const TimelineTrackUnmemoized = ({ track }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewServerConnected = previewServerState.type === 'connected';
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(track.nodePathInfo);
-    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(track.nodePathInfo);
+    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(track.nodePathInfo);
     const layerStyle = (0, react_1.useMemo)(() => ({
         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
@@ -58,9 +57,8 @@ const TimelineTrackUnmemoized = ({ track }) => {
     const showExpandedKeyframes = track.nodePathInfo !== null &&
         previewServerConnected &&
         getIsExpanded(track.nodePathInfo);
-    const showRowHighlight = track.nodePathInfo !== null && (rowSelected || containsSelection);
     return (jsx_runtime_1.jsxs("div", { children: [
-            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [showRowHighlight && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : 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, 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/should-subscribe-to-sequence-props.d.ts

@@ -0,0 +1,4 @@
+import type { TSequence } from 'remotion';
+export declare const shouldSubscribeToSequenceProps: (sequence: TSequence, previewConnected: boolean) => sequence is TSequence & {
+    readonly controls: import("remotion").SequenceControls;
+};

package/dist/components/Timeline/should-subscribe-to-sequence-props.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldSubscribeToSequenceProps = void 0;
+const shouldSubscribeToSequenceProps = (sequence, previewConnected) => {
+    return (sequence.showInTimeline &&
+        Boolean(sequence.controls) &&
+        previewConnected &&
+        Boolean(sequence.getStack()));
+};
+exports.shouldSubscribeToSequenceProps = shouldSubscribeToSequenceProps;

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -214,6 +214,9 @@ const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
     if (!fieldSchema) {
         return formatUnknownTimelineValueForDisplay(value);
     }
+    if (value === undefined) {
+        return 'unset';
+    }
     switch (fieldSchema.type) {
         case 'number':
             return ((_a = formatNumberTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _a !== void 0 ? _a : formatUnknownTimelineValueForDisplay(value));

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.d.ts

@@ -1,6 +1,7 @@
 import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import { type SetPropStatuses } from './save-sequence-prop';
+export declare const shouldShowFreezeFrameMenuItem: (sequence: TSequence) => boolean;
 export declare const useSequenceFreezeFrameMenuItem: ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }: {
     readonly clientId: string | null;
     readonly nodePath: SequencePropsSubscriptionKey | null;
@@ -10,4 +11,4 @@ export declare const useSequenceFreezeFrameMenuItem: ({ clientId, nodePath, prop
     readonly setPropStatuses: SetPropStatuses;
     readonly timelinePosition: number;
     readonly validatedSource: string | null;
-}) => ComboboxValue;
+}) => ComboboxValue | null;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSequenceFreezeFrameMenuItem = void 0;
+exports.useSequenceFreezeFrameMenuItem = exports.shouldShowFreezeFrameMenuItem = void 0;
 const react_1 = require("react");
 const save_sequence_prop_1 = require("./save-sequence-prop");
+const shouldShowFreezeFrameMenuItem = (sequence) => {
+    return sequence.type !== 'audio';
+};
+exports.shouldShowFreezeFrameMenuItem = shouldShowFreezeFrameMenuItem;
 const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }) => {
     const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
     const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
@@ -57,17 +61,19 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
         timelinePosition,
         validatedSource,
     ]);
-    return (0, react_1.useMemo)(() => ({
-        type: 'item',
-        id: 'toggle-freeze-frame',
-        keyHint: null,
-        label: isFrozen ? 'Unfreeze frame' : 'Freeze frame',
-        leftItem: null,
-        disabled: !canToggleFreeze,
-        onClick: onToggleFreezeFrame,
-        quickSwitcherLabel: null,
-        subMenu: null,
-        value: 'toggle-freeze-frame',
-    }), [canToggleFreeze, isFrozen, onToggleFreezeFrame]);
+    return (0, react_1.useMemo)(() => (0, exports.shouldShowFreezeFrameMenuItem)(sequence)
+        ? {
+            type: 'item',
+            id: 'toggle-freeze-frame',
+            keyHint: null,
+            label: isFrozen ? 'Unfreeze frame' : 'Freeze frame',
+            leftItem: null,
+            disabled: !canToggleFreeze,
+            onClick: onToggleFreezeFrame,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'toggle-freeze-frame',
+        }
+        : null, [canToggleFreeze, isFrozen, onToggleFreezeFrame, sequence]);
 };
 exports.useSequenceFreezeFrameMenuItem = useSequenceFreezeFrameMenuItem;

package/dist/components/composition-menu-items.js

@@ -99,6 +99,23 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 id: 'show-in-editor-divider',
             }
             : null,
+        {
+            id: 'new',
+            keyHint: null,
+            label: `New...`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                setSelectedModal({
+                    type: 'new-comp',
+                });
+            },
+            quickSwitcherLabel: 'New composition...',
+            subMenu: null,
+            type: 'item',
+            value: 'new',
+            disabled: readOnlyStudio,
+        },
         {
             id: 'rename',
             keyHint: null,

package/dist/components/element-drag-and-drop.d.ts

@@ -0,0 +1,3 @@
+import { type ElementDragData } from '@remotion/studio-shared';
+export declare const hasElementDragType: (dataTransfer: DataTransfer | null) => boolean;
+export declare const getElementDragData: (dataTransfer: DataTransfer | null) => ElementDragData | null;