@remotion/studio 4.0.503 → 4.0.505

package/dist/components/PlaybackRateSelector.js

@@ -4,11 +4,12 @@ exports.PlaybackRateSelector = exports.usePlaybackRateMenuItems = void 0;
 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 is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const Checkmark_1 = require("../icons/Checkmark");
+const playback_rate_1 = require("../icons/playback-rate");
 const playbackrate_1 = require("../state/playbackrate");
-const ControlButton_1 = require("./ControlButton");
-const ComboBox_1 = require("./NewComposition/ComboBox");
+const TimelineCombobox_1 = require("./TimelineCombobox");
 const commonPlaybackRates = [
     -4, -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 1.5, 2, 4,
 ];
@@ -16,7 +17,6 @@ const getPlaybackRateLabel = (playbackRate) => {
     return `${playbackRate}x`;
 };
 const accessibilityLabel = 'Change the playback rate';
-const comboStyle = { width: 64 };
 const usePlaybackRateMenuItems = ({ playbackRate, setPlaybackRate, }) => {
     const items = (0, react_1.useMemo)(() => {
         const divider = {
@@ -57,14 +57,9 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate, }) => {
         playbackRate,
         setPlaybackRate,
     });
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
-        };
-    }, []);
     if (isStill || canvasContent === null || canvasContent.type === 'asset') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: selectedId, values: items }) }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, labelWidth: 30, selectedId: selectedId, values: items, renderLeftItem: (color) => (jsx_runtime_1.jsx(playback_rate_1.PlaybackRateIcon, { color: color, playbackRate: playbackRate })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/components/PreviewToolbar.js

@@ -25,7 +25,6 @@ const PreviewToolbarOverflowButton_1 = require("./PreviewToolbarOverflowButton")
 const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const SnappingToggle_1 = require("./SnappingToggle");
-const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
 const TOOLBAR_HEIGHT = 40;
 const container = {
@@ -58,7 +57,8 @@ const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
 };
 const toolbarControl = {
-    display: 'contents',
+    display: 'flex',
+    flexShrink: 0,
 };
 const PreviewToolbarControl = ({ children }) => {
     const onPointerDown = (0, react_1.useCallback)((e) => {
@@ -80,12 +80,16 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const playPause = (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: playerMuted, hideNavigationControls: isMobileLayout }) }));
     return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
             jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {}) })
-                ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) })), !isMobileLayout && (isStill || isVideoComposition) ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx("div", { style: centeredPlayButton, children: playPause })) : null, isVideoComposition && !isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
-                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), readOnlyStudio || isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", hidden: isMobileLayout }) }), isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) })) : null, jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { readOnlyStudio: readOnlyStudio, showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCompositionControls: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition', playbackRate: playbackRate, setPlaybackRate: setPlaybackRate, loop: loop, setLoop: setLoop }) })
-                        ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                    jsx_runtime_1.jsx("div", { style: padding }), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) })), !isMobileLayout && (isStill || isVideoComposition) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })
+                        ] })) : null, isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCompositionControls: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition', playbackRate: playbackRate, setPlaybackRate: setPlaybackRate, loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                        ] })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) })) : null] }), jsx_runtime_1.jsx(layout_1.Flex, {}), isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx("div", { style: centeredPlayButton, children: playPause })) : null, isVideoComposition && !isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.75 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
+                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), readOnlyStudio || isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) })
+                        ] }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", narrow: isMobileLayout }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
         ] }));
 };

package/dist/components/PreviewToolbarOverflowButton.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 export declare const PreviewToolbarOverflowButton: React.FC<{
-    readonly readOnlyStudio: boolean;
     readonly showFullscreen: boolean;
     readonly showPlaybackRate: boolean;
     readonly showLoop: boolean;

package/dist/components/PreviewToolbarOverflowButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreviewToolbarOverflowButton = void 0;
 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 use_keybinding_1 = require("../helpers/use-keybinding");
 const Checkmark_1 = require("../icons/Checkmark");
@@ -18,8 +17,7 @@ const clickButton = (id) => {
     var _a;
     (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
 };
-const PreviewToolbarOverflowButton = ({ readOnlyStudio, showFullscreen, showPlaybackRate, showLoop, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
-    const video = remotion_1.Internals.useVideo();
+const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLoop, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const { items: previewSizeItems, selectedId: selectedPreviewSize, zoomable, } = (0, SizeSelector_1.usePreviewSizeMenuItems)();
@@ -34,58 +32,6 @@ const PreviewToolbarOverflowButton = ({ readOnlyStudio, showFullscreen, showPlay
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { fill: color, svgProps: iconStyle }), [iconStyle]);
-    const renderItems = (0, react_1.useMemo)(() => {
-        if (readOnlyStudio) {
-            return [
-                {
-                    type: 'item',
-                    id: 'client-render',
-                    label: 'Render on web',
-                    value: 'client-render',
-                    onClick: () => clickButton('render-modal-button-client'),
-                    keyHint: null,
-                    leftItem: null,
-                    subMenu: null,
-                    quickSwitcherLabel: null,
-                },
-                {
-                    type: 'item',
-                    id: 'render-command',
-                    label: 'Render via CLI',
-                    value: 'render-command',
-                    onClick: () => clickButton('render-modal-button-command'),
-                    keyHint: null,
-                    leftItem: null,
-                    subMenu: null,
-                    quickSwitcherLabel: null,
-                },
-            ];
-        }
-        return [
-            {
-                type: 'item',
-                id: 'server-render',
-                label: 'Server-side render',
-                value: 'server-render',
-                onClick: () => clickButton('render-modal-button-server'),
-                keyHint: null,
-                leftItem: null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-            },
-            {
-                type: 'item',
-                id: 'client-render',
-                label: 'Client-side render',
-                value: 'client-render',
-                onClick: () => clickButton('render-modal-button-client'),
-                keyHint: null,
-                leftItem: null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-            },
-        ];
-    }, [readOnlyStudio]);
     const values = (0, react_1.useMemo)(() => {
         const items = [];
         if (zoomable) {
@@ -172,28 +118,10 @@ const PreviewToolbarOverflowButton = ({ readOnlyStudio, showFullscreen, showPlay
                 quickSwitcherLabel: null,
             });
         }
-        if (video) {
-            items.push({
-                type: 'item',
-                id: 'render',
-                label: 'Render',
-                value: 'render',
-                onClick: () => undefined,
-                keyHint: null,
-                leftItem: null,
-                subMenu: {
-                    items: renderItems,
-                    leaveLeftSpace: false,
-                    preselectIndex: 0,
-                },
-                quickSwitcherLabel: null,
-            });
-        }
         return items;
     }, [
         previewSizeItems,
         playbackRateItems,
-        renderItems,
         selectedPlaybackRate,
         selectedPreviewSize,
         showFullscreen,
@@ -206,12 +134,11 @@ const PreviewToolbarOverflowButton = ({ readOnlyStudio, showFullscreen, showPlay
         setCheckerboard,
         setEditorShowOutlines,
         setLoop,
-        video,
         zoomable,
     ]);
     if (values.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE }));
+    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.PreviewToolbarOverflowButton = PreviewToolbarOverflowButton;

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -52,7 +52,6 @@ const modeInactive = {
 const modeActive = {
     ...modeItem,
     color: colors_1.WHITE,
-    fontWeight: 'bold',
 };
 const content = {
     paddingLeft: 16,
@@ -353,7 +352,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                 : 'Search compositions...';
     const container = (0, react_1.useMemo)(() => {
         return {
-            width: showKeyboardShortcuts ? 800 : 500,
+            width: showKeyboardShortcuts ? 800 : 400,
         };
     }, [showKeyboardShortcuts]);
     const results = (0, react_1.useMemo)(() => {

package/dist/components/RenderButton.d.ts

@@ -3,5 +3,5 @@ export type RenderType = 'server-render' | 'client-render' | 'render-command';
 export declare const RenderButton: React.FC<{
     readonly readOnlyStudio: boolean;
     readonly size?: 'default' | 'compact';
-    readonly hidden: boolean;
+    readonly narrow?: boolean;
 }>;

package/dist/components/RenderButton.js

@@ -25,10 +25,9 @@ const MenuContent_1 = require("./NewComposition/MenuContent");
 const splitButtonContainer = {
     display: 'inline-flex',
     flexDirection: 'row',
-    alignItems: 'stretch',
-    borderRadius: 4,
-    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
-    backgroundColor: colors_1.INPUT_BACKGROUND,
+    alignItems: 'center',
+    borderRadius: 3,
+    gap: 1,
     overflow: 'hidden',
 };
 const mainButtonStyle = {
@@ -38,18 +37,14 @@ const mainButtonStyle = {
     paddingBottom: 7,
     background: colors_1.TRANSPARENT,
     border: 'none',
+    borderRadius: '3px 0 0 3px',
     color: colors_1.WHITE,
-    cursor: 'pointer',
+    cursor: 'default',
     display: 'flex',
     alignItems: 'center',
     fontSize: 14,
     fontFamily: 'inherit',
 };
-const dividerStyle = {
-    width: 1,
-    backgroundColor: colors_1.BLACK_ALPHA_60,
-    alignSelf: 'stretch',
-};
 const dropdownTriggerStyle = {
     paddingLeft: 6,
     paddingRight: 6,
@@ -57,10 +52,12 @@ const dropdownTriggerStyle = {
     paddingBottom: 7,
     background: colors_1.TRANSPARENT,
     border: 'none',
+    borderRadius: '0 3px 3px 0',
     color: colors_1.WHITE,
-    cursor: 'pointer',
+    cursor: 'default',
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'center',
 };
 const mainButtonContent = {
     paddingLeft: 4,
@@ -75,32 +72,29 @@ const label = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
-const compactSplitButtonSegmentHeight = layout_1.COMPACT_CONTROL_ROW_HEIGHT;
+const compactSplitButtonSegmentHeight = 24;
 const compactMainButtonStyle = {
     ...mainButtonStyle,
     boxSizing: 'border-box',
     height: compactSplitButtonSegmentHeight,
-    paddingLeft: 6,
-    paddingRight: 6,
-    paddingTop: 6,
-    paddingBottom: 6,
+    padding: '0 4px',
     fontSize: 12,
 };
 const compactDropdownTriggerStyle = {
     ...dropdownTriggerStyle,
     boxSizing: 'border-box',
     height: compactSplitButtonSegmentHeight,
-    paddingLeft: 5,
-    paddingRight: 5,
-    paddingTop: 6,
-    paddingBottom: 6,
+    padding: 0,
+    width: 20,
 };
 const compactMainButtonContent = {
     ...mainButtonContent,
-    paddingLeft: 2,
-    paddingRight: 4,
+    paddingLeft: 0,
+    paddingRight: 0,
 };
 const compactLabel = {
     ...label,
@@ -123,11 +117,12 @@ const getInitialRenderType = (readOnlyStudio) => {
     }
     return 'server-render';
 };
-const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', hidden }) => {
+const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', narrow = false }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
     const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
     const dropdownRef = (0, react_1.useRef)(null);
     const containerRef = (0, react_1.useRef)(null);
     const { currentZIndex } = (0, z_index_1.useZIndex)();
@@ -191,8 +186,8 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', hidden })
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
-                height: controlSize === 'compact' ? 14 : 16,
-                color: colors_1.CURRENT_COLOR,
+                height: controlSize === 'compact' ? 18 : 16,
+                width: controlSize === 'compact' ? 18 : 16,
                 flexShrink: 0,
             },
         };
@@ -422,10 +417,9 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', hidden })
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             ...splitButtonContainer,
-            borderColor: colors_1.BLACK_ALPHA_60,
-            borderRadius: controlSize === 'compact' ? 0 : 4,
+            borderRadius: controlSize === 'compact' ? 3 : 4,
             opacity: 1,
-            cursor: 'pointer',
+            cursor: 'default',
         };
     }, [controlSize]);
     const renderLabel = renderType === 'server-render'
@@ -433,21 +427,45 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', hidden })
         : renderType === 'render-command'
             ? 'Render via CLI'
             : 'Render on web';
+    const showRenderLabel = !narrow || renderType !== 'server-render';
+    const mainHovered = hovered && !dropdownOpened;
+    const mainForegroundColor = mainHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
+    const dropdownForegroundColor = hovered || dropdownOpened ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
+    const mainSegmentBackground = (0, colors_1.getBackgroundFromHoverState)({
+        hovered: mainHovered,
+        selected: false,
+    });
+    const dropdownSegmentBackground = (0, colors_1.getBackgroundFromHoverState)({
+        hovered,
+        selected: dropdownOpened,
+    });
     if (!video) {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), hidden ? (jsx_runtime_1.jsx("button", { style: { display: 'none' }, onClick: onClick, id: "render-modal-button", type: "button" })) : (jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
-                    jsx_runtime_1.jsx("button", { type: "button", style: controlSize === 'compact'
-                            ? compactMainButtonStyle
-                            : mainButtonStyle, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
+                    jsx_runtime_1.jsx("button", { type: "button", "aria-label": renderLabel, style: {
+                            ...(controlSize === 'compact'
+                                ? compactMainButtonStyle
+                                : mainButtonStyle),
+                            backgroundColor: mainSegmentBackground,
+                            color: mainForegroundColor,
+                        }, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
                                 ? compactMainButtonContent
                                 : mainButtonContent, children: [
-                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: colors_1.CURRENT_COLOR_LOWERCASE, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: controlSize === 'compact' ? compactLabel : label, children: renderLabel })
-                            ] }) }), jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: controlSize === 'compact'
-                            ? compactDropdownTriggerStyle
-                            : dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
-                ] })), portalStyle
+                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: mainForegroundColor, svgProps: iconStyle }), showRenderLabel ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                        jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: {
+                                                ...(controlSize === 'compact' ? compactLabel : label),
+                                                color: mainForegroundColor,
+                                            }, children: renderLabel })
+                                    ] })) : null] }) }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: {
+                            ...(controlSize === 'compact'
+                                ? compactDropdownTriggerStyle
+                                : dropdownTriggerStyle),
+                            backgroundColor: dropdownSegmentBackground,
+                            color: dropdownForegroundColor,
+                        }, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: dropdownForegroundColor }) })
+                ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/RenderModal/FrameRangeSetting.js

@@ -7,6 +7,11 @@ const InputDragger_1 = require("../NewComposition/InputDragger");
 const layout_1 = require("./layout");
 const MultiRangeSlider_1 = require("./MultiRangeSlider");
 const INPUT_WIDTH = 40;
+const startFrameInputContainer = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    width: INPUT_WIDTH,
+};
 const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
     const minStartFrame = 0;
     const maxEndFrame = durationInFrames - 1;
@@ -24,7 +29,7 @@ const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames
     }, [onEndFrameChangedDirectly]);
     return (jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
             jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Frame range" }), jsx_runtime_1.jsxs("div", { style: layout_1.rightRow, children: [
-                    jsx_runtime_1.jsx("div", { style: { width: INPUT_WIDTH }, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { min: minStartFrame, max: endFrame - 1, name: "Start frame", value: startFrame, step: 1, onTextChange: onStartFrameChanged, onValueChange: onStartFrameChangedDirectly, status: "ok", rightAlign: true, style: { width: INPUT_WIDTH } }) }), jsx_runtime_1.jsx(MultiRangeSlider_1.MultiRangeSlider, { min: minStartFrame, max: maxEndFrame, start: startFrame, end: endFrame, step: 1, onLeftThumbDrag: onStartFrameChangedDirectly, onRightThumbDrag: onEndFrameChangedDirectly }), ' ', jsx_runtime_1.jsx("div", { style: { width: INPUT_WIDTH }, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { min: startFrame + 1, max: maxEndFrame, name: "End frame", value: endFrame, step: 1, onTextChange: onEndFrameChanged, onValueChange: onEndFrameChangedDirectly, status: "ok", rightAlign: true, style: { width: INPUT_WIDTH } }) })
+                    jsx_runtime_1.jsx("div", { style: startFrameInputContainer, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { min: minStartFrame, max: endFrame - 1, name: "Start frame", value: startFrame, step: 1, onTextChange: onStartFrameChanged, onValueChange: onStartFrameChangedDirectly, status: "ok", rightAlign: true, style: { width: INPUT_WIDTH } }) }), jsx_runtime_1.jsx(MultiRangeSlider_1.MultiRangeSlider, { min: minStartFrame, max: maxEndFrame, start: startFrame, end: endFrame, step: 1, onLeftThumbDrag: onStartFrameChangedDirectly, onRightThumbDrag: onEndFrameChangedDirectly }), ' ', jsx_runtime_1.jsx("div", { style: { width: INPUT_WIDTH }, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { min: startFrame + 1, max: maxEndFrame, name: "End frame", value: endFrame, step: 1, onTextChange: onEndFrameChanged, onValueChange: onEndFrameChangedDirectly, status: "ok", rightAlign: true, style: { width: INPUT_WIDTH } }) })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/MultiRangeSlider.js

@@ -5,23 +5,23 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const container = {
-    borderColor: colors_1.BLACK,
-    borderStyle: 'solid',
-    borderWidth: '2px',
-    height: 39,
-    width: 220,
+    height: 6,
+    flex: 1,
+    minWidth: 80,
+    maxWidth: 220,
     position: 'relative',
-    backgroundColor: colors_1.INPUT_BACKGROUND,
+    backgroundColor: colors_1.WHITE_ALPHA_10,
     marginLeft: 8,
     marginRight: 8,
-    borderRadius: 2,
+    borderRadius: 3,
 };
 // blue slider
 const sliderRange = {
     position: 'absolute',
     top: 0,
     backgroundColor: colors_1.BLUE,
-    height: 35,
+    height: 6,
+    borderRadius: 3,
 };
 const MultiRangeSlider = ({ min, max, start, end, step, onLeftThumbDrag, onRightThumbDrag, }) => {
     const getPercent = (0, react_1.useCallback)((value) => Math.round(((value - min) / (max - min)) * 100), [min, max]);

package/dist/components/RenderModal/RenderModalEnvironmentVariables.js

@@ -3,16 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalEnvironmentVariables = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
 const Button_1 = require("../Button");
 const layout_1 = require("../layout");
 const EnvInput_1 = require("./EnvInput");
-const title = {
-    fontSize: 14,
-    fontWeight: 'bold',
-    color: colors_1.LIGHT_TEXT,
-    marginLeft: 16,
-};
 const container = {
     marginTop: 20,
 };
@@ -41,8 +34,7 @@ const RenderModalEnvironmentVariables = ({ envVariables, setEnvVariables }) => {
         setEnvVariables((oldEnv) => [...oldEnv, ['', '']]);
     }, [setEnvVariables]);
     const usedKeys = [];
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("strong", { style: title, children: "Environment variables" }), envVariables.map((env, i) => {
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [envVariables.map((env, i) => {
                 let isDuplicate = false;
                 if (usedKeys.includes(env[0].toUpperCase())) {
                     isDuplicate = true;

package/dist/components/RenderModal/RenderModalOutputName.js

@@ -28,6 +28,15 @@ const openIconStyle = {
     height: 12,
     flexShrink: 0,
 };
+const outputNameRow = {
+    ...layout_2.optionRow,
+    columnGap: 16,
+};
+const outputNameInputContainer = {
+    flex: 1,
+    minWidth: 0,
+    maxWidth: 280,
+};
 const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange, validationMessage, label: labelText, }) => {
     const openExistingOutput = (0, react_1.useCallback)(() => {
         (0, actions_1.openInFileExplorer)({ directory: outName }).catch((err) => {
@@ -38,8 +47,8 @@ const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange,
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: openIconStyle, color: color });
     }, []);
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
-    return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-            jsx_runtime_1.jsx(layout_1.Column, { children: jsx_runtime_1.jsx("div", { style: layout_2.label, children: labelText }) }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
+    return (jsx_runtime_1.jsxs("div", { style: outputNameRow, children: [
+            jsx_runtime_1.jsx(layout_1.Column, { children: jsx_runtime_1.jsx("div", { style: layout_2.label, children: labelText }) }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { style: outputNameInputContainer, children: [
                         jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage, type: 'error' })
                             ] })) : existence ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/RenderModal/ServerRenderModal.js

@@ -19,6 +19,7 @@ const file_1 = require("../../icons/file");
 const frame_1 = require("../../icons/frame");
 const gear_1 = require("../../icons/gear");
 const gif_1 = require("../../icons/gif");
+const input_props_1 = require("../../icons/input-props");
 const video_1 = require("../../icons/video");
 const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
@@ -989,23 +990,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
                                     : 'Rendering...', jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [shownTabs.includes('general') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { style: render_modals_1.icon }) }),
-                                    "General"] })) : null, shownTabs.includes('data') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { style: render_modals_1.icon }) }),
-                                    "Input Props"] })) : null, shownTabs.includes('picture') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { style: render_modals_1.icon }) }),
-                                    "Picture"] })) : null, shownTabs.includes('audio') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { style: render_modals_1.icon }) }),
-                                    "Audio"] })) : null, shownTabs.includes('gif') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gif_1.GifIcon, { style: render_modals_1.icon }) }),
-                                    "GIF"] })) : null, shownTabs.includes('encoding') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'encoding', onClick: () => setTab('encoding'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { style: render_modals_1.icon, color: colors_1.CURRENT_COLOR_LOWERCASE }) }),
-                                    "Encoding"] })) : null, shownTabs.includes('environment') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'environment', onClick: () => setTab('environment'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { style: render_modals_1.icon }) }),
-                                    "Environment"] })) : null, shownTabs.includes('advanced') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { style: render_modals_1.icon }) }),
-                                    "Other"] })) : null] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, setVerboseLogging: setLogLevel, logLevel: logLevel, showOutputName: !readOnlyStudio, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? (jsx_runtime_1.jsx(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, imageFormatOptions: imageFormatOptions, jpegQuality: jpegQuality, setJpegQuality: setJpegQuality, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName, sampleRate: sampleRate, setSampleRate: setSampleRate })) : tab === 'gif' ? (jsx_runtime_1.jsx(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'encoding' ? (jsx_runtime_1.jsx(RenderModalEncoding_1.RenderModalEncoding, { renderMode: renderMode, codec: codec, qualityControlType: qualityControlType, setQualityControl: setQualityControl, shouldDisplayQualityControlPicker: supportsBothQualityControls, crf: crf, setCrf: setCrf, maxCrf: maxCrf, minCrf: minCrf, customTargetVideoBitrate: customTargetVideoBitrate, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, colorSpace: colorSpace, setColorSpace: setColorSpace, x264Preset: x264Preset, setx264Preset: setx264Preset, gopSize: gopSize, setGopSize: setGopSize, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding })) : tab === 'environment' ? (jsx_runtime_1.jsx(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
+                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [shownTabs.includes('general') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" })) : null, shownTabs.includes('data') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" })) : null, shownTabs.includes('picture') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, shownTabs.includes('audio') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, shownTabs.includes('gif') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gif_1.GifIcon, { color: color, style: render_modals_1.icon }) })), children: "GIF" })) : null, shownTabs.includes('encoding') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'encoding', onClick: () => setTab('encoding'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Encoding" })) : null, shownTabs.includes('environment') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'environment', onClick: () => setTab('environment'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { color: color, style: render_modals_1.icon }) })), children: "Environment" })) : null, shownTabs.includes('advanced') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" })) : null] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, setVerboseLogging: setLogLevel, logLevel: logLevel, showOutputName: !readOnlyStudio, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? (jsx_runtime_1.jsx(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, imageFormatOptions: imageFormatOptions, jpegQuality: jpegQuality, setJpegQuality: setJpegQuality, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName, sampleRate: sampleRate, setSampleRate: setSampleRate })) : tab === 'gif' ? (jsx_runtime_1.jsx(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'encoding' ? (jsx_runtime_1.jsx(RenderModalEncoding_1.RenderModalEncoding, { renderMode: renderMode, codec: codec, qualityControlType: qualityControlType, setQualityControl: setQualityControl, shouldDisplayQualityControlPicker: supportsBothQualityControls, crf: crf, setCrf: setCrf, maxCrf: maxCrf, minCrf: minCrf, customTargetVideoBitrate: customTargetVideoBitrate, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, colorSpace: colorSpace, setColorSpace: setColorSpace, x264Preset: x264Preset, setx264Preset: setx264Preset, gopSize: gopSize, setGopSize: setGopSize, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding })) : tab === 'environment' ? (jsx_runtime_1.jsx(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,