@remotion/studio 4.0.146 → 4.0.147

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.145 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.147 build /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun bundle.ts
 

package/dist/api/save-default-props.d.ts

@@ -0,0 +1,10 @@
+import type { AnyZodObject } from 'zod';
+export type SafeDefaultPropsFunction = (currentValues: {
+    schema: AnyZodObject | null;
+    savedDefaultProps: Record<string, unknown>;
+    unsavedDefaultProps: Record<string, unknown>;
+}) => Record<string, unknown>;
+export declare const saveDefaultProps: ({ compositionId, defaultProps, }: {
+    compositionId: string;
+    defaultProps: SafeDefaultPropsFunction;
+}) => Promise<void>;

package/dist/api/save-default-props.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveDefaultProps = void 0;
+const remotion_1 = require("remotion");
+const extract_enum_json_paths_1 = require("../components/RenderModal/SchemaEditor/extract-enum-json-paths");
+const actions_1 = require("../components/RenderQueue/actions");
+const saveDefaultProps = async ({ compositionId, defaultProps, }) => {
+    var _a, _b;
+    if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+        throw new Error('saveDefaultProps can only be called in the Remotion Studio.');
+    }
+    try {
+        await Promise.resolve().then(() => __importStar(require('zod')));
+    }
+    catch (_c) {
+        throw new Error('"zod" is required to use saveDefaultProps(), but is not installed.');
+    }
+    const z = await Promise.resolve().then(() => __importStar(require('zod')));
+    const { compositionsRef, editorPropsProviderRef } = remotion_1.Internals;
+    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?');
+    }
+    const compositions = compositionsStore.getCompositions();
+    const composition = compositions.find((c) => c.id === compositionId);
+    if (!composition) {
+        throw new Error(`No composition with the ID ${compositionId} found. Available compositions: ${compositions.map((c) => c.id).join(', ')}`);
+    }
+    const propsStore = editorPropsProviderRef.current;
+    if (!propsStore) {
+        throw new Error('No props store found. Are you in the Remotion Studio and are the Remotion versions aligned?');
+    }
+    const savedDefaultProps = (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {};
+    const unsavedDefaultProps = (_b = propsStore.getProps()[compositionId]) !== null && _b !== void 0 ? _b : savedDefaultProps;
+    const generatedDefaultProps = defaultProps({
+        schema: composition.schema,
+        savedDefaultProps,
+        unsavedDefaultProps,
+    });
+    const res = await (0, actions_1.callUpdateDefaultPropsApi)(compositionId, generatedDefaultProps, composition.schema ? (0, extract_enum_json_paths_1.extractEnumJsonPaths)(composition.schema, z, []) : []);
+    if (res.success) {
+        return Promise.resolve();
+    }
+    const err = new Error(res.reason);
+    err.stack = res.stack;
+    return Promise.reject(err);
+};
+exports.saveDefaultProps = saveDefaultProps;

package/dist/api/update-default-props.d.ts

@@ -0,0 +1,10 @@
+import type { AnyZodObject } from 'zod';
+export type SafeDefaultPropsFunction = (currentValues: {
+    schema: AnyZodObject | null;
+    savedDefaultProps: Record<string, unknown>;
+    unsavedDefaultProps: Record<string, unknown>;
+}) => Record<string, unknown>;
+export declare const saveDefaultProps: ({ compositionId, defaultProps, }: {
+    compositionId: string;
+    defaultProps: SafeDefaultPropsFunction;
+}) => Promise<void>;

package/dist/api/update-default-props.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveDefaultProps = void 0;
+const remotion_1 = require("remotion");
+const extract_enum_json_paths_1 = require("../components/RenderModal/SchemaEditor/extract-enum-json-paths");
+const actions_1 = require("../components/RenderQueue/actions");
+const saveDefaultProps = async ({ compositionId, defaultProps, }) => {
+    var _a, _b;
+    if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+        throw new Error('saveDefaultProps can only be called in the Remotion Studio.');
+    }
+    try {
+        await Promise.resolve().then(() => __importStar(require('zod')));
+    }
+    catch (_c) {
+        throw new Error('"zod" is required to use saveDefaultProps(), but is not installed.');
+    }
+    const z = await Promise.resolve().then(() => __importStar(require('zod')));
+    const { compositionsRef, editorPropsProviderRef } = remotion_1.Internals;
+    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?');
+    }
+    const compositions = compositionsStore.getCompositions();
+    const composition = compositions.find((c) => c.id === compositionId);
+    if (!composition) {
+        throw new Error(`No composition with the ID ${compositionId} found. Available compositions: ${compositions.map((c) => c.id).join(', ')}`);
+    }
+    const propsStore = editorPropsProviderRef.current;
+    if (!propsStore) {
+        throw new Error('No props store found. Are you in the Remotion Studio and are the Remotion versions aligned?');
+    }
+    const savedDefaultProps = (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {};
+    const unsavedDefaultProps = (_b = propsStore.getProps()[compositionId]) !== null && _b !== void 0 ? _b : savedDefaultProps;
+    const generatedDefaultProps = defaultProps({
+        schema: composition.schema,
+        savedDefaultProps,
+        unsavedDefaultProps,
+    });
+    const res = await (0, actions_1.callUpdateDefaultPropsApi)(compositionId, generatedDefaultProps, composition.schema ? (0, extract_enum_json_paths_1.extractEnumJsonPaths)(composition.schema, z, []) : []);
+    if (res.success) {
+        return Promise.resolve();
+    }
+    const err = new Error(res.reason);
+    err.stack = res.stack;
+    return Promise.reject(err);
+};
+exports.saveDefaultProps = saveDefaultProps;

package/dist/api/write-static-file.d.ts

@@ -0,0 +1,4 @@
+export declare const writeStaticFile: ({ contents, filePath, }: {
+    contents: string | ArrayBuffer;
+    filePath: string;
+}) => Promise<void>;

package/dist/api/write-static-file.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.writeStaticFile = void 0;
+const writeStaticFile = async ({ contents, filePath, }) => {
+    const url = new URL('/api/add-asset', window.location.origin);
+    if (filePath.includes('\\')) {
+        return Promise.reject(new Error('File path cannot contain backslashes'));
+    }
+    url.search = new URLSearchParams({
+        filePath,
+    }).toString();
+    const response = await fetch(url, {
+        method: 'POST',
+        body: contents,
+    });
+    if (!response.ok) {
+        const jsonResponse = await response.json();
+        throw new Error(jsonResponse.error);
+    }
+};
+exports.writeStaticFile = writeStaticFile;

package/dist/components/AssetSelector.js

@@ -30,6 +30,7 @@ exports.AssetSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const get_static_files_1 = require("../api/get-static-files");
+const write_static_file_1 = require("../api/write-static-file");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
@@ -40,7 +41,6 @@ const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
 const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const utils_1 = require("./utils");
 const container = {
     display: 'flex',
     flexDirection: 'column',
@@ -124,7 +124,11 @@ const AssetSelector = ({ readOnlyStudio }) => {
             const { files } = e.dataTransfer;
             const assetPath = dropLocation || '/';
             for (const file of files) {
-                await (0, utils_1.handleUploadFile)(file, assetPath);
+                const body = await file.arrayBuffer();
+                await (0, write_static_file_1.writeStaticFile)({
+                    contents: body,
+                    filePath: file.name,
+                });
             }
             if (files.length === 1) {
                 (0, NotificationCenter_1.showNotification)(`Added ${files[0].name} to ${assetPath}`, 3000);

package/dist/components/OptionsPanel.d.ts

@@ -5,6 +5,6 @@ export declare const optionsSidebarTabs: React.RefObject<{
     selectRendersPanel: () => void;
 }>;
 export declare const OptionsPanel: React.FC<{
-    readOnlyStudio: boolean;
+    readonly readOnlyStudio: boolean;
 }>;
 export {};

package/dist/components/OptionsPanel.js

@@ -90,7 +90,7 @@ const OptionsPanel = ({ readOnlyStudio }) => {
             ? `Save using ${ShortcutHint_1.cmdOrCtrlCharacter}+S`
             : 'There are unsaved changes';
     }, []);
-    const setInputProps = (0, react_1.useCallback)((newProps) => {
+    const setDefaultProps = (0, react_1.useCallback)((newProps) => {
         if (composition === null) {
             return;
         }
@@ -100,7 +100,7 @@ const OptionsPanel = ({ readOnlyStudio }) => {
             newProps,
         });
     }, [composition, updateProps]);
-    const actualProps = (0, react_1.useMemo)(() => {
+    const currentDefaultProps = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (composition === null) {
             return {};
@@ -111,8 +111,8 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         if (composition === null || composition.defaultProps === undefined) {
             return false;
         }
-        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, 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, {}))] }));
+        return !(0, deep_equal_1.deepEqual)(composition.defaultProps, currentDefaultProps);
+    }, [currentDefaultProps, 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, 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, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, 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/RenderModal/DataEditor.d.ts

@@ -12,12 +12,12 @@ export type State = {
 };
 export type PropsEditType = 'input-props' | 'default-props';
 export declare const DataEditor: React.FC<{
-    unresolvedComposition: AnyComposition;
-    inputProps: Record<string, unknown>;
-    setInputProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
-    mayShowSaveButton: boolean;
-    propsEditType: PropsEditType;
-    saving: boolean;
-    setSaving: React.Dispatch<React.SetStateAction<boolean>>;
-    readOnlyStudio: boolean;
+    readonly unresolvedComposition: AnyComposition;
+    readonly defaultProps: Record<string, unknown>;
+    readonly setDefaultProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
+    readonly mayShowSaveButton: boolean;
+    readonly propsEditType: PropsEditType;
+    readonly saving: boolean;
+    readonly setSaving: React.Dispatch<React.SetStateAction<boolean>>;
+    readonly 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, readOnlyStudio, }) => {
+const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, 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';
@@ -95,13 +95,13 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
         if (!inJSONEditor) {
             return null;
         }
-        const value = inputProps;
+        const value = defaultProps;
         return no_react_1.NoReactInternals.serializeJSONWithDate({
             data: value,
             indent: 2,
             staticBase: window.remotion_staticBase,
         });
-    }, [inJSONEditor, inputProps]);
+    }, [inJSONEditor, defaultProps]);
     const cliProps = (0, remotion_1.getInputProps)();
     const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = (0, react_1.useState)({
         [unresolvedComposition.id]: get_render_modal_warnings_1.defaultTypeCanSaveState,
@@ -126,8 +126,8 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
         if (schema === 'no-schema') {
             return 'no-schema';
         }
-        return schema.safeParse(inputProps);
-    }, [inputProps, schema]);
+        return schema.safeParse(defaultProps);
+    }, [defaultProps, schema]);
     const setShowWarning = (0, react_1.useCallback)((val) => {
         setShowWarningWithoutPersistance((prevVal) => {
             if (typeof val === 'boolean') {
@@ -213,12 +213,12 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
             (0, NotificationCenter_1.showNotification)('Cannot update default props: No Zod schema', 2000);
             return;
         }
-        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).then((response) => {
+        (0, actions_1.callUpdateDefaultPropsApi)(unresolvedComposition.id, defaultProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).then((response) => {
             if (!response.success) {
                 (0, NotificationCenter_1.showNotification)(`Cannot update default props: ${response.reason}`, 2000);
             }
         });
-    }, [unresolvedComposition.id, inputProps, schema, z]);
+    }, [unresolvedComposition.id, defaultProps, schema, z]);
     (0, react_1.useEffect)(() => {
         setSaving(false);
     }, [fastRefreshes, setSaving]);
@@ -229,7 +229,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
             return;
         }
         setSaving(true);
-        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater((_a = unresolvedComposition.defaultProps) !== null && _a !== void 0 ? _a : {}), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
+        (0, actions_1.callUpdateDefaultPropsApi)(unresolvedComposition.id, updater((_a = unresolvedComposition.defaultProps) !== null && _a !== void 0 ? _a : {}), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
             .then((response) => {
             if (!response.success) {
                 // eslint-disable-next-line no-console
@@ -296,6 +296,6 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: tabWrapper, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), warnings.length > 0 ? ((0, jsx_runtime_1.jsx)(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
                         ? warnings.map((warning) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })] }, warning)))
-                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, defaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, onSave: onUpdate, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
+                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema, zodValidationResult: zodValidationResult, defaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: setDefaultProps, onSave: onUpdate, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
 };
 exports.DataEditor = DataEditor;

package/dist/components/RenderModal/RenderModal.js

@@ -800,7 +800,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
                             ...buttonStyle,
                             backgroundColor: outnameValidation.valid ? colors_1.BLUE : colors_1.BLUE_DISABLED,
-                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setColorSpace: setColorSpace, colorSpace: colorSpace, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { inputProps: inputProps, setInputProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setLogLevel, logLevel: logLevel, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, enableMultiProcessOnLinux: multiProcessOnLinux, setChromiumMultiProcessOnLinux: setChromiumMultiProcessOnLinux, codec: codec, userAgent: userAgent, setUserAgent: setUserAgent, setBeep: setBeepOnFinish, beep: beepOnFinish, repro: repro, setRepro: setRepro })) })] })] }));
+                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setColorSpace: setColorSpace, colorSpace: colorSpace, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setLogLevel, logLevel: logLevel, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, enableMultiProcessOnLinux: multiProcessOnLinux, setChromiumMultiProcessOnLinux: setChromiumMultiProcessOnLinux, codec: codec, userAgent: userAgent, setUserAgent: setUserAgent, setBeep: setBeepOnFinish, beep: beepOnFinish, repro: repro, setRepro: setRepro })) })] })] }));
 };
 const RenderModalWithLoader = (props) => {
     return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: props.compositionId, children: (0, jsx_runtime_1.jsx)(RenderModal, { ...props }) }) }));

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

@@ -9,7 +9,7 @@ type TResolvedCompositionContext = {
 } | null;
 export declare const ResolvedCompositionContext: React.Context<TResolvedCompositionContext>;
 export declare const ResolveCompositionBeforeModal: React.FC<{
-    compositionId: string;
-    children: React.ReactNode;
+    readonly compositionId: string;
+    readonly children: React.ReactNode;
 }>;
 export {};

package/dist/components/RenderModal/ResolveCompositionBeforeModal.js

@@ -77,7 +77,6 @@ const ResolveCompositionBeforeModal = ({ compositionId, children }) => {
     if (resolved.type === 'error') {
         return ((0, jsx_runtime_1.jsxs)("div", { style: loaderContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: loaderLabel, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), ' ', "yielded an error:"] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", { style: loaderLabel, children: resolved.error.message || 'Unknown error' })] }));
     }
-    // eslint-disable-next-line react/jsx-no-useless-fragment
     return ((0, jsx_runtime_1.jsx)(exports.ResolvedCompositionContext.Provider, { value: value, children: children }));
 };
 exports.ResolveCompositionBeforeModal = ResolveCompositionBeforeModal;

package/dist/components/RenderQueue/actions.d.ts

@@ -97,5 +97,5 @@ export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("@remotion/studio-shared").CancelRenderResponse>;
 export declare const updateAvailable: (signal: AbortSignal) => Promise<import("@remotion/studio-shared").UpdateAvailableResponse>;
 export declare const getProjectInfo: (signal: AbortSignal) => Promise<import("@remotion/studio-shared").ProjectInfoResponse>;
-export declare const updateDefaultProps: (compositionId: string, defaultProps: Record<string, unknown>, enumPaths: EnumPath[]) => Promise<import("@remotion/studio-shared").UpdateDefaultPropsResponse>;
+export declare const callUpdateDefaultPropsApi: (compositionId: string, defaultProps: Record<string, unknown>, enumPaths: EnumPath[]) => Promise<import("@remotion/studio-shared").UpdateDefaultPropsResponse>;
 export declare const canUpdateDefaultProps: (compositionId: string, readOnlyStudio: boolean) => Promise<CanUpdateDefaultPropsResponse>;

package/dist/components/RenderQueue/actions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.copyToClipboard = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
+exports.canUpdateDefaultProps = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.copyToClipboard = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
 const no_react_1 = require("remotion/no-react");
 const callApi = (endpoint, body, signal) => {
     return new Promise((resolve, reject) => {
@@ -178,7 +178,7 @@ const getProjectInfo = (signal) => {
     return callApi('/api/project-info', {}, signal);
 };
 exports.getProjectInfo = getProjectInfo;
-const updateDefaultProps = (compositionId, defaultProps, enumPaths) => {
+const callUpdateDefaultPropsApi = (compositionId, defaultProps, enumPaths) => {
     return callApi('/api/update-default-props', {
         compositionId,
         defaultProps: no_react_1.NoReactInternals.serializeJSONWithDate({
@@ -189,7 +189,7 @@ const updateDefaultProps = (compositionId, defaultProps, enumPaths) => {
         enumPaths,
     });
 };
-exports.updateDefaultProps = updateDefaultProps;
+exports.callUpdateDefaultPropsApi = callUpdateDefaultPropsApi;
 const canUpdateDefaultProps = (compositionId, readOnlyStudio) => {
     if (readOnlyStudio) {
         return Promise.resolve({