@remotion/studio 4.0.521 → 4.0.523

package/dist/components/Timeline/TimelineSlider.js

@@ -55,13 +55,10 @@ const TimelineSliderInner = () => {
     const ref = (0, react_1.useRef)(null);
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     if (timelineWidth === null) {
         throw new Error('Unexpectedly did not have timeline width');
     }
-    const zoomLevel = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
-        ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : null)
-        : null;
+    const zoomLevel = (_a = zoomMap[videoConfig.id]) !== null && _a !== void 0 ? _a : null;
     (0, react_1.useLayoutEffect)(() => {
         var _a;
         const el = ref.current;

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -295,6 +295,7 @@ const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, duratio
         return {
             ...container,
             width: windowWidth,
+            minWidth: '100%',
             overflow: 'hidden',
             pointerEvents: 'none',
         };

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/use-asset-timeline-context-menu.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+export declare const useAssetTimelineContextMenu: () => ComboboxValue[] | null;

package/dist/components/Timeline/use-asset-timeline-context-menu.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAssetTimelineContextMenu = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const client_id_1 = require("../../helpers/client-id");
+const get_file_manager_name_1 = require("../../helpers/get-file-manager-name");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("../RenderQueue/actions");
+const get_copy_context_for_agents_menu_item_1 = require("./get-copy-context-for-agents-menu-item");
+const useAssetTimelineContextMenu = () => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    return (0, react_1.useMemo)(() => {
+        if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'asset') {
+            return null;
+        }
+        const copyContextItem = (0, get_copy_context_for_agents_menu_item_1.getCopyContextForAgentsMenuItem)({
+            contextForAgents: window.remotion_publicFolderExists
+                ? `Asset: ${window.remotion_publicFolderExists}/${canvasContent.asset}`
+                : `Asset: staticFile(${JSON.stringify(canvasContent.asset)})`,
+        });
+        if ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+            return [copyContextItem];
+        }
+        return [
+            {
+                type: 'item',
+                id: 'open-asset-in-explorer',
+                label: `Show in ${(0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform)}`,
+                keyHint: null,
+                leftItem: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'open-asset-in-explorer',
+                disabled: Boolean(window.remotion_isReadOnlyStudio) ||
+                    !window.remotion_publicFolderExists ||
+                    previewServerState.type !== 'connected',
+                onClick: () => {
+                    (0, actions_1.openInFileExplorer)({
+                        directory: window.remotion_publicFolderExists + '/' + canvasContent.asset,
+                    }).catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+                    });
+                },
+            },
+            copyContextItem,
+        ];
+    }, [canvasContent, previewServerState.type]);
+};
+exports.useAssetTimelineContextMenu = useAssetTimelineContextMenu;

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

@@ -6,18 +6,23 @@ const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
 const in_out_1 = require("../state/in-out");
 const ControlButton_1 = require("./ControlButton");
-const getTooltipText = (pointType, key) => [
-    `Mark ${pointType}`,
-    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : `(${key})`,
-    '- right click to clear',
-]
-    .filter(no_react_1.NoReactInternals.truthy)
-    .join(' ');
+const keyboard_shortcuts_1 = require("./keyboard-shortcuts");
+const getTooltipText = (pointType, action) => {
+    const shortcut = (0, keyboard_shortcuts_1.getKeyboardShortcutLabel)(action);
+    return [
+        `Mark ${pointType}`,
+        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || shortcut === '' ? null : `(${shortcut})`,
+        '- right click to clear',
+    ]
+        .filter(no_react_1.NoReactInternals.truthy)
+        .join(' ');
+};
 const style = {
     width: 17,
     height: 17,
@@ -29,6 +34,7 @@ exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
     var _a;
+    (0, client_id_1.useStudioConfigRevision)();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -195,34 +201,31 @@ const TimelineInOutPointToggle = () => {
             return;
         }
         const iKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 'i',
+            event: 'keydown',
+            action: 'setInPoint',
             callback: (e) => {
                 onInMark(e);
             },
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const oKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 'o',
+            event: 'keydown',
+            action: 'setOutPoint',
             callback: (e) => {
                 onOutMark(e);
             },
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const xKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 'x',
+            event: 'keydown',
+            action: 'clearInOutPoints',
             callback: () => {
                 onInOutClear(confId);
             },
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -246,7 +249,7 @@ const TimelineInOutPointToggle = () => {
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'setInPoint'), "aria-label": getTooltipText('In', 'setInPoint'), style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'setOutPoint'), "aria-label": getTooltipText('Out', 'setOutPoint'), style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

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

@@ -0,0 +1 @@
+export { Models as default } from './Models';

package/dist/components/Transcription/LazyModels.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const Models_1 = require("./Models");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Models_1.Models; } });

package/dist/components/Transcription/Models.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Models: React.FC<{
+    readonly description: string | null;
+    readonly indent: boolean;
+    readonly visible: boolean;
+}>;

package/dist/components/Transcription/Models.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Models = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const whisper_webgpu_1 = require("@remotion/whisper-webgpu");
+const react_1 = require("react");
+const ModelManager_1 = require("../ModelManager");
+const AVAILABLE_MODELS = (0, whisper_webgpu_1.getAvailableModels)();
+const Models = ({ description, indent, visible }) => {
+    const isModelCached = (0, react_1.useCallback)((model) => (0, whisper_webgpu_1.isWhisperModelCached)({ model }), []);
+    const loadModel = (0, react_1.useCallback)((model, onProgress) => (0, whisper_webgpu_1.loadWhisperModel)({
+        model,
+        onProgress: (progress) => onProgress(progress.progress),
+    }), []);
+    const removeModel = (0, react_1.useCallback)((model) => (0, whisper_webgpu_1.removeWhisperModel)({ model }), []);
+    return (jsx_runtime_1.jsx(ModelManager_1.ModelManager, { ariaLabel: "Whisper models", availableModels: AVAILABLE_MODELS, description: description, indent: indent, isModelCached: isModelCached, loadModel: loadModel, prepare: whisper_webgpu_1.clearStaleModels, removeModel: removeModel, visible: visible }));
+};
+exports.Models = Models;

package/dist/components/Transcription/TranscriptionModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TranscriptionModalState } from '../../state/modals';
+export declare const TranscriptionModal: React.FC<TranscriptionModalState>;