@remotion/cli 3.3.82 → 3.3.83

package/dist/editor/components/RendersTab.js

@@ -11,14 +11,14 @@ const row = {
     display: 'flex',
     flexDirection: 'row',
     fontSize: 14,
-    justifyContent: 'center',
     color: 'inherit',
     alignItems: 'center',
+    flex: 1,
 };
 const badge = {
     height: 16,
     width: 16,
-    borderRadius: 8,
+    borderRadius: 3,
     fontSize: 10,
     display: 'inline-flex',
     justifyContent: 'center',
@@ -38,6 +38,6 @@ const RendersTab = ({ selected, onClick }) => {
             borderColor: colors_1.LIGHT_TEXT,
         };
     }, [failedJobs]);
-    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: selected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: selected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
 };
 exports.RendersTab = RendersTab;

package/dist/editor/components/RightPanel.js

@@ -4,7 +4,6 @@ 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 colors_1 = require("../helpers/colors");
 const RenderModalData_1 = require("./RenderModal/RenderModalData");
 const RenderQueue_1 = require("./RenderQueue");
 const RendersTab_1 = require("./RendersTab");
@@ -19,8 +18,6 @@ const container = {
 const PropsEditor = ({ composition }) => {
     var _a;
     const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    // TODO: Warn if inputProps were specified to the CLI, then
-    // they take priority over defaultProps
     const setInputProps = (0, react_1.useCallback)((newProps) => {
         updateProps({
             id: composition.id,
@@ -38,9 +35,7 @@ const getSelectedPanel = () => {
     }
     return 'input-props';
 };
-const tabsContainer = {
-    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
-};
+const tabsContainer = {};
 const persistSelectedPanel = (panel) => {
     localStorage.setItem(localStorageKey, panel);
 };
@@ -76,6 +71,6 @@ const RightPanel = () => {
     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: "Default 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.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 }))] }));
 };
 exports.RightPanel = RightPanel;

package/dist/editor/components/SidebarCollapserControls.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidebarCollapserControls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
 const layout_1 = require("./layout");
@@ -15,7 +17,8 @@ const style = {
     position: 'relative',
 };
 const SidebarCollapserControls = () => {
-    const { setSidebarCollapsedStateLeft, setSidebarCollapsedStateRight, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
     const leftSidebarStatus = (0, TopPanel_1.useResponsiveSidebarStatus)();
     const leftIcon = (0, react_1.useMemo)(() => {
         return {
@@ -36,16 +39,84 @@ const SidebarCollapserControls = () => {
         };
     }, [sidebarCollapsedStateRight]);
     const toggleLeft = (0, react_1.useCallback)(() => {
-        setSidebarCollapsedStateLeft((s) => {
-            if (s === 'responsive') {
-                return leftSidebarStatus === 'collapsed' ? 'expanded' : 'collapsed';
-            }
-            return s === 'collapsed' ? 'expanded' : 'collapsed';
+        setSidebarCollapsedState({
+            left: (s) => {
+                if (s === 'responsive') {
+                    return leftSidebarStatus === 'collapsed' ? 'expanded' : 'collapsed';
+                }
+                return s === 'collapsed' ? 'expanded' : 'collapsed';
+            },
+            right: null,
         });
-    }, [leftSidebarStatus, setSidebarCollapsedStateLeft]);
+    }, [leftSidebarStatus, setSidebarCollapsedState]);
     const toggleRight = (0, react_1.useCallback)(() => {
-        setSidebarCollapsedStateRight((s) => s === 'collapsed' ? 'expanded' : 'collapsed');
-    }, [setSidebarCollapsedStateRight]);
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleLeft, children: (0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: leftIcon }) }) }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleRight, children: (0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: rightIcon }) }) })] }));
+        setSidebarCollapsedState({
+            right: (s) => (s === 'collapsed' ? 'expanded' : 'collapsed'),
+            left: null,
+        });
+    }, [setSidebarCollapsedState]);
+    const toggleBoth = (0, react_1.useCallback)(() => {
+        if (sidebarCollapsedStateRight === leftSidebarStatus) {
+            setSidebarCollapsedState({
+                left: (s) => {
+                    if (s === 'responsive') {
+                        return leftSidebarStatus === 'collapsed' ? 'expanded' : 'collapsed';
+                    }
+                    return s === 'collapsed' ? 'expanded' : 'collapsed';
+                },
+                right: (s) => (s === 'collapsed' ? 'expanded' : 'collapsed'),
+            });
+        }
+        else if (sidebarCollapsedStateRight === 'expanded') {
+            toggleRight();
+        }
+        else if (leftSidebarStatus === 'expanded') {
+            toggleLeft();
+        }
+    }, [
+        leftSidebarStatus,
+        setSidebarCollapsedState,
+        sidebarCollapsedStateRight,
+        toggleLeft,
+        toggleRight,
+    ]);
+    (0, react_1.useEffect)(() => {
+        const left = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'b',
+            commandCtrlKey: true,
+            callback: toggleLeft,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+        const right = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'j',
+            commandCtrlKey: true,
+            callback: toggleRight,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+        const zen = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'g',
+            commandCtrlKey: true,
+            callback: toggleBoth,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+        return () => {
+            left.unregister();
+            right.unregister();
+            zen.unregister();
+        };
+    }, [keybindings, toggleBoth, toggleLeft, toggleRight]);
+    const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? 'Toggle Left Sidebar'
+        : `Toggle Left Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+B)`;
+    const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? 'Toggle Right Sidebar'
+        : `Toggle Right Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+J)`;
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleLeft, children: (0, jsx_runtime_1.jsx)("div", { style: style, title: toggleLeftTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: leftIcon }) }) }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleRight, children: (0, jsx_runtime_1.jsx)("div", { style: style, title: toggleRightTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: rightIcon }) }) })] }));
 };
 exports.SidebarCollapserControls = SidebarCollapserControls;

package/dist/editor/components/SizeSelector.js

@@ -84,7 +84,7 @@ const SizeSelector = () => {
                 },
                 type: 'item',
                 value: newSize.size,
-                keyHint: newSize.size === 1 ? '0' : null,
+                keyHint: newSize.size === 'auto' ? '0' : null,
                 leftItem: String(size.size) === String(newSize.size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,

package/dist/editor/components/Tabs/index.d.ts

@@ -3,6 +3,7 @@ export declare const Tabs: React.FC<{
     children: React.ReactNode;
     style?: React.CSSProperties;
 }>;
+export declare const selectorButton: React.CSSProperties;
 export declare const Tab: React.FC<{
     children: React.ReactNode;
     onClick: React.MouseEventHandler<HTMLButtonElement>;

package/dist/editor/components/Tabs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tab = exports.Tabs = void 0;
+exports.Tab = exports.selectorButton = exports.Tabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
@@ -19,11 +19,16 @@ const Tabs = ({ children, style }) => {
     return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
 };
 exports.Tabs = Tabs;
-const selectorButton = {
+exports.selectorButton = {
     border: 'none',
     flex: 1,
     padding: 8,
+    paddingLeft: 16,
+    display: 'flex',
+    flexDirection: 'row',
     fontSize: 14,
+    color: 'inherit',
+    alignItems: 'center',
 };
 const Tab = ({ children, onClick, style, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
@@ -36,13 +41,15 @@ const Tab = ({ children, onClick, style, selected }) => {
     }, []);
     const definiteStyle = (0, react_1.useMemo)(() => {
         return {
-            ...selectorButton,
+            ...exports.selectorButton,
             backgroundColor: selected
-                ? colors_1.SELECTED_BACKGROUND
+                ? 'transparent'
                 : hovered
                     ? colors_1.CLEAR_HOVER
-                    : 'transparent',
+                    : colors_1.INPUT_BACKGROUND,
             color: selected ? 'white' : colors_1.LIGHT_TEXT,
+            borderTop: selected ? '2px solid var(--blue)' : '2px solid transparent',
+            boxShadow: selected ? 'none' : undefined,
             ...style,
         };
     }, [hovered, selected, style]);

package/dist/editor/components/Tabs/vertical.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const VerticalTabs: React.FC<{
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}>;
+export declare const selectorButton: React.CSSProperties;
+export declare const VerticalTab: React.FC<{
+    children: React.ReactNode;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    style?: React.CSSProperties;
+    selected: boolean;
+}>;

package/dist/editor/components/Tabs/vertical.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalTab = exports.selectorButton = exports.VerticalTabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const tabsContainer = {
+    display: 'flex',
+    flexDirection: 'row',
+};
+const VerticalTabs = ({ children, style }) => {
+    const definiteStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...tabsContainer,
+            ...style,
+        };
+    }, [style]);
+    return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
+};
+exports.VerticalTabs = VerticalTabs;
+exports.selectorButton = {
+    border: 'none',
+    flex: 1,
+    padding: 8,
+    paddingLeft: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 14,
+    color: 'inherit',
+    alignItems: 'center',
+};
+const VerticalTab = ({ children, onClick, style, selected }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const definiteStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...exports.selectorButton,
+            backgroundColor: selected
+                ? colors_1.SELECTED_BACKGROUND
+                : hovered
+                    ? colors_1.CLEAR_HOVER
+                    : 'transparent',
+            color: selected ? 'white' : colors_1.LIGHT_TEXT,
+            boxShadow: selected ? 'none' : undefined,
+            ...style,
+        };
+    }, [hovered, selected, style]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+};
+exports.VerticalTab = VerticalTab;

package/dist/ffmpeg.js

@@ -5,7 +5,7 @@ const renderer_1 = require("@remotion/renderer");
 const child_process_1 = require("child_process");
 const ffmpegCommand = (_root, args) => {
     const done = (0, child_process_1.spawnSync)(renderer_1.RenderInternals.getExecutablePath('ffmpeg'), args, {
-        ...renderer_1.RenderInternals.callFfExtraOptions(),
+        ...renderer_1.RenderInternals.dynamicLibraryPathOptions(),
         stdio: 'inherit',
     });
     process.exit(done.status);
@@ -13,7 +13,7 @@ const ffmpegCommand = (_root, args) => {
 exports.ffmpegCommand = ffmpegCommand;
 const ffprobeCommand = (_root, args) => {
     const done = (0, child_process_1.spawnSync)(renderer_1.RenderInternals.getExecutablePath('ffprobe'), args, {
-        ...renderer_1.RenderInternals.callFfExtraOptions(),
+        ...renderer_1.RenderInternals.dynamicLibraryPathOptions(),
         stdio: 'inherit',
     });
     process.exit(done.status);

package/dist/get-cli-options.js

@@ -131,6 +131,7 @@ const getCliOptions = async (options) => {
         ignoreCertificateErrors: config_1.ConfigInternals.getIgnoreCertificateErrors(),
         headless: config_1.ConfigInternals.getChromiumHeadlessMode(),
         gl: (_a = config_1.ConfigInternals.getChromiumOpenGlRenderer()) !== null && _a !== void 0 ? _a : renderer_1.RenderInternals.DEFAULT_OPENGL_RENDERER,
+        userAgent: config_1.ConfigInternals.getChromiumUserAgent(),
     };
     const everyNthFrame = config_1.ConfigInternals.getEveryNthFrame();
     const numberOfGifLoops = config_1.ConfigInternals.getNumberOfGifLoops();

package/dist/parse-command-line.d.ts

@@ -50,6 +50,7 @@ export declare type CommandLineOptions = {
     ['no-open']: boolean;
     ['browser']: string;
     ['browser-args']: string;
+    ['user-agent']: string;
 };
 export declare const BooleanFlags: string[];
 export declare const parsedCli: CommandLineOptions & {

package/dist/parse-command-line.js

@@ -66,6 +66,9 @@ const parseCommandLine = () => {
     if (exports.parsedCli['disable-headless']) {
         config_1.Config.setChromiumHeadlessMode(false);
     }
+    if (exports.parsedCli['user-agent']) {
+        config_1.Config.setChromiumUserAgent(exports.parsedCli['user-agent']);
+    }
     if (exports.parsedCli.log) {
         if (!renderer_1.RenderInternals.isValidLogLevel(exports.parsedCli.log)) {
             log_1.Log.error('Invalid `--log` value passed.');

package/dist/preview-server/routes/can-update-default-props.d.ts

@@ -0,0 +1,4 @@
+import type { ApiHandler } from '../api-types';
+import type { CanUpdateDefaultPropsRequest, CanUpdateDefaultPropsResponse } from '../render-queue/job';
+export declare const checkIfTypeScriptFile: (file: string) => void;
+export declare const canUpdateDefaultPropsHandler: ApiHandler<CanUpdateDefaultPropsRequest, CanUpdateDefaultPropsResponse>;

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

@@ -1 +1,39 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canUpdateDefaultPropsHandler = exports.checkIfTypeScriptFile = void 0;
+const fs_1 = require("fs");
+const update_default_props_1 = require("../../codemods/update-default-props");
+const project_info_1 = require("../project-info");
+const checkIfTypeScriptFile = (file) => {
+    if (!file.endsWith('.tsx') &&
+        !file.endsWith('.ts') &&
+        !file.endsWith('.mtsx') &&
+        !file.endsWith('.mts')) {
+        throw new Error('Cannot update default props for non-TypeScript files');
+    }
+};
+exports.checkIfTypeScriptFile = checkIfTypeScriptFile;
+const canUpdateDefaultPropsHandler = async ({ input: { compositionId }, remotionRoot }) => {
+    try {
+        const projectInfo = await (0, project_info_1.getProjectInfo)(remotionRoot);
+        if (!projectInfo.videoFile) {
+            throw new Error('Cannot find root file in project');
+        }
+        (0, exports.checkIfTypeScriptFile)(projectInfo.videoFile);
+        await (0, update_default_props_1.updateDefaultProps)({
+            compositionId,
+            input: (0, fs_1.readFileSync)(projectInfo.videoFile, 'utf-8'),
+            newDefaultProps: {},
+        });
+        return {
+            canUpdate: true,
+        };
+    }
+    catch (err) {
+        return {
+            canUpdate: false,
+            reason: err.message,
+        };
+    }
+};
+exports.canUpdateDefaultPropsHandler = canUpdateDefaultPropsHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "3.3.82",
+  "version": "3.3.83",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -16,16 +16,16 @@
   "author": "Jonny Burger <jonny@remotion.dev>",
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@remotion/bundler": "3.3.82",
-    "@remotion/media-utils": "3.3.82",
-    "@remotion/player": "3.3.82",
-    "@remotion/renderer": "3.3.82",
+    "@remotion/bundler": "3.3.83",
+    "@remotion/media-utils": "3.3.83",
+    "@remotion/player": "3.3.83",
+    "@remotion/renderer": "3.3.83",
     "dotenv": "9.0.2",
     "memfs": "3.4.3",
     "minimist": "1.2.6",
     "open": "^8.4.2",
     "prompts": "2.4.1",
-    "remotion": "3.3.82",
+    "remotion": "3.3.83",
     "semver": "7.3.5",
     "source-map": "0.6.1"
   },

package/dist/editor/components/CheckerboardContext.js

@@ -1 +0,0 @@
-"use strict";

package/dist/editor/components/CollapsedSidebarExpander.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const CollapsedSidebarExpander: React.FC<{
-    onExpand: () => void;
-    direction: 'left' | 'right';
-}>;

package/dist/editor/components/CollapsedSidebarExpander.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsedSidebarExpander = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const caret_1 = require("../icons/caret");
-const z_index_1 = require("../state/z-index");
-const CollapsedSidebarExpander = ({ onExpand, direction }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            border: 'none',
-            borderRight: `${direction === 'right' ? 1 : 0}px solid black`,
-            borderLeft: `${direction === 'left' ? 1 : 0}px solid black`,
-            cursor: 'pointer',
-            color: 'white',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            paddingLeft: direction === 'right' ? 7 : 5,
-            paddingRight: direction === 'right' ? 4 : 5,
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
-                selected: false,
-            }),
-            appearance: 'none',
-            WebkitAppearance: 'none',
-        };
-    }, [direction, hovered]);
-    return ((0, jsx_runtime_1.jsx)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", role: "button", tabIndex: tabIndex, onClick: onExpand, children: direction === 'right' ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : (0, jsx_runtime_1.jsx)(caret_1.CaretLeft, {}) }));
-};
-exports.CollapsedSidebarExpander = CollapsedSidebarExpander;

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

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import type { z } from 'remotion';
-import type { JSONPath } from './zod-types';
-export declare const ZodOrNullEditor: React.FC<{
-    showSaveButton: boolean;
-    jsonPath: JSONPath;
-    compact: boolean;
-    value: unknown;
-    defaultValue: unknown;
-    schema: z.ZodTypeAny;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
-    onSave: (updater: (oldNum: unknown) => unknown) => void;
-    onRemove: null | (() => void);
-    nullishValue: null | undefined;
-}>;

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

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZodOrNullEditor = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../../helpers/colors");
-const Checkbox_1 = require("../../Checkbox");
-const layout_1 = require("../../layout");
-const create_zod_values_1 = require("./create-zod-values");
-const SchemaLabel_1 = require("./SchemaLabel");
-const ZodSwitch_1 = require("./ZodSwitch");
-const fullWidth = {
-    width: '100%',
-};
-const labelStyle = {
-    fontFamily: 'sans-serif',
-    fontSize: 14,
-    color: colors_1.LIGHT_TEXT,
-};
-const checkBoxWrapper = {
-    margin: '2px',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: '5px',
-};
-const ZodOrNullEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, nullishValue, }) => {
-    const isChecked = value === nullishValue;
-    const onValueChange = (0, react_1.useCallback)((newValue) => {
-        setValue(newValue);
-    }, [setValue]);
-    const onCheckBoxChange = (0, react_1.useCallback)((e) => {
-        console.log({ schema, newVal: (0, create_zod_values_1.createZodValues)(schema) });
-        const val = e.target.checked ? nullishValue : (0, create_zod_values_1.createZodValues)(schema);
-        onValueChange(val);
-    }, [nullishValue, onValueChange, schema]);
-    const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue);
-    }, [defaultValue, onValueChange]);
-    const save = (0, react_1.useCallback)(() => {
-        onSave(() => value);
-    }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [value === null ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove })) : ((0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: value, setValue: onValueChange, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }) })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: String(nullishValue) })] })] }));
-};
-exports.ZodOrNullEditor = ZodOrNullEditor;

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

@@ -1,2 +0,0 @@
-export declare const serializeJSONWithSchema: (data: unknown, indent: number | undefined) => string;
-export declare const deserializeJSONWithSchema: (data: string) => any;

package/dist/editor/components/RenderModal/SchemaEditor/schema-serialization.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deserializeJSONWithSchema = exports.serializeJSONWithSchema = void 0;
-const serializeJSONWithSchema = (data, indent) => {
-    return JSON.stringify(data, function (key, value) {
-        if (this[key] instanceof Date) {
-            return `remotion-date:${this[key].toISOString()}`;
-        }
-        return value;
-    }, indent);
-};
-exports.serializeJSONWithSchema = serializeJSONWithSchema;
-const deserializeJSONWithSchema = (data) => {
-    return JSON.parse(data, (_, value) => {
-        if (typeof value === 'string' && value.startsWith('remotion-date:')) {
-            return new Date(value.replace('remotion-date:', ''));
-        }
-        return value;
-    });
-};
-exports.deserializeJSONWithSchema = deserializeJSONWithSchema;

package/dist/editor/components/SidebarContent.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const leftSidebarTabs: React.RefObject<{
-    selectRendersPanel: () => void;
-}>;
-export declare const SidebarContent: React.FC;

package/dist/editor/components/SidebarContent.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarContent = exports.leftSidebarTabs = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const CompositionSelector_1 = require("./CompositionSelector");
-const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
-const RenderQueue_1 = require("./RenderQueue");
-const context_1 = require("./RenderQueue/context");
-const RendersTab_1 = require("./RendersTab");
-const Tabs_1 = require("./Tabs");
-const container = {
-    width: '100%',
-};
-const tabsContainer = {
-    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
-};
-exports.leftSidebarTabs = (0, react_1.createRef)();
-const localStorageKey = 'remotion.sidebarPanel';
-const persistSelectedPanel = (panel) => {
-    localStorage.setItem(localStorageKey, panel);
-};
-const getSelectedPanel = (shouldRender) => {
-    const panel = localStorage.getItem(localStorageKey);
-    if (panel === 'renders' && shouldRender) {
-        return 'renders';
-    }
-    return 'compositions';
-};
-const SidebarContent = () => {
-    const shouldRender = (0, context_1.useShouldRenderLeftSidebarTabs)();
-    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel(shouldRender));
-    const onCompositionsSelected = (0, react_1.useCallback)(() => {
-        setPanel('compositions');
-        persistSelectedPanel('compositions');
-    }, []);
-    const onRendersSelected = (0, react_1.useCallback)(() => {
-        setPanel('renders');
-        persistSelectedPanel('renders');
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.leftSidebarTabs, () => {
-        return {
-            selectRendersPanel: () => {
-                setPanel('renders');
-                persistSelectedPanel('renders');
-            },
-        };
-    }, []);
-    // TODO: It is not perfectly aligned in example
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [shouldRender ? ((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 === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) })) : null, panel === 'renders' && shouldRender ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {})), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
-};
-exports.SidebarContent = SidebarContent;