@remotion/studio 4.0.500 → 4.0.502

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

@@ -0,0 +1,26 @@
+"use strict";
+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");
+const saveSequenceProps = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.saveSequenceProps(request)
+        : (0, call_api_1.callApi)('/api/save-sequence-props', 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);
+};
+exports.subscribeToSequenceProps = subscribeToSequenceProps;
+const unsubscribeFromSequenceProps = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.unsubscribeFromSequenceProps(request)
+        : (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', request);
+};
+exports.unsubscribeFromSequenceProps = unsubscribeFromSequenceProps;

package/dist/components/use-element-overwrite-confirmation.d.ts

@@ -0,0 +1,2 @@
+import type { InsertElementFileConflict } from '@remotion/studio-shared';
+export declare const useElementOverwriteConfirmation: () => (conflict: InsertElementFileConflict) => Promise<boolean>;

package/dist/components/use-element-overwrite-confirmation.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementOverwriteConfirmation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ConfirmationDialog_1 = require("./ConfirmationDialog");
+const filePathStyle = {
+    color: 'inherit',
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: 1.4,
+};
+const warningStyle = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.4,
+    marginTop: 12,
+};
+const sourceDetailsStyle = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: 1.4,
+    marginTop: 12,
+};
+const sourceSummaryStyle = {
+    color: 'inherit',
+    cursor: 'pointer',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 500,
+    lineHeight: 1.4,
+};
+const sourceCodeBlockStyle = {
+    backgroundColor: 'rgba(255, 255, 255, 0.06)',
+    borderRadius: 6,
+    color: 'inherit',
+    fontFamily: 'monospace',
+    fontSize: 12,
+    lineHeight: 1.5,
+    marginBottom: 0,
+    marginTop: 8,
+    maxHeight: 200,
+    overflow: 'auto',
+    padding: 12,
+    whiteSpace: 'pre',
+};
+const sourceCodeStyle = {
+    color: 'inherit',
+    fontFamily: 'monospace',
+    fontSize: 12,
+    lineHeight: 1.5,
+};
+const useElementOverwriteConfirmation = () => {
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    return (0, react_1.useCallback)((conflict) => {
+        return confirm({
+            title: 'Overwrite Element file?',
+            message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["The Element file", ' ', jsx_runtime_1.jsx("code", { style: filePathStyle, children: conflict.filePath }),
+                    " already exists with different contents.",
+                    jsx_runtime_1.jsx("div", { style: warningStyle, children: "Overwriting will replace local changes in this file. The composition will only be updated if you choose Overwrite." }), jsx_runtime_1.jsxs("details", { style: sourceDetailsStyle, open: true, children: [
+                            jsx_runtime_1.jsx("summary", { style: sourceSummaryStyle, children: "Existing source" }), jsx_runtime_1.jsx("pre", { style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: conflict.existingSource }) })
+                        ] }), jsx_runtime_1.jsxs("details", { style: sourceDetailsStyle, children: [
+                            jsx_runtime_1.jsx("summary", { style: sourceSummaryStyle, children: "Incoming source" }), jsx_runtime_1.jsx("pre", { style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: conflict.incomingSource }) })
+                        ] })
+                ] })),
+            confirmLabel: 'Overwrite',
+            cancelLabel: 'Cancel',
+        });
+    }, [confirm]);
+};
+exports.useElementOverwriteConfirmation = useElementOverwriteConfirmation;

package/dist/components/use-static-files.js

@@ -38,22 +38,27 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../api/get-static-files");
 const watch_public_folder_1 = require("../api/watch-public-folder");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const client_id_1 = require("../helpers/client-id");
 const StaticFilesContext = (0, react_1.createContext)([]);
 const StaticFilesProvider = ({ children }) => {
     const [files, setFiles] = (0, react_1.useState)(() => (0, get_static_files_1.getStaticFiles)());
     const env = (0, remotion_1.useRemotionEnvironment)();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const browserStudioCanWatch = previewServerState.type === 'connected' &&
+        (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     (0, react_1.useEffect)(() => {
         if (!env.isStudio) {
             return;
         }
-        if (env.isReadOnlyStudio) {
+        if (env.isReadOnlyStudio && !browserStudioCanWatch) {
             return;
         }
         const { cancel } = (0, watch_public_folder_1.watchPublicFolder)((newFiles) => {
             setFiles(newFiles);
         });
         return cancel;
-    }, [env.isStudio, env.isReadOnlyStudio]);
+    }, [browserStudioCanWatch, env.isStudio, env.isReadOnlyStudio]);
     return react_1.default.createElement(StaticFilesContext.Provider, { value: files }, children);
 };
 exports.StaticFilesProvider = StaticFilesProvider;

package/dist/error-overlay/react-overlay/effects/resolve-file-source.js

@@ -1,9 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveFileSource = void 0;
+const browser_studio_operations_1 = require("../../../helpers/browser-studio-operations");
 const resolveFileSource = async (location, contextLines) => {
-    const res = await fetch(`/api/file-source?f=${encodeURIComponent(location.fileName)}`);
-    const text = await res.text();
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    let text;
+    if (browserStudioOperations) {
+        const browserSource = await browserStudioOperations.getFileSource(location.fileName);
+        if (browserSource === null) {
+            throw new Error(`Could not find ${location.fileName}`);
+        }
+        text = browserSource;
+    }
+    else {
+        text = await (await fetch(`/api/file-source?f=${encodeURIComponent(location.fileName)}`)).text();
+    }
     const lines = text
         .split('\n')
         .map((l, i) => {

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

@@ -7,4 +7,5 @@ export declare const ErrorDisplay: React.FC<{
     readonly onRetry: OnRetry;
     readonly canHaveDismissButton: boolean;
     readonly calculateMetadata: boolean;
+    readonly symbolicationFailure: string | null;
 }>;

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

@@ -7,6 +7,7 @@ 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 colors_1 = require("../../helpers/colors");
 const AskOnDiscord_1 = require("./AskOnDiscord");
 const CalculateMetadataErrorExplainer_1 = require("./CalculateMetadataErrorExplainer");
 const CopyStackTrace_1 = require("./CopyStackTrace");
@@ -23,12 +24,35 @@ const stack = {
     overflowX: 'scroll',
     marginBottom: '10vh',
 };
+const rawStack = {
+    backgroundColor: colors_1.ERROR_CODE_FRAME_BACKGROUND,
+    boxSizing: 'border-box',
+    color: colors_1.WHITE,
+    fontFamily: 'monospace',
+    fontSize: 14,
+    lineHeight: 1.7,
+    marginBottom: 0,
+    marginTop: 17,
+    maxWidth: '100%',
+    overflowX: 'auto',
+    padding: 12,
+    whiteSpace: 'pre',
+};
+const symbolicationFailureStyle = {
+    color: colors_1.WHITE_ALPHA_60,
+    fontFamily: 'SF Pro Text, sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    marginBottom: '10vh',
+    marginTop: 24,
+};
 const spacer = {
     width: 5,
     display: 'inline-block',
 };
-const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
-    const highestLineNumber = Math.max(...display.stackFrames
+const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, symbolicationFailure, }) => {
+    var _a;
+    const highestLineNumber = Math.max(0, ...display.stackFrames
         .map((s) => s.originalScriptCode)
         .flat(1)
         .map((s) => {
@@ -70,11 +94,11 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(CalculateMetadataErrorExplainer_1.CalculateMetadataErrorExplainer, {})
                 ] })) : null, display.error instanceof remotion_1.MediaPlaybackError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(MediaPlaybackErrorExplainer_1.MediaPlaybackErrorExplainer, { src: display.error.src })
-                ] })) : null, jsx_runtime_1.jsx("div", { style: stack, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: display.stackFrames.map((s, i) => {
+                ] })) : 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));
-                }) })
-        ] }));
+                }) })) : (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] }))] }));
 };
 exports.ErrorDisplay = ErrorDisplay;

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

@@ -4,7 +4,6 @@ exports.ErrorLoader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
 const error_origin_1 = require("../error-origin");
 const listen_to_runtime_errors_1 = require("../react-overlay/listen-to-runtime-errors");
 const ErrorDisplay_1 = require("./ErrorDisplay");
@@ -19,17 +18,7 @@ const container = {
     marginRight: 'auto',
     fontFamily: 'SF Pro Text, sans-serif',
     paddingTop: '5vh',
-};
-const errorWhileErrorStyle = {
-    color: colors_1.WHITE,
-    lineHeight: 1.5,
-    whiteSpace: 'pre',
-};
-const errorWhileSymbolicatingStyle = {
-    color: colors_1.WHITE,
-    lineHeight: 1.5,
-    marginTop: 24,
-    opacity: 0.7,
+    boxSizing: 'border-box',
 };
 const shouldLogError = (error) => {
     return (!(0, error_origin_1.wasErrorLoggedByServer)(error) && (0, studio_shared_1.getLocationFromBuildError)(error) === null);
@@ -58,7 +47,6 @@ const logSymbolicatedStudioError = (record) => {
     });
 };
 const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
-    var _a;
     const [state, setState] = (0, react_1.useState)({
         type: 'loading',
     });
@@ -97,15 +85,11 @@ const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton,
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: true, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }) }));
     }
     if (state.type === 'error') {
-        return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: (_a = error.stack) !== null && _a !== void 0 ? _a : 'Check the Terminal and browser console for error messages.' }), jsx_runtime_1.jsxs("div", { style: errorWhileSymbolicatingStyle, children: ["Could not symbolicate the stack trace: ", state.err.message] })
-            ] }));
+        return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: { error, contextSize: 0, stackFrames: [] }, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata, symbolicationFailure: `Could not symbolicate the stack trace: ${state.err.message}` }) }));
     }
     if (state.type === 'no-record') {
-        return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: "Check the Terminal and browser console for error messages." })
-            ] }));
+        return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: { error, contextSize: 0, stackFrames: [] }, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata, symbolicationFailure: "Could not symbolicate the stack trace." }) }));
     }
-    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: state.record, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata }) }));
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: state.record, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata, symbolicationFailure: null }) }));
 };
 exports.ErrorLoader = ErrorLoader;