@remotion/cli 4.0.15 → 4.0.17

package/dist/codemods/update-default-props.js

@@ -56,6 +56,11 @@ const findEndPosition = (input, currentPosition) => {
         const nextEnd = input.indexOf('}', asConstVersion + currentPosition + 1);
         return nextEnd - 1;
     }
+    // When updating e.g. `defaultProps={{union: {type: 'car' as const, color: ''}}}`
+    const nextTriple = input.indexOf('}}}', currentPosition + 1);
+    if (nextTriple !== -1) {
+        return nextTriple + 1;
+    }
     const next = input.indexOf('}}', currentPosition + 1);
     if (next !== -1) {
         return next;

package/dist/config/image-format.d.ts

@@ -2,4 +2,4 @@ import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 export declare const setStillImageFormat: (format: StillImageFormat) => void;
 export declare const setVideoImageFormat: (format: VideoImageFormat) => void;
 export declare const getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-export declare const getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
+export declare const getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;

package/dist/config/index.d.ts

@@ -297,7 +297,7 @@ export declare const ConfigInternals: {
     getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;
     getDotEnvLocation: () => string | null;
     getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-    getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
+    getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getWebpackCaching: () => boolean;
     getOutputLocation: () => string | null;

package/dist/editor/components/CurrentCompositionSideEffects.js

@@ -4,17 +4,21 @@ exports.CurrentCompositionKeybindings = exports.TitleUpdater = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
+const document_title_1 = require("../helpers/document-title");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const context_1 = require("./RenderQueue/context");
 const TitleUpdater = () => {
     const video = remotion_1.Internals.useVideo();
+    const renderQueue = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { jobs } = renderQueue;
     (0, react_1.useEffect)(() => {
-        if (!video) {
-            document.title = 'Remotion Studio';
-            return;
-        }
-        document.title = `${video.id} / ${window.remotion_projectName} - Remotion Studio`;
+        var _a;
+        (0, document_title_1.setCurrentVideoId)((_a = video === null || video === void 0 ? void 0 : video.id) !== null && _a !== void 0 ? _a : null);
     }, [video]);
+    (0, react_1.useEffect)(() => {
+        (0, document_title_1.setRenderJobs)(jobs);
+    }, [jobs]);
     return null;
 };
 exports.TitleUpdater = TitleUpdater;

package/dist/editor/components/FullscreenToggle.js

@@ -3,10 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FullScreenToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const truthy_1 = require("../../truthy");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
 const preview_size_1 = require("../state/preview-size");
 const ControlButton_1 = require("./ControlButton");
+const accessibilityLabel = [
+    'Enter fullscreen preview',
+    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(F)',
+]
+    .filter(truthy_1.truthy)
+    .join(' ');
 const FullScreenToggle = () => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
     const onClick = (0, react_1.useCallback)(() => {
         var _a;
@@ -20,6 +29,19 @@ const FullScreenToggle = () => {
                 },
             }));
     }, [setSize]);
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: "Enter fullscreen preview", "aria-label": "Enter fullscreen preview", onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 448 512", fill: "#fff", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }) }));
+    (0, react_1.useEffect)(() => {
+        const f = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'f',
+            callback: onClick,
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+        return () => {
+            f.unregister();
+        };
+    }, [keybindings, onClick]);
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 448 512", fill: "#fff", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }) }));
 };
 exports.FullScreenToggle = FullScreenToggle;

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" })] }), ' ', (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" })] })] })] })] }));
+    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)("div", { style: title, children: "View" }), (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: "F" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Enter fullscreen" })] }), (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: "esc" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Exit fullscreen" })] })] }), (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/NewComposition/RemInput.d.ts

@@ -13,5 +13,5 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     isFocused: boolean;
     isHovered: boolean;
 }) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemTextarea.d.ts

@@ -3,5 +3,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaEleme
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

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

@@ -29,6 +29,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
 const colors_1 = require("../../helpers/colors");
+const document_title_1 = require("../../helpers/document-title");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const layout_1 = require("../layout");
 const RemTextarea_1 = require("../NewComposition/RemTextarea");
@@ -95,6 +96,9 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, sho
     const hasChanged = (0, react_1.useMemo)(() => {
         return !(0, deep_equal_1.deepEqual)(value, defaultProps);
     }, [defaultProps, value]);
+    (0, react_1.useEffect)(() => {
+        (0, document_title_1.setUnsavedProps)(hasChanged);
+    }, [hasChanged]);
     const onQuickSave = (0, react_1.useCallback)(() => {
         if (hasChanged) {
             onSave();

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const document_title_1 = require("../../../helpers/document-title");
 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");
@@ -23,6 +24,9 @@ const SchemaEditor = ({ schema, value, setValue, zodValidationResult, defaultPro
     const hasChanged = (0, react_1.useMemo)(() => {
         return !(0, deep_equal_1.deepEqual)(defaultProps, value);
     }, [defaultProps, value]);
+    (0, react_1.useEffect)(() => {
+        (0, document_title_1.setUnsavedProps)(hasChanged);
+    }, [hasChanged]);
     const onQuickSave = (0, react_1.useCallback)(() => {
         if (hasChanged && showSaveButton) {
             onSave(() => {
@@ -59,6 +63,6 @@ const SchemaEditor = ({ schema, value, setValue, zodValidationResult, defaultPro
     if (typeName !== z.ZodFirstPartyTypeKind.ZodObject) {
         return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName });
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { value: value, setValue: setValue, jsonPath: [], schema: schema, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: true }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { discriminatedUnionReplacement: null, value: value, setValue: setValue, jsonPath: [], schema: schema, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: true }) }));
 };
 exports.SchemaEditor = SchemaEditor;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { z } from 'zod';
+import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
+export declare const ZodDiscriminatedUnionEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    setValue: UpdaterFunction<Record<string, unknown>>;
+    value: Record<string, unknown>;
+    defaultValue: Record<string, unknown>;
+    mayPad: boolean;
+    jsonPath: JSONPath;
+    onRemove: null | (() => void);
+    onSave: UpdaterFunction<unknown>;
+    showSaveButton: boolean;
+    saving: boolean;
+    saveDisabledByParent: boolean;
+}>;

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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodDiscriminatedUnionEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkmark_1 = require("../../../icons/Checkmark");
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const ComboBox_1 = require("../../NewComposition/ComboBox");
+const create_zod_values_1 = require("./create-zod-values");
+const Fieldset_1 = require("./Fieldset");
+const local_state_1 = require("./local-state");
+const SchemaLabel_1 = require("./SchemaLabel");
+const ZodObjectEditor_1 = require("./ZodObjectEditor");
+const ZodDiscriminatedUnionEditor = ({ schema, setValue, showSaveButton, saving, value, defaultValue, saveDisabledByParent, onSave, mayPad, jsonPath, onRemove, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
+    const typedSchema = schema._def;
+    const options = (0, react_1.useMemo)(() => [...typedSchema.optionsMap.keys()], [typedSchema.optionsMap]);
+    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
+        schema,
+        setValue,
+        value,
+        defaultValue,
+    });
+    const comboBoxValues = (0, react_1.useMemo)(() => {
+        return options.map((option) => {
+            return {
+                value: option,
+                label: option,
+                id: option,
+                keyHint: null,
+                leftItem: option === value[typedSchema.discriminator] ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                onClick: () => {
+                    const val = (0, create_zod_values_1.createZodValues)(typedSchema.optionsMap.get(option), z, zodTypes);
+                    setLocalValue(() => val, false, false);
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+            };
+        });
+    }, [
+        options,
+        setLocalValue,
+        typedSchema.discriminator,
+        typedSchema.optionsMap,
+        value,
+        z,
+        zodTypes,
+    ]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value, false, false);
+    }, [onSave, value]);
+    const discriminatedUnionReplacement = (0, react_1.useMemo)(() => {
+        return {
+            discriminator: typedSchema.discriminator,
+            markup: ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: true, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value[typedSchema.discriminator] ===
+                            defaultValue[typedSchema.discriminator], jsonPath: [...jsonPath, typedSchema.discriminator], onRemove: onRemove, onReset: reset, onSave: save, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, suffix: null, valid: localValue.zodValidation.success }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[typedSchema.discriminator] })] })),
+        };
+    }, [
+        comboBoxValues,
+        defaultValue,
+        jsonPath,
+        localValue.value,
+        localValue.zodValidation.success,
+        mayPad,
+        onRemove,
+        reset,
+        save,
+        saveDisabledByParent,
+        saving,
+        showSaveButton,
+        typedSchema.discriminator,
+        value,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor
+    // Re-render the object editor when the discriminator changes
+    , { jsonPath: jsonPath, mayPad: mayPad, defaultValue: defaultValue, onRemove: onRemove, onSave: onSave, saveDisabledByParent: saveDisabledByParent, saving: saving, schema: typedSchema.optionsMap.get(value[typedSchema.discriminator]), setValue: setLocalValue, showSaveButton: showSaveButton, value: value, discriminatedUnionReplacement: discriminatedUnionReplacement }, value[typedSchema.discriminator]));
+};
+exports.ZodDiscriminatedUnionEditor = ZodDiscriminatedUnionEditor;

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

@@ -2,6 +2,10 @@ import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
+export type ObjectDiscrimatedUnionReplacement = {
+    discriminator: string;
+    markup: React.ReactNode;
+};
 export declare const ZodObjectEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
@@ -14,4 +18,5 @@ export declare const ZodObjectEditor: React.FC<{
     saving: boolean;
     saveDisabledByParent: boolean;
     mayPad: boolean;
+    discriminatedUnionReplacement: ObjectDiscrimatedUnionReplacement | null;
 }>;

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

@@ -35,7 +35,7 @@ const SchemaLabel_1 = require("./SchemaLabel");
 const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
 const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
 const ZodSwitch_1 = require("./ZodSwitch");
-const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
+const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, discriminatedUnionReplacement, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
@@ -62,6 +62,10 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSa
                         return localValue.value;
                     }, false, false);
                 }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success })), (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key, i) => {
+                        if (discriminatedUnionReplacement &&
+                            key === discriminatedUnionReplacement.discriminator) {
+                            return discriminatedUnionReplacement.markup;
+                        }
                         return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { mayPad: true, jsonPath: [...jsonPath, key], schema: shape[key], value: localValue.value[key], 
                                     // In case of null | {a: string, b: string} type, we need to fallback to the default value
                                     defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : value)[key], setValue: (val, forceApply) => {

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

@@ -45,6 +45,6 @@ const ZodOrNullishEditor = ({ jsonPath, schema, setValue, onSave, defaultValue,
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value, false, false);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [localValue.value === nullishValue ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null })) : ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: localValue.value, setValue: setLocalValue, jsonPath: jsonPath, schema: innerSchema, defaultValue: value, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: false })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false, name: jsonPath.join('.') }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: String(nullishValue) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [localValue.value === nullishValue ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null })) : ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: localValue.value, setValue: setLocalValue, jsonPath: jsonPath, schema: innerSchema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: false })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false, name: jsonPath.join('.') }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: String(nullishValue) })] })] }));
 };
 exports.ZodOrNullishEditor = ZodOrNullishEditor;

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

@@ -8,6 +8,7 @@ const ZodBooleanEditor_1 = require("./ZodBooleanEditor");
 const ZodColorEditor_1 = require("./ZodColorEditor");
 const ZodDateEditor_1 = require("./ZodDateEditor");
 const ZodDefaultEditor_1 = require("./ZodDefaultEditor");
+const ZodDiscriminatedUnionEditor_1 = require("./ZodDiscriminatedUnionEditor");
 const ZodEffectEditor_1 = require("./ZodEffectEditor");
 const ZodEnumEditor_1 = require("./ZodEnumEditor");
 const ZodNonEditableValue_1 = require("./ZodNonEditableValue");
@@ -28,7 +29,7 @@ const ZodSwitch = ({ schema, jsonPath, value, setValue, defaultValue, onSave, sh
     }
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     if (typeName === z.ZodFirstPartyTypeKind.ZodObject) {
-        return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, value: value, defaultValue: defaultValue, jsonPath: jsonPath, schema: schema, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+        return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, value: value, defaultValue: defaultValue, jsonPath: jsonPath, schema: schema, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad, discriminatedUnionReplacement: null }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodString) {
         if (value.startsWith(window.remotion_staticBase)) {
@@ -86,6 +87,9 @@ const ZodSwitch = ({ schema, jsonPath, value, setValue, defaultValue, onSave, sh
     if (typeName === z.ZodFirstPartyTypeKind.ZodDefault) {
         return ((0, jsx_runtime_1.jsx)(ZodDefaultEditor_1.ZodDefaultEditor, { jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
+    if (typeName === z.ZodFirstPartyTypeKind.ZodDiscriminatedUnion) {
+        return ((0, jsx_runtime_1.jsx)(ZodDiscriminatedUnionEditor_1.ZodDiscriminatedUnionEditor, { defaultValue: defaultValue, mayPad: mayPad, schema: schema, setValue: setValue, value: value, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, saving: saving, saveDisabledByParent: saveDisabledByParent, showSaveButton: showSaveButton }));
+    }
     return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: `${typeName} (not editable)`, saving: saving, mayPad: mayPad }));
 };
 exports.ZodSwitch = ZodSwitch;

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

package/dist/editor/helpers/document-title.d.ts

@@ -0,0 +1,4 @@
+import type { RenderJob } from '../../preview-server/render-queue/job';
+export declare const setCurrentVideoId: (id: string | null) => void;
+export declare const setUnsavedProps: (unsaved: boolean) => void;
+export declare const setRenderJobs: (jobs: RenderJob[]) => void;

package/dist/editor/helpers/document-title.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setRenderJobs = exports.setUnsavedProps = exports.setCurrentVideoId = void 0;
+const truthy_1 = require("../../truthy");
+let currentVideoId = null;
+let unsavedProps = false;
+let tabInactive = false;
+let renderJobs = [];
+const setCurrentVideoId = (id) => {
+    currentVideoId = id;
+    updateTitle();
+};
+exports.setCurrentVideoId = setCurrentVideoId;
+const setUnsavedProps = (unsaved) => {
+    unsavedProps = unsaved;
+};
+exports.setUnsavedProps = setUnsavedProps;
+const setRenderJobs = (jobs) => {
+    renderJobs = jobs;
+    updateTitle();
+};
+exports.setRenderJobs = setRenderJobs;
+document.addEventListener('visibilitychange', () => {
+    tabInactive = document.visibilityState === 'hidden';
+    updateTitle();
+});
+const productName = 'Remotion Studio';
+const suffix = `- ${productName}`;
+const updateTitle = () => {
+    if (!currentVideoId) {
+        document.title = productName;
+        return;
+    }
+    const currentCompTitle = `${currentVideoId} / ${window.remotion_projectName}`;
+    document.title = [
+        getProgressInBrackets(currentVideoId, renderJobs),
+        unsavedProps && tabInactive ? '✏️' : null,
+        `${currentCompTitle} ${suffix}`,
+    ]
+        .filter(truthy_1.truthy)
+        .join(' ');
+};
+const getProgressInBrackets = (selectedCompositionId, jobs) => {
+    const currentRender = jobs.find((job) => job.status === 'running');
+    if (!currentRender) {
+        return null;
+    }
+    if (currentRender.status !== 'running') {
+        throw new Error('expected running job');
+    }
+    const progInPercent = Math.ceil(currentRender.progress.value * 100);
+    const progressInBrackets = currentRender.compositionId === selectedCompositionId
+        ? `[${progInPercent}%]`
+        : `[${progInPercent}% ${currentRender.compositionId}]`;
+    return progressInBrackets;
+};
+document.addEventListener('visibilitychange', () => {
+    tabInactive = document.visibilityState === 'hidden';
+    updateTitle();
+});

package/dist/get-cli-options.d.ts

@@ -33,5 +33,5 @@ export declare const getCliOptions: (options: {
     videoBitrate: string | null;
     height: number | null;
     width: number | null;
-    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+    configFileImageFormat: "none" | "png" | "jpeg" | undefined;
 }>;

package/dist/get-input-props.js

@@ -33,7 +33,8 @@ const getInputProps = (onUpdate) => {
         return JSON.parse(parse_command_line_1.parsedCli.props);
     }
     catch (err) {
-        log_1.Log.error('You passed --props but it was neither valid JSON nor a file path to a valid JSON file.');
+        log_1.Log.error('You passed --props but it was neither valid JSON nor a file path to a valid JSON file. Provided value: ' +
+            parse_command_line_1.parsedCli.props);
         log_1.Log.info('Got the following value:', parse_command_line_1.parsedCli.props);
         log_1.Log.error('Check that your input is parseable using `JSON.parse` and try again.');
         if (node_os_1.default.platform() === 'win32') {

package/dist/index.d.ts

@@ -118,7 +118,7 @@ export declare const CliInternals: {
         videoBitrate: string | null;
         height: number | null;
         width: number | null;
-        configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+        configFileImageFormat: "none" | "png" | "jpeg" | undefined;
     }>;
     loadConfig: (remotionRoot: string) => Promise<string | null>;
     initializeCli: (remotionRoot: string) => Promise<void>;
@@ -127,7 +127,7 @@ export declare const CliInternals: {
     parsedCli: {
         "browser-executable": import("@remotion/renderer").BrowserExecutable;
         "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-        "image-format": "png" | "jpeg" | "pdf" | "webp" | "none";
+        "image-format": "none" | "png" | "jpeg" | "pdf" | "webp";
         "prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
         "bundle-cache": string;
         "env-file": string;
@@ -192,7 +192,7 @@ export declare const CliInternals: {
         downloadName: string | null;
         outName: string | null;
         configImageFormat: "png" | "jpeg" | "pdf" | "webp" | null;
-        cliFlag: "png" | "jpeg" | "pdf" | "webp" | "none" | null;
+        cliFlag: "none" | "png" | "jpeg" | "pdf" | "webp" | null;
         isLambda: boolean;
         fromUi: "png" | "jpeg" | "pdf" | "webp" | null;
     }) => {
@@ -207,8 +207,8 @@ export declare const CliInternals: {
     };
     getVideoImageFormat: ({ codec, uiImageFormat, }: {
         codec: import("@remotion/renderer").CodecOrUndefined;
-        uiImageFormat: "png" | "jpeg" | "none" | null;
-    }) => "png" | "jpeg" | "none";
+        uiImageFormat: "none" | "png" | "jpeg" | null;
+    }) => "none" | "png" | "jpeg";
     printCompositions: (compositions: import("remotion").VideoConfig[]) => void;
     getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, }: {
         cliFlag: import("@remotion/renderer").CodecOrUndefined;

package/dist/preview-server/dev-middleware/range-parser.d.ts

@@ -11,5 +11,5 @@ type Range = {
 type Ranges = Range[] & {
     type?: string;
 };
-export declare function parseRange(size: number, str: string | string[]): -1 | Ranges | -2;
+export declare function parseRange(size: number, str: string | string[]): -1 | -2 | Ranges;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.15",
+  "version": "4.0.17",
   "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.15",
-    "@remotion/media-utils": "4.0.15",
-    "remotion": "4.0.15",
-    "@remotion/renderer": "4.0.15",
-    "@remotion/player": "4.0.15"
+    "@remotion/bundler": "4.0.17",
+    "remotion": "4.0.17",
+    "@remotion/renderer": "4.0.17",
+    "@remotion/media-utils": "4.0.17",
+    "@remotion/player": "4.0.17"
   },
   "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.15",
-    "@remotion/tailwind": "4.0.15"
+    "@remotion/zod-types": "4.0.17",
+    "@remotion/tailwind": "4.0.17"
   },
   "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;