@remotion/studio 4.0.501 → 4.0.502

package/dist/components/AssetSelectorItem.js

@@ -35,7 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetFolderTree = exports.getAssetContextMenuItems = exports.getCanDragAsset = exports.getAssetActionAvailability = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
@@ -338,7 +338,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             mediaMetadata.duration > 0
             ? mediaMetadata.duration
             : null;
-        const dragData = drag_and_drop_1.DragAndDropInternals.makeDragData({
+        const dragData = studio_protocol_1.StudioProtocolInternals.makeDragData({
             type: 'asset',
             assetPath: relativePath,
             width: hasDimensions ? width : null,

package/dist/components/Canvas.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../api/get-static-files");
@@ -728,7 +728,7 @@ const Canvas = ({ canvasContent, size }) => {
             setCompositionDropPreview(null);
             return;
         }
-        const metadata = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
+        const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
         if ((metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'composition' ||
             metadata.width === undefined ||
             metadata.height === undefined) {
@@ -835,7 +835,7 @@ const Canvas = ({ canvasContent, size }) => {
         event.stopPropagation();
         setIsAddingAsset(true);
         try {
-            const metadata = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
+            const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
             const isComposition = (metadata === null || metadata === void 0 ? void 0 : metadata.type) === 'composition';
             let dropPosition = getDropPosition({
                 addFitPadding,

package/dist/components/CompositionSelector.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelector = exports.useCompositionNavigation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -161,7 +161,7 @@ const CompositionSelector = () => {
     const onCompositionListDragOverCapture = (0, react_1.useCallback)((event) => {
         var _a;
         if (window.remotion_isReadOnlyStudio ||
-            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             stopCompositionListAutoScroll();
             return;
         }
@@ -178,7 +178,7 @@ const CompositionSelector = () => {
     const onRootDragOver = (0, react_1.useCallback)((event) => {
         var _a;
         if (window.remotion_isReadOnlyStudio ||
-            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             return;
         }
         event.preventDefault();
@@ -198,7 +198,7 @@ const CompositionSelector = () => {
         if (window.remotion_isReadOnlyStudio) {
             return;
         }
-        const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer);
+        const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer);
         if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
             return;
         }

package/dist/components/CompositionSelectorItem.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
@@ -150,7 +150,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
         setIsDragging(true);
         event.dataTransfer.effectAllowed = 'copyMove';
-        const dragData = drag_and_drop_1.DragAndDropInternals.makeDragData({
+        const dragData = studio_protocol_1.StudioProtocolInternals.makeDragData({
             type: 'composition',
             compositionFile: (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : null,
             compositionId: item.composition.id,
@@ -167,7 +167,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         var _a;
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
-            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             return;
         }
         event.preventDefault();
@@ -183,7 +183,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         var _a;
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
-            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             return;
         }
         event.preventDefault();
@@ -195,7 +195,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         if (item.type !== 'folder' || window.remotion_isReadOnlyStudio) {
             return;
         }
-        const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer);
+        const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer);
         if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
             return;
         }

package/dist/components/EditorContent.js

@@ -35,7 +35,7 @@ const StudioClearSelectionArea = ({ children }) => {
 const EditorContent = ({ readOnlyStudio, children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const showTimeline = canvasContent !== null && canvasContent.type === 'composition';
-    const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, maxAntiFlexerSize: null, children: [
+    const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: null, children: [
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
     return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [

package/dist/components/FullscreenToggle.d.ts

@@ -1 +1,3 @@
-export declare const FullScreenToggle: React.FC<{}>;
+export declare const FullScreenToggle: React.FC<{
+    readonly hidden: boolean;
+}>;

package/dist/components/FullscreenToggle.js

@@ -16,7 +16,7 @@ const accessibilityLabel = [
 ]
     .filter(no_react_1.NoReactInternals.truthy)
     .join(' ');
-const FullScreenToggle = () => {
+const FullScreenToggle = ({ hidden }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const onClick = (0, react_1.useCallback)(() => {
@@ -45,6 +45,6 @@ const FullScreenToggle = () => {
             f.unregister();
         };
     }, [keybindings, onClick]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: colors_1.WHITE_HEX, style: { width: 18, height: 18 } }) }));
+    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: colors_1.WHITE_HEX, style: { width: 18, height: 18 } }) }));
 };
 exports.FullScreenToggle = FullScreenToggle;

package/dist/components/InlineAction.js

@@ -31,6 +31,6 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
             pointerEvents: disabled ? 'none' : 'auto',
         };
     }, [disabled, hovered]);
-    return (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InspectorPanel/use-composition-actions.d.ts

@@ -5,7 +5,7 @@ export declare const useCompositionActions: () => {
     canShowInsertAsset: boolean;
     canShowInsertComposition: boolean;
     canShowInsertSolid: boolean;
-    insertAsset: () => Promise<void>;
+    insertAsset: () => void;
     insertComposition: () => void;
     insertSolid: () => Promise<void>;
 };

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCompositionActions = void 0;
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
@@ -100,7 +100,7 @@ const useCompositionActions = () => {
         currentCompositionId,
         videoConfig,
     ]);
-    const insertAsset = (0, react_1.useCallback)(async () => {
+    const onFilesSelected = (0, react_1.useCallback)(async () => {
         if (!canInsertAsset ||
             currentCompositionId === null ||
             compositionFile === null ||
@@ -128,6 +128,49 @@ const useCompositionActions = () => {
             setIsAddingAsset(false);
         }
     }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
+    const onAssetSelected = (0, react_1.useCallback)(async (asset) => {
+        if (!canInsertAsset ||
+            currentCompositionId === null ||
+            compositionFile === null ||
+            videoConfig === null) {
+            return;
+        }
+        setIsAddingAsset(true);
+        try {
+            await (0, import_assets_1.insertExistingAssets)({
+                assetPaths: [asset.name],
+                fps: videoConfig.fps,
+                compositionFile,
+                compositionId: currentCompositionId,
+                destinationDimensions: null,
+                dropPosition: null,
+                from: null,
+            });
+        }
+        finally {
+            setIsAddingAsset(false);
+        }
+    }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
+    const insertAsset = (0, react_1.useCallback)(() => {
+        if (!canInsertAsset) {
+            return;
+        }
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode: 'assets',
+            invocationTimestamp: Date.now(),
+            assetSelection: {
+                initialQuery: '',
+                onSelectFile: () => {
+                    onFilesSelected().catch(() => undefined);
+                },
+                onSelected: (asset) => {
+                    onAssetSelected(asset).catch(() => undefined);
+                },
+            },
+            compositionSelection: null,
+        });
+    }, [canInsertAsset, onAssetSelected, onFilesSelected, setSelectedModal]);
     const onCompositionSelected = (0, react_1.useCallback)(async (composition) => {
         var _a, _b, _c, _d, _e;
         if (!canInsertComposition ||
@@ -141,7 +184,7 @@ const useCompositionActions = () => {
                 ? await (0, get_stack_1.getOriginalLocationFromStack)(composition.stack, 'sequence')
                 : null;
             const selectedCompositionFile = (_b = (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.getCompositionFile(composition.id)) !== null && _b !== void 0 ? _b : null;
-            const compositionDragData = drag_and_drop_1.DragAndDropInternals.makeDragData({
+            const compositionDragData = studio_protocol_1.StudioProtocolInternals.makeDragData({
                 type: 'composition',
                 compositionFile: selectedCompositionFile,
                 compositionId: composition.id,

package/dist/components/LoopToggle.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const toggleLoop: (setLoop: React.Dispatch<React.SetStateAction<boolean>>) => void;
 export declare const LoopToggle: React.FC<{
     readonly loop: boolean;
     readonly setLoop: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/components/LoopToggle.js

@@ -1,18 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoopToggle = void 0;
+exports.LoopToggle = exports.toggleLoop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const loop_1 = require("../state/loop");
 const ControlButton_1 = require("./ControlButton");
 const accessibilityLabel = 'Loop video';
+const toggleLoop = (setLoop) => {
+    setLoop((currentLoop) => {
+        (0, loop_1.persistLoopOption)(!currentLoop);
+        return !currentLoop;
+    });
+};
+exports.toggleLoop = toggleLoop;
 const LoopToggle = ({ loop, setLoop }) => {
     const onClick = (0, react_1.useCallback)(() => {
-        setLoop((c) => {
-            (0, loop_1.persistLoopOption)(!c);
-            return !c;
-        });
+        (0, exports.toggleLoop)(setLoop);
     }, [setLoop]);
     return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : colors_1.WHITE, d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
 };

package/dist/components/Menu/MenuSubItem.js

@@ -90,9 +90,17 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             return null;
         }
         const left = size.left + size.width + styles_1.SUBMENU_LEFT_INSET;
+        const minSpaceRequired = mobileLayout
+            ? styles_1.MAX_MOBILE_MENU_WIDTH
+            : styles_1.MAX_MENU_WIDTH;
+        const canOpenOnRight = size.windowSize.width - size.left - size.width >= minSpaceRequired;
         return {
             ...styles_1.menuContainerTowardsBottom,
-            left: mobileLayout ? left * 0.7 : left,
+            ...(canOpenOnRight
+                ? { left }
+                : {
+                    right: size.windowSize.width - size.left + styles_1.SUBMENU_LEFT_INSET,
+                }),
             top: size.top - styles_1.MENU_VERTICAL_PADDING,
         };
     }, [mobileLayout, selected, size, subMenu, subMenuActivated]);

package/dist/components/ObserveDefaultPropsContext.js

@@ -38,8 +38,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
-const call_api_1 = require("./call-api");
+const default_props_api_1 = require("./default-props-api");
 exports.ObserveDefaultPropsContext = react_1.default.createContext(null);
 const ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
     const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -82,10 +83,12 @@ const ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
         }
     }, [updateProps]);
     (0, react_1.useEffect)(() => {
-        if (readOnlyStudio || !clientId || compositionId === null) {
+        if ((readOnlyStudio && !(0, browser_studio_operations_1.getBrowserStudioOperations)()) ||
+            !clientId ||
+            compositionId === null) {
             return;
         }
-        (0, call_api_1.callApi)('/api/subscribe-to-default-props', { compositionId, clientId })
+        (0, default_props_api_1.subscribeToDefaultProps)({ compositionId, clientId })
             .then((can) => {
             applyResult(compositionId, can);
         })
@@ -96,7 +99,7 @@ const ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
             });
         });
         return () => {
-            (0, call_api_1.callApi)('/api/unsubscribe-from-default-props', {
+            (0, default_props_api_1.unsubscribeFromDefaultProps)({
                 compositionId,
                 clientId,
             }).catch(() => {

package/dist/components/PlayPause.d.ts

@@ -4,4 +4,5 @@ export declare const PlayPause: React.FC<{
     readonly loop: boolean;
     readonly bufferStateDelayInMilliseconds: number;
     readonly muted: boolean;
+    readonly hideNavigationControls: boolean;
 }>;

package/dist/components/PlayPause.js

@@ -30,7 +30,7 @@ const iconButton = {
     width: 14,
     color: colors_1.WHITE,
 };
-const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }) => {
+const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted, hideNavigationControls, }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
@@ -198,8 +198,6 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }
             stopped = true;
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle }) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle }) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio" })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle }) })
-        ] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio" })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle }) }))] }));
 };
 exports.PlayPause = PlayPause;

package/dist/components/PlaybackRateSelector.d.ts

@@ -1,5 +1,12 @@
 import React from 'react';
-export declare const PlaybackRateSelector: React.FC<{
+import type { ComboboxValue } from './NewComposition/ComboBox';
+type PlaybackRateMenuItemsProps = {
     readonly playbackRate: number;
     readonly setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;
-}>;
+};
+export declare const usePlaybackRateMenuItems: ({ playbackRate, setPlaybackRate, }: PlaybackRateMenuItemsProps) => {
+    items: ComboboxValue[];
+    selectedId: string;
+};
+export declare const PlaybackRateSelector: React.FC<PlaybackRateMenuItemsProps>;
+export {};

package/dist/components/PlaybackRateSelector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaybackRateSelector = void 0;
+exports.PlaybackRateSelector = exports.usePlaybackRateMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -17,14 +17,7 @@ const getPlaybackRateLabel = (playbackRate) => {
 };
 const accessibilityLabel = 'Change the playback rate';
 const comboStyle = { width: 64 };
-const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
-        };
-    }, []);
+const usePlaybackRateMenuItems = ({ playbackRate, setPlaybackRate, }) => {
     const items = (0, react_1.useMemo)(() => {
         const divider = {
             type: 'divider',
@@ -51,9 +44,27 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
         const middle = Math.floor(commonPlaybackRates.length / 2);
         return [...values.slice(0, middle), divider, ...values.slice(middle)];
     }, [playbackRate, setPlaybackRate]);
+    return {
+        items,
+        selectedId: String(playbackRate),
+    };
+};
+exports.usePlaybackRateMenuItems = usePlaybackRateMenuItems;
+const PlaybackRateSelector = ({ playbackRate, setPlaybackRate, }) => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
+    const { items, selectedId } = (0, exports.usePlaybackRateMenuItems)({
+        playbackRate,
+        setPlaybackRate,
+    });
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
+        };
+    }, []);
     if (isStill || canvasContent === null || canvasContent.type === 'asset') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: String(playbackRate), values: items }) }));
+    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: selectedId, values: items }) }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/components/PreviewToolbar.js

@@ -21,6 +21,7 @@ const PlaybackKeyboardShortcutsManager_1 = require("./PlaybackKeyboardShortcutsM
 const PlaybackRatePersistor_1 = require("./PlaybackRatePersistor");
 const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
 const PlayPause_1 = require("./PlayPause");
+const PreviewToolbarOverflowButton_1 = require("./PreviewToolbarOverflowButton");
 const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const SnappingToggle_1 = require("./SnappingToggle");
@@ -29,6 +30,7 @@ const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
 const TOOLBAR_HEIGHT = 40;
 const container = {
     display: 'flex',
+    position: 'relative',
     justifyContent: 'center',
     borderTop: colors_1.BORDER_BLACK_ALPHA_50,
     alignItems: 'center',
@@ -36,45 +38,21 @@ const container = {
     background: colors_1.BACKGROUND,
     height: TOOLBAR_HEIGHT,
 };
-const mobileContainer = {
-    ...container,
-    position: 'relative',
-    overflowX: 'auto',
-    justifyContent: 'flex-start',
-};
-const scrollIndicatorLeft = {
-    position: 'fixed',
-    display: 'none',
+const centeredPlayButton = {
+    position: 'absolute',
+    left: '50%',
     top: 0,
-    left: 0,
-    width: 40,
-    height: '100%',
-    pointerEvents: 'none',
-    background: `linear-gradient(to right, ${colors_1.BACKGROUND}, ${colors_1.BACKGROUND__TRANSPARENT})`,
-};
-const scrollIndicatorRight = {
-    position: 'fixed',
-    display: 'none',
-    top: 0,
-    right: 0,
-    width: 40,
-    height: '100%',
-    pointerEvents: 'none',
-    background: `linear-gradient(to left, ${colors_1.BACKGROUND}, ${colors_1.BACKGROUND__TRANSPARENT})`,
-};
-const sideContainer = {
-    width: 300,
-    height: 30,
+    height: TOOLBAR_HEIGHT,
     display: 'flex',
-    flexDirection: 'row',
     alignItems: 'center',
+    transform: 'translateX(-50%)',
 };
-const mobileSideContainer = {
+const sideContainer = {
+    width: 300,
     height: 30,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    flexShrink: 0,
 };
 const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
@@ -95,88 +73,20 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const { setPlayerMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
-    const previewToolbarRef = (0, react_1.useRef)(null);
-    const leftScrollIndicatorRef = (0, react_1.useRef)(null);
-    const rightScrollIndicatorRef = (0, react_1.useRef)(null);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    (0, react_1.useEffect)(() => {
-        if (!isMobileLayout) {
-            // The indicators are `position: fixed` and are shown/placed
-            // imperatively by the scroll handler below. Without this reset,
-            // leaving the mobile layout (window resized past the breakpoint)
-            // leaves them visible at stale viewport coordinates — an orphaned
-            // grey gradient rectangle floating over the canvas.
-            if (leftScrollIndicatorRef.current) {
-                leftScrollIndicatorRef.current.style.display = 'none';
-            }
-            if (rightScrollIndicatorRef.current) {
-                rightScrollIndicatorRef.current.style.display = 'none';
-            }
-            return;
-        }
-        if (previewToolbarRef.current) {
-            const updateScrollableIndicatorProps = (target) => {
-                var _a;
-                const boundingBox = target.getBoundingClientRect();
-                const { scrollLeft, scrollWidth, clientWidth } = target;
-                const scrollRight = scrollWidth - clientWidth - scrollLeft;
-                if (!leftScrollIndicatorRef.current ||
-                    !rightScrollIndicatorRef.current) {
-                    return;
-                }
-                if (scrollLeft !== 0) {
-                    Object.assign(leftScrollIndicatorRef.current.style, {
-                        display: 'block',
-                        height: `${boundingBox.height}px`,
-                        top: `${boundingBox.top}px`,
-                        left: `${boundingBox.left}px`,
-                    });
-                }
-                else {
-                    Object.assign(leftScrollIndicatorRef.current.style, {
-                        display: 'none',
-                    });
-                }
-                if (scrollRight !== 0) {
-                    const itemWidth = ((_a = rightScrollIndicatorRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
-                    Object.assign(rightScrollIndicatorRef.current.style, {
-                        display: 'block',
-                        height: `${boundingBox.height}px`,
-                        top: `${boundingBox.top}px`,
-                        left: `${boundingBox.left + boundingBox.width - itemWidth}px`,
-                    });
-                }
-                else {
-                    Object.assign(rightScrollIndicatorRef.current.style, {
-                        display: 'none',
-                    });
-                }
-            };
-            const previewToolbar = previewToolbarRef.current;
-            const scrollHandler = () => {
-                updateScrollableIndicatorProps(previewToolbar);
-            };
-            previewToolbar.addEventListener('scroll', scrollHandler);
-            scrollHandler();
-            return () => {
-                previewToolbar.removeEventListener('scroll', scrollHandler);
-            };
-        }
-    });
-    return (jsx_runtime_1.jsxs("div", { ref: previewToolbarRef, style: isMobileLayout ? mobileContainer : container, className: "css-reset", children: [
-            jsx_runtime_1.jsx("div", { ref: leftScrollIndicatorRef, style: scrollIndicatorLeft }), isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                            jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {}) })
-                        ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: playerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
-                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) }), readOnlyStudio ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), jsx_runtime_1.jsxs("div", { style: isMobileLayout ? mobileSideContainer : sideContainer, children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact" }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
-                ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), jsx_runtime_1.jsx("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })
+    const playPause = (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: playerMuted, hideNavigationControls: isMobileLayout }) }));
+    return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
+            jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
+                    jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {}) })
+                ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) })), !isMobileLayout && (isStill || isVideoComposition) ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx("div", { style: centeredPlayButton, children: playPause })) : null, isVideoComposition && !isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
+                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), readOnlyStudio || isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", hidden: isMobileLayout }) }), isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) })) : null, jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { readOnlyStudio: readOnlyStudio, showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCompositionControls: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition', playbackRate: playbackRate, setPlaybackRate: setPlaybackRate, loop: loop, setLoop: setLoop }) })
+                        ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
         ] }));
 };
 exports.PreviewToolbar = PreviewToolbar;