@remotion/studio 4.0.88 → 4.0.90

package/.eslintrc

@@ -1,30 +1,35 @@
 {
-	"extends": "@jonny",
-	"rules": {
-		"no-console": "error",
-		"no-restricted-imports": [
-			"error",
-			{
-				"patterns": ["@remotion/*/src/*", "remotion/src/*"]
-			}
-		],
-		"@typescript-eslint/no-use-before-define": "off",
-		"@typescript-eslint/no-restricted-imports": [
-			"error",
-			{
-				"paths": [
-					{
-						"name": "zod",
-						"message": "Can only import zod as a type",
-						"allowTypeImports": true
-					},
-					{
-						"name": "@remotion/zod-types",
-						"message": "Can only import @remotion/zod-types as a type",
-						"allowTypeImports": true
-					}
-				]
-			}
-		]
-	}
+  "extends": "@jonny",
+  "rules": {
+    "no-console": "error",
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          "@remotion/*/src",
+          "@remotion/*/src/*",
+          "@remotion/*/dist/*",
+          "remotion/src/*"
+        ]
+      }
+    ],
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "zod",
+            "message": "Can only import zod as a type",
+            "allowTypeImports": true
+          },
+          {
+            "name": "@remotion/zod-types",
+            "message": "Can only import @remotion/zod-types as a type",
+            "allowTypeImports": true
+          }
+        ]
+      }
+    ]
+  }
 }

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.87 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.89 build /Users/jonathanburger/remotion/packages/studio
 > tsc -d
 

package/dist/Studio.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import '../styles.css';
+export declare const Studio: React.FC<{
+    rootComponent: React.FC;
+    readOnly: boolean;
+}>;

package/dist/Studio.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Studio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const remotion_1 = require("remotion");
+require("../styles.css");
+const Editor_1 = require("./components/Editor");
+const EditorContexts_1 = require("./components/EditorContexts");
+const ServerDisconnected_1 = require("./components/Notifications/ServerDisconnected");
+const getServerDisconnectedDomElement = () => {
+    return document.getElementById('server-disconnected-overlay');
+};
+const Studio = ({ rootComponent, readOnly }) => {
+    (0, react_1.useLayoutEffect)(() => {
+        window.remotion_isStudio = true;
+        remotion_1.Internals.enableSequenceStackTraces();
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { numberOfAudioTags: window.remotion_numberOfAudioTags, children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
+                    ? null
+                    : (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }));
+};
+exports.Studio = Studio;

package/dist/components/AssetSelector.js

@@ -27,9 +27,9 @@ exports.AssetSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
-const event_source_1 = require("../helpers/event-source");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const folders_1 = require("../state/folders");
 const z_index_1 = require("../state/z-index");
@@ -63,6 +63,7 @@ const list = {
 const AssetSelector = () => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const { assetFoldersExpanded, setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [{ publicFolderExists, staticFiles }, setState] = react_1.default.useState(() => {
         return {
             staticFiles: (0, remotion_1.getStaticFiles)(),
@@ -79,11 +80,11 @@ const AssetSelector = () => {
                 publicFolderExists: window.remotion_publicFolderExists,
             });
         };
-        const unsub = (0, event_source_1.subscribeToEvent)('new-public-folder', onUpdate);
+        const unsub = subscribeToEvent('new-public-folder', onUpdate);
         return () => {
             unsub();
         };
-    }, []);
+    }, [subscribeToEvent]);
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         setAssetFoldersExpanded((p) => {
             var _a;

package/dist/components/AssetSelectorItem.js

@@ -30,6 +30,7 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
+const url_state_1 = require("../helpers/url-state");
 const clipboard_1 = require("../icons/clipboard");
 const file_1 = require("../icons/file");
 const folder_1 = require("../icons/folder");
@@ -133,7 +134,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
             ? parentFolder + '/' + item.name
             : item.name;
         setCanvasContent({ type: 'asset', asset: relativePath });
-        window.history.pushState({}, 'Studio', `/assets/${relativePath}`);
+        (0, url_state_1.pushUrl)(`/assets/${relativePath}`);
     }, [item.name, parentFolder, setCanvasContent]);
     const style = (0, react_1.useMemo)(() => {
         return {

package/dist/{error-overlay/remotion-overlay → components}/Button.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
+const colors_1 = require("../helpers/colors");
 const button = {
     border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
     borderRadius: 4,

package/dist/components/ControlButton.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 export declare const CONTROL_BUTTON_PADDING = 6;
 export declare const ControlButton: (props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
     title: string;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CopyButton.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Button_1 = require("../error-overlay/remotion-overlay/Button");
 const copy_text_1 = require("../helpers/copy-text");
+const Button_1 = require("./Button");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const iconStyle = {

package/dist/components/CurrentComposition.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const CURRENT_COMPOSITION_HEIGHT = 80;
-export declare const CurrentComposition: () => JSX.Element;
+export declare const CurrentComposition: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/CurrentCompositionSideEffects.d.ts

@@ -1,3 +1,5 @@
 import type React from 'react';
 export declare const TitleUpdater: React.FC;
-export declare const CurrentCompositionKeybindings: React.FC;
+export declare const CurrentCompositionKeybindings: React.FC<{
+    readOnlyStudio: boolean;
+}>;

package/dist/components/CurrentCompositionSideEffects.js

@@ -33,21 +33,24 @@ const TitleUpdater = () => {
     return null;
 };
 exports.TitleUpdater = TitleUpdater;
-const CurrentCompositionKeybindings = () => {
+const CurrentCompositionKeybindings = ({ readOnlyStudio }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const video = remotion_1.Internals.useVideo();
-    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
     const openRenderModal = (0, react_1.useCallback)(() => {
         if (!video) {
             return;
         }
+        if (readOnlyStudio) {
+            return (0, NotificationCenter_1.sendErrorNotification)('Studio is read-only');
+        }
         if (type !== 'connected') {
             (0, NotificationCenter_1.sendErrorNotification)('Studio server is offline');
             return;
         }
         const renderButton = document.getElementById('render-modal-button');
         renderButton.click();
-    }, [type, video]);
+    }, [readOnlyStudio, type, video]);
     (0, react_1.useEffect)(() => {
         const binding = keybindings.registerKeybinding({
             event: 'keydown',

package/dist/components/Editor.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
-export declare const Editor: React.FC;
+export declare const Editor: React.FC<{
+    Root: React.FC;
+    readOnlyStudio: boolean;
+}>;

package/dist/components/Editor.js

@@ -11,7 +11,6 @@ const z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const Modals_1 = require("./Modals");
-const NoRegisterRoot_1 = require("./NoRegisterRoot");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
@@ -21,15 +20,11 @@ const background = {
     flexDirection: 'column',
     position: 'absolute',
 };
-const Editor = () => {
-    const [Root, setRoot] = (0, react_1.useState)(() => remotion_1.Internals.getRoot());
-    const [waitForRoot] = (0, react_1.useState)(() => {
-        if (Root) {
-            return 0;
-        }
-        return (0, remotion_1.delayRender)('Waiting for registerRoot()');
-    });
+const Editor = ({ Root, readOnlyStudio, }) => {
     (0, react_1.useEffect)(() => {
+        if (readOnlyStudio) {
+            return;
+        }
         const listenToChanges = (e) => {
             if (window.remotion_unsavedProps) {
                 e.returnValue = 'Are you sure you want to leave?';
@@ -39,19 +34,7 @@ const Editor = () => {
         return () => {
             window.removeEventListener('beforeunload', listenToChanges);
         };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (Root) {
-            return;
-        }
-        const cleanup = remotion_1.Internals.waitForRoot((NewRoot) => {
-            setRoot(() => NewRoot);
-            (0, remotion_1.continueRender)(waitForRoot);
-        });
-        return () => {
-            cleanup();
-        };
-    }, [Root, waitForRoot]);
-    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [Root === null ? (0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {}) : (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, {})] }) }));
+    }, [readOnlyStudio]);
+    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio })] }) }));
 };
 exports.Editor = Editor;

package/dist/components/EditorContent.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const EditorContent: React.FC;
+export declare const EditorContent: React.FC<{
+    readOnlyStudio: boolean;
+}>;

package/dist/components/EditorContent.js

@@ -19,11 +19,11 @@ const container = {
     flex: 1,
     height: 0,
 };
-const EditorContent = () => {
+const EditorContent = ({ readOnlyStudio }) => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     // Preventing multiple renders so the update check doesn't get rendered twice and needs to be aborted
     const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== 'composition';
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), onlyTopPanel ? ((0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {})) : ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), onlyTopPanel ? ((0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { readOnlyStudio: readOnlyStudio })) : ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/EditorContexts.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const EditorContexts: React.FC<{
     children: React.ReactNode;
+    readOnlyStudio: boolean;
 }>;

package/dist/components/EditorContexts.js

@@ -18,7 +18,7 @@ const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
 const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
 const ShowRulersProvider_1 = require("./ShowRulersProvider");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
-const EditorContexts = ({ children }) => {
-    return ((0, jsx_runtime_1.jsx)(get_zod_if_possible_1.ZodProvider, { children: (0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { children: (0, jsx_runtime_1.jsx)(context_1.RenderQueueContextProvider, { children: (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(ShowRulersProvider_1.ShowRulersProvider, { children: (0, jsx_runtime_1.jsx)(ShowGuidesProvider_1.ShowGuidesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(PlayerEmitterContext_1.PlayerEmitterContext, { children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+const EditorContexts = ({ children, readOnlyStudio }) => {
+    return ((0, jsx_runtime_1.jsx)(get_zod_if_possible_1.ZodProvider, { children: (0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: (0, jsx_runtime_1.jsx)(context_1.RenderQueueContextProvider, { children: (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(ShowRulersProvider_1.ShowRulersProvider, { children: (0, jsx_runtime_1.jsx)(ShowGuidesProvider_1.ShowGuidesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(PlayerEmitterContext_1.PlayerEmitterContext, { children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.EditorContexts = EditorContexts;

package/dist/components/FilePreview.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const format_bytes_1 = require("../helpers/format-bytes");
+const studio_shared_1 = require("@remotion/studio-shared");
 const JSONViewer_1 = require("./JSONViewer");
 const layout_1 = require("./layout");
 const TextViewer_1 = require("./TextViewer");
@@ -35,6 +35,6 @@ const FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
     if (fileType === 'txt') {
         return (0, jsx_runtime_1.jsx)(TextViewer_1.TextViewer, { src: src });
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: msgStyle, children: currentAsset }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: msgStyle, children: ["Size: ", (0, format_bytes_1.formatBytes)(assetMetadata.size), " "] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: msgStyle, children: currentAsset }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: msgStyle, children: ["Size: ", (0, studio_shared_1.formatBytes)(assetMetadata.size), " "] })] }));
 };
 exports.FilePreview = FilePreview;

package/dist/components/InitialCompositionLoader.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InitialCompositionLoader = exports.useSelectComposition = exports.useSelectAsset = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const url_state_1 = require("../helpers/url-state");
 const folders_1 = require("../state/folders");
 const CompositionSelector_1 = require("./CompositionSelector");
 const ExplorerPanel_1 = require("./ExplorerPanel");
@@ -36,7 +37,7 @@ const useSelectComposition = () => {
     return (c, push) => {
         var _a;
         if (push) {
-            window.history.pushState({}, 'Studio', `/${c.id}`);
+            (0, url_state_1.pushUrl)(`/${c.id}`);
         }
         (_a = ExplorerPanel_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectCompositionPanel();
         setCanvasContent({ type: 'composition', compositionId: c.id });
@@ -94,7 +95,7 @@ const InitialCompositionLoader = () => {
         const onchange = () => {
             const newCanvas = (0, ZoomPersistor_1.deriveCanvasContentFromUrl)();
             if (newCanvas && newCanvas.type === 'composition') {
-                const newComp = window.location.pathname.substring(1);
+                const newComp = (0, url_state_1.getPathname)().substring(1);
                 const exists = compositions.find((c) => c.id === newComp);
                 if (exists) {
                     selectComposition(exists, false);

package/dist/components/MenuBuildIndicator.js

@@ -26,7 +26,7 @@ const noSpinner = {
 };
 const MenuBuildIndicator = () => {
     const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
-    const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
     const showButton = window.remotion_editorName && ctx.type === 'connected';
     (0, react_1.useEffect)(() => {
         window.remotion_isBuilding = () => {

package/dist/components/MenuToolbar.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const MenuToolbar: React.FC;
+export declare const MenuToolbar: React.FC<{
+    readOnlyStudio: boolean;
+}>;

package/dist/components/MenuToolbar.js

@@ -36,7 +36,7 @@ const fixedWidthLeft = {
 const flex = {
     flex: 1,
 };
-const MenuToolbar = () => {
+const MenuToolbar = ({ readOnlyStudio }) => {
     const [selected, setSelected] = (0, react_1.useState)(null);
     const itemClicked = (0, react_1.useCallback)((itemId) => {
         setSelected(itemId);
@@ -49,7 +49,7 @@ const MenuToolbar = () => {
     const closeMenu = (0, react_1.useCallback)(() => {
         setSelected(null);
     }, []);
-    const structure = (0, use_menu_structure_1.useMenuStructure)(closeMenu);
+    const structure = (0, use_menu_structure_1.useMenuStructure)(closeMenu, readOnlyStudio);
     const menus = (0, react_1.useMemo)(() => {
         return structure.map((s) => s.id);
     }, [structure]);
@@ -77,6 +77,6 @@ const MenuToolbar = () => {
     }, [setSelected]);
     return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", className: "css-reset", style: row, children: [(0, jsx_runtime_1.jsxs)("div", { style: fixedWidthLeft, children: [structure.map((s) => {
                         return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-                    }), (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {})] }), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)(MenuBuildIndicator_1.MenuBuildIndicator, {}), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)("div", { style: fixedWidthRight, children: (0, jsx_runtime_1.jsx)(SidebarCollapserControls_1.SidebarCollapserControls, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
+                    }), readOnlyStudio ? null : (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {})] }), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)(MenuBuildIndicator_1.MenuBuildIndicator, {}), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)("div", { style: fixedWidthRight, children: (0, jsx_runtime_1.jsx)(SidebarCollapserControls_1.SidebarCollapserControls, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
 };
 exports.MenuToolbar = MenuToolbar;

package/dist/components/Modals.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const Modals: React.FC;
+export declare const Modals: React.FC<{
+    readOnlyStudio: boolean;
+}>;

package/dist/components/Modals.js

@@ -13,11 +13,12 @@ const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher")
 const RenderModal_1 = require("./RenderModal/RenderModal");
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
-const Modals = () => {
+const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type === 'connected';
+    const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
+        'connected';
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec })), modalContextType &&
                 canRender &&
-                modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
+                modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };
 exports.Modals = Modals;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const getNewCompositionCode: ({ type, height, width, fps, durationInFrames, name, raw, }: {
     type: 'still' | 'composition';
     height: number;
@@ -7,4 +6,4 @@ export declare const getNewCompositionCode: ({ type, height, width, fps, duratio
     durationInFrames: number;
     name: string;
     raw: boolean;
-}) => string | (string | JSX.Element | (string | JSX.Element)[])[];
+}) => string | (string | import("react/jsx-runtime").JSX.Element | (string | import("react/jsx-runtime").JSX.Element)[])[];

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

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign" | "key"> & React.RefAttributes<HTMLInputElement>>;
+}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "key"> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -2,5 +2,5 @@ import React from 'react';
 type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
     status: 'error' | 'warning' | 'ok';
 };
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/components/NoRegisterRoot.js

@@ -3,16 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NoRegisterRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const label = {
     fontSize: 13,
     color: 'white',
     fontFamily: 'Arial, Helvetica, sans-serif',
 };
 const container = {
-    display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    flex: 1,
     flexDirection: 'column',
     textAlign: 'center',
     lineHeight: 1.5,
@@ -36,6 +35,6 @@ const NoRegisterRoot = () => {
     if (!show) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Waiting for registerRoot() to get called." }), (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["Learn more:", ' ', (0, jsx_runtime_1.jsx)("a", { target: '_blank', style: link, href: "https://www.remotion.dev/docs/register-root", children: "remotion.dev/docs/register-root" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Waiting for registerRoot() to get called." }), (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["Learn more:", ' ', (0, jsx_runtime_1.jsx)("a", { target: '_blank', style: link, href: "https://www.remotion.dev/docs/register-root", children: "remotion.dev/docs/register-root" })] })] }));
 };
 exports.NoRegisterRoot = NoRegisterRoot;

package/dist/components/Notifications/ServerDisconnected.js

@@ -37,7 +37,7 @@ window.addEventListener('beforeunload', () => {
     pageIsGoingToReload = true;
 });
 const ServerDisconnected = () => {
-    const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { previewServerState: ctx } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const fav = document.getElementById('__remotion_favicon');
     if (ctx.type !== 'disconnected') {
         fav.setAttribute('href', '/remotion.png');

package/dist/components/OptionsPanel.d.ts

@@ -4,5 +4,7 @@ export declare const persistSelectedOptionsSidebarPanel: (panel: OptionsSidebarP
 export declare const optionsSidebarTabs: React.RefObject<{
     selectRendersPanel: () => void;
 }>;
-export declare const OptionsPanel: React.FC<{}>;
+export declare const OptionsPanel: React.FC<{
+    readOnlyStudio: boolean;
+}>;
 export {};

package/dist/components/OptionsPanel.js

@@ -24,7 +24,10 @@ const circle = {
     borderRadius: 4,
 };
 const localStorageKey = 'remotion.sidebarPanel';
-const getSelectedPanel = () => {
+const getSelectedPanel = (readOnlyStudio) => {
+    if (readOnlyStudio) {
+        return 'input-props';
+    }
     const panel = localStorage.getItem(localStorageKey);
     if (panel === 'renders') {
         return 'renders';
@@ -39,10 +42,10 @@ const persistSelectedOptionsSidebarPanel = (panel) => {
 };
 exports.persistSelectedOptionsSidebarPanel = persistSelectedOptionsSidebarPanel;
 exports.optionsSidebarTabs = (0, react_1.createRef)();
-const OptionsPanel = () => {
+const OptionsPanel = ({ readOnlyStudio }) => {
     const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const [saving, setSaving] = (0, react_1.useState)(false);
-    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
+    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel(readOnlyStudio));
     const onPropsSelected = (0, react_1.useCallback)(() => {
         setPanel('input-props');
         (0, exports.persistSelectedOptionsSidebarPanel)('input-props');
@@ -107,6 +110,6 @@ const OptionsPanel = () => {
         }
         return !(0, deep_equal_1.deepEqual)(composition.defaultProps, actualProps);
     }, [actualProps, composition]);
-    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: [composition ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)("div", { title: saveToolTip, style: circleStyle })) : null] })) : null, (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === `input-props` && composition ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving }, composition.id)) : ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {}))] }));
+    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: [composition ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)("div", { title: saveToolTip, style: circleStyle })) : null] })) : null, readOnlyStudio ? null : ((0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' }))] }) }), panel === `input-props` && composition ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving, readOnlyStudio: readOnlyStudio }, composition.id)) : readOnlyStudio ? null : ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/components/PreviewToolbar.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const PreviewToolbar: React.FC;
+export declare const PreviewToolbar: React.FC<{
+    readOnlyStudio: boolean;
+}>;

package/dist/components/PreviewToolbar.js

@@ -42,7 +42,7 @@ const sideContainer = {
 const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
 };
-const PreviewToolbar = () => {
+const PreviewToolbar = ({ readOnlyStudio }) => {
     const { playbackRate, setPlaybackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
@@ -50,6 +50,6 @@ const PreviewToolbar = () => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
     const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null, isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null, isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), readOnlyStudio ? null : (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/components/QuickSwitcher/QuickSwitcher.d.ts

@@ -3,5 +3,6 @@ import type { QuickSwitcherMode } from './NoResults';
 declare const QuickSwitcher: React.FC<{
     initialMode: QuickSwitcherMode;
     invocationTimestamp: number;
+    readOnlyStudio: boolean;
 }>;
 export default QuickSwitcher;