@remotion/studio 4.0.89 → 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.88 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.89 build /Users/jonathanburger/remotion/packages/studio
 > tsc -d
 

package/dist/Studio.js

@@ -2,6 +2,7 @@
 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");
@@ -12,7 +13,11 @@ const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };
 const Studio = ({ rootComponent, readOnly }) => {
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { numberOfAudioTags: window.remotion_numberOfAudioTags, children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, { readOnlyStudio: readOnly, Root: 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())] }) }));
 };

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/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,7 +33,7 @@ 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).previewServerState;
@@ -41,13 +41,16 @@ const CurrentCompositionKeybindings = () => {
         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,4 +1,5 @@
 import React from 'react';
 export declare const Editor: React.FC<{
     Root: React.FC;
+    readOnlyStudio: boolean;
 }>;

package/dist/components/Editor.js

@@ -20,8 +20,11 @@ const background = {
     flexDirection: 'column',
     position: 'absolute',
 };
-const Editor = ({ Root }) => {
+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?';
@@ -31,7 +34,7 @@ const Editor = ({ Root }) => {
         return () => {
             window.removeEventListener('beforeunload', listenToChanges);
         };
-    }, []);
-    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, {}), (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/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,12 +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).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

@@ -13,5 +13,5 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     isFocused: boolean;
     isHovered: boolean;
 }) => "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<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+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, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & 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, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

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;

package/dist/components/QuickSwitcher/QuickSwitcher.js

@@ -5,12 +5,12 @@ const react_1 = require("react");
 const modals_1 = require("../../state/modals");
 const ModalContainer_1 = require("../ModalContainer");
 const QuickSwitcherContent_1 = require("./QuickSwitcherContent");
-const QuickSwitcher = ({ initialMode, invocationTimestamp }) => {
+const QuickSwitcher = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
     // Separate child component to correctly capture keybindings
-    return ((0, jsx_runtime_1.jsx)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: (0, jsx_runtime_1.jsx)(QuickSwitcherContent_1.QuickSwitcherContent, { invocationTimestamp: invocationTimestamp, initialMode: initialMode }) }));
+    return ((0, jsx_runtime_1.jsx)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: (0, jsx_runtime_1.jsx)(QuickSwitcherContent_1.QuickSwitcherContent, { readOnlyStudio: readOnlyStudio, invocationTimestamp: invocationTimestamp, initialMode: initialMode }) }));
 };
 exports.default = QuickSwitcher;

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

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

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -88,7 +88,7 @@ const mapModeToQuery = (mode) => {
     }
     throw new Error('no mode' + mode);
 };
-const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
+const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const [state, setState] = (0, react_1.useState)(() => {
         return {
@@ -105,7 +105,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
     const inputRef = (0, react_1.useRef)(null);
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const closeMenu = (0, react_1.useCallback)(() => undefined, []);
-    const actions = (0, use_menu_structure_1.useMenuStructure)(closeMenu);
+    const actions = (0, use_menu_structure_1.useMenuStructure)(closeMenu, readOnlyStudio);
     const [docResults, setDocResults] = (0, react_1.useState)({ type: 'initial' });
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();

package/dist/components/RenderButton.js

@@ -4,12 +4,12 @@ exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const Button_1 = require("../error-overlay/remotion-overlay/Button");
 const client_id_1 = require("../helpers/client-id");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_1 = require("../icons/render");
 const in_out_1 = require("../state/in-out");
 const modals_1 = require("../state/modals");
+const Button_1 = require("./Button");
 const layout_1 = require("./layout");
 const button = {
     paddingLeft: 7,

package/dist/components/RenderModal/DataEditor.d.ts

@@ -19,4 +19,5 @@ export declare const DataEditor: React.FC<{
     propsEditType: PropsEditType;
     saving: boolean;
     setSaving: React.Dispatch<React.SetStateAction<boolean>>;
+    readOnlyStudio: boolean;
 }>;

package/dist/components/RenderModal/DataEditor.js

@@ -87,7 +87,7 @@ const getPersistedShowWarningState = () => {
 const setPersistedShowWarningState = (val) => {
     localStorage.setItem(persistanceKey, String(Boolean(val)));
 };
-const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowSaveButton, propsEditType, saving, setSaving, }) => {
+const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowSaveButton, propsEditType, saving, setSaving, readOnlyStudio, }) => {
     const [mode, setMode] = (0, react_1.useState)('schema');
     const [showWarning, setShowWarningWithoutPersistance] = (0, react_1.useState)(() => getPersistedShowWarningState());
     const inJSONEditor = mode === 'json';
@@ -147,7 +147,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
     const { fastRefreshes } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
     const checkIfCanSaveDefaultProps = (0, react_1.useCallback)(async () => {
         try {
-            const can = await (0, actions_1.canUpdateDefaultProps)(unresolvedComposition.id);
+            const can = await (0, actions_1.canUpdateDefaultProps)(unresolvedComposition.id, readOnlyStudio);
             if (can.canUpdate) {
                 setCanSaveDefaultProps((prevState) => ({
                     ...prevState,
@@ -177,7 +177,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
                 },
             }));
         }
-    }, [unresolvedComposition.id]);
+    }, [readOnlyStudio, unresolvedComposition.id]);
     (0, react_1.useEffect)(() => {
         checkIfCanSaveDefaultProps();
     }, [checkIfCanSaveDefaultProps]);

package/dist/components/RenderModal/GuiRenderStatus.d.ts

@@ -1,5 +1,5 @@
+import type { RenderJob } from '@remotion/studio-shared';
 import React from 'react';
-import type { RenderJob } from '../../preview-server/job';
 export declare const GuiRenderStatus: React.FC<{
     job: RenderJob;
 }>;

package/dist/components/RenderModal/OptionExplainer.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionExplainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
-const MenuDivider_1 = require("../Menu/MenuDivider");
 const layout_1 = require("../layout");
+const MenuDivider_1 = require("../Menu/MenuDivider");
 const CliCopyButton_1 = require("./CliCopyButton");
 const container = {
     fontSize: 14,