@remotion/cli 3.3.82 → 3.3.84

package/dist/editor/components/RenderQueue/actions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = exports.callApi = void 0;
+exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = void 0;
 const date_serialization_1 = require("../RenderModal/SchemaEditor/date-serialization");
 const callApi = (endpoint, body) => {
     return new Promise((resolve, reject) => {
@@ -25,9 +25,8 @@ const callApi = (endpoint, body) => {
         });
     });
 };
-exports.callApi = callApi;
 const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }) => {
-    return (0, exports.callApi)('/api/render', {
+    return callApi('/api/render', {
         compositionId,
         type: 'still',
         outName,
@@ -44,7 +43,7 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
 };
 exports.addStillRenderJob = addStillRenderJob;
 const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }) => {
-    return (0, exports.callApi)('/api/render', {
+    return callApi('/api/render', {
         compositionId,
         type: 'video',
         outName,
@@ -75,11 +74,11 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
 };
 exports.addVideoRenderJob = addVideoRenderJob;
 const unsubscribeFromFileExistenceWatcher = ({ file, clientId, }) => {
-    return (0, exports.callApi)('/api/unsubscribe-from-file-existence', { file, clientId });
+    return callApi('/api/unsubscribe-from-file-existence', { file, clientId });
 };
 exports.unsubscribeFromFileExistenceWatcher = unsubscribeFromFileExistenceWatcher;
 const subscribeToFileExistenceWatcher = async ({ file, clientId, }) => {
-    const { exists } = await (0, exports.callApi)('/api/subscribe-to-file-existence', {
+    const { exists } = await callApi('/api/subscribe-to-file-existence', {
         file,
         clientId,
     });
@@ -90,30 +89,30 @@ const openInFileExplorer = ({ directory }) => {
     const body = {
         directory,
     };
-    return (0, exports.callApi)('/api/open-in-file-explorer', body);
+    return callApi('/api/open-in-file-explorer', body);
 };
 exports.openInFileExplorer = openInFileExplorer;
 const removeRenderJob = (job) => {
-    return (0, exports.callApi)('/api/remove-render', {
+    return callApi('/api/remove-render', {
         jobId: job.id,
     });
 };
 exports.removeRenderJob = removeRenderJob;
 const cancelRenderJob = (job) => {
-    return (0, exports.callApi)('/api/cancel', {
+    return callApi('/api/cancel', {
         jobId: job.id,
     });
 };
 exports.cancelRenderJob = cancelRenderJob;
 const updateDefaultProps = (compositionId, defaultProps) => {
-    return (0, exports.callApi)('/api/update-default-props', {
+    return callApi('/api/update-default-props', {
         compositionId,
         defaultProps: (0, date_serialization_1.serializeJSONWithDate)(defaultProps, undefined),
     });
 };
 exports.updateDefaultProps = updateDefaultProps;
 const canUpdateDefaultProps = (compositionId) => {
-    return (0, exports.callApi)('/api/can-update-default-props', {
+    return callApi('/api/can-update-default-props', {
         compositionId,
     });
 };

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

@@ -3,15 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const layout_1 = require("../layout");
 const context_1 = require("./context");
 const RenderQueueItem_1 = require("./RenderQueueItem");
 const separatorStyle = {
     borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
 };
-// TODO: Handle state where preview server is disconnected
+const errorExplanation = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+};
+const explainer = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    padding: '0 12px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+};
 const RenderQueue = () => {
+    const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type;
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const jobCount = jobs.length;
+    if (connectionStatus === 'disconnected') {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The preview server has disconnected." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+    }
+    if (jobCount === 0) {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "No renders in the queue." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+    }
     return ((0, jsx_runtime_1.jsx)("div", { children: jobs.map((j, index) => {
             return ((0, jsx_runtime_1.jsx)("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: (0, jsx_runtime_1.jsx)(RenderQueueItem_1.RenderQueueItem, { job: j }) }, j.id));
         }) }));

package/dist/editor/components/RenderToolbarIcon.js

@@ -2,27 +2,40 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_default_out_name_1 = require("../../get-default-out-name");
+const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
 const get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
 const client_id_1 = require("../helpers/client-id");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
-const ControlButton_1 = require("./ControlButton");
+const layout_1 = require("./layout");
+const button = {
+    paddingLeft: 7,
+    paddingRight: 7,
+    paddingTop: 7,
+    paddingBottom: 7,
+};
+const label = {
+    fontSize: 14,
+};
 const RenderButton = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { type } = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
+    const tooltip = type === 'connected'
+        ? 'Export the current composition ' + shortcut
+        : 'Connect to the preview server to render';
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
-                height: 18,
+                height: 16,
             },
         };
     }, []);
-    const tooltip = type === 'connected'
-        ? 'Export the current composition'
-        : 'Connect to the preview server to render';
     const video = remotion_1.Internals.useVideo();
     const frame = (0, remotion_1.useCurrentFrame)();
     const onClick = (0, react_1.useCallback)(() => {
@@ -47,7 +60,9 @@ const RenderButton = () => {
             initialVideoImageFormat: defaults.videoImageFormat,
             initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
                 compositionName: video.id,
-                defaultExtension: isVideo ? 'mp4' : 'png',
+                defaultExtension: isVideo
+                    ? client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, defaults.audioCodec)
+                    : defaults.stillImageFormat,
                 type: 'asset',
             }),
             initialJpegQuality: defaults.jpegQuality,
@@ -79,6 +94,6 @@ const RenderButton = () => {
     if (!video) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { id: "render-modal-button", disabled: type !== 'connected', title: tooltip, "aria-label": tooltip, onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }) }));
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { id: "render-modal-button", title: tooltip, onClick: onClick, buttonContainerStyle: button, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("span", { style: label, children: "Render" })] }) }));
 };
 exports.RenderButton = RenderButton;

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/SegmentedControl.d.ts

@@ -1,4 +1,3 @@
-import type { PropsWithChildren } from 'react';
 import React from 'react';
 export declare type SegmentedControlItem = {
     label: React.ReactNode;
@@ -10,7 +9,3 @@ export declare const SegmentedControl: React.FC<{
     items: SegmentedControlItem[];
     needsWrapping: boolean;
 }>;
-export declare const Item: React.FC<PropsWithChildren<{
-    selected: boolean;
-    onClick: () => void;
-}>>;

package/dist/editor/components/SegmentedControl.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Item = exports.SegmentedControl = void 0;
+exports.SegmentedControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
@@ -38,7 +38,7 @@ const SegmentedControl = ({ items, needsWrapping }) => {
         };
     }, [needsWrapping]);
     return ((0, jsx_runtime_1.jsx)("div", { style: controlStyle, children: items.map((i) => {
-            return ((0, jsx_runtime_1.jsx)(exports.Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
+            return ((0, jsx_runtime_1.jsx)(Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
         }) }));
 };
 exports.SegmentedControl = SegmentedControl;
@@ -60,4 +60,3 @@ const Item = ({ selected, onClick, children }) => {
     }, [hovered, selected]);
     return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
 };
-exports.Item = Item;

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/Splitter/SplitterElement.js

@@ -14,6 +14,7 @@ const SplitterElement = ({ children, type }) => {
             display: 'flex',
             position: 'relative',
             overflow: 'hidden',
+            flexDirection: 'column',
         };
     }, [context.flexValue, type]);
     return (0, jsx_runtime_1.jsx)("div", { style: style, children: children });

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

@@ -23,7 +23,12 @@ const 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);
@@ -38,11 +43,13 @@ const Tab = ({ children, onClick, style, selected }) => {
         return {
             ...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,7 @@
+import React from 'react';
+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,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalTab = 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 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 {
+            ...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/editor/components/TimeValue.js

@@ -18,14 +18,13 @@ const text = {
 const time = {
     display: 'inline-block',
     fontSize: 18,
+    lineHeight: 1,
 };
 const frameStyle = {
     color: '#ccc',
     fontSize: 10,
     fontWeight: 500,
-};
-const spacer = {
-    width: layout_1.SPACING_UNIT,
+    lineHeight: 1,
 };
 const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
@@ -37,6 +36,6 @@ const TimeValue = () => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: text, children: [(0, jsx_runtime_1.jsx)("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), ' ', (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: frameStyle, children: [frame, " ", (0, jsx_runtime_1.jsxs)("span", { style: frameStyle, children: ["(", config.fps, " fps)"] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: text, children: [(0, jsx_runtime_1.jsx)("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: frameStyle, children: [frame, " ", (0, jsx_runtime_1.jsxs)("span", { style: frameStyle, children: ["(", config.fps, " fps)"] })] })] }));
 };
 exports.TimeValue = TimeValue;

package/dist/editor/components/Timeline/TimelineListItem.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const z_index_1 = require("../../state/z-index");
+const layout_1 = require("../layout");
 const TimelineCollapseToggle_1 = require("./TimelineCollapseToggle");
 const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
 const HOOK_WIDTH = 7;
@@ -16,6 +17,9 @@ const TIMELINE_COLLAPSER_MARGIN_RIGHT = 10;
 exports.TOTAL_TIMELINE_LAYER_LEFT_PADDING = TIMELINE_COLLAPSER_WIDTH + TIMELINE_COLLAPSER_MARGIN_RIGHT + timeline_layout_1.TIMELINE_PADDING;
 const textStyle = {
     fontSize: 13,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
 };
 const outer = {
     height: timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2,
@@ -43,14 +47,17 @@ const hook = {
 };
 const space = {
     width: SPACING,
+    flexShrink: 0,
 };
 const smallSpace = {
     width: SPACING * 0.5,
+    flexShrink: 0,
 };
 const collapser = {
     width: TIMELINE_COLLAPSER_WIDTH,
     userSelect: 'none',
     marginRight: TIMELINE_COLLAPSER_MARGIN_RIGHT,
+    flexShrink: 0,
 };
 const collapserButton = {
     ...collapser,
@@ -71,6 +78,7 @@ const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispa
     const padder = (0, react_1.useMemo)(() => {
         return {
             width: leftOffset * nestedDepth,
+            flexShrink: 0,
         };
     }, [leftOffset, nestedDepth]);
     const toggleCollapse = (0, react_1.useCallback)(() => {
@@ -90,6 +98,6 @@ const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispa
     const text = sequence.displayName.length > 80
         ? sequence.displayName.slice(0, 80) + '...'
         : sequence.displayName;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: collapsed }) })) : ((0, jsx_runtime_1.jsx)("div", { style: collapser })), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: space })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: collapsed }) })) : ((0, jsx_runtime_1.jsx)("div", { style: collapser })), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: space })] })) : null, (0, jsx_runtime_1.jsxs)("div", { title: text || 'Untitled', style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
 };
 exports.TimelineListItem = TimelineListItem;

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/api-types.d.ts

@@ -8,10 +8,6 @@ export declare type ApiHandler<ReqData, ResData> = (params: {
     request: IncomingMessage;
     response: ServerResponse;
 }) => Promise<ResData>;
-export declare type ApiRoute<ReqData, ResData> = {
-    handler: ApiHandler<ReqData, ResData>;
-    endpoint: string;
-};
 declare type ReqAndRes<A, B> = {
     Request: A;
     Response: B;

package/dist/preview-server/render-queue/job.d.ts

@@ -1,7 +1,7 @@
 import type { AudioCodec, Codec, makeCancelSignal, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 import type { AggregateRenderProgress } from '../../progress-types';
 import type { RequiredChromiumOptions } from '../../required-chromium-options';
-export declare type BaseRenderProgress = {
+declare type BaseRenderProgress = {
     message: string;
     value: number;
 };