@remotion/cli 4.0.10 → 4.0.11

package/dist/codemods/stringify-with-path.js

@@ -13,24 +13,29 @@ const doesMatchPath = (path1, enumPaths) => {
         return item === p[index];
     }));
 };
-const stringifyDefaultProps = ({ props, enumPaths, }) => JSON.stringify(props, replacerWithPath(function (key, value, path) {
-    /* Don't replace with arrow function */ const item = this[key];
-    if (item instanceof Date) {
-        return `__REMOVEQUOTE__new Date('${item.toISOString()}')__REMOVEQUOTE__`;
-    }
-    if (typeof item === 'string' && doesMatchPath(path, enumPaths)) {
-        return `${item}__ADD_AS_CONST__`;
-    }
-    if (typeof item === 'string' && item.startsWith(remotion_1.Internals.FILE_TOKEN)) {
-        return `__REMOVEQUOTE____WRAP_IN_STATIC_FILE_START__${decodeURIComponent(item.replace(remotion_1.Internals.FILE_TOKEN, ''))}__WRAP_IN_STATIC_FILE_END____REMOVEQUOTE__`;
-    }
-    return value;
-}))
-    .replace(/"__REMOVEQUOTE__/g, '')
-    .replace(/__REMOVEQUOTE__"/g, '')
-    .replace(/__ADD_AS_CONST__"/g, '" as const')
-    .replace(/__WRAP_IN_STATIC_FILE_START__/g, 'staticFile("')
-    .replace(/__WRAP_IN_STATIC_FILE_END__/g, '")');
+const stringifyDefaultProps = ({ props, enumPaths, }) => {
+    return JSON.stringify(props, replacerWithPath(function (key, value, path) {
+        /* Don't replace with arrow function! This function uses `this` */
+        const item = this[key];
+        if (typeof item === 'string' && doesMatchPath(path, enumPaths)) {
+            return `${item}__ADD_AS_CONST__`;
+        }
+        if (typeof item === 'string' && item.startsWith(remotion_1.Internals.FILE_TOKEN)) {
+            return `__REMOVEQUOTE____WRAP_IN_STATIC_FILE_START__${decodeURIComponent(item.replace(remotion_1.Internals.FILE_TOKEN, ''))}__WRAP_IN_STATIC_FILE_END____REMOVEQUOTE__`;
+        }
+        if (typeof item === 'string' && item.startsWith(remotion_1.Internals.DATE_TOKEN)) {
+            return `__REMOVEQUOTE____WRAP_IN_DATE_START__${decodeURIComponent(item.replace(remotion_1.Internals.DATE_TOKEN, ''))}__WRAP_IN_DATE_END____REMOVEQUOTE__`;
+        }
+        return value;
+    }))
+        .replace(/"__REMOVEQUOTE__/g, '')
+        .replace(/__REMOVEQUOTE__"/g, '')
+        .replace(/__ADD_AS_CONST__"/g, '" as const')
+        .replace(/__WRAP_IN_STATIC_FILE_START__/g, 'staticFile("')
+        .replace(/__WRAP_IN_STATIC_FILE_END__/g, '")')
+        .replace(/__WRAP_IN_DATE_START__/g, 'new Date("')
+        .replace(/__WRAP_IN_DATE_END__/g, '")');
+};
 exports.stringifyDefaultProps = stringifyDefaultProps;
 function replacerWithPath(replacer) {
     const m = new Map();

package/dist/config/log.d.ts

@@ -1 +1 @@
-export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn", setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;
+export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;

package/dist/editor/components/KeyboardShortcutsExplainer.js

@@ -52,6 +52,6 @@ const li = {
     fontSize: 14,
 };
 const KeyboardShortcutsExplainer = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Sidebar" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "B" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle left sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle right sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle both sidebars" })] }), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "R" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Render composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Sidebar" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "B" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle left sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle right sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle both sidebars" })] }), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "R" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Render composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] }), ' ', (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Props Editor" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "S" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Save" })] })] })] })] }));
 };
 exports.KeyboardShortcutsExplainer = KeyboardShortcutsExplainer;

package/dist/editor/components/RenderModal/DataEditor.d.ts

@@ -17,4 +17,6 @@ export declare const DataEditor: React.FC<{
     setInputProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     mayShowSaveButton: boolean;
     propsEditType: PropsEditType;
+    saving: boolean;
+    setSaving: React.Dispatch<React.SetStateAction<boolean>>;
 }>;

package/dist/editor/components/RenderModal/DataEditor.js

@@ -87,9 +87,8 @@ const getPersistedShowWarningState = () => {
 const setPersistedShowWarningState = (val) => {
     localStorage.setItem(persistanceKey, String(Boolean(val)));
 };
-const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowSaveButton, propsEditType, }) => {
+const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowSaveButton, propsEditType, saving, setSaving, }) => {
     const [mode, setMode] = (0, react_1.useState)('schema');
-    const [saving, setSaving] = (0, react_1.useState)(false);
     const [showWarning, setShowWarningWithoutPersistance] = (0, react_1.useState)(() => getPersistedShowWarningState());
     const inJSONEditor = mode === 'json';
     const serializedJSON = (0, react_1.useMemo)(() => {
@@ -221,7 +220,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
     }, [unresolvedComposition.id, inputProps, schema, z]);
     (0, react_1.useEffect)(() => {
         setSaving(false);
-    }, [fastRefreshes]);
+    }, [fastRefreshes, setSaving]);
     const onSave = (0, react_1.useCallback)((updater) => {
         var _a;
         if (schema === 'no-zod' || schema === 'no-schema' || z === null) {
@@ -240,7 +239,13 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
             (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
             setSaving(false);
         });
-    }, [unresolvedComposition.defaultProps, unresolvedComposition.id, schema, z]);
+    }, [
+        schema,
+        z,
+        setSaving,
+        unresolvedComposition.id,
+        unresolvedComposition.defaultProps,
+    ]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
     const warnings = (0, react_1.useMemo)(() => {
         return (0, get_render_modal_warnings_1.getRenderModalWarnings)({

package/dist/editor/components/RenderModal/RenderModal.js

@@ -118,6 +118,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const isMounted = (0, react_1.useRef)(true);
     const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
     const [unclampedFrame, setFrame] = (0, react_1.useState)(() => initialFrame);
+    const [saving, setSaving] = (0, react_1.useState)(false);
     const [stillImageFormat, setStillImageFormat] = (0, react_1.useState)(() => initialStillImageFormat);
     const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)(() => initialVideoImageFormat);
     const [concurrency, setConcurrency] = (0, react_1.useState)(() => initialConcurrency);
@@ -584,7 +585,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
                             ...buttonStyle,
                             backgroundColor: outnameValidation.valid ? colors_1.BLUE : colors_1.BLUE_DISABLED,
-                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: rightPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, setPixelFormat: setPixelFormat, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { inputProps: inputProps, setInputProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props" })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables })) })] })] }));
+                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: rightPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, setPixelFormat: setPixelFormat, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { inputProps: inputProps, setInputProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables })) })] })] }));
 };
 const RenderModalWithLoader = (props) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);

package/dist/editor/components/RenderModal/SchemaEditor/SchemaEditor.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { AnyZodObject, z } from 'zod';
 export declare const SchemaEditor: React.FC<{
     schema: AnyZodObject;
-    value: unknown;
+    value: Record<string, unknown>;
     setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
     defaultProps: Record<string, unknown>;

package/dist/editor/components/RenderModal/SchemaEditor/SchemaEditor.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const use_keybinding_1 = require("../../../helpers/use-keybinding");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const is_menu_item_1 = require("../../Menu/is-menu-item");
+const deep_equal_1 = require("./deep-equal");
 const SchemaErrorMessages_1 = require("./SchemaErrorMessages");
 const ZodObjectEditor_1 = require("./ZodObjectEditor");
 const scrollable = {
@@ -13,10 +15,34 @@ const scrollable = {
     overflowY: 'auto',
 };
 const SchemaEditor = ({ schema, value, setValue, zodValidationResult, defaultProps, onSave, showSaveButton, saving, saveDisabledByParent, }) => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
+    const hasChanged = (0, react_1.useMemo)(() => {
+        return !(0, deep_equal_1.deepEqual)(defaultProps, value);
+    }, [defaultProps, value]);
+    const onQuickSave = (0, react_1.useCallback)(() => {
+        if (hasChanged && showSaveButton) {
+            onSave(() => {
+                return value;
+            });
+        }
+    }, [hasChanged, onSave, showSaveButton, value]);
+    (0, react_1.useEffect)(() => {
+        const save = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 's',
+            commandCtrlKey: true,
+            callback: onQuickSave,
+            preventDefault: true,
+            triggerIfInputFieldFocused: true,
+        });
+        return () => {
+            save.unregister();
+        };
+    }, [keybindings, onQuickSave, onSave]);
     const def = schema._def;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const typeName = def.typeName;

package/dist/editor/components/RenderModal/SchemaEditor/SchemaSaveButton.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaSaveButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../../helpers/colors");
 const InlineAction_1 = require("../../InlineAction");
 const icon = {
     height: 14,
@@ -10,7 +11,7 @@ const icon = {
 };
 const SchemaSaveButton = ({ onClick, disabled }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: disabled ? 'grey' : color, d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" }) }));
+        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: disabled ? colors_1.LIGHT_TEXT : color, d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" }) }));
     }, [disabled]);
     return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, disabled: disabled }));
 };

package/dist/editor/components/RightPanel.js

@@ -4,8 +4,10 @@ exports.RightPanel = exports.rightSidebarTabs = exports.persistSelectedPanel = v
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
 const colors_1 = require("../helpers/colors");
 const DataEditor_1 = require("./RenderModal/DataEditor");
+const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const RenderQueue_1 = require("./RenderQueue");
 const RendersTab_1 = require("./RendersTab");
 const Tabs_1 = require("./Tabs");
@@ -16,17 +18,10 @@ const container = {
     display: 'flex',
     flexDirection: 'column',
 };
-const PropsEditor = ({ composition }) => {
-    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const setInputProps = (0, react_1.useCallback)((newProps) => {
-        updateProps({
-            id: composition.id,
-            defaultProps: composition.defaultProps,
-            newProps,
-        });
-    }, [composition.defaultProps, composition.id, updateProps]);
-    const actualProps = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {}; }, [composition.defaultProps, composition.id, props]);
-    return ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props" }, composition.id));
+const circle = {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
 };
 const localStorageKey = 'remotion.sidebarPanel';
 const getSelectedPanel = () => {
@@ -45,6 +40,8 @@ const persistSelectedPanel = (panel) => {
 exports.persistSelectedPanel = persistSelectedPanel;
 exports.rightSidebarTabs = (0, react_1.createRef)();
 const RightPanel = () => {
+    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const [saving, setSaving] = (0, react_1.useState)(false);
     const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
         setPanel('input-props');
@@ -63,6 +60,14 @@ const RightPanel = () => {
         };
     }, []);
     const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const circleStyle = (0, react_1.useMemo)(() => {
+        const onTabColor = saving ? colors_1.LIGHT_TEXT : 'white';
+        return {
+            ...circle,
+            backgroundColor: panel === 'input-props' ? onTabColor : colors_1.LIGHT_TEXT,
+            cursor: 'help',
+        };
+    }, [panel, saving]);
     const composition = (0, react_1.useMemo)(() => {
         for (const comp of compositions) {
             if (comp.id === currentComposition) {
@@ -71,9 +76,37 @@ const RightPanel = () => {
         }
         return null;
     }, [compositions, currentComposition]);
+    const saveToolTip = (0, react_1.useMemo)(() => {
+        return process.env.KEYBOARD_SHORTCUTS_ENABLED
+            ? `Save using ${ShortcutHint_1.cmdOrCtrlCharacter}+S`
+            : 'There are unsaved changes';
+    }, []);
+    const setInputProps = (0, react_1.useCallback)((newProps) => {
+        if (composition === null) {
+            return;
+        }
+        updateProps({
+            id: composition.id,
+            defaultProps: composition.defaultProps,
+            newProps,
+        });
+    }, [composition, updateProps]);
+    const actualProps = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (composition === null) {
+            return {};
+        }
+        return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {};
+    }, [composition, props]);
+    const unsavedChangesExist = (0, react_1.useMemo)(() => {
+        if (composition === null || composition.defaultProps === undefined) {
+            return false;
+        }
+        return !(0, deep_equal_1.deepEqual)(composition.defaultProps, actualProps);
+    }, [actualProps, composition]);
     if (composition === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, children: "Props" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(PropsEditor, { composition: composition }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)("div", { title: saveToolTip, style: circleStyle })) : null] }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving }, composition.id))] }));
 };
 exports.RightPanel = RightPanel;

package/dist/editor/helpers/colors.d.ts

@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.25)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

package/dist/preview-server/error-overlay/remotion-overlay/Button.js

@@ -13,7 +13,6 @@ const button = {
     fontSize: 14,
     color: 'white',
     flexDirection: 'row',
-    display: 'flex',
 };
 const ButtonRefForwardFunction = ({ children, onClick, title, disabled, style, id, autoFocus, buttonContainerStyle, }, ref) => {
     const combined = (0, react_1.useMemo)(() => {

package/dist/preview-server/routes/update-default-props.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateDefaultPropsHandler = void 0;
 const node_fs_1 = require("node:fs");
-const remotion_1 = require("remotion");
 const update_default_props_1 = require("../../codemods/update-default-props");
 const project_info_1 = require("../project-info");
 const can_update_default_props_1 = require("./can-update-default-props");
@@ -16,7 +15,7 @@ const updateDefaultPropsHandler = async ({ input: { compositionId, defaultProps,
         const updated = await (0, update_default_props_1.updateDefaultProps)({
             compositionId,
             input: (0, node_fs_1.readFileSync)(projectInfo.videoFile, 'utf-8'),
-            newDefaultProps: remotion_1.Internals.deserializeJSONWithCustomFields(defaultProps),
+            newDefaultProps: JSON.parse(defaultProps),
             enumPaths,
         });
         (0, node_fs_1.writeFileSync)(projectInfo.videoFile, updated);

package/dist/render-flows/render.js

@@ -278,7 +278,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         proResProfile,
         jpegQuality: jpegQuality !== null && jpegQuality !== void 0 ? jpegQuality : renderer_1.RenderInternals.DEFAULT_JPEG_QUALITY,
         chromiumOptions,
-        timeoutInMilliseconds: config_1.ConfigInternals.getCurrentPuppeteerTimeout(),
+        timeoutInMilliseconds: puppeteerTimeout,
         scale,
         port,
         numberOfGifLoops,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.10",
+  "version": "4.0.11",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -35,11 +35,11 @@
     "prompts": "2.4.1",
     "semver": "7.5.3",
     "source-map": "0.6.1",
-    "@remotion/bundler": "4.0.10",
-    "@remotion/media-utils": "4.0.10",
-    "@remotion/player": "4.0.10",
-    "remotion": "4.0.10",
-    "@remotion/renderer": "4.0.10"
+    "@remotion/bundler": "4.0.11",
+    "@remotion/player": "4.0.11",
+    "@remotion/media-utils": "4.0.11",
+    "remotion": "4.0.11",
+    "@remotion/renderer": "4.0.11"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -65,8 +65,8 @@
     "typescript": "4.9.5",
     "vitest": "0.31.1",
     "zod": "^3.21.4",
-    "@remotion/zod-types": "4.0.10",
-    "@remotion/tailwind": "4.0.10"
+    "@remotion/tailwind": "4.0.11",
+    "@remotion/zod-types": "4.0.11"
   },
   "keywords": [
     "remotion",

package/dist/cloudrun-command.d.ts

@@ -1 +0,0 @@
-export declare const cloudrunCommand: (remotionRoot: string, args: string[]) => Promise<never>;

package/dist/cloudrun-command.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cloudrunCommand = void 0;
-const log_1 = require("./log");
-const get_package_manager_1 = require("./preview-server/get-package-manager");
-const update_available_1 = require("./preview-server/update-available");
-const cloudrunCommand = async (remotionRoot, args) => {
-    try {
-        const path = require.resolve('@remotion/cloudrun', {
-            paths: [remotionRoot],
-        });
-        const { CloudrunInternals } = require(path);
-        await CloudrunInternals.executeCommand(args, remotionRoot);
-        process.exit(0);
-    }
-    catch (err) {
-        const manager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
-        const installCommand = manager === 'unknown' ? 'npm i' : manager.installCommand;
-        log_1.Log.error(err);
-        log_1.Log.error('Remotion CloudRun is not installed.');
-        log_1.Log.info('');
-        log_1.Log.info('You can install it using:');
-        log_1.Log.info(`${installCommand} @remotion/cloudrun@${(0, update_available_1.getRemotionVersion)()}`);
-        process.exit(1);
-    }
-};
-exports.cloudrunCommand = cloudrunCommand;

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.d.ts

@@ -1,14 +0,0 @@
-export type SerializedJSONWithCustomFields = {
-    serializedString: string;
-    customDateUsed: boolean;
-    customFileUsed: boolean;
-    mapUsed: boolean;
-    setUsed: boolean;
-};
-export declare const FILE_TOKEN = "remotion-file:";
-export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
-    data: unknown;
-    indent: number | undefined;
-    staticBase: string;
-}) => SerializedJSONWithCustomFields;
-export declare const deserializeJSONWithCustomFields: (data: string) => any;

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = void 0;
-const DATE_TOKEN = 'remotion-date:';
-exports.FILE_TOKEN = 'remotion-file:';
-const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
-    let customDateUsed = false;
-    let customFileUsed = false;
-    let mapUsed = false;
-    let setUsed = false;
-    const serializedString = JSON.stringify(data, function (key, value) {
-        const item = this[key];
-        if (item instanceof Date) {
-            customDateUsed = true;
-            return `${DATE_TOKEN}${item.toISOString()}`;
-        }
-        if (item instanceof Map) {
-            mapUsed = true;
-            return value;
-        }
-        if (item instanceof Set) {
-            setUsed = true;
-            return value;
-        }
-        if (typeof item === 'string' && item.startsWith(staticBase)) {
-            customFileUsed = true;
-            return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
-        }
-        return value;
-    }, indent);
-    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
-};
-exports.serializeJSONWithDate = serializeJSONWithDate;
-const deserializeJSONWithCustomFields = (data) => {
-    return JSON.parse(data, (_, value) => {
-        if (typeof value === 'string' && value.startsWith(DATE_TOKEN)) {
-            return new Date(value.replace(DATE_TOKEN, ''));
-        }
-        return value;
-    });
-};
-exports.deserializeJSONWithCustomFields = deserializeJSONWithCustomFields;

package/dist/error-with-stack-frame.d.ts

@@ -1,19 +0,0 @@
-import type { Page, SymbolicatedStackFrame } from '@remotion/renderer';
-export declare class ErrorWithStackFrame extends Error {
-    symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
-    frame: number | null;
-    name: string;
-    delayRenderCall: SymbolicatedStackFrame[] | null;
-    constructor({ message, symbolicatedStackFrames, frame, name, delayRenderCall, }: {
-        message: string;
-        symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
-        frame: number | null;
-        name: string;
-        delayRenderCall: SymbolicatedStackFrame[] | null;
-    });
-}
-export declare const handleJavascriptException: ({ page, onError, frame, }: {
-    page: Page;
-    frame: number | null;
-    onError: (err: Error) => void;
-}) => () => void;

package/dist/error-with-stack-frame.js

@@ -1,81 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleJavascriptException = exports.ErrorWithStackFrame = void 0;
-const remotion_1 = require("remotion");
-const renderer_1 = require("@remotion/renderer");
-const log_1 = require("./log");
-class ErrorWithStackFrame extends Error {
-    constructor({ message, symbolicatedStackFrames, frame, name, delayRenderCall, }) {
-        super(message);
-        this.symbolicatedStackFrames = symbolicatedStackFrames;
-        this.frame = frame;
-        this.name = name;
-        this.delayRenderCall = delayRenderCall;
-    }
-}
-exports.ErrorWithStackFrame = ErrorWithStackFrame;
-const cleanUpErrorMessage = (exception) => {
-    var _a, _b, _c, _d;
-    let errorMessage = (_a = exception.exceptionDetails.exception) === null || _a === void 0 ? void 0 : _a.description;
-    if (!errorMessage) {
-        return null;
-    }
-    const errorType = (_b = exception.exceptionDetails.exception) === null || _b === void 0 ? void 0 : _b.className;
-    const prefix = `${errorType}: `;
-    if (errorMessage.startsWith(prefix)) {
-        errorMessage = errorMessage.substring(prefix.length);
-    }
-    const frames = (_d = (_c = exception.exceptionDetails.stackTrace) === null || _c === void 0 ? void 0 : _c.callFrames.length) !== null && _d !== void 0 ? _d : 0;
-    const split = errorMessage.split('\n');
-    return split.slice(0, Math.max(1, split.length - frames)).join('\n');
-};
-const removeDelayRenderStack = (message) => {
-    const index = message.indexOf(remotion_1.Internals.DELAY_RENDER_CALLSTACK_TOKEN);
-    if (index === -1) {
-        return message;
-    }
-    return message.substring(0, index);
-};
-const callFrameToStackFrame = (callFrame) => {
-    return {
-        columnNumber: callFrame.columnNumber,
-        fileName: callFrame.url,
-        functionName: callFrame.functionName,
-        lineNumber: callFrame.lineNumber,
-    };
-};
-const handleJavascriptException = ({ page, onError, frame, }) => {
-    const client = page._client();
-    const handler = (exception) => {
-        var _a, _b, _c;
-        const rawErrorMessage = (_a = exception.exceptionDetails.exception) === null || _a === void 0 ? void 0 : _a.description;
-        const cleanErrorMessage = cleanUpErrorMessage(exception);
-        if (!cleanErrorMessage) {
-            log_1.Log.error(exception);
-            const err = new Error(rawErrorMessage);
-            err.stack = rawErrorMessage;
-            onError(err);
-            return;
-        }
-        if (!exception.exceptionDetails.stackTrace) {
-            const err = new Error(removeDelayRenderStack(cleanErrorMessage));
-            err.stack = rawErrorMessage;
-            onError(err);
-            return;
-        }
-        const errorType = (_b = exception.exceptionDetails.exception) === null || _b === void 0 ? void 0 : _b.className;
-        const symbolicatedErr = new renderer_1.RenderInternals.SymbolicateableError({
-            message: removeDelayRenderStack(cleanErrorMessage),
-            stackFrame: exception.exceptionDetails.stackTrace.callFrames.map((f) => callFrameToStackFrame(f)),
-            frame,
-            name: errorType,
-            stack: (_c = exception.exceptionDetails.exception) === null || _c === void 0 ? void 0 : _c.description,
-        });
-        onError(symbolicatedErr);
-    };
-    client.on('Runtime.exceptionThrown', handler);
-    return () => {
-        client.off('Runtime.exceptionThrown', handler);
-    };
-};
-exports.handleJavascriptException = handleJavascriptException;

package/dist/handle-javascript-error.d.ts

@@ -1,20 +0,0 @@
-import type { Page } from '../browser/BrowserPage';
-import type { SymbolicatedStackFrame } from '../symbolicate-stacktrace';
-export declare class ErrorWithStackFrame extends Error {
-    symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
-    frame: number | null;
-    name: string;
-    delayRenderCall: SymbolicatedStackFrame[] | null;
-    constructor({ message, symbolicatedStackFrames, frame, name, delayRenderCall, }: {
-        message: string;
-        symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
-        frame: number | null;
-        name: string;
-        delayRenderCall: SymbolicatedStackFrame[] | null;
-    });
-}
-export declare const handleJavascriptException: ({ page, onError, frame, }: {
-    page: Page;
-    frame: number | null;
-    onError: (err: Error) => void;
-}) => () => void;

package/dist/handle-javascript-error.js

@@ -1,81 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleJavascriptException = exports.ErrorWithStackFrame = void 0;
-const remotion_1 = require("remotion");
-const symbolicateable_error_1 = require("./symbolicateable-error");
-const log_1 = require("./log");
-class ErrorWithStackFrame extends Error {
-    constructor({ message, symbolicatedStackFrames, frame, name, delayRenderCall, }) {
-        super(message);
-        this.symbolicatedStackFrames = symbolicatedStackFrames;
-        this.frame = frame;
-        this.name = name;
-        this.delayRenderCall = delayRenderCall;
-    }
-}
-exports.ErrorWithStackFrame = ErrorWithStackFrame;
-const cleanUpErrorMessage = (exception) => {
-    var _a, _b, _c, _d;
-    let errorMessage = (_a = exception.exceptionDetails.exception) === null || _a === void 0 ? void 0 : _a.description;
-    if (!errorMessage) {
-        return null;
-    }
-    const errorType = (_b = exception.exceptionDetails.exception) === null || _b === void 0 ? void 0 : _b.className;
-    const prefix = `${errorType}: `;
-    if (errorMessage.startsWith(prefix)) {
-        errorMessage = errorMessage.substring(prefix.length);
-    }
-    const frames = (_d = (_c = exception.exceptionDetails.stackTrace) === null || _c === void 0 ? void 0 : _c.callFrames.length) !== null && _d !== void 0 ? _d : 0;
-    const split = errorMessage.split('\n');
-    return split.slice(0, Math.max(1, split.length - frames)).join('\n');
-};
-const removeDelayRenderStack = (message) => {
-    const index = message.indexOf(remotion_1.Internals.DELAY_RENDER_CALLSTACK_TOKEN);
-    if (index === -1) {
-        return message;
-    }
-    return message.substring(0, index);
-};
-const callFrameToStackFrame = (callFrame) => {
-    return {
-        columnNumber: callFrame.columnNumber,
-        fileName: callFrame.url,
-        functionName: callFrame.functionName,
-        lineNumber: callFrame.lineNumber,
-    };
-};
-const handleJavascriptException = ({ page, onError, frame, }) => {
-    const client = page._client();
-    const handler = (exception) => {
-        var _a, _b, _c;
-        const rawErrorMessage = (_a = exception.exceptionDetails.exception) === null || _a === void 0 ? void 0 : _a.description;
-        const cleanErrorMessage = cleanUpErrorMessage(exception);
-        if (!cleanErrorMessage) {
-            log_1.Log.error(exception);
-            const err = new Error(rawErrorMessage);
-            err.stack = rawErrorMessage;
-            onError(err);
-            return;
-        }
-        if (!exception.exceptionDetails.stackTrace) {
-            const err = new Error(removeDelayRenderStack(cleanErrorMessage));
-            err.stack = rawErrorMessage;
-            onError(err);
-            return;
-        }
-        const errorType = (_b = exception.exceptionDetails.exception) === null || _b === void 0 ? void 0 : _b.className;
-        const symbolicatedErr = new symbolicateable_error_1.SymbolicateableError({
-            message: removeDelayRenderStack(cleanErrorMessage),
-            stackFrame: exception.exceptionDetails.stackTrace.callFrames.map((f) => callFrameToStackFrame(f)),
-            frame,
-            name: errorType,
-            stack: (_c = exception.exceptionDetails.exception) === null || _c === void 0 ? void 0 : _c.description,
-        });
-        onError(symbolicatedErr);
-    };
-    client.on('Runtime.exceptionThrown', handler);
-    return () => {
-        client.off('Runtime.exceptionThrown', handler);
-    };
-};
-exports.handleJavascriptException = handleJavascriptException;

package/dist/symbolicate-error.d.ts

@@ -1,3 +0,0 @@
-import { ErrorWithStackFrame } from './handle-javascript-exception';
-import type { SymbolicateableError } from './symbolicateable-error';
-export declare const symbolicateError: (symbolicateableError: SymbolicateableError) => Promise<ErrorWithStackFrame>;

package/dist/symbolicate-error.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.symbolicateError = void 0;
-const symbolicate_stacktrace_1 = require("../symbolicate-stacktrace");
-const handle_javascript_exception_1 = require("./handle-javascript-exception");
-const truthy_1 = require("./truthy");
-const symbolicateError = async (symbolicateableError) => {
-    const { delayRenderCall, stackFrame } = symbolicateableError;
-    const [mainErrorFrames, delayRenderFrames] = await Promise.all([
-        stackFrame ? (0, symbolicate_stacktrace_1.symbolicateStackTraceFromRemoteFrames)(stackFrame) : null,
-        delayRenderCall
-            ? (0, symbolicate_stacktrace_1.symbolicateStackTraceFromRemoteFrames)(delayRenderCall)
-            : null,
-    ].filter(truthy_1.truthy));
-    const symbolicatedErr = new handle_javascript_exception_1.ErrorWithStackFrame({
-        message: symbolicateableError.message,
-        symbolicatedStackFrames: mainErrorFrames,
-        frame: symbolicateableError.frame,
-        name: symbolicateableError.name,
-        delayRenderCall: delayRenderFrames,
-    });
-    return symbolicatedErr;
-};
-exports.symbolicateError = symbolicateError;

package/dist/symbolicate-errors.d.ts

@@ -1,7 +0,0 @@
-import type { SymbolicatedStackFrame, UnsymbolicatedStackFrame } from '@remotion/renderer';
-import type { SourceMapConsumer } from 'source-map';
-import { ErrorWithStackFrame } from './error-with-stack-frame';
-export declare const symbolicateError: (symbolicateableError: SymbolicateableError) => Promise<ErrorWithStackFrame>;
-export declare const symbolicateStackTraceFromRemoteFrames: (frames: UnsymbolicatedStackFrame[]) => Promise<SymbolicatedStackFrame[]>;
-export declare const getSourceMapFromRemoteFile: (fileName: string) => Promise<any>;
-export declare const symbolicateFromSources: (frames: UnsymbolicatedStackFrame[], mapValues: Record<string, SourceMapConsumer | null>) => SymbolicatedStackFrame[];

package/dist/symbolicate-errors.js

@@ -1,90 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.symbolicateFromSources = exports.getSourceMapFromRemoteFile = exports.symbolicateStackTraceFromRemoteFrames = exports.symbolicateError = void 0;
-const renderer_1 = require("@remotion/renderer");
-const truthy_1 = require("./truthy");
-const error_with_stack_frame_1 = require("./error-with-stack-frame");
-const symbolicateError = async (symbolicateableError) => {
-    const { delayRenderCall, stackFrame } = symbolicateableError;
-    const [mainErrorFrames, delayRenderFrames] = await Promise.all([
-        stackFrame ? (0, exports.symbolicateStackTraceFromRemoteFrames)(stackFrame) : null,
-        delayRenderCall
-            ? (0, exports.symbolicateStackTraceFromRemoteFrames)(delayRenderCall)
-            : null,
-    ].filter(truthy_1.truthy));
-    const symbolicatedErr = new error_with_stack_frame_1.ErrorWithStackFrame({
-        message: symbolicateableError.message,
-        symbolicatedStackFrames: mainErrorFrames,
-        frame: symbolicateableError.frame,
-        name: symbolicateableError.name,
-        delayRenderCall: delayRenderFrames,
-    });
-    return symbolicatedErr;
-};
-exports.symbolicateError = symbolicateError;
-const symbolicateStackTraceFromRemoteFrames = async (frames) => {
-    const uniqueFileNames = [
-        ...new Set(frames
-            .map((f) => f.fileName)
-            .filter((f) => f.startsWith('http://') || f.startsWith('https://'))
-            .filter(truthy_1.truthy)),
-    ];
-    const maps = await Promise.all(uniqueFileNames.map((fileName) => {
-        return (0, exports.getSourceMapFromRemoteFile)(fileName);
-    }));
-    const mapValues = {};
-    for (let i = 0; i < uniqueFileNames.length; i++) {
-        mapValues[uniqueFileNames[i]] = maps[i];
-    }
-    return (0, exports.symbolicateFromSources)(frames, mapValues);
-};
-exports.symbolicateStackTraceFromRemoteFrames = symbolicateStackTraceFromRemoteFrames;
-const getSourceMapFromRemoteFile = async (fileName) => {
-    const fileContents = await renderer_1.RenderInternals.fetchUrl(fileName);
-    return renderer_1.RenderInternals.getSourceMap(fileName, fileContents, 'remote');
-};
-exports.getSourceMapFromRemoteFile = getSourceMapFromRemoteFile;
-const symbolicateFromSources = (frames, mapValues) => {
-    return frames
-        .map((frame) => {
-        const map = mapValues[frame.fileName];
-        if (!map) {
-            return null;
-        }
-        return symbolicateStackFrame(frame, map);
-    })
-        .filter(truthy_1.truthy);
-};
-exports.symbolicateFromSources = symbolicateFromSources;
-const symbolicateStackFrame = (frame, map) => {
-    const pos = getOriginalPosition(map, frame.lineNumber, frame.columnNumber);
-    const hasSource = pos.source ? map.sourceContentFor(pos.source, false) : null;
-    const scriptCode = hasSource && pos.line
-        ? getLinesAround(pos.line, 3, hasSource.split('\n'))
-        : null;
-    return {
-        originalColumnNumber: pos.column,
-        originalFileName: pos.source,
-        originalFunctionName: frame.functionName,
-        originalLineNumber: pos.line,
-        originalScriptCode: scriptCode,
-    };
-};
-const getOriginalPosition = (source_map, line, column) => {
-    const result = source_map.originalPositionFor({
-        line,
-        column,
-    });
-    return { line: result.line, column: result.column, source: result.source };
-};
-function getLinesAround(line, count, lines) {
-    const result = [];
-    for (let index = Math.max(0, line - 1 - count) + 1; index <= Math.min(lines.length - 1, line - 1 + count); ++index) {
-        result.push({
-            lineNumber: index + 1,
-            content: lines[index],
-            highlight: index + 1 === line,
-        });
-    }
-    return result;
-}

package/dist/symbolicate-stacktrace.d.ts

@@ -1,28 +0,0 @@
-import type { BasicSourceMapConsumer, IndexedSourceMapConsumer } from 'source-map';
-import { SourceMapConsumer } from 'source-map';
-import type { UnsymbolicatedStackFrame } from './parse-browser-error-stack';
-type ScriptLine = {
-    lineNumber: number;
-    content: string;
-    highlight: boolean;
-};
-export type SymbolicatedStackFrame = {
-    originalFunctionName: string | null;
-    originalFileName: string | null;
-    originalLineNumber: number | null;
-    originalColumnNumber: number | null;
-    originalScriptCode: ScriptLine[] | null;
-};
-export declare const symbolicateStackTraceFromRemoteFrames: (frames: UnsymbolicatedStackFrame[]) => Promise<SymbolicatedStackFrame[]>;
-export declare const symbolicateFromSources: (frames: UnsymbolicatedStackFrame[], mapValues: Record<string, SourceMapConsumer | null>) => SymbolicatedStackFrame[];
-export declare const symbolicateStackFrame: (frame: UnsymbolicatedStackFrame, map: SourceMapConsumer) => {
-    originalColumnNumber: number | null;
-    originalFileName: string | null;
-    originalFunctionName: any;
-    originalLineNumber: number | null;
-    originalScriptCode: ScriptLine[] | null;
-};
-export declare const getSourceMapFromRemoteFile: (fileName: string) => Promise<SourceMapConsumer | null>;
-export declare const getSourceMapFromLocalFile: (fileName: string) => Promise<SourceMapConsumer | null>;
-export type AnySourceMapConsumer = BasicSourceMapConsumer | IndexedSourceMapConsumer;
-export {};

package/dist/symbolicate-stacktrace.js

@@ -1,135 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSourceMapFromLocalFile = exports.getSourceMapFromRemoteFile = exports.symbolicateStackFrame = exports.symbolicateFromSources = exports.symbolicateStackTraceFromRemoteFrames = void 0;
-const fs_1 = require("fs");
-const path_1 = __importDefault(require("path"));
-const source_map_1 = require("source-map");
-const read_file_1 = require("./assets/read-file");
-const truthy_1 = require("./truthy");
-function extractSourceMapUrl(fileContents) {
-    const regex = /\/\/[#@] ?sourceMappingURL=([^\s'"]+)\s*$/gm;
-    let match = null;
-    for (;;) {
-        const next = regex.exec(fileContents);
-        if (next === null || next === undefined) {
-            break;
-        }
-        match = next;
-    }
-    if (!(match === null || match === void 0 ? void 0 : match[1])) {
-        return null;
-    }
-    return match[1].toString();
-}
-const getSourceMap = async (filePath, fileContents, type) => {
-    const sm = extractSourceMapUrl(fileContents);
-    if (sm === null) {
-        return null;
-    }
-    if (sm.indexOf('data:') === 0) {
-        const base64 = /^data:application\/json;([\w=:"-]+;)*base64,/;
-        const match2 = sm.match(base64);
-        if (!match2) {
-            throw new Error('Sorry, non-base64 inline source-map encoding is not supported.');
-        }
-        const converted = window.atob(sm.substring(match2[0].length));
-        return new source_map_1.SourceMapConsumer(JSON.parse(converted));
-    }
-    if (type === 'local') {
-        // Find adjacent file: bundle.js -> bundle.js.map
-        const newFilePath = path_1.default.join(path_1.default.dirname(filePath), sm);
-        return new source_map_1.SourceMapConsumer((0, fs_1.readFileSync)(newFilePath, 'utf8'));
-    }
-    const index = filePath.lastIndexOf('/');
-    const url = filePath.substring(0, index + 1) + sm;
-    const obj = await fetchUrl(url);
-    return new source_map_1.SourceMapConsumer(obj);
-};
-const fetchUrl = async (url) => {
-    const res = await (0, read_file_1.readFile)(url);
-    return new Promise((resolve, reject) => {
-        let downloaded = '';
-        res.on('data', (d) => {
-            downloaded += d;
-        });
-        res.on('end', () => {
-            resolve(downloaded);
-        });
-        res.on('error', (err) => reject(err));
-    });
-};
-function getLinesAround(line, count, lines) {
-    const result = [];
-    for (let index = Math.max(0, line - 1 - count) + 1; index <= Math.min(lines.length - 1, line - 1 + count); ++index) {
-        result.push({
-            lineNumber: index + 1,
-            content: lines[index],
-            highlight: index + 1 === line,
-        });
-    }
-    return result;
-}
-const getOriginalPosition = (source_map, line, column) => {
-    const result = source_map.originalPositionFor({
-        line,
-        column,
-    });
-    return { line: result.line, column: result.column, source: result.source };
-};
-const symbolicateStackTraceFromRemoteFrames = async (frames) => {
-    const uniqueFileNames = [
-        ...new Set(frames
-            .map((f) => f.fileName)
-            .filter((f) => f.startsWith('http://') || f.startsWith('https://'))
-            .filter(truthy_1.truthy)),
-    ];
-    const maps = await Promise.all(uniqueFileNames.map((fileName) => {
-        return (0, exports.getSourceMapFromRemoteFile)(fileName);
-    }));
-    const mapValues = {};
-    for (let i = 0; i < uniqueFileNames.length; i++) {
-        mapValues[uniqueFileNames[i]] = maps[i];
-    }
-    return (0, exports.symbolicateFromSources)(frames, mapValues);
-};
-exports.symbolicateStackTraceFromRemoteFrames = symbolicateStackTraceFromRemoteFrames;
-const symbolicateFromSources = (frames, mapValues) => {
-    return frames
-        .map((frame) => {
-        const map = mapValues[frame.fileName];
-        if (!map) {
-            return null;
-        }
-        return (0, exports.symbolicateStackFrame)(frame, map);
-    })
-        .filter(truthy_1.truthy);
-};
-exports.symbolicateFromSources = symbolicateFromSources;
-const symbolicateStackFrame = (frame, map) => {
-    const pos = getOriginalPosition(map, frame.lineNumber, frame.columnNumber);
-    const hasSource = pos.source ? map.sourceContentFor(pos.source, false) : null;
-    const scriptCode = hasSource && pos.line
-        ? getLinesAround(pos.line, 3, hasSource.split('\n'))
-        : null;
-    return {
-        originalColumnNumber: pos.column,
-        originalFileName: pos.source,
-        originalFunctionName: frame.functionName,
-        originalLineNumber: pos.line,
-        originalScriptCode: scriptCode,
-    };
-};
-exports.symbolicateStackFrame = symbolicateStackFrame;
-const getSourceMapFromRemoteFile = async (fileName) => {
-    const fileContents = await fetchUrl(fileName);
-    return getSourceMap(fileName, fileContents, 'remote');
-};
-exports.getSourceMapFromRemoteFile = getSourceMapFromRemoteFile;
-const getSourceMapFromLocalFile = (fileName) => {
-    const fileContents = (0, fs_1.readFileSync)(fileName, 'utf8');
-    return getSourceMap(fileName, fileContents, 'local');
-};
-exports.getSourceMapFromLocalFile = getSourceMapFromLocalFile;

package/dist/symbolicateable-error.d.ts

@@ -1,16 +0,0 @@
-/**
- * A symbolicateable error is an error that can be symolicated by fetching the original sources. By throwing a symbolicateable error, Remotion CLI will attempt to symplicate it
- */
-import type { UnsymbolicatedStackFrame } from '../parse-browser-error-stack';
-export declare class SymbolicateableError extends Error {
-    stackFrame: UnsymbolicatedStackFrame[] | null;
-    delayRenderCall: UnsymbolicatedStackFrame[] | null;
-    frame: number | null;
-    constructor({ message, stack, stackFrame, frame, name, }: {
-        message: string;
-        stack: string | undefined;
-        frame: number | null;
-        name: string;
-        stackFrame: UnsymbolicatedStackFrame[] | null;
-    });
-}

package/dist/symbolicateable-error.js

@@ -1,18 +0,0 @@
-"use strict";
-/**
- * A symbolicateable error is an error that can be symolicated by fetching the original sources. By throwing a symbolicateable error, Remotion CLI will attempt to symplicate it
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SymbolicateableError = void 0;
-const delay_render_embedded_stack_1 = require("../delay-render-embedded-stack");
-class SymbolicateableError extends Error {
-    constructor({ message, stack, stackFrame, frame, name, }) {
-        super(message);
-        this.stack = stack;
-        this.stackFrame = stackFrame;
-        this.frame = frame;
-        this.name = name;
-        this.delayRenderCall = stack ? (0, delay_render_embedded_stack_1.parseDelayRenderEmbeddedStack)(stack) : null;
-    }
-}
-exports.SymbolicateableError = SymbolicateableError;