@remotion/studio 4.0.518 → 4.0.520

package/dist/components/Timeline/TimelineSequence.js

@@ -50,9 +50,7 @@ const modals_1 = require("../../state/modals");
 const AudioWaveform_1 = require("../AudioWaveform");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
-const delete_jsx_node_api_1 = require("../delete-jsx-node-api");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
@@ -68,6 +66,7 @@ const TimelineSequenceRightEdgeDragHandle_1 = require("./TimelineSequenceRightEd
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineViewport_1 = require("./TimelineViewport");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const use_delete_timeline_items_1 = require("./use-delete-timeline-items");
 const use_open_sequence_in_apps_1 = require("./use-open-sequence-in-apps");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
 const TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset, cascadedStart, localStart, }) => {
@@ -117,11 +116,9 @@ const TimelineSequenceNegativeStartInner = ({ left, width, leftEdgeVisible, clip
 };
 const TimelineSequenceNegativeStart = react_1.default.memo(TimelineSequenceNegativeStartInner);
 const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, negativeStart, leftEdgeVisible, negativeStartClipped, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onPointerDownCapture, onDoubleClick, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, ref);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
@@ -159,14 +156,13 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
         ? negativeStart.left + negativeStart.width
         : 0;
     const actualStyle = (0, react_1.useMemo)(() => {
-        const hasSelectedTrack = selectedItems.some((item) => item.type !== 'guide');
         return {
             ...style,
             background: negativeStart ? colors_1.TRANSPARENT : style.background,
             border: negativeStart ? 'none' : style.border,
-            opacity: hasSelectedTrack && !selected && !containsSelection ? 0.75 : 1,
+            opacity: selected ? 1 : 0.75,
         };
-    }, [containsSelection, negativeStart, selected, selectedItems, style]);
+    }, [negativeStart, selected, style]);
     const content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [premount ? (jsx_runtime_1.jsx("div", { style: {
                     left: premount.left,
                     width: premount.width,
@@ -195,8 +191,8 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
                 s.type !== 'video' &&
                 s.type !== 'image' &&
                 s.loopDisplay === undefined &&
-                (isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
-                    paddingLeft: 5 + ((_c = negativeStart === null || negativeStart === void 0 ? void 0 : negativeStart.width) !== null && _c !== void 0 ? _c : 0) + ((_d = premount === null || premount === void 0 ? void 0 : premount.width) !== null && _d !== void 0 ? _d : 0),
+                (frozenFrame !== null || isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
+                    paddingLeft: 5 + negativeStartEnd + ((_c = premount === null || premount === void 0 ? void 0 : premount.width) !== null && _c !== void 0 ? _c : 0),
                     height: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -279,7 +275,17 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
-    const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
+    const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const selectedSequenceNodePathInfos = (0, react_1.useMemo)(() => {
+        if (!selected ||
+            selectedItems.length < 2 ||
+            selectedItems.some((item) => item.type !== 'sequence')) {
+            return null;
+        }
+        return selectedItems.flatMap((item) => item.type === 'sequence' ? [item.nodePathInfo] : []);
+    }, [selected, selectedItems]);
     const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
@@ -332,45 +338,36 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo], confirm).catch(() => undefined);
     }, [confirm, duplicateDisabled, nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
-    const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
-        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath || deleteDisabled) {
+    const onDuplicateSelectedSequences = (0, react_1.useCallback)(() => {
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
             return;
         }
-        if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
-            const shouldDelete = await confirm({
-                title: 'Delete sequence?',
-                message: 'This sequence is programmatically duplicated ' +
-                    nodePathInfo.numberOfSequencesWithThisNodePath +
-                    ' times in the code. Deleting removes all instances. Continue?',
-                confirmLabel: 'Delete',
-            });
-            if (!shouldDelete) {
-                return;
-            }
-        }
-        try {
-            const result = await (0, delete_jsx_node_api_1.deleteJsxNode)({
-                nodes: [
-                    {
-                        fileName: validatedLocation.source,
-                        nodePath: nodePath.nodePath,
-                    },
-                ],
-            });
-            if (!result.success) {
-                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
-            }
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
+    }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
+    const onDeleteSequenceFromSource = (0, react_1.useCallback)(() => {
+        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
+            !nodePath ||
+            !nodePathInfo ||
+            deleteDisabled) {
+            return;
         }
+        deleteTimelineItems([{ type: 'sequence', nodePathInfo }]);
     }, [
-        confirm,
         deleteDisabled,
+        deleteTimelineItems,
         nodePath,
         nodePathInfo,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
+    const onDeleteSelectedSequences = (0, react_1.useCallback)(() => {
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
+            return;
+        }
+        deleteTimelineItems(selectedSequenceNodePathInfos.map((selectedNodePathInfo) => ({
+            type: 'sequence',
+            nodePathInfo: selectedNodePathInfo,
+        })));
+    }, [deleteTimelineItems, previewInteractive, selectedSequenceNodePathInfos]);
     const onDisableSequenceInteractivity = (0, react_1.useCallback)(() => {
         if (disableInteractivityDisabled ||
             !nodePath ||
@@ -393,9 +390,17 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     ]);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         var _a;
-        if (selectable) {
+        if (selectable && !selected) {
             onSelect({ shiftKey: false, toggleKey: false });
         }
+        if (selectedSequenceNodePathInfos !== null) {
+            return (0, get_sequence_context_menu_items_1.getMultiSequenceContextMenuItems)({
+                deleteDisabled: !previewInteractive,
+                duplicateDisabled: !previewInteractive,
+                onDeleteSelectedSequences,
+                onDuplicateSelectedSequences,
+            });
+        }
         const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
             clientId: previewInteractive && previewServerState.type === 'connected'
                 ? previewServerState.clientId
@@ -454,8 +459,10 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         nodePath,
         onSelect,
         onDeleteSequenceFromSource,
+        onDeleteSelectedSequences,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
+        onDuplicateSelectedSequences,
         openInCodingAgent,
         openInEditor,
         originalLocation,
@@ -465,6 +472,8 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         s,
         selectAsset,
         selectable,
+        selected,
+        selectedSequenceNodePathInfos,
         sequenceFrameOffset,
         setPropStatuses,
         setSelectedModal,
@@ -543,9 +552,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                 ? colors_1.TIMELINE_AUDIO_GRADIENT
                 : s.type === 'video'
                     ? colors_1.TIMELINE_VIDEO_GRADIENT
-                    : s.type === 'image'
-                        ? colors_1.TIMELINE_IMAGE_GRADIENT
-                        : colors_1.BLUE,
+                    : colors_1.BLUE,
             border: `${get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH}px solid ${colors_1.WHITE_ALPHA_20}`,
             borderLeftColor: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) && !negativeStartClipped
                 ? colors_1.WHITE_ALPHA_20

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -53,7 +53,6 @@ const transform_3d_mode_1 = require("../../state/transform-3d-mode");
 const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
-const delete_jsx_node_api_1 = require("../delete-jsx-node-api");
 const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
@@ -76,6 +75,7 @@ const TimelineMediaInfo_1 = require("./TimelineMediaInfo");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceName_1 = require("./TimelineSequenceName");
+const use_delete_timeline_items_1 = require("./use-delete-timeline-items");
 const use_open_sequence_in_apps_1 = require("./use-open-sequence-in-apps");
 const use_rename_sequence_1 = require("./use-rename-sequence");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
@@ -193,8 +193,17 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     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 selectedSequenceNodePathInfos = (0, react_1.useMemo)(() => {
+        if (!selected ||
+            selectedItems.length < 2 ||
+            selectedItems.some((item) => item.type !== 'sequence')) {
+            return null;
+        }
+        return selectedItems.flatMap((item) => item.type === 'sequence' ? [item.nodePathInfo] : []);
+    }, [selected, selectedItems]);
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
     const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
@@ -246,45 +255,36 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo], confirm).catch(() => undefined);
     }, [confirm, duplicateDisabled, nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
-    const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
-        if (deleteDisabled || !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
+    const onDuplicateSelectedSequences = (0, react_1.useCallback)(() => {
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
             return;
         }
-        if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
-            const shouldDelete = await confirm({
-                title: 'Delete sequence?',
-                message: 'This sequence is programmatically duplicated ' +
-                    nodePathInfo.numberOfSequencesWithThisNodePath +
-                    ' times in the code. Deleting removes all instances. Continue?',
-                confirmLabel: 'Delete',
-            });
-            if (!shouldDelete) {
-                return;
-            }
-        }
-        try {
-            const result = await (0, delete_jsx_node_api_1.deleteJsxNode)({
-                nodes: [
-                    {
-                        fileName: validatedLocation.source,
-                        nodePath: nodePath.nodePath,
-                    },
-                ],
-            });
-            if (!result.success) {
-                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
-            }
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
+    }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
+    const onDeleteSequenceFromSource = (0, react_1.useCallback)(() => {
+        if (deleteDisabled ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
+            !nodePath ||
+            !nodePathInfo) {
+            return;
         }
+        deleteTimelineItems([{ type: 'sequence', nodePathInfo }]);
     }, [
-        confirm,
         deleteDisabled,
+        deleteTimelineItems,
         nodePath,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
         nodePathInfo,
     ]);
+    const onDeleteSelectedSequences = (0, react_1.useCallback)(() => {
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
+            return;
+        }
+        deleteTimelineItems(selectedSequenceNodePathInfos.map((selectedNodePathInfo) => ({
+            type: 'sequence',
+            nodePathInfo: selectedNodePathInfo,
+        })));
+    }, [deleteTimelineItems, previewInteractive, selectedSequenceNodePathInfos]);
     const onDisableSequenceInteractivity = (0, react_1.useCallback)(() => {
         if (disableInteractivityDisabled ||
             !nodePath ||
@@ -693,9 +693,17 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     }, [canRotate, nodePathInfo, selectItem, setManuallyEnabled]);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         var _a;
-        if (selectable) {
+        if (selectable && !selected) {
             onSelect({ shiftKey: false, toggleKey: false });
         }
+        if (selectedSequenceNodePathInfos !== null) {
+            return (0, get_sequence_context_menu_items_1.getMultiSequenceContextMenuItems)({
+                deleteDisabled: !previewInteractive,
+                duplicateDisabled: !previewInteractive,
+                onDeleteSelectedSequences,
+                onDuplicateSelectedSequences,
+            });
+        }
         const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
             clientId: previewInteractive && previewServerState.type === 'connected'
                 ? previewServerState.clientId
@@ -835,8 +843,10 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         onCrop,
         onRotate,
         onDeleteSequenceFromSource,
+        onDeleteSelectedSequences,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
+        onDuplicateSelectedSequences,
         onRenameSequence,
         onSelect,
         openInCodingAgent,
@@ -847,6 +857,8 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         propStatusesForOverride,
         selectAsset,
         selectable,
+        selected,
+        selectedSequenceNodePathInfos,
         sequence,
         sequenceFrameOffset,
         setSelectedModal,

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.canResizeTimelineSequenceDuration = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -43,7 +44,6 @@ const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const pointer_session_1 = require("../../helpers/pointer-session");
-const sort_by_nonce_history_1 = require("../../helpers/sort-by-nonce-history");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const editor_snapping_1 = require("../../state/editor-snapping");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
@@ -168,9 +168,9 @@ const getMinimumSequenceDuration = ({ sequence, sequences, }) => {
     if (!(0, exports.isTransitionSeriesSequence)(sequence)) {
         return 1;
     }
-    const siblings = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences.filter((candidate) => candidate.parent === sequence.parent &&
+    const siblings = (0, canvas_1.sortItemsByCommitOrder)(sequences.filter((candidate) => candidate.parent === sequence.parent &&
         ((0, exports.isTransitionSeriesSequence)(candidate) ||
-            isTransitionSeriesTransition(candidate))));
+            isTransitionSeriesTransition(candidate))), (candidate) => candidate.timelineOrder);
     const sequenceIndex = siblings.findIndex((candidate) => candidate.id === sequence.id);
     if (sequenceIndex === -1) {
         return 1;

package/dist/components/Timeline/TimelineSlider.js

@@ -60,8 +60,8 @@ const TimelineSliderInner = () => {
         throw new Error('Unexpectedly did not have timeline width');
     }
     const zoomLevel = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
-        ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
-        : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : null)
+        : null;
     (0, react_1.useLayoutEffect)(() => {
         var _a;
         const el = ref.current;

package/dist/components/Timeline/TimelineStack/get-stack.d.ts

@@ -1 +1,2 @@
+export declare const getSourceMapFilesForSource: (source: string) => Record<string, string> | null;
 export declare const getOriginalLocationFromStack: (stack: string, type: "sequence" | "visual-control") => Promise<import("../../../error-overlay/react-overlay/utils/get-source-map").OriginalPosition | null>;

package/dist/components/Timeline/TimelineStack/get-stack.js

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOriginalLocationFromStack = void 0;
+exports.getOriginalLocationFromStack = exports.getSourceMapFilesForSource = void 0;
 const trace_mapping_1 = require("@jridgewell/trace-mapping");
 const get_source_map_1 = require("../../../error-overlay/react-overlay/utils/get-source-map");
 const get_location_of_sequence_1 = require("../../../helpers/get-location-of-sequence");
 const traceMapCache = {};
 const traceMapPromises = {};
+const traceMapsByOriginalSource = new Map();
+const sourceMapFilesCache = new WeakMap();
 const browserStudioOriginalSourcePrefix = 'browser-studio-original://';
 const studioOriginalSourcePrefix = 'studio-original://';
-const getSourceMapCache = async (fileName) => {
+const getSourceMapCache = (fileName) => {
     if (traceMapCache[fileName]) {
-        return traceMapCache[fileName];
+        return Promise.resolve(traceMapCache[fileName]);
     }
     if (traceMapPromises[fileName]) {
         return traceMapPromises[fileName];
@@ -18,8 +20,16 @@ const getSourceMapCache = async (fileName) => {
     traceMapPromises[fileName] = fetch(`${fileName}.map`)
         .then((res) => res.json())
         .then((json) => {
+        var _a;
         const map = new trace_mapping_1.TraceMap(json);
         traceMapCache[fileName] = map;
+        for (let index = 0; index < map.sources.length; index++) {
+            const source = map.sources[index];
+            const content = (_a = map.sourcesContent) === null || _a === void 0 ? void 0 : _a[index];
+            if (source !== null && typeof content === 'string') {
+                traceMapsByOriginalSource.set(source, map);
+            }
+        }
         return map;
     })
         .finally(() => {
@@ -27,6 +37,28 @@ const getSourceMapCache = async (fileName) => {
     });
     return traceMapPromises[fileName];
 };
+const getSourceMapFilesForSource = (source) => {
+    var _a;
+    const map = traceMapsByOriginalSource.get(source);
+    if (!map) {
+        return null;
+    }
+    const cached = sourceMapFilesCache.get(map);
+    if (cached) {
+        return cached;
+    }
+    const files = {};
+    for (let index = 0; index < map.sources.length; index++) {
+        const fileName = map.sources[index];
+        const content = (_a = map.sourcesContent) === null || _a === void 0 ? void 0 : _a[index];
+        if (fileName !== null && typeof content === 'string') {
+            files[fileName] = content;
+        }
+    }
+    sourceMapFilesCache.set(map, files);
+    return files;
+};
+exports.getSourceMapFilesForSource = getSourceMapFilesForSource;
 const getOriginalLocationFromStack = async (stack, type) => {
     const location = type === 'sequence'
         ? (0, get_location_of_sequence_1.getLocationOfSequence)(stack)

package/dist/components/Timeline/TimelineWidthProvider.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_timeline_max_zoom_1 = require("../../helpers/get-timeline-max-zoom");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const timeline_refs_1 = require("./timeline-refs");
 exports.TimelineWidthContext = (0, react_1.createContext)(null);
@@ -15,18 +16,24 @@ const TimelineWidthProvider = ({ children }) => {
     });
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const width = (0, react_1.useMemo)(() => {
         var _a, _b;
-        var _c, _d, _e;
-        const zoom = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
-            ? ((_c = zoomMap[canvasContent.compositionId]) !== null && _c !== void 0 ? _c : timeline_zoom_1.TIMELINE_MIN_ZOOM)
-            : timeline_zoom_1.TIMELINE_MIN_ZOOM;
-        const scrollableWidth = (_d = size === null || size === void 0 ? void 0 : size.width) !== null && _d !== void 0 ? _d : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        var _c, _d, _e, _f;
+        const scrollableWidth = (_c = size === null || size === void 0 ? void 0 : size.width) !== null && _c !== void 0 ? _c : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
         if (scrollableWidth === undefined) {
-            return (_e = (_b = timeline_refs_1.sliderAreaRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _e !== void 0 ? _e : null;
+            return (_d = (_b = timeline_refs_1.sliderAreaRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _d !== void 0 ? _d : null;
         }
-        return scrollableWidth * zoom;
-    }, [canvasContent, size === null || size === void 0 ? void 0 : size.width, zoomMap]);
+        const durationInFrames = (_e = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _e !== void 0 ? _e : 1;
+        const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
+            durationInFrames,
+            timelineViewportWidth: scrollableWidth,
+            zoom: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+                ? ((_f = zoomMap[canvasContent.compositionId]) !== null && _f !== void 0 ? _f : null)
+                : null,
+        });
+        return (0, get_timeline_max_zoom_1.getTimelineWidth)({ durationInFrames, zoom });
+    }, [canvasContent, size === null || size === void 0 ? void 0 : size.width, videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames, zoomMap]);
     return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: width, children: children }));
 };
 exports.TimelineWidthProvider = TimelineWidthProvider;

package/dist/components/Timeline/TimelineZoomControls.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineZoomControls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
@@ -45,6 +46,7 @@ const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
 const ControlButton_1 = require("../ControlButton");
 const layout_1 = require("../layout");
+const timeline_refs_1 = require("./timeline-refs");
 const TIMELINE_ZOOM_BUTTON_FACTOR = 1.2;
 const container = {
     color: colors_1.BLACK,
@@ -55,10 +57,11 @@ const container = {
 const buttonStyle = {
     fontSize: 24,
 };
-const TimelineZoomSlider = ({ maxWidth, maxZoom }) => {
-    var _a;
+const TimelineZoomSlider = ({ maxWidth, minZoom, timelineViewportWidth }) => {
+    var _a, _b;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setZoom, zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const onChange = (0, react_1.useCallback)((e) => {
@@ -67,26 +70,40 @@ const TimelineZoomSlider = ({ maxWidth, maxZoom }) => {
         }
         setZoom(canvasContent.compositionId, () => (0, get_timeline_max_zoom_1.sliderValueToTimelineZoom)({
             sliderValue: Number(e.target.value),
-            maxZoom,
+            minZoom,
         }), {
             anchorFrame: null,
             anchorContentX: null,
         });
-    }, [canvasContent, maxZoom, setZoom]);
+    }, [canvasContent, minZoom, setZoom]);
     if (isStill ||
         canvasContent === null ||
         canvasContent.type !== 'composition') {
         return null;
     }
-    const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : get_timeline_max_zoom_1.TIMELINE_MIN_ZOOM;
-    return (jsx_runtime_1.jsx("input", { style: maxWidth === undefined ? undefined : { maxWidth }, title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: "range", min: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.min, max: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.max, step: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.step, value: (0, get_timeline_max_zoom_1.timelineZoomToSliderValue)({ zoom, maxZoom }), onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }));
+    const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
+        durationInFrames: (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 1,
+        timelineViewportWidth,
+        zoom: (_b = zoomMap[canvasContent.compositionId]) !== null && _b !== void 0 ? _b : null,
+    });
+    const roundedZoom = Math.round(zoom * 100) / 100;
+    return (jsx_runtime_1.jsx("input", { style: maxWidth === undefined ? undefined : { maxWidth }, title: `Timeline zoom (${roundedZoom}px/frame)`, alt: `Timeline zoom (${roundedZoom}px/frame)`, type: "range", min: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.min, max: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.max, step: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.step, value: (0, get_timeline_max_zoom_1.timelineZoomToSliderValue)({ zoom, minZoom }), onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }));
 };
 const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
     var _a;
+    var _b, _c, _d;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const maxZoom = (0, get_timeline_max_zoom_1.getTimelineMaxZoom)((_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 1);
+    const timelineSize = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const timelineViewportWidth = (_c = (_b = timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width) !== null && _b !== void 0 ? _b : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _c !== void 0 ? _c : 0;
+    const minZoom = (0, get_timeline_max_zoom_1.getTimelineMinZoom)({
+        durationInFrames: (_d = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _d !== void 0 ? _d : 1,
+        timelineViewportWidth,
+    });
     const onMinusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
@@ -106,7 +123,7 @@ const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth, maxZoom: maxZoom }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth, minZoom: minZoom, timelineViewportWidth: timelineViewportWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) })
         ] }));
 };
 exports.TimelineZoomControls = react_1.default.memo(TimelineZoomControlsInner);

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

@@ -52,11 +52,11 @@ const deleteSequencesFromSource = async (nodePathInfos, confirm) => {
         if (!result.success) {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
-        return true;
+        return result.success;
     })
         .catch((err) => {
         (0, NotificationCenter_1.showNotification)(err.message, 4000);
-        return true;
+        return false;
     });
 };
 exports.deleteSequencesFromSource = deleteSequencesFromSource;