@remotion/studio 4.0.520 → 4.0.522

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

@@ -15,7 +15,6 @@ const TimelineWidthProvider = ({ children }) => {
         shouldApplyCssTransforms: true,
     });
     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;
@@ -28,12 +27,10 @@ const TimelineWidthProvider = ({ children }) => {
         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,
+            zoom: videoConfig ? ((_f = zoomMap[videoConfig.id]) !== 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]);
+    }, [size === null || size === void 0 ? void 0 : size.width, videoConfig, zoomMap]);
     return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: width, children: children }));
 };
 exports.TimelineWidthProvider = TimelineWidthProvider;

package/dist/components/Timeline/TimelineZoomControls.js

@@ -59,32 +59,29 @@ const buttonStyle = {
 };
 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 isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
     const onChange = (0, react_1.useCallback)((e) => {
-        if (canvasContent === null || canvasContent.type !== 'composition') {
+        if (videoConfig === null) {
             return;
         }
-        setZoom(canvasContent.compositionId, () => (0, get_timeline_max_zoom_1.sliderValueToTimelineZoom)({
+        setZoom(videoConfig.id, () => (0, get_timeline_max_zoom_1.sliderValueToTimelineZoom)({
             sliderValue: Number(e.target.value),
             minZoom,
         }), {
             anchorFrame: null,
             anchorContentX: null,
         });
-    }, [canvasContent, minZoom, setZoom]);
-    if (isStill ||
-        canvasContent === null ||
-        canvasContent.type !== 'composition') {
+    }, [minZoom, setZoom, videoConfig]);
+    if (!isVideoComposition || videoConfig === null) {
         return null;
     }
     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,
+        zoom: (_b = zoomMap[videoConfig.id]) !== 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 }));
@@ -92,7 +89,6 @@ const TimelineZoomSlider = ({ maxWidth, minZoom, timelineViewportWidth }) => {
 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 timelineSize = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
@@ -105,21 +101,25 @@ const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
         timelineViewportWidth,
     });
     const onMinusClicked = (0, react_1.useCallback)(() => {
-        if (canvasContent === null || canvasContent.type !== 'composition') {
+        if (videoConfig === null) {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => z / TIMELINE_ZOOM_BUTTON_FACTOR, { anchorFrame: null, anchorContentX: null });
-    }, [canvasContent, setZoom]);
+        setZoom(videoConfig.id, (z) => z / TIMELINE_ZOOM_BUTTON_FACTOR, {
+            anchorFrame: null,
+            anchorContentX: null,
+        });
+    }, [setZoom, videoConfig]);
     const onPlusClicked = (0, react_1.useCallback)(() => {
-        if (canvasContent === null || canvasContent.type !== 'composition') {
+        if (videoConfig === null) {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => z * TIMELINE_ZOOM_BUTTON_FACTOR, { anchorFrame: null, anchorContentX: null });
-    }, [canvasContent, setZoom]);
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
-    if (isStill ||
-        canvasContent === null ||
-        canvasContent.type !== 'composition') {
+        setZoom(videoConfig.id, (z) => z * TIMELINE_ZOOM_BUTTON_FACTOR, {
+            anchorFrame: null,
+            anchorContentX: null,
+        });
+    }, [setZoom, videoConfig]);
+    const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
+    if (!isVideoComposition || videoConfig === null) {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [

package/dist/components/Timeline/get-sequence-split-menu-item.d.ts

@@ -0,0 +1,11 @@
+import type { CanUpdateSequencePropStatus, TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+export declare const getSequenceSplitMenuItem: ({ nodePathInfo, sequence, propStatuses, splitFrame, canEditSource, hasMultipleSelection, }: {
+    readonly nodePathInfo: SequenceNodePathInfo | null;
+    readonly sequence: TSequence;
+    readonly propStatuses: Record<string, CanUpdateSequencePropStatus> | undefined;
+    readonly splitFrame: number;
+    readonly canEditSource: boolean;
+    readonly hasMultipleSelection: boolean;
+}) => ComboboxValue | null;

package/dist/components/Timeline/get-sequence-split-menu-item.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSequenceSplitMenuItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
+const getSequenceSplitMenuItem = ({ nodePathInfo, sequence, propStatuses, splitFrame, canEditSource, hasMultipleSelection, }) => {
+    if (hasMultipleSelection) {
+        return null;
+    }
+    const eligibility = nodePathInfo
+        ? (0, split_selected_timeline_item_1.getTimelineSequenceSplitEligibility)({
+            selection: { type: 'sequence', nodePathInfo },
+            sequence,
+            propStatuses,
+            splitFrame,
+        })
+        : {
+            canSplit: false,
+            reason: 'Sequence has no editable source node',
+        };
+    const disabledReason = !canEditSource
+        ? 'Sequence source is unavailable'
+        : propStatuses === undefined
+            ? 'Waiting for sequence prop status'
+            : eligibility.canSplit
+                ? null
+                : eligibility.reason;
+    return {
+        type: 'item',
+        id: 'split-sequence',
+        label: (jsx_runtime_1.jsx("span", { style: {
+                fontFamily: 'inherit',
+                fontSize: 'inherit',
+                lineHeight: 'inherit',
+                color: 'inherit',
+            }, title: disabledReason !== null && disabledReason !== void 0 ? disabledReason : 'Split at the playhead', children: "Split clip" })),
+        value: 'split-sequence',
+        keyHint: null,
+        leftItem: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        disabled: disabledReason !== null,
+        onClick: () => {
+            if (disabledReason !== null || !eligibility.canSplit) {
+                return;
+            }
+            // Keep the frame used to enable the menu item, even during playback.
+            (0, split_selected_timeline_item_1.splitTimelineSequenceFromSource)({
+                nodePathInfo: eligibility.nodePathInfo,
+                splitFrame,
+            }).catch(() => undefined);
+        },
+    };
+};
+exports.getSequenceSplitMenuItem = getSequenceSplitMenuItem;

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/use-sequence-props-subscription.d.ts

@@ -1,6 +1,6 @@
-import type { InteractivitySchema } from 'remotion';
+import type { InteractivitySchema, VideoConfigValues } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, componentIdentity, schema, effects, preferMappedNodePath, stack, }: {
+export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, componentIdentity, schema, effects, preferMappedNodePath, stack, videoConfigValues, }: {
     overrideId: string;
     componentIdentity: string | null;
     schema: InteractivitySchema;
@@ -8,4 +8,5 @@ export declare const useSequencePropsSubscription: ({ originalLocation, override
     originalLocation: OriginalPosition | null;
     preferMappedNodePath: boolean;
     stack: string | null;
+    videoConfigValues: VideoConfigValues | null;
 }) => void;

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -8,7 +8,7 @@ const client_id_1 = require("../../helpers/client-id");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
 const should_subscribe_to_source_file_1 = require("./should-subscribe-to-source-file");
-const useSequencePropsSubscription = ({ originalLocation, overrideId, componentIdentity, schema, effects, preferMappedNodePath, stack, }) => {
+const useSequencePropsSubscription = ({ originalLocation, overrideId, componentIdentity, schema, effects, preferMappedNodePath, stack, videoConfigValues, }) => {
     var _a, _b, _c;
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
@@ -20,7 +20,6 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
     const overrideIdToNodePathMappingsRef = (0, react_1.useRef)(overrideIdToNodePathMappings);
     overrideIdToNodePathMappingsRef.current = overrideIdToNodePathMappings;
     const clientId = state.type === 'connected' ? state.clientId : undefined;
-    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const effectsSignature = (0, react_1.useMemo)(() => effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect).join('\0')).join('\0\0'), [effects]);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -51,7 +50,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
             !locationLine ||
             locationColumn === null ||
             !schema ||
-            videoConfig === null) {
+            videoConfigValues === null) {
             return;
         }
         const nodePathAtResubscribe = (_a = overrideIdToNodePathMappingsRef.current[overrideId]) !== null && _a !== void 0 ? _a : null;
@@ -67,12 +66,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
                 : null,
             clientId,
             stack,
-            videoConfigValues: {
-                durationInFrames: videoConfig.durationInFrames,
-                fps: videoConfig.fps,
-                height: videoConfig.height,
-                width: videoConfig.width,
-            },
+            videoConfigValues,
             applyOnce: (result) => {
                 if (!result.success) {
                     return;
@@ -119,7 +113,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
         setPropStatuses,
         setOverrideIdToNodePath,
         stack,
-        videoConfig,
+        videoConfigValues,
     ]);
 };
 exports.useSequencePropsSubscription = useSequencePropsSubscription;

package/dist/components/TopPanel.js

@@ -35,7 +35,6 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = exports.useResponsiveSidebarStatus = 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 mobile_layout_1 = require("../helpers/mobile-layout");
@@ -87,7 +86,7 @@ const useResponsiveSidebarStatus = () => {
 };
 exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
 const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInMilliseconds }) => {
-    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const { setSidebarCollapsedState, sidebarCollapsedStateRight, setSidebarCollapsedDuringDrag, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
@@ -97,21 +96,6 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
         }
         return 'expanded';
     }, [sidebarCollapsedStateRight]);
-    const previousSidebarState = (0, react_1.useRef)({
-        left: actualStateLeft,
-        right: actualStateRight,
-    });
-    (0, react_1.useLayoutEffect)(() => {
-        if (previousSidebarState.current.left === actualStateLeft &&
-            previousSidebarState.current.right === actualStateRight) {
-            return;
-        }
-        previousSidebarState.current = {
-            left: actualStateLeft,
-            right: actualStateRight,
-        };
-        player_1.PlayerInternals.updateAllElementsSizes();
-    }, [actualStateLeft, actualStateRight]);
     (0, react_1.useEffect)(() => {
         onMounted();
     }, [onMounted]);
@@ -130,8 +114,8 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
     return (jsx_runtime_1.jsx(ObserveDefaultPropsContext_1.ObserveDefaultProps, { compositionId: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
             ? canvasContent.compositionId
             : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, minAntiFlexerSize: MIN_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
-                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })
+                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft, onCollapseDuringDrag: setSidebarCollapsedDuringDrag })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, minAntiFlexerSize: MIN_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight, onCollapseDuringDrag: setSidebarCollapsedDuringDrag })) : null, actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })
                         ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));
 };

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

@@ -5,9 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
-const clipboard_1 = require("../icons/clipboard");
+const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
+const copy_1 = require("../icons/copy");
 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 +88,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 +173,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)) {
@@ -211,17 +214,37 @@ const UpdatesSettings = () => {
     const updateActionType = (remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.remotionUpgradeSkillAvailable)
         ? 'skill'
         : 'command';
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const onClick = (0, react_1.useCallback)(() => {
         if (updateAction === null) {
             return;
         }
-        (0, copy_text_1.copyText)(updateAction).catch((err) => {
+        (0, copy_text_1.copyText)(updateAction)
+            .then(markCopied)
+            .catch((err) => {
             (0, NotificationCenter_1.showNotification)('Could not copy: ' + err.message, 2000);
         });
-    }, [updateAction]);
+    }, [markCopied, updateAction]);
     const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
-    }, []);
+        return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, color: color, style: copyIcon });
+    }, [copied]);
+    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 +258,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/ZoomPersistor.js

@@ -22,10 +22,13 @@ const ZoomPersistor = () => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const urlState = (0, load_canvas_content_from_url_1.deriveCanvasContentFromUrl)();
     const isActive = urlState &&
-        urlState.type === 'composition' &&
         canvasContent &&
-        canvasContent.type === 'composition' &&
-        urlState.compositionId === canvasContent.compositionId;
+        ((urlState.type === 'composition' &&
+            canvasContent.type === 'composition' &&
+            urlState.compositionId === canvasContent.compositionId) ||
+            (urlState.type === 'asset' &&
+                canvasContent.type === 'asset' &&
+                urlState.asset === canvasContent.asset));
     (0, react_1.useEffect)(() => {
         if (!isActive) {
             return;

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

@@ -218,7 +218,7 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 navigator.clipboard
                     .writeText(composition.id)
                     .then(() => {
-                    (0, NotificationCenter_1.showNotification)('Copied to clipboard', 1000);
+                    (0, NotificationCenter_1.showNotification)('Copied composition name', 1000);
                 })
                     .catch((err) => {
                     (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);