@remotion/studio 4.0.454 → 4.0.456

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

@@ -4,6 +4,7 @@ exports.StackElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Button_1 = require("../../components/Button");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
 const carets_1 = require("./carets");
 const CodeFrame_1 = require("./CodeFrame");
 const format_location_1 = require("./format-location");
@@ -40,13 +41,33 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
             !((_b = s.originalFileName) === null || _b === void 0 ? void 0 : _b.startsWith('webpack/'))) ||
             isFirst;
     });
+    const [locationHovered, setLocationHovered] = (0, react_1.useState)(false);
+    const canOpenFileLocation = Boolean(window.remotion_editorName && s.originalFileName);
+    const onOpenFileLocation = (0, react_1.useCallback)(() => {
+        if (!canOpenFileLocation) {
+            return;
+        }
+        (0, open_in_editor_1.openInEditor)(s).catch((err) => {
+            // eslint-disable-next-line no-console
+            console.log('Could not open in editor', err);
+        });
+    }, [canOpenFileLocation, s]);
     const toggleCodeFrame = (0, react_1.useCallback)(() => {
         setShowCodeFrame((f) => !f);
     }, []);
     return (jsx_runtime_1.jsxs("div", { className: "css-reset", children: [
             jsx_runtime_1.jsxs("div", { style: header, children: [
                     jsx_runtime_1.jsxs("div", { style: left, children: [
-                            jsx_runtime_1.jsx("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? (jsx_runtime_1.jsxs("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? jsx_runtime_1.jsx(carets_1.CaretDown, { invert: false }) : jsx_runtime_1.jsx(carets_1.CaretRight, {}) })) : null] }), jsx_runtime_1.jsx("div", { children: s.originalScriptCode &&
+                            jsx_runtime_1.jsx("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? (jsx_runtime_1.jsx("div", { style: location, children: canOpenFileLocation ? (jsx_runtime_1.jsxs("span", { onClick: onOpenFileLocation, onPointerEnter: () => {
+                                        setLocationHovered(true);
+                                    }, onPointerLeave: () => {
+                                        setLocationHovered(false);
+                                    }, style: {
+                                        ...location,
+                                        cursor: 'pointer',
+                                        textDecoration: locationHovered ? 'underline' : 'none',
+                                        textUnderlineOffset: locationHovered ? 4 : undefined,
+                                    }, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? jsx_runtime_1.jsx(carets_1.CaretDown, { invert: false }) : jsx_runtime_1.jsx(carets_1.CaretRight, {}) })) : null] }), jsx_runtime_1.jsx("div", { children: s.originalScriptCode &&
                     s.originalScriptCode.length > 0 &&
                     showCodeFrame ? (jsx_runtime_1.jsx(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })
         ] }));