@remotion/studio 4.0.521 → 4.0.522

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/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/UpdatesSettings.js

@@ -5,7 +5,8 @@ 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");
@@ -213,17 +214,20 @@ 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);

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);