@remotion/studio 4.0.499 → 4.0.501

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/Overlay.js

@@ -4,7 +4,7 @@ exports.Overlay = exports.setErrorsRef = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const MenuToolbar_1 = require("../../components/MenuToolbar");
+const menu_toolbar_height_1 = require("../../components/menu-toolbar-height");
 const colors_1 = require("../../helpers/colors");
 const keybindings_1 = require("../../state/keybindings");
 const ErrorLoader_1 = require("./ErrorLoader");
@@ -45,8 +45,8 @@ const Overlay = () => {
                 backgroundColor: BACKGROUND_COLOR,
                 overflow: 'auto',
                 color: colors_1.WHITE,
-                top: MenuToolbar_1.MENU_TOOLBAR_HEIGHT,
-                height: `calc(100% - ${MenuToolbar_1.MENU_TOOLBAR_HEIGHT}px)`,
+                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

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

@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShortcutHint = exports.cmdOrCtrlCharacter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const is_mac_1 = require("../../helpers/is-mac");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-exports.cmdOrCtrlCharacter = typeof window !== 'undefined' && window.navigator.platform.startsWith('Mac')
-    ? '⌘'
-    : 'Ctrl';
+exports.cmdOrCtrlCharacter = is_mac_1.isMac ? '⌘' : 'Ctrl';
 const container = {
     display: 'inline-block',
     marginLeft: 6,