@remotion/studio 4.0.286 → 4.0.287

package/.turbo/turbo-make.log

@@ -1,6 +1,6 @@
 
 
-> @remotion/studio@4.0.286 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.287 make /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 
-[77.20ms] Generated.
+[46.52ms] Generated.

package/dist/api/go-to-composition.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Selects a composition in the Remotion Studio.
+ * @param compositionId - The ID of the composition to select.
+ * @see [Documentation](/docs/studio/go-to-composition)
+ */
+export declare const goToComposition: (compositionId: string) => void;

package/dist/api/go-to-composition.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.goToComposition = void 0;
+const remotion_1 = require("remotion");
+/**
+ * Selects a composition in the Remotion Studio.
+ * @param compositionId - The ID of the composition to select.
+ * @see [Documentation](/docs/studio/go-to-composition)
+ */
+const goToComposition = (compositionId) => {
+    var _a;
+    (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.selectComposition(compositionId);
+};
+exports.goToComposition = goToComposition;

package/dist/api/pause.d.ts

@@ -0,0 +1 @@
+export declare const pause: () => void;

package/dist/api/pause.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pause = void 0;
+const remotion_1 = require("remotion");
+/*
+ * @description Pause the current composition.
+ * @see [Documentation](https://www.remotion.dev/docs/studio/pause)
+ */
+const pause = () => {
+    var _a;
+    (_a = remotion_1.Internals.timeValueRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+};
+exports.pause = pause;

package/dist/api/play.d.ts

@@ -0,0 +1,2 @@
+import type { SyntheticEvent } from 'react';
+export declare const play: (e?: SyntheticEvent | PointerEvent) => void;

package/dist/api/play.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.play = void 0;
+const remotion_1 = require("remotion");
+/*
+ * @description Play the current composition.
+ * @see [Documentation](https://www.remotion.dev/docs/studio/play)
+ */
+const play = (e) => {
+    var _a;
+    (_a = remotion_1.Internals.timeValueRef.current) === null || _a === void 0 ? void 0 : _a.play(e);
+};
+exports.play = play;

package/dist/api/seek.js

@@ -1,11 +1,11 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.seek = void 0;
+const remotion_1 = require("remotion");
 /*
  * @description Jump to a different time in the timeline.
  * @see [Documentation](https://www.remotion.dev/docs/studio/seek)
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.seek = void 0;
-const remotion_1 = require("remotion");
 const seek = (frame) => {
     var _a;
     (_a = remotion_1.Internals.timeValueRef.current) === null || _a === void 0 ? void 0 : _a.seek(Math.max(0, frame));

package/dist/api/toggle.d.ts

@@ -0,0 +1,2 @@
+import type { SyntheticEvent } from 'react';
+export declare const toggle: (e?: SyntheticEvent | PointerEvent) => void;

package/dist/api/toggle.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggle = void 0;
+const remotion_1 = require("remotion");
+/*
+ * @description Toggle playback of the current composition.
+ * @see [Documentation](https://www.remotion.dev/docs/studio/toggle)
+ */
+const toggle = (e) => {
+    var _a;
+    (_a = remotion_1.Internals.timeValueRef.current) === null || _a === void 0 ? void 0 : _a.toggle(e);
+};
+exports.toggle = toggle;

package/dist/components/CompSelectorRef.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+export declare const CompSelectorRef: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/CompSelectorRef.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompSelectorRef = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const persist_open_folders_1 = require("../helpers/persist-open-folders");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
+const CompSelectorRef = ({ children }) => {
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)('compositions'));
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
+        setFoldersExpanded((p) => {
+            var _a;
+            const key = (0, persist_open_folders_1.openFolderKey)({ folderName, parentName });
+            const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
+            const foldersExpandedState = {
+                ...p,
+                [key]: !prev,
+            };
+            (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
+            return foldersExpandedState;
+        });
+    }, []);
+    (0, react_1.useImperativeHandle)(remotion_1.Internals.compositionSelectorRef, () => {
+        return {
+            expandComposition: (compName) => {
+                const compositionToExpand = compositions.find((c) => c.id === compName);
+                if (!compositionToExpand) {
+                    return;
+                }
+                const { folderName, parentFolderName } = compositionToExpand;
+                if (folderName === null) {
+                    return;
+                }
+                setFoldersExpanded((previousState) => {
+                    const foldersExpandedState = {
+                        ...previousState,
+                    };
+                    const currentFolder = folderName;
+                    const currentParentName = parentFolderName;
+                    const key = (0, persist_open_folders_1.openFolderKey)({
+                        folderName: currentFolder,
+                        parentName: currentParentName,
+                    });
+                    const splitted = key.split('/');
+                    for (let i = 0; i < splitted.length - 1; i++) {
+                        const allExceptLast = i === 0
+                            ? (0, persist_open_folders_1.openFolderKey)({
+                                folderName: splitted.filter((s) => s !== 'no-parent')[0],
+                                parentName: null,
+                            })
+                            : splitted.slice(0, i + 1).join('/');
+                        foldersExpandedState[allExceptLast] = true;
+                    }
+                    (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
+                    return foldersExpandedState;
+                });
+            },
+            selectComposition: (compName) => {
+                const comp = compositions.find((c) => c.id === compName);
+                if (!comp) {
+                    throw new Error(`Composition ${compName} not found`);
+                }
+                selectComposition(comp, true);
+            },
+            toggleFolder: (folderName, parentName) => {
+                toggleFolder(folderName, parentName);
+            },
+        };
+    }, [compositions, selectComposition, toggleFolder]);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            foldersExpanded,
+            setFoldersExpanded,
+            toggleFolder,
+        };
+    }, [foldersExpanded, setFoldersExpanded, toggleFolder]);
+    return ((0, jsx_runtime_1.jsx)(persist_open_folders_1.ExpandedFoldersContext.Provider, { value: contextValue, children: children }));
+};
+exports.CompSelectorRef = CompSelectorRef;

package/dist/components/CompositionSelector.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 export declare const getKeysToExpand: (initialFolderName: string, parentFolderName: string | null, initial?: string[]) => string[];
-export declare const compositionSelectorRef: React.RefObject<{
-    expandComposition: (compName: string) => void;
-} | null>;
 export declare const CompositionSelector: React.FC;

package/dist/components/CompositionSelector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionSelector = exports.compositionSelectorRef = exports.getKeysToExpand = void 0;
+exports.CompositionSelector = exports.getKeysToExpand = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -30,62 +30,11 @@ const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
     return (0, exports.getKeysToExpand)(name, parent, initial);
 };
 exports.getKeysToExpand = getKeysToExpand;
-exports.compositionSelectorRef = (0, react_1.createRef)();
 const CompositionSelector = () => {
     const { compositions, canvasContent, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)('compositions'));
+    const { foldersExpanded } = (0, react_1.useContext)(persist_open_folders_1.ExpandedFoldersContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
-        setFoldersExpanded((p) => {
-            var _a;
-            const key = (0, persist_open_folders_1.openFolderKey)({ folderName, parentName });
-            const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
-            const foldersExpandedState = {
-                ...p,
-                [key]: !prev,
-            };
-            (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
-            return foldersExpandedState;
-        });
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.compositionSelectorRef, () => {
-        return {
-            expandComposition: (compName) => {
-                const compositionToExpand = compositions.find((c) => c.id === compName);
-                if (!compositionToExpand) {
-                    return;
-                }
-                const { folderName, parentFolderName } = compositionToExpand;
-                if (folderName === null) {
-                    return;
-                }
-                setFoldersExpanded((previousState) => {
-                    const foldersExpandedState = {
-                        ...previousState,
-                    };
-                    const currentFolder = folderName;
-                    const currentParentName = parentFolderName;
-                    const key = (0, persist_open_folders_1.openFolderKey)({
-                        folderName: currentFolder,
-                        parentName: currentParentName,
-                    });
-                    const splitted = key.split('/');
-                    for (let i = 0; i < splitted.length - 1; i++) {
-                        const allExceptLast = i === 0
-                            ? (0, persist_open_folders_1.openFolderKey)({
-                                folderName: splitted.filter((s) => s !== 'no-parent')[0],
-                                parentName: null,
-                            })
-                            : splitted.slice(0, i + 1).join('/');
-                        foldersExpandedState[allExceptLast] = true;
-                    }
-                    (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
-                    return foldersExpandedState;
-                });
-            },
-        };
-    }, [compositions]);
     const items = (0, react_1.useMemo)(() => {
         return (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
     }, [compositions, folders, foldersExpanded]);
@@ -98,6 +47,10 @@ const CompositionSelector = () => {
             overflowY: 'auto',
         };
     }, [showCurrentComposition]);
+    const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
+        var _a;
+        (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.toggleFolder(folderName, parentName);
+    }, []);
     return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [showCurrentComposition ? (0, jsx_runtime_1.jsx)(CurrentComposition_1.CurrentComposition, {}) : null, (0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
                     return ((0, jsx_runtime_1.jsx)(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: showCurrentComposition ? canvasContent.compositionId : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
                 }) })] }));

package/dist/components/ExplorerPanel.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const AssetSelector_1 = require("./AssetSelector");
 const CompositionSelector_1 = require("./CompositionSelector");
+const CompSelectorRef_1 = require("./CompSelectorRef");
 const Tabs_1 = require("./Tabs");
 const container = {
     height: '100%',
@@ -52,6 +53,6 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
             },
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })] }) }), panel === 'compositions' ? ((0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {})) : ((0, jsx_runtime_1.jsx)(AssetSelector_1.AssetSelector, { readOnlyStudio: readOnlyStudio }))] }));
+    return ((0, jsx_runtime_1.jsx)(CompSelectorRef_1.CompSelectorRef, { children: (0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })] }) }), panel === 'compositions' ? ((0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {})) : ((0, jsx_runtime_1.jsx)(AssetSelector_1.AssetSelector, { readOnlyStudio: readOnlyStudio }))] }) }));
 };
 exports.ExplorerPanel = ExplorerPanel;

package/dist/components/NewComposition/CodemodFooter.d.ts

@@ -4,7 +4,7 @@ export declare const CodemodFooter: React.FC<{
     readonly valid: boolean;
     readonly codemod: RecastCodemod;
     readonly loadingNotification: React.ReactNode;
-    readonly succeessNotifcation: React.ReactNode;
+    readonly successNotification: React.ReactNode;
     readonly errorNotification: string;
     readonly genericSubmitLabel: string;
     readonly submitLabel: (options: {

package/dist/components/NewComposition/CodemodFooter.js

@@ -11,7 +11,7 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
 const layout_1 = require("../layout");
 const DiffPreview_1 = require("./DiffPreview");
-const CodemodFooter = ({ codemod, valid, loadingNotification, succeessNotifcation, errorNotification, genericSubmitLabel, submitLabel, }) => {
+const CodemodFooter = ({ codemod, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, }) => {
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [codemodStatus, setCanApplyCodemod] = (0, react_1.useState)({
@@ -41,7 +41,7 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, succeessNotifcatio
             signal: new AbortController().signal,
         })
             .then(() => {
-            notification.replaceContent(succeessNotifcation, 2000);
+            notification.replaceContent(successNotification, 2000);
         })
             .catch((err) => {
             notification.replaceContent(`${errorNotification}: ${err.message}`, 2000);
@@ -51,7 +51,7 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, succeessNotifcatio
         errorNotification,
         loadingNotification,
         setSelectedModal,
-        succeessNotifcation,
+        successNotification,
     ]);
     const getCanApplyCodemod = (0, react_1.useCallback)(async (signal) => {
         const res = await (0, actions_1.applyCodemod)({

package/dist/components/NewComposition/DeleteComposition.js

@@ -30,7 +30,7 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: 'Delete composition' }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: ["Do you want to delete the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: unresolved.durationInFrames === 1 ? `<Still>` : '<Composition>' }), ' ', "with ID ", '"', unresolved.id, '"', "?", (0, jsx_runtime_1.jsx)("br", {}), "The associated ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "component" }), " will remain in your code."] }), (0, jsx_runtime_1.jsx)(ModalFooter_1.ModalFooterContainer, { children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', succeessNotifcation: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, valid: true }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: 'Delete composition' }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: ["Do you want to delete the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: unresolved.durationInFrames === 1 ? `<Still>` : '<Composition>' }), ' ', "with ID ", '"', unresolved.id, '"', "?", (0, jsx_runtime_1.jsx)("br", {}), "The associated ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "component" }), " will remain in your code."] }), (0, jsx_runtime_1.jsx)(ModalFooter_1.ModalFooterContainer, { children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, valid: true }) })] })] }));
 };
 const DeleteComposition = ({ compositionId }) => {
     return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: compositionId, children: (0, jsx_runtime_1.jsx)(DeleteCompositionLoaded, { compositionId: compositionId }) }) }));

package/dist/components/NewComposition/DuplicateComposition.js

@@ -172,7 +172,7 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Duplicate ${resolved.result.id}` }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: [initialCompType === 'composition' ? (
                             // We allow converting from a composition to a still, but
                             // not the other way around
-                            (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "ID" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] }) })] }), hadDimensionsDefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })] })) : null] })] })] })) : null, type === 'composition' && hadDurationDefined ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "FPS" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })] })) : null] }), (0, jsx_runtime_1.jsx)(ModalFooter_1.ModalFooterContainer, { children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', succeessNotifcation: `Duplicated ${unresolved.id}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, valid: valid }) })] })] }));
+                            (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "ID" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] }) })] }), hadDimensionsDefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })] })) : null] })] })] })) : null, type === 'composition' && hadDurationDefined ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "FPS" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })] })) : null] }), (0, jsx_runtime_1.jsx)(ModalFooter_1.ModalFooterContainer, { children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, valid: valid }) })] })] }));
 };
 const DuplicateComposition = ({ compositionId, compositionType }) => {
     return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: compositionId, children: (0, jsx_runtime_1.jsx)(DuplicateCompositionLoaded, { initialType: compositionType }) }) }));

package/dist/components/NewComposition/RenameComposition.js

@@ -48,7 +48,7 @@ const RenameCompositionLoaded = () => {
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Rename ${resolved.result.id}` }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsx)("div", { style: content, children: (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "ID" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(ModalFooter_1.ModalFooterContainer, { children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', succeessNotifcation: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, valid: valid }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Rename ${resolved.result.id}` }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsx)("div", { style: content, children: (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "ID" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(ModalFooter_1.ModalFooterContainer, { children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, valid: valid }) })] })] }));
 };
 const RenameComposition = ({ compositionId }) => {
     return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: compositionId, children: (0, jsx_runtime_1.jsx)(RenameCompositionLoaded, {}) }) }));

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -9,7 +9,6 @@ const is_composition_still_1 = require("../../helpers/is-composition-still");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const use_menu_structure_1 = require("../../helpers/use-menu-structure");
 const modals_1 = require("../../state/modals");
-const CompositionSelector_1 = require("../CompositionSelector");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const KeyboardShortcutsExplainer_1 = require("../KeyboardShortcutsExplainer");
 const is_menu_item_1 = require("../Menu/is-menu-item");
@@ -136,7 +135,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                     selectComposition(c, true);
                     setSelectedModal(null);
                     const selector = `.__remotion-composition[data-compname="${c.id}"]`;
-                    (_a = CompositionSelector_1.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.expandComposition(c.id);
+                    (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.expandComposition(c.id);
                     waitForElm(selector).then(() => {
                         var _a;
                         (_a = document

package/dist/components/TimeValue.js

@@ -40,7 +40,7 @@ const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
-    const { seek } = player_1.PlayerInternals.usePlayer();
+    const { seek, play, pause, toggle } = player_1.PlayerInternals.usePlayer();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const ref = (0, react_1.useRef)(null);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
@@ -55,7 +55,10 @@ const TimeValue = () => {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.click();
         },
         seek,
-    }), [seek]);
+        play,
+        pause,
+        toggle,
+    }), [seek, play, pause, toggle]);
     (0, react_1.useEffect)(() => {
         const gKey = keybindings.registerKeybinding({
             event: 'keypress',

package/dist/esm/index.mjs

@@ -134,13 +134,18 @@ var getStaticFiles = () => {
   }
   return window.remotion_staticFiles;
 };
+// src/api/go-to-composition.ts
+import { Internals } from "remotion";
+var goToComposition = (compositionId) => {
+  Internals.compositionSelectorRef.current?.selectComposition(compositionId);
+};
 // src/api/helpers/calc-new-props.ts
-import { Internals, getRemotionEnvironment as getRemotionEnvironment2 } from "remotion";
+import { Internals as Internals2, getRemotionEnvironment as getRemotionEnvironment2 } from "remotion";
 var calcNewProps = (compositionId, defaultProps) => {
   if (!getRemotionEnvironment2().isStudio) {
     throw new Error("saveDefaultProps can only be called in the Remotion Studio.");
   }
-  const { compositionsRef, editorPropsProviderRef } = Internals;
+  const { compositionsRef, editorPropsProviderRef } = Internals2;
   const compositionsStore = compositionsRef.current;
   if (!compositionsStore) {
     throw new Error("No compositions ref found. Are you in the Remotion Studio and are the Remotion versions aligned?");
@@ -167,10 +172,20 @@ var calcNewProps = (compositionId, defaultProps) => {
   };
 };
 
+// src/api/pause.ts
+import { Internals as Internals3 } from "remotion";
+var pause = () => {
+  Internals3.timeValueRef.current?.pause();
+};
+// src/api/play.ts
+import { Internals as Internals4 } from "remotion";
+var play = (e) => {
+  Internals4.timeValueRef.current?.play(e);
+};
 // src/api/reevaluate-composition.ts
-import { Internals as Internals2 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 var reevaluateComposition = () => {
-  Internals2.resolveCompositionsRef.current?.reloadCurrentlySelectedComposition();
+  Internals5.resolveCompositionsRef.current?.reloadCurrentlySelectedComposition();
 };
 // src/api/restart-studio.ts
 import { getRemotionEnvironment as getRemotionEnvironment3 } from "remotion";
@@ -340,18 +355,23 @@ var saveDefaultProps = async ({
   return Promise.reject(err);
 };
 // src/api/seek.ts
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals6 } from "remotion";
 var seek = (frame) => {
-  Internals3.timeValueRef.current?.seek(Math.max(0, frame));
+  Internals6.timeValueRef.current?.seek(Math.max(0, frame));
+};
+// src/api/toggle.ts
+import { Internals as Internals7 } from "remotion";
+var toggle = (e) => {
+  Internals7.timeValueRef.current?.toggle(e);
 };
 // src/api/update-default-props.ts
-import { Internals as Internals4 } from "remotion";
+import { Internals as Internals8 } from "remotion";
 var updateDefaultProps = ({
   compositionId,
   defaultProps
 }) => {
   const { generatedDefaultProps, composition } = calcNewProps(compositionId, defaultProps);
-  const propsStore = Internals4.editorPropsProviderRef.current;
+  const propsStore = Internals8.editorPropsProviderRef.current;
   if (!propsStore) {
     throw new Error("No props store found. Are you in the Remotion Studio and are the Remotion versions aligned?");
   }
@@ -361,7 +381,7 @@ var updateDefaultProps = ({
       [composition.id]: generatedDefaultProps
     };
   });
-  window.dispatchEvent(new CustomEvent(Internals4.PROPS_UPDATED_EXTERNALLY, {
+  window.dispatchEvent(new CustomEvent(Internals8.PROPS_UPDATED_EXTERNALLY, {
     detail: {
       resetUnsaved: false
     }
@@ -458,10 +478,14 @@ export {
   watchStaticFile,
   watchPublicFolder,
   updateDefaultProps,
+  toggle,
   seek,
   saveDefaultProps,
   restartStudio,
   reevaluateComposition,
+  play,
+  pause,
+  goToComposition,
   getStaticFiles,
   focusDefaultPropsPath,
   deleteStaticFile,