@remotion/studio 4.0.89 → 4.0.91

package/dist/components/RenderModal/RenderModal.js

@@ -3,24 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalWithLoader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@remotion/renderer/client");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const audio_1 = require("../../icons/audio");
-const data_1 = require("../../icons/data");
-const file_1 = require("../../icons/file");
-const frame_1 = require("../../icons/frame");
-const gear_1 = require("../../icons/gear");
-const gif_1 = require("../../icons/gif");
-const Button_1 = require("../../error-overlay/remotion-overlay/Button");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
-const get_default_out_name_1 = require("../../get-default-out-name");
 const colors_1 = require("../../helpers/colors");
 const convert_env_variables_1 = require("../../helpers/convert-env-variables");
 const render_modal_sections_1 = require("../../helpers/render-modal-sections");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const audio_1 = require("../../icons/audio");
 const Checkmark_1 = require("../../icons/Checkmark");
+const data_1 = require("../../icons/data");
+const file_1 = require("../../icons/file");
+const frame_1 = require("../../icons/frame");
+const gear_1 = require("../../icons/gear");
+const gif_1 = require("../../icons/gif");
 const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
+const Button_1 = require("../Button");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const styles_1 = require("../Menu/styles");
@@ -143,7 +143,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const [userSelectedAudioCodec, setUserSelectedAudioCodec] = (0, react_1.useState)(() => initialAudioCodec);
     const [envVariables, setEnvVariables] = (0, react_1.useState)(() => (0, convert_env_variables_1.envVariablesObjectToArray)(initialEnvVariables).filter(([key]) => key !== 'NODE_ENV'));
     const [initialOutName] = (0, react_1.useState)(() => {
-        return (0, get_default_out_name_1.getDefaultOutLocation)({
+        return (0, studio_shared_1.getDefaultOutLocation)({
             compositionName: resolvedComposition.id,
             defaultExtension: isVideo
                 ? client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, initialAudioCodec)
@@ -786,7 +786,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 })) : 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 })) : ((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 })) : 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 })) })] })] }));
 };
 const RenderModalWithLoader = (props) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);

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

@@ -1,6 +1,6 @@
 import type { Codec, LogLevel, X264Preset } from '@remotion/renderer';
+import type { UiOpenGlOptions } from '@remotion/studio-shared';
 import React from 'react';
-import type { UiOpenGlOptions } from '../../required-chromium-options';
 export type RenderType = 'still' | 'video' | 'audio' | 'sequence';
 export declare const RenderModalAdvanced: React.FC<{
     renderMode: RenderType;

package/dist/components/RenderModal/RenderModalAudio.js

@@ -9,11 +9,11 @@ const Checkbox_1 = require("../Checkbox");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const RemInput_1 = require("../NewComposition/RemInput");
 const EnforceAudioTrackSetting_1 = require("./EnforceAudioTrackSetting");
+const human_readable_audio_codecs_1 = require("./human-readable-audio-codecs");
+const layout_1 = require("./layout");
 const MutedSetting_1 = require("./MutedSetting");
 const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const RenderModalHr_1 = require("./RenderModalHr");
-const human_readable_audio_codecs_1 = require("./human-readable-audio-codecs");
-const layout_1 = require("./layout");
 const container = {
     flex: 1,
 };

package/dist/components/RenderModal/RenderModalEnvironmentVariables.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalEnvironmentVariables = 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 colors_1 = require("../../helpers/colors");
+const Button_1 = require("../Button");
 const layout_1 = require("../layout");
 const EnvInput_1 = require("./EnvInput");
 const title = {

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

@@ -8,5 +8,5 @@ type Props = {
     validationMessage: string | null;
     renderType: RenderType;
 };
-export declare function RenderModalInput({ existence, inputStyle, outName, onValueChange, validationMessage, renderType, }: Props): JSX.Element;
+export declare function RenderModalInput({ existence, inputStyle, outName, onValueChange, validationMessage, renderType, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -27,10 +27,10 @@ exports.RenderModalJSONPropsEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const no_react_1 = require("remotion/no-react");
-const Button_1 = require("../../error-overlay/remotion-overlay/Button");
 const colors_1 = require("../../helpers/colors");
 const document_title_1 = require("../../helpers/document-title");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const Button_1 = require("../Button");
 const layout_1 = require("../layout");
 const RemTextarea_1 = require("../NewComposition/RemTextarea");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");

package/dist/components/RenderModal/RenderStatusModal.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderStatusModal = 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 retry_payload_1 = require("../../preview-server/retry-payload");
+const retry_payload_1 = require("../../helpers/retry-payload");
 const modals_1 = require("../../state/modals");
+const Button_1 = require("../Button");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const ModalContainer_1 = require("../ModalContainer");

package/dist/components/RenderModal/SchemaEditor/SchemaErrorMessages.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import type { z } from 'zod';
-export declare const ZodNotInstalled: () => JSX.Element;
-export declare const NoSchemaDefined: () => JSX.Element;
-export declare const NoDefaultProps: () => JSX.Element;
+export declare const ZodNotInstalled: () => import("react/jsx-runtime").JSX.Element;
+export declare const NoSchemaDefined: () => import("react/jsx-runtime").JSX.Element;
+export declare const NoDefaultProps: () => import("react/jsx-runtime").JSX.Element;
 export declare const InvalidDefaultProps: React.FC<{
     zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
 }>;

package/dist/components/RenderModal/SchemaEditor/SchemaErrorMessages.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopLevelZodValue = exports.InvalidSchema = exports.InvalidDefaultProps = exports.NoDefaultProps = exports.NoSchemaDefined = exports.ZodNotInstalled = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_1 = require("../../../error-overlay/remotion-overlay/Button");
 const colors_1 = require("../../../helpers/colors");
+const Button_1 = require("../../Button");
 const layout_1 = require("../../layout");
 const styles_1 = require("../../Menu/styles");
 const ZodErrorMessages_1 = require("./ZodErrorMessages");
@@ -32,7 +32,7 @@ const errorContainer = {
     overflowY: 'auto',
 };
 const openDocs = () => {
-    window.open('https://www.remotion.dev/docs/parameterized-rendering#define-a-schema-');
+    window.open('https://www.remotion.dev/docs/schemas');
 };
 const ZodNotInstalled = () => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Install ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "zod" }), " as a dependency to interactively control the props of the composition."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));

package/dist/components/RenderModal/SchemaEditor/extract-enum-json-paths.d.ts

@@ -1,3 +1,2 @@
 import type { ZodType } from '../../get-zod-if-possible';
-export type EnumPath = (string | number)[];
 export declare const extractEnumJsonPaths: (schema: Zod.ZodTypeAny, zodRuntime: ZodType, currentPath: (string | number)[]) => (string | number)[][];

package/dist/components/RenderModal/SchemaEditor/local-state.d.ts

@@ -17,5 +17,5 @@ export declare const useLocalState: <T>({ value, schema, setValue, defaultValue,
     reset: () => void;
     RevisionContextProvider: ({ children }: {
         children: React.ReactNode;
-    }) => JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { RenderJob } from '../../preview-server/job';
+import type { RenderJob } from '@remotion/studio-shared';
 export declare const supportsCopyingToClipboard: (job: RenderJob) => boolean;
 export declare const RenderQueueCopyToClipboard: React.FC<{
     job: RenderJob;

package/dist/components/RenderQueue/RenderQueueError.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 RenderQueueError: React.FC<{
     job: RenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueItem.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 RenderQueueItem: React.FC<{
     job: RenderJob;
     selected: boolean;

package/dist/components/RenderQueue/RenderQueueItem.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
+const url_state_1 = require("../../helpers/url-state");
 const layout_1 = require("../layout");
 const RenderQueueCopyToClipboard_1 = require("./RenderQueueCopyToClipboard");
 const RenderQueueError_1 = require("./RenderQueueError");
@@ -76,7 +77,7 @@ const RenderQueueItem = ({ job, selected }) => {
             }
             return { type: 'output', path: `/${job.outName}` };
         });
-        window.history.pushState({}, 'Studio', `/outputs/${job.outName}`);
+        (0, url_state_1.pushUrl)(`/outputs/${job.outName}`);
     }, [
         job.outName,
         job.status,

package/dist/components/RenderQueue/RenderQueueItemCancelButton.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 RenderQueueCancelButton: React.FC<{
     job: RenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueItemStatus.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 RenderQueueItemStatus: React.FC<{
     job: RenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueOpenInFolder.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 RenderQueueOpenInFinderItem: React.FC<{
     job: RenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueOutputName.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 RenderQueueOutputName: React.FC<{
     job: RenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueProgressMessage.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 RenderQueueProgressMessage: React.FC<{
     job: RenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueRemoveItem.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 RenderQueueRemoveItem: React.FC<{
     job: RenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueRepeat.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 RenderQueueRepeatItem: React.FC<{
     job: RenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueRepeatItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const retry_payload_1 = require("../../preview-server/retry-payload");
+const retry_payload_1 = require("../../helpers/retry-payload");
 const modals_1 = require("../../state/modals");
 const InlineAction_1 = require("../InlineAction");
 const RenderQueueRepeatItem = ({ job }) => {

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

@@ -1,7 +1,5 @@
 import type { AudioCodec, Codec, ColorSpace, LogLevel, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
-import type { RenderJob } from '../../preview-server/job';
-import type { RequiredChromiumOptions } from '../../required-chromium-options';
-import type { EnumPath } from '../RenderModal/SchemaEditor/extract-enum-json-paths';
+import type { CanUpdateDefaultPropsResponse, EnumPath, RenderJob, RequiredChromiumOptions } from '@remotion/studio-shared';
 export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, multiProcessOnLinux, beepOnFinish, }: {
     compositionId: string;
     outName: string;
@@ -88,7 +86,7 @@ export declare const copyToClipboard: ({ outName }: {
     outName: string;
 }) => Promise<void>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
-export declare const cancelRenderJob: (job: RenderJob) => Promise<import("../../preview-server/job").CancelRenderResponse>;
-export declare const updateAvailable: (signal: AbortSignal) => Promise<import("../../preview-server/job").UpdateAvailableResponse>;
-export declare const updateDefaultProps: (compositionId: string, defaultProps: Record<string, unknown>, enumPaths: EnumPath[]) => Promise<import("../../preview-server/job").UpdateDefaultPropsResponse>;
-export declare const canUpdateDefaultProps: (compositionId: string) => Promise<import("../../preview-server/job").CanUpdateDefaultPropsResponse>;
+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 updateDefaultProps: (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

@@ -175,7 +175,13 @@ const updateDefaultProps = (compositionId, defaultProps, enumPaths) => {
     });
 };
 exports.updateDefaultProps = updateDefaultProps;
-const canUpdateDefaultProps = (compositionId) => {
+const canUpdateDefaultProps = (compositionId, readOnlyStudio) => {
+    if (readOnlyStudio) {
+        return Promise.resolve({
+            canUpdate: false,
+            reason: 'Read-only studio',
+        });
+    }
     return callApi('/api/can-update-default-props', {
         compositionId,
     });

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

@@ -1,8 +1,8 @@
+import type { RenderJob } from '@remotion/studio-shared';
 import React from 'react';
-import type { RenderJob } from '../../preview-server/job';
 declare global {
     interface Window {
-        remotion_initialRenderQueue: RenderJob[];
+        remotion_initialRenderQueue: RenderJob[] | null;
     }
 }
 type RenderQueueContextType = {

package/dist/components/RenderQueue/context.js

@@ -31,7 +31,8 @@ exports.RenderQueueContext = react_1.default.createContext({
 });
 exports.renderJobsRef = (0, react_1.createRef)();
 const RenderQueueContextProvider = ({ children }) => {
-    const [jobs, setJobs] = (0, react_1.useState)(window.remotion_initialRenderQueue);
+    var _a;
+    const [jobs, setJobs] = (0, react_1.useState)((_a = window.remotion_initialRenderQueue) !== null && _a !== void 0 ? _a : []);
     const value = (0, react_1.useMemo)(() => {
         return {
             jobs,

package/dist/components/ResetZoomButton.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResetZoomButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_1 = require("../error-overlay/remotion-overlay/Button");
+const Button_1 = require("./Button");
 const ResetZoomButton = ({ onClick }) => {
     return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, children: "Reset zoom" });
 };

package/dist/components/Timeline/MaxTimelineTracks.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-export declare const DEFAULT_TIMELINE_TRACKS = 90;
 export declare const MAX_TIMELINE_TRACKS: number;
 export declare const MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 export declare const MaxTimelineTracksReached: React.FC;

package/dist/components/Timeline/MaxTimelineTracks.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = exports.DEFAULT_TIMELINE_TRACKS = void 0;
+exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-exports.DEFAULT_TIMELINE_TRACKS = 90;
 exports.MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === 'undefined'
-    ? exports.DEFAULT_TIMELINE_TRACKS
+    ? studio_shared_1.DEFAULT_TIMELINE_TRACKS
     : Number(process.env.MAX_TIMELINE_TRACKS);
 exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 const container = {

package/dist/components/Timeline/TimelineStack/index.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineStack = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const source_map_1 = require("source-map");
-const source_map_endpoint_1 = require("../../../error-overlay/react-overlay/utils/source-map-endpoint");
 const colors_1 = require("../../../helpers/colors");
 const open_in_editor_1 = require("../../../helpers/open-in-editor");
+const url_state_1 = require("../../../helpers/url-state");
 const InitialCompositionLoader_1 = require("../../InitialCompositionLoader");
 const layout_1 = require("../../layout");
 const NotificationCenter_1 = require("../../Notifications/NotificationCenter");
@@ -15,7 +16,7 @@ const get_stack_1 = require("./get-stack");
 const source_attribution_1 = require("./source-attribution");
 // @ts-expect-error
 source_map_1.SourceMapConsumer.initialize({
-    'lib/mappings.wasm': source_map_endpoint_1.SOURCE_MAP_ENDPOINT,
+    'lib/mappings.wasm': studio_shared_1.SOURCE_MAP_ENDPOINT,
 });
 const TimelineStack = ({ isCompact, sequence }) => {
     const [originalLocation, setOriginalLocation] = (0, react_1.useState)(null);
@@ -36,7 +37,7 @@ const TimelineStack = ({ isCompact, sequence }) => {
     }, [sequence]);
     const navigateToAsset = (0, react_1.useCallback)((asset) => {
         selectAsset(asset);
-        window.history.pushState({}, 'Studio', `/assets/${asset}`);
+        (0, url_state_1.pushUrl)(`/assets/${asset}`);
     }, [selectAsset]);
     const openEditor = (0, react_1.useCallback)(async (location) => {
         if (!window.remotion_editorName) {
@@ -100,16 +101,18 @@ const TimelineStack = ({ isCompact, sequence }) => {
     const onTitlePointerLeave = (0, react_1.useCallback)(() => {
         setTitleHovered(false);
     }, []);
+    const hoverable = (originalLocation && isCompact) ||
+        (assetPath && window.remotion_editorName);
     const style = (0, react_1.useMemo)(() => {
         return {
             fontSize: 12,
             color: opening
                 ? colors_1.VERY_LIGHT_TEXT
-                : stackHovered
+                : stackHovered && hoverable
                     ? colors_1.LIGHT_TEXT
                     : colors_1.VERY_LIGHT_TEXT,
             marginLeft: 10,
-            cursor: 'pointer',
+            cursor: hoverable ? 'pointer' : undefined,
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
@@ -118,9 +121,7 @@ const TimelineStack = ({ isCompact, sequence }) => {
             overflow: 'hidden',
             flexShrink: 100000,
         };
-    }, [stackHovered, opening]);
-    const hoverable = (originalLocation && isCompact) ||
-        (assetPath && window.remotion_editorName);
+    }, [opening, stackHovered, hoverable]);
     const textStyle = (0, react_1.useMemo)(() => {
         const hoverEffect = titleHovered && hoverable;
         return {

package/dist/components/TopPanel.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
 export declare const useResponsiveSidebarStatus: () => 'collapsed' | 'expanded';
-export declare const TopPanel: React.FC;
+export declare const TopPanel: React.FC<{
+    readOnlyStudio: boolean;
+}>;

package/dist/components/TopPanel.js

@@ -43,7 +43,7 @@ const useResponsiveSidebarStatus = () => {
     return actualStateLeft;
 };
 exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
-const TopPanel = () => {
+const TopPanel = ({ readOnlyStudio }) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
@@ -65,6 +65,6 @@ const TopPanel = () => {
     const onCollapseRight = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, {}) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainerStyle, children: (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, {}) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, {}) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainerStyle, children: (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

package/dist/components/UpdateCheck.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { PackageManager } from '../preview-server/get-package-manager';
+import type { PackageManager } from '@remotion/studio-shared';
 export type UpdateInfo = {
     currentVersion: string;
     latestVersion: string;
@@ -13,4 +12,4 @@ export type Bug = {
     link: string;
     versions: string[];
 };
-export declare const UpdateCheck: () => JSX.Element | null;
+export declare const UpdateCheck: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ZoomPersistor.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZoomPersistor = exports.deriveCanvasContentFromUrl = exports.getZoomFromLocalStorage = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const url_state_1 = require("../helpers/url-state");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const makeKey = () => {
     return `remotion.zoom-map`;
@@ -16,18 +17,18 @@ const getZoomFromLocalStorage = () => {
 };
 exports.getZoomFromLocalStorage = getZoomFromLocalStorage;
 const deriveCanvasContentFromUrl = () => {
-    const substrings = window.location.pathname.split('/').filter(Boolean);
+    const substrings = (0, url_state_1.getPathname)().split('/').filter(Boolean);
     const lastPart = substrings[substrings.length - 1];
     if (substrings[0] === 'assets') {
         return {
             type: 'asset',
-            asset: decodeURIComponent(window.location.pathname.substring('/assets/'.length)),
+            asset: decodeURIComponent((0, url_state_1.getPathname)().substring('/assets/'.length)),
         };
     }
     if (substrings[0] === 'outputs') {
         return {
             type: 'output',
-            path: decodeURIComponent(window.location.pathname.substring('/outputs/'.length)),
+            path: decodeURIComponent((0, url_state_1.getPathname)().substring('/outputs/'.length)),
         };
     }
     if (lastPart) {