@remotion/studio 4.0.442 → 4.0.444

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -6,7 +6,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
-const useSequencePropsSubscription = (sequence, originalLocation) => {
+const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnabled) => {
     var _a;
     var _b, _c, _d, _e;
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
@@ -44,7 +44,12 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
     const currentLocationColumn = (0, react_1.useRef)(locationColumn);
     currentLocationColumn.current = locationColumn;
     const nodePathRef = (0, react_1.useRef)(null);
+    const [nodePath, setNodePath] = (0, react_1.useState)(null);
     const isMountedRef = (0, react_1.useRef)(true);
+    const setNodePathBoth = (0, react_1.useCallback)((next) => {
+        nodePathRef.current = next;
+        setNodePath(next);
+    }, []);
     (0, react_1.useEffect)(() => {
         isMountedRef.current = true;
         return () => {
@@ -52,12 +57,18 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
         };
     }, []);
     (0, react_1.useEffect)(() => {
+        if (!visualModeEnabled) {
+            setPropStatusesForSequence(null);
+            setNodePathBoth(null);
+            return;
+        }
         if (!clientId ||
             !locationSource ||
             !locationLine ||
             locationColumn === null ||
             !schemaKeysString) {
             setPropStatusesForSequence(null);
+            setNodePathBoth(null);
             return;
         }
         const keys = schemaKeysString.split(',');
@@ -75,16 +86,16 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
                 return;
             }
             if (result.canUpdate) {
-                nodePathRef.current = result.nodePath;
+                setNodePathBoth(result.nodePath);
                 setPropStatusesForSequence(result.props);
             }
             else {
-                nodePathRef.current = null;
+                setNodePathBoth(null);
                 setPropStatusesForSequence(null);
             }
         })
             .catch((err) => {
-            nodePathRef.current = null;
+            setNodePathBoth(null);
             remotion_1.Internals.Log.error(err);
             setPropStatusesForSequence(null);
         });
@@ -95,7 +106,7 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
             if (!isMountedRef.current) {
                 setPropStatusesForSequence(null);
             }
-            nodePathRef.current = null;
+            setNodePathBoth(null);
             if (currentNodePath) {
                 (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
                     fileName: locationSource,
@@ -107,14 +118,19 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
             }
         };
     }, [
+        visualModeEnabled,
         clientId,
         locationSource,
         locationLine,
         locationColumn,
         schemaKeysString,
         setPropStatusesForSequence,
+        setNodePathBoth,
     ]);
     (0, react_1.useEffect)(() => {
+        if (!visualModeEnabled) {
+            return;
+        }
         if (!locationSource || !locationLine || locationColumn === null) {
             return;
         }
@@ -132,6 +148,7 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
             }
             else {
                 setPropStatusesForSequence(null);
+                setNodePathBoth(null);
             }
         };
         const unsub = subscribeToEvent('sequence-props-updated', listener);
@@ -139,12 +156,14 @@ const useSequencePropsSubscription = (sequence, originalLocation) => {
             unsub();
         };
     }, [
+        visualModeEnabled,
         locationSource,
         locationLine,
         locationColumn,
         subscribeToEvent,
         setPropStatusesForSequence,
+        setNodePathBoth,
     ]);
-    return nodePathRef.current;
+    return nodePath;
 };
 exports.useSequencePropsSubscription = useSequencePropsSubscription;

package/dist/error-overlay/react-overlay/listen-to-runtime-errors.js

@@ -48,11 +48,7 @@ const crashWithFrames = (crash) => (error) => {
 function listenToRuntimeErrors(crash) {
     const crashWithFramesRunTime = crashWithFrames(crash);
     (0, unhandled_error_1.register)(window, (error) => {
-        return crashWithFramesRunTime({
-            message: error.message,
-            stack: error.stack,
-            name: error.name,
-        });
+        return crashWithFramesRunTime(error);
     });
     (0, unhandled_rejection_1.register)(window, (error) => {
         return crashWithFramesRunTime(error);

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CopyStackTrace: React.FC<{
+    readonly canHaveKeyboardShortcuts: boolean;
+    readonly errorText: string;
+}>;

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyStackTrace = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../components/Button");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const ShortcutHint_1 = require("./ShortcutHint");
+const CopyStackTrace = ({ canHaveKeyboardShortcuts, errorText }) => {
+    const [copyState, setCopyState] = (0, react_1.useState)('idle');
+    const handleCopyToClipboard = (0, react_1.useCallback)(() => {
+        navigator.clipboard
+            .writeText(errorText)
+            .then(() => {
+            setCopyState('copied');
+            setTimeout(() => setCopyState('idle'), 2000);
+        })
+            .catch(() => {
+            setCopyState('failed');
+            setTimeout(() => setCopyState('idle'), 2000);
+        });
+    }, [errorText]);
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 't',
+            callback: handleCopyToClipboard,
+            commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, handleCopyToClipboard, registerKeybinding]);
+    const label = (0, react_1.useMemo)(() => {
+        if (copyState === 'copied') {
+            return 'Copied!';
+        }
+        if (copyState === 'failed') {
+            return 'Failed!';
+        }
+        return 'Copy Stacktrace';
+    }, [copyState]);
+    return (jsx_runtime_1.jsxs(Button_1.Button, { onClick: handleCopyToClipboard, children: [label, ' ', copyState === 'idle' && canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { cmdOrCtrl: true, keyToPress: "t" })) : null] }));
+};
+exports.CopyStackTrace = CopyStackTrace;

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

@@ -4,15 +4,16 @@ exports.ErrorDisplay = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 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 url_state_1 = require("../../helpers/url-state");
 const AskOnDiscord_1 = require("./AskOnDiscord");
 const CalculateMetadataErrorExplainer_1 = require("./CalculateMetadataErrorExplainer");
-const CompositionIdsDropdown_1 = require("./CompositionIdsDropdown");
+const CopyStackTrace_1 = require("./CopyStackTrace");
 const ErrorTitle_1 = require("./ErrorTitle");
 const get_help_link_1 = require("./get-help-link");
 const HelpLink_1 = require("./HelpLink");
+const MediaPlaybackErrorExplainer_1 = require("./MediaPlaybackErrorExplainer");
 const OpenInEditor_1 = require("./OpenInEditor");
 const Retry_1 = require("./Retry");
 const SearchGitHubIssues_1 = require("./SearchGitHubIssues");
@@ -27,8 +28,6 @@ const spacer = {
     display: 'inline-block',
 };
 const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
-    var _a;
-    const compositionIds = (_a = window === null || window === void 0 ? void 0 : window.remotion_seenCompositionIds) !== null && _a !== void 0 ? _a : [];
     const highestLineNumber = Math.max(...display.stackFrames
         .map((s) => s.originalScriptCode)
         .flat(1)
@@ -50,23 +49,27 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
     }, [display.error]);
     const lineNumberWidth = String(highestLineNumber).length;
     const helpLink = (0, get_help_link_1.getHelpLink)(message);
-    const getCurrentCompositionId = () => {
-        var _a;
-        const route = (0, url_state_1.getRoute)();
-        const id = route.startsWith('/') ? route.slice(1) : route;
-        return compositionIds.includes(id) ? id : ((_a = compositionIds[0]) !== null && _a !== void 0 ? _a : null);
-    };
+    const errorTextForCopy = (0, react_1.useMemo)(() => {
+        const header = `${display.error.name}: ${message}`;
+        if (display.stackFrames.length > 0) {
+            const stackLines = display.stackFrames
+                .map((frame) => `at ${frame.originalFunctionName || '<anonymous>'} (${frame.originalFileName || 'unknown'}:${frame.originalLineNumber || '?'}:${frame.originalColumnNumber || '?'})`)
+                .join('\n');
+            return `${header}\n${stackLines}`;
+        }
+        return display.error.stack || header;
+    }, [display.stackFrames, display.error, message]);
     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, compositionIds.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(CompositionIdsDropdown_1.CompositionIdsDropdown, { compositionIds: compositionIds, currentId: getCurrentCompositionId() }), jsx_runtime_1.jsx("div", { style: spacer })
-                ] })) : null, 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: [
+                ] })) : null, jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { canHaveKeyboardShortcuts: keyboardShortcuts, 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 })
                 ] })) : null, calculateMetadata ? (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(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) => {
                     return (jsx_runtime_1.jsx(StackFrame_1.StackElement
                     // eslint-disable-next-line react/no-array-index-key

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MediaPlaybackErrorExplainer: React.FC<{
+    readonly src: string;
+}>;

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

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaPlaybackErrorExplainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const container = {
+    borderRadius: 3,
+    color: 'white',
+    padding: 12,
+    backgroundColor: colors_1.BORDER_COLOR,
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+};
+const codeStyle = {
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    padding: '2px 5px',
+    borderRadius: 3,
+    fontFamily: 'monospace',
+    fontSize: 13,
+};
+const linkStyle = {
+    color: '#58a6ff',
+};
+const MediaPlaybackErrorExplainer = ({ src }) => {
+    const [result, setResult] = (0, react_1.useState)({ type: 'loading' });
+    (0, react_1.useEffect)(() => {
+        fetch(src, { method: 'HEAD' })
+            .then((res) => {
+            var _a;
+            if (res.status === 404) {
+                setResult({ type: 'not-found' });
+            }
+            else if (!res.ok) {
+                setResult({ type: 'other-error', statusCode: res.status });
+            }
+            else {
+                const contentType = (_a = res.headers.get('content-type')) !== null && _a !== void 0 ? _a : '';
+                if (contentType.includes('text/html') ||
+                    contentType.includes('application/json')) {
+                    setResult({ type: 'wrong-content-type', contentType });
+                }
+                else {
+                    setResult({ type: 'ok' });
+                }
+            }
+        })
+            .catch(() => {
+            setResult({ type: 'fetch-error' });
+        });
+    }, [src]);
+    if (result.type === 'loading') {
+        return null;
+    }
+    if (result.type === 'not-found') {
+        return (jsx_runtime_1.jsxs("div", { style: container, children: ["The file ",
+                jsx_runtime_1.jsx("code", { style: codeStyle, children: src }),
+                " was not found (404).",
+                jsx_runtime_1.jsx("br", {}),
+                "If the file is in your ",
+                jsx_runtime_1.jsx("code", { style: codeStyle, children: "public/" }),
+                " folder, make sure to use", ' ', jsx_runtime_1.jsx("a", { style: linkStyle, href: "https://remotion.dev/docs/staticfile", target: "_blank", children: jsx_runtime_1.jsx("code", { style: codeStyle, children: "staticFile()" }) }), ' ', "to reference it.",
+                jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("a", { style: linkStyle, href: "https://remotion.dev/docs/media-playback-error", target: "_blank", children: "Learn more" })
+            ] }));
+    }
+    if (result.type === 'other-error') {
+        return (jsx_runtime_1.jsxs("div", { style: container, children: ["\u26A0\uFE0F Fetching ",
+                jsx_runtime_1.jsx("code", { style: codeStyle, children: src }),
+                " returned status code", ' ', result.statusCode, ".",
+                jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("a", { style: linkStyle, href: "https://remotion.dev/docs/media-playback-error", target: "_blank", children: "Learn more" })
+            ] }));
+    }
+    if (result.type === 'wrong-content-type') {
+        return (jsx_runtime_1.jsxs("div", { style: container, children: ["\u26A0\uFE0F Fetching ",
+                jsx_runtime_1.jsx("code", { style: codeStyle, children: src }),
+                " returned a", ' ', jsx_runtime_1.jsx("code", { style: codeStyle, children: result.contentType }),
+                " content type.",
+                jsx_runtime_1.jsx("br", {}),
+                "\uD83D\uDC49 If the file is in your ",
+                jsx_runtime_1.jsx("code", { style: codeStyle, children: "public/" }), ' ', "folder, make sure to use", ' ', jsx_runtime_1.jsx("a", { style: linkStyle, href: "https://remotion.dev/docs/staticfile", target: "_blank", children: jsx_runtime_1.jsx("code", { style: codeStyle, children: "staticFile()" }) }), ' ', "to reference it.",
+                jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("a", { style: linkStyle, href: "https://remotion.dev/docs/media-playback-error", target: "_blank", children: "Learn more" })
+            ] }));
+    }
+    return null;
+};
+exports.MediaPlaybackErrorExplainer = MediaPlaybackErrorExplainer;