@remotion/studio 4.0.520 → 4.0.521

package/dist/components/Timeline/TimelineSequence.js

@@ -115,7 +115,7 @@ const TimelineSequenceNegativeStartInner = ({ left, width, leftEdgeVisible, clip
     return (jsx_runtime_1.jsx("div", { style: outerStyle, children: jsx_runtime_1.jsx("div", { style: innerStyle }) }));
 };
 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, }) => {
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, negativeStart, leftEdgeVisible, negativeStartClipped, style, children, edgeDragHandles, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onPointerDownCapture, onDoubleClick, }) => {
     var _a, _b, _c;
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
@@ -197,31 +197,36 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
                     display: 'flex',
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame, frozenFrame: frozenFrame }) })) : null] }));
-    return (jsx_runtime_1.jsx("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDownCapture: onPointerDownCapture, onPointerDown: selectable ? onPointerDown : undefined, onDoubleClick: onDoubleClick, children: negativeStart ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(TimelineSequenceNegativeStart, { left: negativeStart.left, width: negativeStart.width, leftEdgeVisible: leftEdgeVisible, clipped: negativeStartClipped }), jsx_runtime_1.jsx("div", { style: {
-                        background: style.background,
-                        border: style.border,
-                        borderBottomLeftRadius: 0,
-                        borderBottomRightRadius: style.borderBottomRightRadius,
-                        borderLeft: 'none',
-                        borderRightColor: style.borderRightColor,
-                        borderTopLeftRadius: 0,
-                        borderTopRightRadius: style.borderTopRightRadius,
-                        boxSizing: 'border-box',
-                        height: '100%',
-                        left: negativeStartEnd,
-                        overflow: 'hidden',
-                        position: 'absolute',
-                        top: 0,
-                        width: `calc(100% - ${negativeStartEnd}px)`,
-                    }, children: jsx_runtime_1.jsx("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDownCapture: onPointerDownCapture, onPointerDown: selectable ? onPointerDown : undefined, onDoubleClick: onDoubleClick, children: [negativeStart ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(TimelineSequenceNegativeStart, { left: negativeStart.left, width: negativeStart.width, leftEdgeVisible: leftEdgeVisible, clipped: negativeStartClipped }), jsx_runtime_1.jsx("div", { style: {
+                            background: style.background,
+                            border: style.border,
+                            borderBottomLeftRadius: 0,
+                            borderBottomRightRadius: style.borderBottomRightRadius,
+                            borderLeft: 'none',
+                            borderRightColor: style.borderRightColor,
+                            borderTopLeftRadius: 0,
+                            borderTopRightRadius: style.borderTopRightRadius,
+                            boxSizing: 'border-box',
                             height: '100%',
-                            left: -negativeStartEnd,
+                            left: negativeStartEnd,
+                            overflow: 'hidden',
                             position: 'absolute',
                             top: 0,
-                            width: style.width,
-                        }, children: content }) })
-            ] })) : (content) }));
+                            width: `calc(100% - ${negativeStartEnd}px)`,
+                        }, children: jsx_runtime_1.jsx("div", { style: {
+                                height: '100%',
+                                left: -negativeStartEnd,
+                                position: 'absolute',
+                                top: 0,
+                                width: style.width,
+                            }, children: content }) })
+                ] })) : (jsx_runtime_1.jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    overflow: 'hidden',
+                    borderRadius: 'inherit',
+                }, children: content })), edgeDragHandles] }));
 };
 const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePathInfo, sequenceFrameOffset, cascadedStart, localStart, }) => {
     // If a duration is 1, it is essentially a still and it should have width 0
@@ -569,7 +574,8 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             marginLeft: (_a = visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.marginLeft) !== null && _a !== void 0 ? _a : 0,
             width: (_b = visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.width) !== null && _b !== void 0 ? _b : 0,
             color: colors_1.WHITE,
-            overflow: 'hidden',
+            // Edge handles extend outside the layer; media is clipped separately.
+            overflow: 'visible',
         };
     }, [negativeStartClipped, s.type, showLeftBorderRadius, visibleLayout]);
     const showRightEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceDurationDraggable)(s) &&
@@ -592,14 +598,14 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const mediaDisplayDurationInFrames = visibleLayout.media
         ? visibleLayout.media.width / frameIncrement
         : 0;
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premount: visibleLayout.premount, postmount: visibleLayout.postmount, negativeStart: visibleLayout.negativeStart, leftEdgeVisible: visibleLayout.leftEdgeVisible, negativeStartClipped: negativeStartClipped, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, playbackRate: s.playbackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width })), showLeftEdgeDragHandle &&
-                visibleLayout.leftEdgeVisible &&
-                negativeStartWidth === 0 &&
-                nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null, showRightEdgeDragHandle &&
-                visibleLayout.rightEdgeVisible &&
-                nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_k = video.durationInFrames) !== null && _k !== void 0 ? _k : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null] }));
+    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premount: visibleLayout.premount, postmount: visibleLayout.postmount, negativeStart: visibleLayout.negativeStart, leftEdgeVisible: visibleLayout.leftEdgeVisible, negativeStartClipped: negativeStartClipped, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, edgeDragHandles: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showLeftEdgeDragHandle &&
+                    visibleLayout.leftEdgeVisible &&
+                    negativeStartWidth === 0 &&
+                    nodePathInfo &&
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null, showRightEdgeDragHandle &&
+                    visibleLayout.rightEdgeVisible &&
+                    nodePathInfo &&
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_k = video.durationInFrames) !== null && _k !== void 0 ? _k : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null] }), onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, playbackRate: s.playbackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width }))] }));
     return previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -70,6 +70,7 @@ 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");
@@ -923,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

@@ -49,13 +49,15 @@ 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',
@@ -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/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/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/UpdateStatusContext.d.ts

@@ -6,7 +6,12 @@ export type Bug = {
     link: string;
     versions: string[];
 };
+type UpgradeState = 'idle' | 'upgrading' | 'upgraded' | 'shutting-down' | 'shutdown';
 type UpdateStatusContextValue = {
+    readonly upgradeState: UpgradeState;
+    readonly upgradeError: string | null;
+    readonly upgrade: (version: string) => Promise<void>;
+    readonly shutdown: () => Promise<void>;
     readonly error: string | null;
     readonly info: UpdateAvailableResponse | null;
     readonly knownBugs: Bug[] | null;

package/dist/components/UpdateStatusContext.js

@@ -4,13 +4,56 @@ exports.useUpdateStatus = exports.UpdateStatusProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const shut_down_studio_1 = require("../api/shut-down-studio");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const can_show_updates_1 = require("../helpers/can-show-updates");
 const client_id_1 = require("../helpers/client-id");
+const call_api_1 = require("./call-api");
 const actions_1 = require("./RenderQueue/actions");
 const UpdateStatusContext = (0, react_1.createContext)(null);
 const UpdateStatusProvider = ({ children }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [upgradeState, setUpgradeState] = (0, react_1.useState)('idle');
+    const [upgradeError, setUpgradeError] = (0, react_1.useState)(null);
+    const busy = (0, react_1.useRef)(false);
+    const upgrade = (0, react_1.useCallback)(async (version) => {
+        if (busy.current) {
+            return;
+        }
+        busy.current = true;
+        setUpgradeState('upgrading');
+        setUpgradeError(null);
+        try {
+            await (0, call_api_1.callApi)('/api/upgrade-remotion', { version });
+            setUpgradeState('upgraded');
+        }
+        catch (err) {
+            setUpgradeError(err.message);
+            setUpgradeState('idle');
+        }
+        finally {
+            busy.current = false;
+        }
+    }, []);
+    const shutdown = (0, react_1.useCallback)(async () => {
+        if (busy.current) {
+            return;
+        }
+        busy.current = true;
+        setUpgradeState('shutting-down');
+        setUpgradeError(null);
+        try {
+            await (0, shut_down_studio_1.shutDownStudio)();
+            setUpgradeState('shutdown');
+        }
+        catch (err) {
+            setUpgradeError(err.message);
+            setUpgradeState('upgraded');
+        }
+        finally {
+            busy.current = false;
+        }
+    }, []);
     const [info, setInfo] = (0, react_1.useState)(null);
     const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -59,8 +102,16 @@ const UpdateStatusProvider = ({ children }) => {
         };
     }, [showUpdates]);
     const value = (0, react_1.useMemo)(() => {
-        return { error, info, knownBugs };
-    }, [error, info, knownBugs]);
+        return {
+            error,
+            info,
+            knownBugs,
+            upgradeState,
+            upgradeError,
+            upgrade,
+            shutdown,
+        };
+    }, [error, info, knownBugs, upgradeState, upgradeError, upgrade, shutdown]);
     return (jsx_runtime_1.jsx(UpdateStatusContext.Provider, { value: value, children: children }));
 };
 exports.UpdateStatusProvider = UpdateStatusProvider;

package/dist/components/UpdatesSettings.js

@@ -8,6 +8,7 @@ const copy_text_1 = require("../helpers/copy-text");
 const clipboard_1 = require("../icons/clipboard");
 const InlineAction_1 = require("./InlineAction");
 const KnownBugs_1 = require("./KnownBugs");
+const ModalButton_1 = require("./ModalButton");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
@@ -86,6 +87,7 @@ const commands = {
     yarn: 'yarn remotion upgrade',
     pnpm: 'pnpm exec remotion upgrade',
     bun: 'bun remotion upgrade',
+    nub: 'nubx remotion upgrade',
     unknown: 'npx remotion upgrade',
 };
 const skillsUpdateCommand = 'npx remotion skills update';
@@ -170,7 +172,7 @@ const RenderedReleaseNotes = ({ release }) => {
 };
 const UpdatesSettings = () => {
     const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
-    const { error, info, knownBugs } = (0, UpdateStatusContext_1.useUpdateStatus)();
+    const { error, info, knownBugs, upgradeState, upgradeError, upgrade, shutdown, } = (0, UpdateStatusContext_1.useUpdateStatus)();
     const [releaseNotes, setReleaseNotes] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (!(info === null || info === void 0 ? void 0 : info.updateAvailable)) {
@@ -222,6 +224,23 @@ const UpdatesSettings = () => {
     const renderCopyAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
     }, []);
+    const onUpgrade = (0, react_1.useCallback)(() => {
+        if (info) {
+            upgrade(info.latestVersion);
+        }
+    }, [info, upgrade]);
+    if (upgradeState !== 'idle') {
+        return (jsx_runtime_1.jsxs("div", { style: container, children: [
+                jsx_runtime_1.jsx("div", { style: title, children: upgradeState === 'upgrading'
+                        ? 'Upgrading Remotion...'
+                        : 'Remotion has been upgraded.' }), jsx_runtime_1.jsx("div", { style: text, children: upgradeState === 'upgrading'
+                        ? 'This may take a few minutes. You can follow the progress in your terminal.'
+                        : upgradeState === 'shutdown'
+                            ? 'Studio is shutting down. Run your Studio start command again in the terminal to use the new version.'
+                            : 'Restart Studio to use the new version. Shut down the server below, then run your Studio start command again in the terminal.' }), upgradeState === 'upgraded' || upgradeState === 'shutting-down' ? (jsx_runtime_1.jsx("div", { style: { marginTop: 12 }, children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: shutdown, disabled: upgradeState === 'shutting-down', children: upgradeState === 'shutting-down'
+                            ? 'Shutting down...'
+                            : 'Shut down Studio' }) })) : null, upgradeError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: upgradeError, type: "error", align: "flex-start" })) : null] }));
+    }
     if (info === null) {
         return (jsx_runtime_1.jsx("div", { style: container, children: error ? (jsx_runtime_1.jsx("div", { style: { paddingTop: 12 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: 'Could not check for updates: ' + error, align: "flex-start", type: "error" }) })) : (jsx_runtime_1.jsx("div", { style: title, children: "Checking for updates..." })) }));
     }
@@ -235,9 +254,11 @@ const UpdatesSettings = () => {
                 jsx_runtime_1.jsxs("div", { style: title, children: ["You", "'re", " up to date."] }), jsx_runtime_1.jsxs("div", { style: text, children: ["Remotion ", info.currentVersion, " and your Remotion Agent Skills are up to date."] })
             ] }));
     }
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs !== null && knownBugs !== void 0 ? knownBugs : [] }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["To update, run the following ", updateActionType, ":"] })
-                ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["A new Remotion update is available. Run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [info.updateAvailable && info.packageManager !== 'unknown' ? (jsx_runtime_1.jsxs("div", { style: { paddingTop: 12 }, children: [
+                    jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onUpgrade, children: ["Upgrade to ", info.latestVersion] }), jsx_runtime_1.jsx("div", { style: { ...text, marginTop: 8 }, children: "You will need to restart Studio after upgrading." })
+                ] })) : null, upgradeError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: upgradeError, type: "error", align: "flex-start" })) : null, hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs !== null && knownBugs !== void 0 ? knownBugs : [] }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["Or run the following ", updateActionType, ":"] })
+                ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["A new Remotion update is available. You can also run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                     jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, title: "Copy command" })
                 ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["This will update Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, info.skillsUpdateAvailable
                         ? ' and update your project Remotion Agent Skills.'

package/dist/components/WebMcp.js

@@ -5,7 +5,9 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const pause_1 = require("../api/pause");
 const play_1 = require("../api/play");
+const restart_studio_1 = require("../api/restart-studio");
 const seek_1 = require("../api/seek");
+const shut_down_studio_1 = require("../api/shut-down-studio");
 const current_error_1 = require("../error-overlay/current-error");
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
@@ -203,6 +205,30 @@ const WebMcp = () => {
             }).filter((timelineTrack) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(timelineTrack, durationInFrames));
         };
         Promise.all([
+            modelContext.registerTool({
+                name: 'restart_studio',
+                title: 'Restart Studio',
+                description: 'Restart the Studio server. The browser temporarily disconnects and reconnects when Studio is ready. Only available in a writable Studio with a server backend.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: () => (0, restart_studio_1.restartStudio)(),
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'shut_down_studio',
+                title: 'Shut down Studio',
+                description: 'Gracefully shut down the Studio server. The browser disconnects. Start Studio again from the terminal to reconnect. Only available in a writable Studio with a server backend.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: () => (0, shut_down_studio_1.shutDownStudio)(),
+            }, { signal: controller.signal }),
             modelContext.registerTool({
                 name: 'get_current_error',
                 title: 'Get current Studio error',

package/dist/components/composition-selector-drag-data.d.ts

@@ -0,0 +1,27 @@
+import type { CompositionOrFolder, SymbolicatedStackFrame } from '@remotion/studio-shared';
+export type CompositionSelectorDragData = {
+    readonly type: 'remotion-composition-selector';
+    readonly version: 1;
+    readonly item: CompositionOrFolder;
+    readonly sourceFile: string | null;
+};
+export type CompositionSelectorActiveDrag = {
+    readonly item: CompositionOrFolder;
+    readonly parentFolderPath: string | null;
+};
+type DragDataTransfer = {
+    readonly types: ArrayLike<string>;
+    readonly getData: (mimeType: string) => string;
+};
+export declare const makeCompositionSelectorDragData: ({ item, sourceFile, }: {
+    readonly item: CompositionOrFolder;
+    readonly sourceFile: string | null;
+}) => {
+    mimeType: string;
+    payload: string;
+    data: CompositionSelectorDragData;
+};
+export declare const hasCompositionSelectorDragData: (mimeTypes: ArrayLike<string>) => boolean;
+export declare const parseCompositionSelectorDragData: (dataTransfer: DragDataTransfer) => CompositionSelectorDragData | null;
+export declare const compositionSelectorDragDataToSymbolicatedStack: (dragData: CompositionSelectorDragData) => SymbolicatedStackFrame | null;
+export {};