@remotion/studio 4.0.503 → 4.0.504

package/dist/components/MobilePanel.js

@@ -26,26 +26,22 @@ const panel = {
     background: colors_1.BACKGROUND,
     boxShadow: colors_1.SHADOW_BLACK,
 };
-const sidebarWidth = {
-    left: 'min(210px, calc(100% - 50px))',
-    right: 'min(245px, calc(100% - 50px))',
-};
-function MobilePanel({ children, onClose, side, }) {
+const sidebarWidth = 'min(290px, calc(100% - 50px))';
+function MobilePanel({ children, onClose, }) {
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const onOutsideClick = react_1.default.useCallback((target) => {
         var _a;
         const element = target instanceof Element ? target : null;
-        const toggleSelector = `[data-sidebar-toggle="${side}"]`;
+        const toggleSelector = '[data-sidebar-toggle="left"]';
         if ((element === null || element === void 0 ? void 0 : element.closest(toggleSelector)) ||
             ((_a = element === null || element === void 0 ? void 0 : element.closest('button')) === null || _a === void 0 ? void 0 : _a.querySelector(toggleSelector))) {
             return;
         }
         onClose();
-    }, [onClose, side]);
+    }, [onClose]);
     return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: overlay, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onClose, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: {
                     ...panel,
-                    width: sidebarWidth[side],
-                    left: side === 'left' ? 0 : undefined,
-                    right: side === 'right' ? 0 : undefined,
+                    width: sidebarWidth,
+                    left: 0,
                 }, children: children }) }) }), (0, portals_1.getPortal)(currentZIndex));
 }

package/dist/components/MuteToggle.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuteToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const media_volume_1 = require("../icons/media-volume");
 const mute_1 = require("../state/mute");
 const ControlButton_1 = require("./ControlButton");
@@ -14,6 +15,6 @@ const MuteToggle = ({ muted, setMuted }) => {
         });
     }, [setMuted]);
     const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: muted ? jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, {}) : jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, {}) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => muted ? jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE }) : jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color }) }));
 };
 exports.MuteToggle = MuteToggle;

package/dist/components/NewComposition/ComboBox.d.ts

@@ -28,5 +28,6 @@ export declare const Combobox: React.FC<{
     readonly style?: React.CSSProperties;
     readonly title: string;
     readonly size?: ComboboxSize;
+    readonly unhoveredIconColor?: string;
 }>;
 export {};

package/dist/components/NewComposition/ComboBox.js

@@ -61,7 +61,7 @@ const smallLabel = {
     fontSize: 11,
     lineHeight: '12px',
 };
-const Combobox = ({ values, selectedId, style: customStyle, title, size: controlSize = 'default', }) => {
+const Combobox = ({ values, selectedId, style: customStyle, title, size: controlSize = 'default', unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -206,7 +206,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title, size: control
             ? compactLabel
             : label;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: selectedLabelStyle, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'default' ? 1 : 0.5 }), ' ', jsx_runtime_1.jsx(caret_1.CaretDown, { small: controlSize === 'small' })
+            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: selectedLabelStyle, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'default' ? 1 : 0.5 }), ' ', jsx_runtime_1.jsx(caret_1.CaretDown, { color: hovered || opened ? colors_1.WHITE : unhoveredIconColor, small: controlSize === 'small' })
                 ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: onOverlayPointerDown, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));

package/dist/components/NewComposition/InputDragger.d.ts

@@ -60,6 +60,10 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly onTextChange: (newVal: string) => void;
     readonly status: RemInputStatus;
     readonly formatter?: ((str: string | number) => string) | undefined;
+    readonly formatterStyle?: React.CSSProperties | undefined;
+    readonly formatterSubtitle?: ((str: string | number) => string) | undefined;
+    readonly formatterSubtitleStyle?: React.CSSProperties | undefined;
+    readonly buttonStyle?: React.CSSProperties | undefined;
     readonly rightAlign: boolean;
     readonly small?: boolean | undefined;
     readonly snapToStep?: boolean | undefined;

package/dist/components/NewComposition/InputDragger.js

@@ -295,7 +295,7 @@ const deriveInputDraggerValueDiff = ({ dragSensitivity, step, xDistance, }) => {
     return (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step * dragSensitivity, 0, 0, 0, step * dragSensitivity]);
 };
 exports.deriveInputDraggerValueDiff = deriveInputDraggerValueDiff;
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), formatterStyle, formatterSubtitle, formatterSubtitleStyle, buttonStyle, status, rightAlign, small, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
@@ -314,7 +314,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         WebkitUserSelect: 'none',
         fontSize: small ? 12 : 14,
         fontVariantNumeric: 'tabular-nums',
-    }), [dragging, small]);
+        ...formatterStyle,
+    }), [dragging, formatterStyle, small]);
     const onFocus = (0, react_1.useCallback)(() => {
         if (!small || pointerDownRef.current) {
             return;
@@ -484,6 +485,9 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     if (inputFallback) {
         return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyDown: onInputKeyDown, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, rightAlign: rightAlign, small: small, ...props, type: "text" }) }));
     }
-    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
+    return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], className: '__remotion_input_dragger', style: buttonStyle
+            ? { ...exports.inputDraggerContainerStyle, ...buttonStyle }
+            : exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: [
+            jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }), formatterSubtitle ? (jsx_runtime_1.jsx("span", { style: formatterSubtitleStyle, children: formatterSubtitle(value) })) : null] }));
 };
 exports.InputDragger = react_1.default.forwardRef(InputDraggerForwardRefFn);

package/dist/components/Notifications/NotificationCenter.js

@@ -1,9 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationCenter = exports.showNotification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const portals_1 = require("../Menu/portals");
 const Notification_1 = require("./Notification");
 const container = {
     position: 'absolute',
@@ -28,6 +34,7 @@ const showNotification = (content, durationInMs) => {
 exports.showNotification = showNotification;
 const NotificationCenter = () => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
     const onRemove = (0, react_1.useCallback)((id) => {
         setNotifications((not) => {
             return not.filter((n) => n.id !== id);
@@ -60,8 +67,11 @@ const NotificationCenter = () => {
             addNotification,
         };
     }, [addNotification]);
-    return (jsx_runtime_1.jsx("div", { style: container, children: notifications.map((n) => {
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: container, children: notifications.map((n) => {
             return (jsx_runtime_1.jsx(Notification_1.Notification, { created: n.created, duration: n.duration, id: n.id, onRemove: onRemove, children: n.content }, n.id));
-        }) }));
+        }) }), 
+    // Notifications must be above overlays opened from the editor, such as the
+    // floating sidebars used in the mobile layout.
+    (0, portals_1.getPortal)(currentZIndex + 1));
 };
 exports.NotificationCenter = NotificationCenter;

package/dist/components/OutlineToggle.js

@@ -11,10 +11,18 @@ const OutlineToggle = () => {
     const onClick = (0, react_1.useCallback)(() => {
         setEditorShowOutlines((current) => !current);
     }, [setEditorShowOutlines]);
-    const color = editorShowOutlines ? colors_1.BLUE : colors_1.WHITE;
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 512 512", fill: color, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { d: "M32 119.4C12.9 108.4 0 87.7 0 64 0 28.7 28.7 0 64 0 87.7 0 108.4 12.9 119.4 32l273.1 0c11.1-19.1 31.7-32 55.4-32 35.3 0 64 28.7 64 64 0 23.7-12.9 44.4-32 55.4l0 273.1c19.1 11.1 32 31.7 32 55.4 0 35.3-28.7 64-64 64-23.7 0-44.4-12.9-55.4-32l-273.1 0c-11.1 19.1-31.7 32-55.4 32-35.3 0-64-28.7-64-64 0-23.7 12.9-44.4 32-55.4l0-273.1zm64 0l0 273.1c9.7 5.6 17.8 13.7 23.4 23.4l273.1 0c5.6-9.7 13.7-17.8 23.4-23.4l0-273.1c-9.7-5.6-17.8-13.7-23.4-23.4L119.4 96c-5.6 9.7-13.7 17.8-23.4 23.4z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => {
+            const iconColor = editorShowOutlines ? colors_1.BLUE : color;
+            return (jsx_runtime_1.jsxs("svg", { style: { width: 17, height: 17 }, viewBox: "0 0 512 512", fill: "none", "aria-hidden": "true", focusable: "false", children: [
+                    jsx_runtime_1.jsx("path", { d: "M64 64H448V448H64V64Z", stroke: iconColor, strokeWidth: "36" }), [
+                        [16, 16],
+                        [400, 16],
+                        [16, 400],
+                        [400, 400],
+                    ].map(([x, y]) => (jsx_runtime_1.jsx("rect", { x: x, y: y, width: "96", height: "96", rx: "24", fill: colors_1.BACKGROUND_HEX, stroke: iconColor, strokeWidth: "32" }, `${x}-${y}`)))] }));
+        } }));
 };
 exports.OutlineToggle = OutlineToggle;

package/dist/components/PlayPause.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 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 use_keybinding_1 = require("../helpers/use-keybinding");
 const jump_to_start_1 = require("../icons/jump-to-start");
@@ -19,16 +18,13 @@ const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const backStyle = {
     height: 18,
-    color: colors_1.WHITE,
 };
 const forwardBackStyle = {
     height: 16,
-    color: colors_1.WHITE,
 };
 const iconButton = {
     height: 14,
     width: 14,
-    color: colors_1.WHITE,
 };
 const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted, hideNavigationControls, }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
@@ -198,6 +194,6 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted,
             stopped = true;
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio" })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle }) }))] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }))] }));
 };
 exports.PlayPause = PlayPause;

package/dist/components/PlaybackRateSelector.js

@@ -4,6 +4,7 @@ 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 playbackrate_1 = require("../state/playbackrate");
@@ -65,6 +66,6 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate, }) => {
     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("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: selectedId, values: items, 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 = {
@@ -80,12 +79,14 @@ 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 ? (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, {}), 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(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" }) }), 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,4 @@ 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;
 }>;

package/dist/components/RenderButton.js

@@ -123,11 +123,13 @@ const getInitialRenderType = (readOnlyStudio) => {
     }
     return 'server-render';
 };
-const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', hidden }) => {
+const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
     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 [mainButtonHovered, setMainButtonHovered] = (0, react_1.useState)(false);
+    const [dropdownButtonHovered, setDropdownButtonHovered] = (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)();
@@ -192,7 +194,6 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', hidden })
         return {
             style: {
                 height: controlSize === 'compact' ? 14 : 16,
-                color: colors_1.CURRENT_COLOR,
                 flexShrink: 0,
             },
         };
@@ -433,21 +434,21 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', hidden })
         : renderType === 'render-command'
             ? 'Render via CLI'
             : 'Render on web';
+    const mainIconColor = mainButtonHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
+    const dropdownIconColor = dropdownOpened || dropdownButtonHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
     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, children: [
+                    jsx_runtime_1.jsx("button", { type: "button", style: controlSize === 'compact' ? compactMainButtonStyle : mainButtonStyle, onClick: onClick, onPointerEnter: () => setMainButtonHovered(true), onPointerLeave: () => setMainButtonHovered(false), 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(render_1.ThinRenderIcon, { fill: mainIconColor, 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
+                            : dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, onPointerEnter: () => setDropdownButtonHovered(true), onPointerLeave: () => setDropdownButtonHovered(false), children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: dropdownIconColor }) })
+                ] }), 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: [