@remotion/studio 4.0.519 → 4.0.521

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");
@@ -62,7 +61,6 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const reorder_sequence_api_1 = require("../reorder-sequence-api");
 const selected_outline_types_1 = require("../selected-outline-types");
 const use_select_asset_1 = require("../use-select-asset");
-const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 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");
@@ -72,11 +70,13 @@ const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineDuplicateCount_1 = require("./TimelineDuplicateCount");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
+const TimelineLayerChildren_1 = require("./TimelineLayerChildren");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 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");
@@ -194,6 +194,7 @@ 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)(() => {
@@ -261,41 +262,17 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
     }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
-    const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
-        if (deleteDisabled || !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
+    const onDeleteSequenceFromSource = (0, react_1.useCallback)(() => {
+        if (deleteDisabled ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
+            !nodePath ||
+            !nodePathInfo) {
             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);
-        }
+        deleteTimelineItems([{ type: 'sequence', nodePathInfo }]);
     }, [
-        confirm,
         deleteDisabled,
+        deleteTimelineItems,
         nodePath,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
         nodePathInfo,
@@ -304,8 +281,11 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         if (!previewInteractive || selectedSequenceNodePathInfos === null) {
             return;
         }
-        (0, delete_selected_timeline_item_1.deleteSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
-    }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
+        deleteTimelineItems(selectedSequenceNodePathInfos.map((selectedNodePathInfo) => ({
+            type: 'sequence',
+            nodePathInfo: selectedNodePathInfo,
+        })));
+    }, [deleteTimelineItems, previewInteractive, selectedSequenceNodePathInfos]);
     const onDisableSequenceInteractivity = (0, react_1.useCallback)(() => {
         if (disableInteractivityDisabled ||
             !nodePath ||
@@ -944,7 +924,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineLayerChildren_1.TimelineLayerChildrenToggle, { sequence: sequence }), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
                     ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })

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,19 +44,20 @@ 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");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
-const HANDLE_WIDTH = 6;
+const HANDLE_INSET = 6;
+const HANDLE_OUTSET = 8;
 exports.timelineSequenceFromDragSnapThresholdPx = 10;
 const baseStyle = {
     position: 'absolute',
     top: 0,
     bottom: 0,
-    width: HANDLE_WIDTH,
+    // Keep the middle half of narrow layers available for moving.
+    width: `calc(${HANDLE_OUTSET}px + min(${HANDLE_INSET}px, 25%))`,
     cursor: 'ew-resize',
     zIndex: 1,
     touchAction: 'none',
@@ -168,9 +170,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;
@@ -822,6 +824,8 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
             if (!dragState || e.pointerId !== dragState.pointerId) {
                 return;
             }
+            // Include the release position even if the final pointermove was skipped.
+            onMove(e);
             finishDrag(true);
         };
         const onCancel = (e) => {
@@ -840,7 +844,9 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
             captureTarget: activeDragState.target,
             onMove,
             onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                if ((reason === 'pointerup' ||
+                    reason === 'buttons-released' ||
+                    (reason === 'lostpointercapture' && (endEvent === null || endEvent === void 0 ? void 0 : endEvent.buttons) === 0)) &&
                     endEvent) {
                     onUp(endEvent);
                 }
@@ -855,7 +861,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
     }, [dragging, finishDrag]);
     const style = {
         ...baseStyle,
-        left: 0,
+        left: -HANDLE_OUTSET,
         background: colors_1.TRANSPARENT,
     };
     return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to trim start", style: style, onPointerDown: onPointerDown }));
@@ -1041,7 +1047,9 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             },
             onEnd: (reason, endEvent) => {
                 stopPointerSessionRef.current = null;
-                finishDrag((reason === 'pointerup' || reason === 'buttons-released') &&
+                finishDrag((reason === 'pointerup' ||
+                    reason === 'buttons-released' ||
+                    (reason === 'lostpointercapture' && (endEvent === null || endEvent === void 0 ? void 0 : endEvent.buttons) === 0)) &&
                     endEvent !== null);
             },
         });
@@ -1218,6 +1226,8 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
             if (!dragState || e.pointerId !== dragState.pointerId) {
                 return;
             }
+            // Include the release position even if the final pointermove was skipped.
+            onMove(e);
             finishDrag(true);
         };
         const onCancel = (e) => {
@@ -1236,7 +1246,9 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
             captureTarget: activeDragState.target,
             onMove,
             onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                if ((reason === 'pointerup' ||
+                    reason === 'buttons-released' ||
+                    (reason === 'lostpointercapture' && (endEvent === null || endEvent === void 0 ? void 0 : endEvent.buttons) === 0)) &&
                     endEvent) {
                     onUp(endEvent);
                 }
@@ -1251,7 +1263,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
     }, [dragging, finishDrag]);
     const style = {
         ...baseStyle,
-        right: 0,
+        right: -HANDLE_OUTSET,
         background: colors_1.TRANSPARENT,
     };
     return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to change duration", style: style, onPointerDown: onPointerDown }));

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/TimelineTickFormatProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const TimelineTickFormatContext: React.Context<{
+    showFrames: boolean;
+    setShowFrames: React.Dispatch<React.SetStateAction<boolean>>;
+}>;
+export declare const TimelineTickFormatProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/Timeline/TimelineTickFormatProvider.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTickFormatProvider = exports.TimelineTickFormatContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const STORAGE_KEY = 'remotion.timelineShowFrames';
+exports.TimelineTickFormatContext = (0, react_1.createContext)({ showFrames: false, setShowFrames: () => undefined });
+const TimelineTickFormatProvider = ({ children }) => {
+    const [showFrames, setShowFrames] = (0, react_1.useState)(() => localStorage.getItem(STORAGE_KEY) === 'true');
+    (0, react_1.useEffect)(() => {
+        localStorage.setItem(STORAGE_KEY, String(showFrames));
+    }, [showFrames]);
+    const value = (0, react_1.useMemo)(() => ({ showFrames, setShowFrames }), [showFrames]);
+    return (jsx_runtime_1.jsx(exports.TimelineTickFormatContext.Provider, { value: value, children: children }));
+};
+exports.TimelineTickFormatProvider = TimelineTickFormatProvider;

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -44,6 +44,7 @@ const TimeValue_1 = require("../TimeValue");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineTickFormatProvider_1 = require("./TimelineTickFormatProvider");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 exports.TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 const container = {
@@ -190,6 +191,7 @@ const TimelineTimeIndicators = () => {
 exports.TimelineTimeIndicators = TimelineTimeIndicators;
 const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, durationInFrames, fps }) => {
     const canvasRef = (0, react_1.useRef)(null);
+    const { showFrames } = (0, react_1.useContext)(TimelineTickFormatProvider_1.TimelineTickFormatContext);
     (0, react_1.useLayoutEffect)(() => {
         const canvas = canvasRef.current;
         const scrollable = timeline_refs_1.scrollableRef.current;
@@ -201,7 +203,9 @@ const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, duratio
             return;
         }
         const frameInterval = (0, timeline_scroll_logic_1.getFrameIncrementFromWidth)(durationInFrames, windowWidth);
-        const maxTickLabelWidth = (0, render_frame_1.renderFrame)(durationInFrames - 1, fps).length *
+        const maxTickLabelWidth = (showFrames
+            ? `${durationInFrames - 1}f`
+            : (0, render_frame_1.renderFrame)(durationInFrames - 1, fps)).length *
             TICK_LABEL_FONT_SIZE *
             0.6;
         const tickScale = (0, exports.getTimelineTickScale)({
@@ -242,7 +246,7 @@ const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, duratio
                     context.fillStyle = colors_1.LIGHT_TEXT;
                     context.font = `${TICK_LABEL_FONT_SIZE}px ${getComputedStyle(canvas).fontFamily}`;
                     context.textBaseline = 'top';
-                    context.fillText((0, render_frame_1.renderFrame)(frame, fps), xForFrame(frame) + TICK_LABEL_MARGIN_LEFT, 7);
+                    context.fillText(showFrames ? `${Math.round(frame)}f` : (0, render_frame_1.renderFrame)(frame, fps), xForFrame(frame) + TICK_LABEL_MARGIN_LEFT, 7);
                     context.fillStyle = colors_1.WHITE_ALPHA_15;
                 }
             }
@@ -286,7 +290,7 @@ const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, duratio
             scrollable.removeEventListener('scroll', onScroll);
             resizeObserver.disconnect();
         };
-    }, [durationInFrames, fps, windowWidth]);
+    }, [durationInFrames, fps, showFrames, windowWidth]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -53,6 +53,7 @@ const filmstripContainerStyle = {
     height: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
     backgroundColor: colors_1.BLACK_ALPHA_30,
     display: 'flex',
+    overflow: 'hidden',
     borderTopLeftRadius: 2,
     fontSize: 10,
     fontFamily: 'Arial, Helvetica',
@@ -86,8 +87,8 @@ const TimelineVideoInfoSegment = ({ src, visualizationWidth, startMediaFrom, med
         const canvas = document.createElement('canvas');
         canvas.width = Math.ceil(visualizationWidth * pixelRatio);
         canvas.height = Math.ceil(timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT * pixelRatio);
-        canvas.style.width = visualizationWidth + 'px';
-        canvas.style.height = timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT + 'px';
+        canvas.style.width = canvas.width / pixelRatio + 'px';
+        canvas.style.height = canvas.height / pixelRatio + 'px';
         const ctx = canvas.getContext('2d');
         if (!ctx) {
             return;
@@ -194,7 +195,10 @@ const TimelineVideoInfoSegment = ({ src, visualizationWidth, startMediaFrom, med
         // desired-timestamp -> filled-timestamp
         const filledSlots = new Map();
         const { fromSeconds, toSeconds } = times;
-        const targetWidth = targetCanvas.width;
+        // Keep the time-to-pixel scale independent of the integer canvas backing size.
+        const targetWidth = tiledLoop
+            ? tiledLoop.loopWidth * pixelRatio
+            : visualizationWidth * pixelRatio;
         const repeatTarget = () => {
             if (!tiledLoop) {
                 return;

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;

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

@@ -243,6 +243,7 @@ const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
         case 'color':
         case 'enum':
         case 'font-family':
+        case 'font-weight':
         case 'hidden':
             return formatUnknownTimelineValueForDisplay(value);
         default:

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -3,6 +3,7 @@ export declare const canScrollTimelineIntoDirection: () => {
     canScrollLeft: boolean;
 };
 export declare const SCROLL_INCREMENT = 200;
+export declare const getTimelineContentWidth: () => number;
 export declare const EDGE_SCROLL_VERTICAL_INCREMENT = 60;
 export type TimelineEdgeScrollDirections = {
     x: 'left' | 'right' | null;

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromTimelineDrop = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.startTimelineEdgeAutoScroll = exports.EDGE_SCROLL_VERTICAL_INCREMENT = exports.SCROLL_INCREMENT = exports.canScrollTimelineIntoDirection = void 0;
+exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromTimelineDrop = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.startTimelineEdgeAutoScroll = exports.EDGE_SCROLL_VERTICAL_INCREMENT = exports.getTimelineContentWidth = exports.SCROLL_INCREMENT = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const imperative_state_1 = require("./imperative-state");
@@ -15,6 +15,12 @@ const canScrollTimelineIntoDirection = () => {
 };
 exports.canScrollTimelineIntoDirection = canScrollTimelineIntoDirection;
 exports.SCROLL_INCREMENT = 200;
+const getTimelineContentWidth = () => {
+    var _a, _b;
+    var _c, _d;
+    return ((_d = (_c = (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _c !== void 0 ? _c : (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _d !== void 0 ? _d : 0);
+};
+exports.getTimelineContentWidth = getTimelineContentWidth;
 exports.EDGE_SCROLL_VERTICAL_INCREMENT = 60;
 const EDGE_SCROLL_INTERVAL_MS = 100;
 // Once edge-scrolling has started, the pointer must move this many pixels
@@ -169,10 +175,10 @@ const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
 };
 exports.getFrameWhileScrollingLeft = getFrameWhileScrollingLeft;
 const isCursorInViewport = ({ frame, durationInFrames, }) => {
-    var _a, _b;
-    var _c, _d;
-    const width = (_c = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _c !== void 0 ? _c : 0;
-    const scrollLeft = (_d = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) !== null && _d !== void 0 ? _d : 0;
+    var _a;
+    var _b;
+    const width = (0, exports.getTimelineContentWidth)();
+    const scrollLeft = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
     const scrollPosOnRightEdge = (0, exports.getScrollPositionForCursorOnRightEdge)({
         nextFrame: frame,
         durationInFrames,
@@ -194,14 +200,14 @@ const isCursorInViewport = ({ frame, durationInFrames, }) => {
 };
 exports.isCursorInViewport = isCursorInViewport;
 const ensureFrameIsInViewport = ({ direction, durationInFrames, frame, }) => {
-    var _a, _b, _c;
-    var _d, _e;
+    var _a, _b;
+    var _c;
     // Sync the imperative frame first: scrolling below triggers the scroll
     // listener in TimelineSlider, which reads the frame imperatively.
     (0, imperative_state_1.setCurrentFrame)(frame);
     (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(frame);
-    const width = (_d = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _d !== void 0 ? _d : 0;
-    const scrollLeft = (_e = (_c = timeline_refs_1.scrollableRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) !== null && _e !== void 0 ? _e : 0;
+    const width = (0, exports.getTimelineContentWidth)();
+    const scrollLeft = (_c = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) !== null && _c !== void 0 ? _c : 0;
     if (direction === 'fit-left') {
         const currentFrameLeft = (0, exports.getFrameFromX)({
             clientX: scrollLeft,
@@ -281,22 +287,20 @@ const getScrollPositionForCursorOnLeftEdge = ({ nextFrame, durationInFrames, })
 };
 exports.getScrollPositionForCursorOnLeftEdge = getScrollPositionForCursorOnLeftEdge;
 const getScrollPositionForCursorOnRightEdge = ({ nextFrame, durationInFrames, }) => {
-    var _a, _b;
+    var _a;
     const frameIncrement = getFrameIncrement(durationInFrames);
     const framesRemaining = durationInFrames - 1 - nextFrame;
     const fromRight = framesRemaining * frameIncrement + timeline_layout_1.TIMELINE_PADDING;
-    const scrollPos = ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) -
+    const scrollPos = (0, exports.getTimelineContentWidth)() -
         fromRight -
-        ((_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) +
+        ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) +
         timeline_layout_1.TIMELINE_PADDING +
         4; // clearfix;
     return scrollPos;
 };
 exports.getScrollPositionForCursorOnRightEdge = getScrollPositionForCursorOnRightEdge;
 const getFrameIncrement = (durationInFrames) => {
-    var _a;
-    var _b;
-    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
+    const width = (0, exports.getTimelineContentWidth)();
     return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
 const getFrameIncrementFromWidth = (durationInFrames, width) => {
@@ -366,7 +370,7 @@ const prepareToPreserveTimelineCursor = ({ currentFrame, currentDurationInFrames
     if (!current) {
         return () => undefined;
     }
-    const oldTimelineWidth = current.scrollWidth;
+    const oldTimelineWidth = (0, exports.getTimelineContentWidth)();
     const oldScrollLeft = current.scrollLeft;
     const frameIncrement = (0, exports.getFrameIncrementFromWidth)(currentDurationInFrames, oldTimelineWidth);
     const frameForScroll = anchorFrame !== null && anchorFrame !== void 0 ? anchorFrame : currentFrame;
@@ -381,7 +385,7 @@ const prepareToPreserveTimelineCursor = ({ currentFrame, currentDurationInFrames
             anchorContentX: prevCursorPosition,
             oldScrollLeft,
             oldTimelineWidth,
-            newTimelineWidth: current.scrollWidth,
+            newTimelineWidth: (0, exports.getTimelineContentWidth)(),
         });
     };
 };

package/dist/components/Timeline/use-delete-timeline-items.d.ts

@@ -0,0 +1 @@
+export declare const useDeleteTimelineItems: () => (selectedItemsOverride: readonly import("@remotion/canvas").CanvasSelectionItem[] | null) => void;