@remotion/studio 4.0.512 → 4.0.513

package/dist/components/sequence-props-api.js

@@ -3,6 +3,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.unsubscribeFromSequenceProps = exports.subscribeToSequenceProps = exports.saveSequenceProps = void 0;
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const call_api_1 = require("./call-api");
+let pendingSequencePropsSubscriptions = [];
+let sequencePropsSubscriptionTimer = null;
+const flushSequencePropsSubscriptions = () => {
+    sequencePropsSubscriptionTimer = null;
+    const pending = pendingSequencePropsSubscriptions;
+    pendingSequencePropsSubscriptions = [];
+    const firstRequest = pending[0].request;
+    (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
+        ...firstRequest,
+        requests: pending.map(({ request }) => request),
+    }).then((response) => {
+        if (!Array.isArray(response.results)) {
+            pending[0].resolve(response);
+            const error = new Error('Legacy single subscription response received for a batched request');
+            for (const item of pending.slice(1)) {
+                item.reject(error);
+            }
+            return;
+        }
+        if (response.results.length !== pending.length) {
+            const error = new Error(`Expected ${pending.length} sequence prop subscription results, got ${response.results.length}`);
+            for (const item of pending) {
+                item.reject(error);
+            }
+            return;
+        }
+        for (let index = 0; index < pending.length; index++) {
+            pending[index].resolve(response.results[index]);
+        }
+    }, (error) => {
+        for (const item of pending) {
+            item.reject(error);
+        }
+    });
+};
 const saveSequenceProps = (request) => {
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     return browserStudioOperations
@@ -12,9 +47,15 @@ const saveSequenceProps = (request) => {
 exports.saveSequenceProps = saveSequenceProps;
 const subscribeToSequenceProps = (request) => {
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
-    return browserStudioOperations
-        ? browserStudioOperations.subscribeToSequenceProps(request)
-        : (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', request);
+    if (browserStudioOperations) {
+        return browserStudioOperations.subscribeToSequenceProps(request);
+    }
+    return new Promise((resolve, reject) => {
+        pendingSequencePropsSubscriptions.push({ request, resolve, reject });
+        if (sequencePropsSubscriptionTimer === null) {
+            sequencePropsSubscriptionTimer = setTimeout(flushSequencePropsSubscriptions, 0);
+        }
+    });
 };
 exports.subscribeToSequenceProps = subscribeToSequenceProps;
 const unsubscribeFromSequenceProps = (request) => {

package/dist/components/use-default-editor-info.d.ts

@@ -1,5 +1,13 @@
 import type { EditorPickerId, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
 export declare const canUseEditorPicker: (previewServerConnected: boolean) => boolean;
+export declare const canOpenInEditor: (previewServerConnected: boolean) => boolean;
 export declare const getPreferredEditorId: (editorInfo: GetDefaultEditorInfoResponse | null) => EditorPickerId | null;
+export declare const useEditorOpening: (previewServerConnected: boolean) => {
+    canConfigureApps: boolean;
+    canOpenInEditor: boolean;
+    defaultEditorId: EditorPickerId | null;
+    defaultEditorName: string | null;
+    editorInfo: GetDefaultEditorInfoResponse | null;
+};
 export declare const useDefaultEditorInfo: (enabled: boolean) => GetDefaultEditorInfoResponse | null;
 export declare const useDefaultCodingAgentInfo: (enabled: boolean) => import("@remotion/studio-shared").GetDefaultCodingAgentInfoResponse | null;

package/dist/components/use-default-editor-info.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDefaultCodingAgentInfo = exports.useDefaultEditorInfo = exports.getPreferredEditorId = exports.canUseEditorPicker = void 0;
+exports.useDefaultCodingAgentInfo = exports.useDefaultEditorInfo = exports.useEditorOpening = exports.getPreferredEditorId = exports.canOpenInEditor = exports.canUseEditorPicker = void 0;
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const SettingsContext_1 = require("./SettingsContext");
 const canUseEditorPicker = (previewServerConnected) => {
@@ -9,6 +9,10 @@ const canUseEditorPicker = (previewServerConnected) => {
         (0, browser_studio_operations_1.getBrowserStudioOperations)() === null);
 };
 exports.canUseEditorPicker = canUseEditorPicker;
+const canOpenInEditor = (previewServerConnected) => {
+    return previewServerConnected && (0, browser_studio_operations_1.getBrowserStudioOperations)() === null;
+};
+exports.canOpenInEditor = canOpenInEditor;
 const preferredFallbackEditorIds = [
     'zed',
     'vscode',
@@ -17,17 +21,14 @@ const preferredFallbackEditorIds = [
 const getPreferredEditorId = (editorInfo) => {
     var _a, _b, _c;
     var _d;
-    const runningEditorId = (_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.nameWithType === window.remotion_editorName)) === null || _a === void 0 ? void 0 : _a.id;
-    if (runningEditorId) {
-        return runningEditorId;
-    }
-    if (window.remotion_editorName !== null) {
-        return null;
-    }
-    const configuredEditorId = (_b = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.id === editorInfo.defaultEditor)) === null || _b === void 0 ? void 0 : _b.id;
+    const configuredEditorId = (_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.id === editorInfo.defaultEditor)) === null || _a === void 0 ? void 0 : _a.id;
     if (configuredEditorId) {
         return configuredEditorId;
     }
+    const runningEditorId = (_b = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.nameWithType === window.remotion_editorName)) === null || _b === void 0 ? void 0 : _b.id;
+    if (runningEditorId) {
+        return runningEditorId;
+    }
     return ((_d = (_c = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.slice().sort((a, b) => {
         const aPriority = preferredFallbackEditorIds.indexOf(a.id);
         const bPriority = preferredFallbackEditorIds.indexOf(b.id);
@@ -40,6 +41,21 @@ const getPreferredEditorId = (editorInfo) => {
     }).at(0)) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null);
 };
 exports.getPreferredEditorId = getPreferredEditorId;
+const useEditorOpening = (previewServerConnected) => {
+    var _a;
+    const editorConnectionAvailable = (0, exports.canOpenInEditor)(previewServerConnected);
+    const editorInfo = (0, exports.useDefaultEditorInfo)(editorConnectionAvailable);
+    const defaultEditorId = (0, exports.getPreferredEditorId)(editorInfo);
+    const defaultEditor = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.id === defaultEditorId);
+    return {
+        canConfigureApps: (0, exports.canUseEditorPicker)(previewServerConnected),
+        canOpenInEditor: editorConnectionAvailable && defaultEditorId !== null,
+        defaultEditorId,
+        defaultEditorName: (_a = defaultEditor === null || defaultEditor === void 0 ? void 0 : defaultEditor.nameWithType) !== null && _a !== void 0 ? _a : null,
+        editorInfo,
+    };
+};
+exports.useEditorOpening = useEditorOpening;
 const useDefaultEditorInfo = (enabled) => {
     const { editorInfo } = (0, SettingsContext_1.useSettings)();
     return enabled ? editorInfo : null;

package/dist/error-overlay/remotion-overlay/ErrorDisplay.js

@@ -7,6 +7,8 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const layout_1 = require("../../components/layout");
 const is_menu_item_1 = require("../../components/Menu/is-menu-item");
+const use_default_editor_info_1 = require("../../components/use-default-editor-info");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const AskOnDiscord_1 = require("./AskOnDiscord");
 const CalculateMetadataErrorExplainer_1 = require("./CalculateMetadataErrorExplainer");
@@ -52,6 +54,8 @@ const spacer = {
 };
 const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, symbolicationFailure, }) => {
     var _a;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { canOpenInEditor, defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
     const highestLineNumber = Math.max(0, ...display.stackFrames
         .map((s) => s.originalScriptCode)
         .flat(1)
@@ -86,8 +90,11 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
     return (jsx_runtime_1.jsxs("div", { children: [
             jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: display.error.name, message: message, canHaveDismissButton: canHaveDismissButton }), helpLink ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(HelpLink_1.HelpLink, { link: helpLink, canHaveKeyboardShortcuts: keyboardShortcuts }), jsx_runtime_1.jsx("div", { style: spacer })
-                ] })) : null, display.stackFrames.length > 0 && window.remotion_editorName ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, stack: display.stackFrames[0] }), jsx_runtime_1.jsx("div", { style: spacer })
+                ] })) : null, display.stackFrames.length > 0 &&
+                canOpenInEditor &&
+                defaultEditorId &&
+                defaultEditorName ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, editorId: defaultEditorId, editorName: defaultEditorName, stack: display.stackFrames[0] }), jsx_runtime_1.jsx("div", { style: spacer })
                 ] })) : null, jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { errorText: errorTextForCopy }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), onRetry ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Retry_1.RetryButton, { onClick: onRetry, label: calculateMetadata ? 'Retry calculateMetadata()' : 'Retry' })
                 ] })) : null, calculateMetadata ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
@@ -97,7 +104,7 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
                 ] })) : null, display.stackFrames.length > 0 ? (jsx_runtime_1.jsx("div", { style: stack, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: display.stackFrames.map((s, i) => {
                     return (jsx_runtime_1.jsx(StackFrame_1.StackElement
                     // eslint-disable-next-line react/no-array-index-key
-                    , { isFirst: i === 0, s: s, lineNumberWidth: lineNumberWidth, defaultFunctionName: '(anonymous function)' }, i));
+                    , { isFirst: i === 0, s: s, lineNumberWidth: lineNumberWidth, defaultFunctionName: '(anonymous function)', editorId: canOpenInEditor ? defaultEditorId : null }, i));
                 }) })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("pre", { "aria-label": "Unsymbolicated stack trace", className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: rawStack, children: (_a = display.error.stack) !== null && _a !== void 0 ? _a : 'Check the Terminal and browser console for error messages.' }), symbolicationFailure ? (jsx_runtime_1.jsx("div", { style: symbolicationFailureStyle, children: symbolicationFailure })) : null] }))] }));
 };

package/dist/error-overlay/remotion-overlay/OpenInEditor.d.ts

@@ -1,6 +1,8 @@
-import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+import type { EditorPickerId, SymbolicatedStackFrame } from '@remotion/studio-shared';
 import React from 'react';
 export declare const OpenInEditor: React.FC<{
     readonly stack: SymbolicatedStackFrame;
     readonly canHaveKeyboardShortcuts: boolean;
+    readonly editorId: EditorPickerId;
+    readonly editorName: string;
 }>;

package/dist/error-overlay/remotion-overlay/OpenInEditor.js

@@ -31,7 +31,7 @@ const reducer = (state, action) => {
     }
     return state;
 };
-const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
+const OpenInEditor = ({ stack, canHaveKeyboardShortcuts, editorId, editorName }) => {
     const isMounted = (0, react_1.useRef)(true);
     const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
     const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
@@ -42,7 +42,7 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
     }, []);
     const openInBrowser = (0, react_1.useCallback)(() => {
         dispatch({ type: 'start' });
-        (0, open_in_editor_1.openInEditor)(stack, null)
+        (0, open_in_editor_1.openInEditor)(stack, editorId)
             .then((data) => {
             if (data.success) {
                 dispatchIfMounted({ type: 'succeed' });
@@ -60,7 +60,7 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
                 dispatchIfMounted({ type: 'reset' });
             }, 2000);
         });
-    }, [dispatchIfMounted, stack]);
+    }, [dispatchIfMounted, editorId, stack]);
     (0, react_1.useEffect)(() => {
         return () => {
             isMounted.current = false;
@@ -89,15 +89,15 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
             case 'error':
                 return 'Failed to open';
             case 'idle':
-                return `Open in ${window.remotion_editorName}`;
+                return `Open in ${editorName}`;
             case 'success':
-                return `Opened in ${window.remotion_editorName}`;
+                return `Opened in ${editorName}`;
             case 'load':
                 return `Opening...`;
             default:
                 throw new Error('invalid state');
         }
-    }, [state.type]);
+    }, [editorName, state.type]);
     return (jsx_runtime_1.jsxs(Button_1.Button, { onClick: openInBrowser, disabled: state.type !== 'idle', children: [label, canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "o", cmdOrCtrl: true })) : null] }));
 };
 exports.OpenInEditor = OpenInEditor;

package/dist/error-overlay/remotion-overlay/Overlay.js

@@ -5,6 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const menu_toolbar_height_1 = require("../../components/menu-toolbar-height");
+const SettingsContext_1 = require("../../components/SettingsContext");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const keybindings_1 = require("../../state/keybindings");
 const ErrorLoader_1 = require("./ErrorLoader");
@@ -41,17 +43,17 @@ const Overlay = () => {
     if (errors.errors.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: {
-                backgroundColor: BACKGROUND_COLOR,
-                overflow: 'auto',
-                color: colors_1.WHITE,
-                top: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
-                height: `calc(100% - ${menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT}px)`,
-            }, children: errors.errors.map((err, i) => {
-                var _a;
-                return (jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader
-                // eslint-disable-next-line react/no-array-index-key
-                , { keyboardShortcuts: i === 0, error: err, onRetry: null, canHaveDismissButton: true, calculateMetadata: false }, ((_a = err.stack) !== null && _a !== void 0 ? _a : '') + i));
-            }) }) }));
+    return (jsx_runtime_1.jsx(client_id_1.PreviewServerConnection, { children: jsx_runtime_1.jsx(SettingsContext_1.SettingsProvider, { children: jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: {
+                        backgroundColor: BACKGROUND_COLOR,
+                        overflow: 'auto',
+                        color: colors_1.WHITE,
+                        top: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
+                        height: `calc(100% - ${menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT}px)`,
+                    }, children: errors.errors.map((err, i) => {
+                        var _a;
+                        return (jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader
+                        // eslint-disable-next-line react/no-array-index-key
+                        , { keyboardShortcuts: i === 0, error: err, onRetry: null, canHaveDismissButton: true, calculateMetadata: false }, ((_a = err.stack) !== null && _a !== void 0 ? _a : '') + i));
+                    }) }) }) }) }));
 };
 exports.Overlay = Overlay;

package/dist/error-overlay/remotion-overlay/StackFrame.d.ts

@@ -1,8 +1,9 @@
-import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+import type { EditorPickerId, SymbolicatedStackFrame } from '@remotion/studio-shared';
 import React from 'react';
 export declare const StackElement: React.FC<{
     readonly s: SymbolicatedStackFrame;
     readonly lineNumberWidth: number;
     readonly isFirst: boolean;
     readonly defaultFunctionName: string;
+    readonly editorId: EditorPickerId | null;
 }>;

package/dist/error-overlay/remotion-overlay/StackFrame.js

@@ -34,7 +34,7 @@ const fnName = {
     lineHeight: 1.5,
     marginBottom: 3,
 };
-const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
+const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editorId }) => {
     var _a;
     const [showCodeFrame, setShowCodeFrame] = (0, react_1.useState)(() => {
         var _a, _b;
@@ -43,16 +43,19 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
             isFirst;
     });
     const [locationHovered, setLocationHovered] = (0, react_1.useState)(false);
-    const canOpenFileLocation = Boolean(window.remotion_editorName && s.originalFileName);
+    const canOpenFileLocation = Boolean(editorId && s.originalFileName);
     const onOpenFileLocation = (0, react_1.useCallback)(() => {
         if (!canOpenFileLocation) {
             return;
         }
-        (0, open_in_editor_1.openInEditor)(s, null).catch((err) => {
+        if (!editorId) {
+            return;
+        }
+        (0, open_in_editor_1.openInEditor)(s, editorId).catch((err) => {
             // eslint-disable-next-line no-console
             console.log('Could not open in editor', err);
         });
-    }, [canOpenFileLocation, s]);
+    }, [canOpenFileLocation, editorId, s]);
     const toggleCodeFrame = (0, react_1.useCallback)(() => {
         setShowCodeFrame((f) => !f);
     }, []);