@remotion/studio 4.0.88 → 4.0.89

package/.turbo/turbo-build.log

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

package/dist/Studio.d.ts

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

package/dist/Studio.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Studio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = require("react-dom");
+const remotion_1 = require("remotion");
+require("../styles.css");
+const Editor_1 = require("./components/Editor");
+const EditorContexts_1 = require("./components/EditorContexts");
+const ServerDisconnected_1 = require("./components/Notifications/ServerDisconnected");
+const getServerDisconnectedDomElement = () => {
+    return document.getElementById('server-disconnected-overlay');
+};
+const Studio = ({ rootComponent, readOnly }) => {
+    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
+                    ? null
+                    : (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }));
+};
+exports.Studio = Studio;

package/dist/components/AssetSelector.js

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

package/dist/components/Button.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const Button: React.ForwardRefExoticComponent<{
+    onClick: () => void;
+    disabled?: boolean | undefined;
+    children: React.ReactNode;
+    style?: React.CSSProperties | undefined;
+    buttonContainerStyle?: React.CSSProperties | undefined;
+    autoFocus?: boolean | undefined;
+    title?: string | undefined;
+    id?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const button = {
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    borderRadius: 4,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    appearance: 'none',
+    fontFamily: 'inherit',
+    fontSize: 14,
+    color: 'white',
+    flexDirection: 'row',
+};
+const ButtonRefForwardFunction = ({ children, onClick, title, disabled, style, id, autoFocus, buttonContainerStyle, }, ref) => {
+    const combined = (0, react_1.useMemo)(() => {
+        return {
+            ...button,
+            ...(style !== null && style !== void 0 ? style : {}),
+        };
+    }, [style]);
+    const buttonContainer = (0, react_1.useMemo)(() => {
+        return {
+            padding: 10,
+            cursor: disabled ? 'inherit' : 'pointer',
+            fontSize: 14,
+            opacity: disabled ? 0.7 : 1,
+            ...(buttonContainerStyle !== null && buttonContainerStyle !== void 0 ? buttonContainerStyle : {}),
+        };
+    }, [buttonContainerStyle, disabled]);
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, id: id, style: combined, type: "button", disabled: disabled, onClick: onClick, autoFocus: autoFocus, title: title, children: (0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: buttonContainer, children: children }) }));
+};
+exports.Button = (0, react_1.forwardRef)(ButtonRefForwardFunction);

package/dist/components/CurrentCompositionSideEffects.js

@@ -36,7 +36,7 @@ exports.TitleUpdater = TitleUpdater;
 const CurrentCompositionKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const video = remotion_1.Internals.useVideo();
-    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
     const openRenderModal = (0, react_1.useCallback)(() => {
         if (!video) {
             return;

package/dist/components/Editor.d.ts

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

package/dist/components/Editor.js

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

package/dist/components/MenuBuildIndicator.js

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

package/dist/components/Modals.js

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

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

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

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

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

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

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

package/dist/components/NoRegisterRoot.js

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

package/dist/components/Notifications/ServerDisconnected.js

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

package/dist/components/RenderButton.js

@@ -23,10 +23,10 @@ const label = {
 const RenderButton = () => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
     const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
-    const tooltip = type === 'connected'
+    const tooltip = connectionStatus === 'connected'
         ? 'Export the current composition ' + shortcut
         : 'Connect to the Studio server to render';
     const iconStyle = (0, react_1.useMemo)(() => {

package/dist/components/RenderModal/DataEditor.js

@@ -30,7 +30,6 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
-const event_source_1 = require("../../helpers/event-source");
 const get_zod_if_possible_1 = require("../get-zod-if-possible");
 const layout_1 = require("../layout");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
@@ -182,12 +181,13 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
     (0, react_1.useEffect)(() => {
         checkIfCanSaveDefaultProps();
     }, [checkIfCanSaveDefaultProps]);
+    const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     (0, react_1.useEffect)(() => {
-        const unsub = (0, event_source_1.subscribeToEvent)('root-file-changed', checkIfCanSaveDefaultProps);
+        const unsub = subscribeToEvent('root-file-changed', checkIfCanSaveDefaultProps);
         return () => {
             unsub();
         };
-    }, [checkIfCanSaveDefaultProps]);
+    }, [checkIfCanSaveDefaultProps, subscribeToEvent]);
     const modeItems = (0, react_1.useMemo)(() => {
         return [
             {
@@ -248,7 +248,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
         unresolvedComposition.id,
         unresolvedComposition.defaultProps,
     ]);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    const connectionStatus = previewServerState.type;
     const warnings = (0, react_1.useMemo)(() => {
         return (0, get_render_modal_warnings_1.getRenderModalWarnings)({
             canSaveDefaultProps,

package/dist/components/RenderPreview.js

@@ -22,7 +22,8 @@ const errMsgStyle = {
 const RenderPreview = ({ path, assetMetadata }) => {
     const fileType = (0, Preview_1.getPreviewFileType)(path);
     const src = get_asset_metadata_1.remotion_outputsBase + path;
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
     if (connectionStatus === 'disconnected') {
         return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "Studio server disconnected" });
     }

package/dist/components/RenderQueue/index.js

@@ -58,7 +58,8 @@ const renderQueue = {
     overflowY: 'auto',
 };
 const RenderQueue = () => {
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const previousJobCount = react_1.default.useRef(jobs.length);

package/dist/components/SidebarRenderButton.js

@@ -17,7 +17,8 @@ const SidebarRenderButton = ({ composition, visible }) => {
             },
         };
     }, []);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const onClick = (0, react_1.useCallback)((e) => {
         var _a;

package/dist/components/StaticFilePreview.js

@@ -23,7 +23,8 @@ const StaticFilePreview = ({ currentAsset, assetMetadata }) => {
     const fileType = (0, Preview_1.getPreviewFileType)(currentAsset);
     const staticFileSrc = (0, remotion_1.staticFile)(currentAsset);
     const staticFiles = (0, remotion_1.getStaticFiles)();
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
     const exists = staticFiles.find((file) => file.name === currentAsset);
     if (connectionStatus === 'disconnected') {
         return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "Studio server disconnected" });

package/dist/components/Studio.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Studio: React.FC<{
+    rootComponent: React.FC;
+}>;

package/dist/components/Studio.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Studio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = require("react-dom");
+const remotion_1 = require("remotion");
+const Editor_1 = require("./Editor");
+const EditorContexts_1 = require("./EditorContexts");
+const ServerDisconnected_1 = require("./Notifications/ServerDisconnected");
+const getServerDisconnectedDomElement = () => {
+    return document.getElementById('server-disconnected-overlay');
+};
+const Studio = ({ rootComponent }) => {
+    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, { Root: rootComponent }), (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }));
+};
+exports.Studio = Studio;

package/dist/components/render-defaults.d.ts

@@ -0,0 +1,40 @@
+import type { AudioCodec, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
+export type RenderDefaults = {
+    jpegQuality: number;
+    scale: number;
+    logLevel: LogLevel;
+    codec: Codec;
+    concurrency: number;
+    minConcurrency: number;
+    muted: boolean;
+    maxConcurrency: number;
+    stillImageFormat: StillImageFormat;
+    videoImageFormat: VideoImageFormat;
+    audioCodec: AudioCodec | null;
+    enforceAudioTrack: boolean;
+    proResProfile: ProResProfile;
+    x264Preset: X264Preset;
+    pixelFormat: PixelFormat;
+    audioBitrate: string | null;
+    videoBitrate: string | null;
+    encodingBufferSize: string | null;
+    encodingMaxRate: string | null;
+    userAgent: string | null;
+    everyNthFrame: number;
+    numberOfGifLoops: number | null;
+    delayRenderTimeout: number;
+    disableWebSecurity: boolean;
+    openGlRenderer: OpenGlRenderer | null;
+    ignoreCertificateErrors: boolean;
+    offthreadVideoCacheSizeInBytes: number | null;
+    headless: boolean;
+    colorSpace: ColorSpace;
+    multiProcessOnLinux: boolean;
+    beepOnFinish: boolean;
+    repro: boolean;
+};
+declare global {
+    interface Window {
+        remotion_renderDefaults: RenderDefaults | undefined;
+    }
+}

package/dist/components/render-defaults.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/error-overlay/react-overlay/utils/make-stack-frame.d.ts

@@ -0,0 +1,7 @@
+import type { StackFrame } from '@remotion/studio-shared';
+export declare const makeStackFrame: ({ functionName, fileName, lineNumber, columnNumber, }: {
+    functionName: string | null;
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+}) => StackFrame;

package/dist/error-overlay/react-overlay/utils/make-stack-frame.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeStackFrame = void 0;
+const makeStackFrame = ({ functionName, fileName, lineNumber, columnNumber, }) => {
+    if (functionName && functionName.indexOf('Object.') === 0) {
+        functionName = functionName.slice('Object.'.length);
+    }
+    if (
+    // Chrome has a bug with inferring function.name:
+    // https://github.com/facebook/create-react-app/issues/2097
+    // Let's ignore a meaningless name we get for top-level modules.
+    functionName === 'friendlySyntaxErrorLabel' ||
+        functionName === 'exports.__esModule' ||
+        functionName === '<anonymous>' ||
+        !functionName) {
+        functionName = null;
+    }
+    return {
+        columnNumber,
+        fileName,
+        functionName,
+        lineNumber,
+    };
+};
+exports.makeStackFrame = makeStackFrame;

package/dist/helpers/client-id.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { EventSourceEvent } from '../event-source-events';
 type PreviewServerState = {
     type: 'init';
 } | {
@@ -7,10 +8,11 @@ type PreviewServerState = {
 } | {
     type: 'disconnected';
 };
-export declare const StudioServerConnectionCtx: React.Context<PreviewServerState>;
-export declare const studioServerConnectionRef: React.RefObject<{
-    set: (jobs: PreviewServerState) => void;
-}>;
+type Context = {
+    previewServerState: PreviewServerState;
+    subscribeToEvent: (type: EventSourceEvent['type'], listener: (event: EventSourceEvent) => void) => () => void;
+};
+export declare const StudioServerConnectionCtx: React.Context<Context>;
 export declare const PreviewServerConnection: React.FC<{
     children: React.ReactNode;
 }>;

package/dist/helpers/client-id.js

@@ -22,25 +22,108 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewServerConnection = exports.studioServerConnectionRef = exports.StudioServerConnectionCtx = void 0;
+exports.PreviewServerConnection = exports.StudioServerConnectionCtx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
+const PlayBeepSound_1 = __importDefault(require("../components/PlayBeepSound"));
+const context_1 = require("../components/RenderQueue/context");
 exports.StudioServerConnectionCtx = react_1.default.createContext({
-    type: 'init',
+    previewServerState: {
+        type: 'init',
+    },
+    subscribeToEvent: () => {
+        throw new Error('Context not initalized');
+    },
 });
-exports.studioServerConnectionRef = (0, react_1.createRef)();
 const PreviewServerConnection = ({ children }) => {
+    const listeners = (0, react_1.useRef)([]);
+    const subscribeToEvent = (0, react_1.useCallback)((type, listener) => {
+        listeners.current.push({ type, listener });
+        return () => {
+            listeners.current = listeners.current.filter((l) => l.type !== type || l.listener !== listener);
+        };
+    }, []);
+    const openEventSource = (0, react_1.useCallback)(() => {
+        const source = new EventSource('/events');
+        source.addEventListener('message', (event) => {
+            var _a;
+            const newEvent = JSON.parse(event.data);
+            if (newEvent.type === 'new-input-props' ||
+                newEvent.type === 'new-env-variables') {
+                window.location.reload();
+            }
+            if (newEvent.type === 'init') {
+                setState({
+                    type: 'connected',
+                    clientId: newEvent.clientId,
+                });
+            }
+            if (newEvent.type === 'render-queue-updated') {
+                (_a = context_1.renderJobsRef.current) === null || _a === void 0 ? void 0 : _a.updateRenderJobs(newEvent.queue);
+                for (const job of newEvent.queue) {
+                    if (job.status === 'done' && job.beepOnFinish) {
+                        (0, PlayBeepSound_1.default)(job.id);
+                    }
+                }
+            }
+            if (newEvent.type === 'render-job-failed') {
+                (0, NotificationCenter_1.sendErrorNotification)(`Rendering "${newEvent.compositionId}" failed`);
+            }
+            if (newEvent.type === 'new-public-folder') {
+                const payload = {
+                    files: newEvent.files,
+                };
+                window.dispatchEvent(new CustomEvent(remotion_1.Internals.WATCH_REMOTION_STATIC_FILES, {
+                    detail: payload,
+                }));
+                window.remotion_staticFiles = newEvent.files;
+                window.remotion_publicFolderExists = newEvent.folderExists;
+            }
+            listeners.current.forEach((l) => {
+                if (l.type === newEvent.type) {
+                    l.listener(newEvent);
+                }
+            });
+        });
+        source.addEventListener('open', () => {
+            source.addEventListener('error', () => {
+                setState({ type: 'disconnected' });
+                // Display an error message that the studio server has disconnected.
+                source === null || source === void 0 ? void 0 : source.close();
+                // Retry later
+                setTimeout(() => {
+                    openEventSource();
+                }, 1000);
+            }, { once: true });
+        });
+        const close = () => {
+            source.close();
+        };
+        return {
+            close,
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const { close } = openEventSource();
+        return () => {
+            close();
+        };
+    }, [openEventSource]);
     const [state, setState] = react_1.default.useState({
         type: 'init',
     });
-    (0, react_1.useImperativeHandle)(exports.studioServerConnectionRef, () => {
+    const context = (0, react_1.useMemo)(() => {
         return {
-            set: (newState) => {
-                setState(newState);
-            },
+            previewServerState: state,
+            subscribeToEvent,
         };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(exports.StudioServerConnectionCtx.Provider, { value: state, children: children }));
+    }, [state, subscribeToEvent]);
+    return ((0, jsx_runtime_1.jsx)(exports.StudioServerConnectionCtx.Provider, { value: context, children: children }));
 };
 exports.PreviewServerConnection = PreviewServerConnection;

package/dist/helpers/colors.d.ts

@@ -23,4 +23,4 @@ export declare const TIMELINE_TRACK_SEPARATOR = "rgba(0, 0, 0, 0.3)";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.25)" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

package/dist/helpers/presets-labels.d.ts

@@ -1,2 +1,2 @@
 import type { X264Preset } from '@remotion/renderer';
-export declare const labelx264Preset: (profile: X264Preset) => "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";
+export declare const labelx264Preset: (profile: X264Preset) => "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow" | "placebo";

package/dist/helpers/retry-payload.d.ts

@@ -0,0 +1,3 @@
+import type { RenderJob } from '@remotion/studio-shared';
+import type { RenderModalState } from '../state/modals';
+export declare const makeRetryPayload: (job: RenderJob) => RenderModalState;