@remotion/studio 4.0.495 → 4.0.497

package/dist/components/InspectorSequenceSection.js

@@ -5,10 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const plus_1 = require("../icons/plus");
 const modals_1 = require("../state/modals");
-const CurrentAsset_1 = require("./CurrentAsset");
+const AssetFileIcon_1 = require("./AssetFileIcon");
 const InlineAction_1 = require("./InlineAction");
 const common_1 = require("./InspectorPanel/common");
 const styles_1 = require("./InspectorPanel/styles");
@@ -41,6 +42,11 @@ const plusIcon = {
     width: 15,
     height: 15,
 };
+const assetSelectorIcon = {
+    flexShrink: 0,
+    height: 18,
+    width: 18,
+};
 const remoteSourceLabel = {
     color: colors_1.LIGHT_TEXT,
     display: 'flex',
@@ -135,6 +141,7 @@ const hasSequenceControls = (sequence) => {
 };
 exports.hasSequenceControls = hasSequenceControls;
 const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
+    var _a;
     const { tree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
@@ -155,6 +162,9 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
             (0, timeline_asset_link_1.openTimelineAssetLink)(localAsset, selectAsset);
         }
     }, [localAsset, selectAsset]);
+    const localAssetFileName = localAsset
+        ? ((_a = localAsset.assetPath.split('/').pop()) !== null && _a !== void 0 ? _a : localAsset.assetPath)
+        : null;
     const getIsExpanded = (0, react_1.useCallback)((candidate) => {
         return !collapsedKeys.has(getInspectorExpansionKey(candidate));
     }, [collapsedKeys]);
@@ -232,7 +242,7 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     if (controlRows.length === 0 && !showEffectsSection) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Controls", children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }) }));
     }
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group) => (jsx_runtime_1.jsxs(common_1.InspectorSection, { header: group.label, children: [group.id === 'source' && localAsset ? (jsx_runtime_1.jsx(CurrentAsset_1.AssetInfo, { assetName: localAsset.assetPath, contentSized: true, onAssetClick: jumpToAsset, readOnlyStudio: true })) : null, group.id === 'source' && remoteAsset && remoteSourceParts ? (jsx_runtime_1.jsxs("div", { style: remoteSourceLabel, title: remoteAsset.href, children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group) => (jsx_runtime_1.jsxs(common_1.InspectorSection, { header: group.label, children: [group.id === 'source' && localAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: jumpToAsset, renderIcon: (color) => (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { color: color, fileType: (0, get_preview_file_type_1.getPreviewFileType)(localAsset.assetPath), style: assetSelectorIcon })), size: "compact", title: localAsset.assetPath, children: localAssetFileName })) : null, group.id === 'source' && remoteAsset && remoteSourceParts ? (jsx_runtime_1.jsxs("div", { style: remoteSourceLabel, title: remoteAsset.href, children: [
                                 jsx_runtime_1.jsx("span", { style: remoteSourceLeading, children: remoteSourceParts.leading }), jsx_runtime_1.jsx("span", { style: remoteSourceTrailing, children: remoteSourceParts.trailing })
                             ] })) : null, group.id === 'transforms' ? renderTransformControls() : null, group.id === 'source' ? null : group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null] }));
 };

package/dist/components/InspectorSourceLocation.d.ts

@@ -5,4 +5,5 @@ export declare const InspectorSourceLocation: React.FC<{
     readonly canOpen: boolean;
     readonly onOpen: () => void;
     readonly renderIcon?: (color: string) => React.ReactNode;
+    readonly size?: 'default' | 'inline-action';
 }>;

package/dist/components/InspectorSourceLocation.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const format_file_location_1 = require("../helpers/format-file-location");
+const common_1 = require("./InspectorPanel/common");
 const source_attribution_1 = require("./Timeline/TimelineStack/source-attribution");
 const sourceLocationStyle = {
     alignSelf: 'flex-start',
@@ -40,7 +41,7 @@ const sourceLocationLabelStyle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
-const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon }) => {
+const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size = 'default' }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const validLocation = (0, react_1.useMemo)(() => {
         if (!(location === null || location === void 0 ? void 0 : location.source) || location.line === null) {
@@ -80,6 +81,9 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon }) => {
     if (!label) {
         return null;
     }
+    if (size === 'inline-action') {
+        return (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), size: "compact", title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
+    }
     return (jsx_runtime_1.jsxs("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [renderIcon ? renderIcon(color) : null, jsx_runtime_1.jsx("span", { style: sourceLocationLabelStyle, children: label })
         ] }));
 };

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

@@ -8,7 +8,7 @@ export declare const CodemodFooter: React.FC<{
     readonly valid: boolean;
     readonly codemod: RecastCodemod;
     readonly stack: string | null;
-    readonly loadingNotification: React.ReactNode;
+    readonly loadingNotification: React.ReactNode | null;
     readonly successNotification: React.ReactNode;
     readonly errorNotification: string;
     readonly genericSubmitLabel: string;

package/dist/components/NewComposition/CodemodFooter.js

@@ -34,21 +34,40 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
     const trigger = (0, react_1.useCallback)(() => {
         setSubmitting(true);
         setSelectedModal(null);
-        const notification = (0, NotificationCenter_1.showNotification)(loadingNotification, null);
+        const notification = loadingNotification === null
+            ? null
+            : (0, NotificationCenter_1.showNotification)(loadingNotification, null);
         applyCodemod({
             symbolicatedStack,
             signal: new AbortController().signal,
         })
             .then((result) => {
             if (!result.success) {
-                notification.replaceContent(`${errorNotification}: ${result.reason}`, 2000);
+                const message = `${errorNotification}: ${result.reason}`;
+                if (notification) {
+                    notification.replaceContent(message, 2000);
+                }
+                else {
+                    (0, NotificationCenter_1.showNotification)(message, 2000);
+                }
                 return;
             }
-            notification.replaceContent(successNotification, 2000);
+            if (notification) {
+                notification.replaceContent(successNotification, 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(successNotification, 2000);
+            }
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         })
             .catch((err) => {
-            notification.replaceContent(`${errorNotification}: ${err.message}`, 2000);
+            const message = `${errorNotification}: ${err.message}`;
+            if (notification) {
+                notification.replaceContent(message, 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(message, 2000);
+            }
         });
     }, [
         applyCodemod,

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

@@ -1,4 +1,5 @@
 import React from 'react';
+export type ComboboxSize = 'default' | 'compact' | 'small';
 type DividerItem = {
     type: 'divider';
     id: string;
@@ -26,6 +27,6 @@ export declare const Combobox: React.FC<{
     readonly selectedId: string | number;
     readonly style?: React.CSSProperties;
     readonly title: string;
-    readonly small?: boolean;
+    readonly size?: ComboboxSize;
 }>;
 export {};

package/dist/components/NewComposition/ComboBox.js

@@ -24,8 +24,17 @@ const container = {
     backgroundColor: colors_1.INPUT_BACKGROUND,
     borderWidth: 1,
     borderStyle: 'solid',
+    borderRadius: 4,
+    fontFamily: 'inherit',
     maxWidth: '100%',
 };
+const compactContainer = {
+    ...container,
+    boxSizing: 'border-box',
+    borderRadius: 0,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT + 2,
+    padding: '5px 6px',
+};
 const smallContainer = {
     ...container,
     padding: '3px 4px',
@@ -34,16 +43,25 @@ const label = {
     flex: 1,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    color: 'inherit',
+    fontFamily: 'inherit',
     fontSize: 14,
+    lineHeight: '21px',
+    minWidth: 0,
     textAlign: 'left',
     whiteSpace: 'nowrap',
 };
+const compactLabel = {
+    ...label,
+    fontSize: 12,
+    lineHeight: '16px',
+};
 const smallLabel = {
     ...label,
     fontSize: 11,
-    lineHeight: 1,
+    lineHeight: '12px',
 };
-const Combobox = ({ values, selectedId, style: customStyle, title, small = false }) => {
+const Combobox = ({ values, selectedId, style: customStyle, title, size: controlSize = 'default', }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -163,7 +181,11 @@ const Combobox = ({ values, selectedId, style: customStyle, title, small = false
     const selected = values.find((v) => v.id === selectedId);
     const style = (0, react_1.useMemo)(() => {
         return {
-            ...(small ? smallContainer : container),
+            ...(controlSize === 'small'
+                ? smallContainer
+                : controlSize === 'compact'
+                    ? compactContainer
+                    : container),
             ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
             userSelect: 'none',
             WebkitUserSelect: 'none',
@@ -177,11 +199,14 @@ const Combobox = ({ values, selectedId, style: customStyle, title, small = false
                     ? colors_1.WHITE_ALPHA_05
                     : colors_1.BLACK_ALPHA_60,
         };
-    }, [customStyle, hovered, opened, small]);
+    }, [controlSize, customStyle, hovered, opened]);
+    const selectedLabelStyle = controlSize === 'small'
+        ? smallLabel
+        : controlSize === 'compact'
+            ? 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: small ? smallLabel : label, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: small ? 0.5 : 1 }),
-                    " ",
-                    jsx_runtime_1.jsx(caret_1.CaretDown, { small: 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, { 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

@@ -16,6 +16,11 @@ export declare const isInputDraggerValueInRange: ({ max, min, value, }: {
     readonly min: string | number | undefined;
     readonly value: number;
 }) => boolean;
+export declare const deriveInputDraggerValueDiff: ({ dragSensitivity, step, xDistance, }: {
+    readonly dragSensitivity: number;
+    readonly step: number;
+    readonly xDistance: number;
+}) => number;
 export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     readonly onValueChange: (newVal: number) => void;
     readonly onValueChangeEnd?: ((newVal: number) => void) | undefined;
@@ -26,4 +31,5 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly small?: boolean | undefined;
     readonly snapToStep?: boolean | undefined;
     readonly dragDecimalPlaces?: number | undefined;
+    readonly dragSensitivity?: number | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/NewComposition/InputDragger.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputDragger = exports.isInputDraggerValueInRange = exports.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = exports.inputDraggerContainerStyle = void 0;
+exports.InputDragger = exports.deriveInputDraggerValueDiff = exports.isInputDraggerValueInRange = exports.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = exports.inputDraggerContainerStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -92,7 +92,11 @@ const isInputDraggerValueInRange = ({ max, min, value, }) => {
         (!Number.isFinite(numericMax) || value <= numericMax));
 };
 exports.isInputDraggerValueInRange = isInputDraggerValueInRange;
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, ...props }, ref) => {
+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, ...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);
@@ -195,7 +199,11 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                 (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
                 target.blur();
             }
-            const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
+            const diff = (0, exports.deriveInputDraggerValueDiff)({
+                dragSensitivity,
+                step,
+                xDistance,
+            });
             const newValue = Math.min(max, Math.max(min, dragStartValue + diff));
             const nextValue = snapToStep
                 ? roundToStep(newValue, step)
@@ -229,6 +237,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         onValueChangeEnd,
         snapToStep,
         dragDecimalPlaces,
+        dragSensitivity,
     ]);
     (0, react_1.useEffect)(() => {
         var _a;

package/dist/components/NewComposition/NewComposition.js

@@ -125,7 +125,7 @@ const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
                                 ] }), jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
                                 ] })
-                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: "Creating composition...", errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createComposition({
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createComposition({
                                 signal,
                                 symbolicatedStack,
                             }), fallbackToRootFile: true }) })

package/dist/components/NewComposition/use-rename-static-file.js

@@ -76,7 +76,7 @@ const useRenameStaticFile = ({ relativePath, staticFiles, }) => {
             if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
                 canvasContent.asset === relativePath) {
                 setCanvasContent({ type: 'asset', asset: newRelativePath });
-                (0, url_state_1.pushUrl)(`/assets/${newRelativePath}`);
+                (0, url_state_1.replaceUrl)(`/assets/${newRelativePath}`);
             }
             notification.replaceContent(`Renamed to ${newRelativePath}`, 2000);
             return true;

package/dist/components/PlaybackRateSelector.js

@@ -16,13 +16,13 @@ const getPlaybackRateLabel = (playbackRate) => {
     return `${playbackRate}x`;
 };
 const accessibilityLabel = 'Change the playback rate';
-const comboStyle = { width: 80 };
+const comboStyle = { width: 64 };
 const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const style = (0, react_1.useMemo)(() => {
         return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING,
+            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
         };
     }, []);
     const items = (0, react_1.useMemo)(() => {
@@ -54,6 +54,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, { title: accessibilityLabel, style: comboStyle, selectedId: String(playbackRate), 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: String(playbackRate), values: items }) }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/components/PreviewToolbar.js

@@ -26,7 +26,7 @@ const SizeSelector_1 = require("./SizeSelector");
 const SnappingToggle_1 = require("./SnappingToggle");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
-const TOOLBAR_HEIGHT = 50;
+const TOOLBAR_HEIGHT = 40;
 const container = {
     display: 'flex',
     justifyContent: 'center',
@@ -64,7 +64,7 @@ const scrollIndicatorRight = {
 };
 const sideContainer = {
     width: 300,
-    height: 36,
+    height: 30,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -169,7 +169,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                     jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, { disabled: readOnlyStudio }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, { disabled: readOnlyStudio }) })
                 ] })) : 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, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && 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 }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && 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, {}), jsx_runtime_1.jsx("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })
         ] }));
 };

package/dist/components/RenderButton.d.ts

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

package/dist/components/RenderButton.js

@@ -65,9 +65,47 @@ const dropdownTriggerStyle = {
 const mainButtonContent = {
     paddingLeft: 4,
     paddingRight: 6,
+    minWidth: 0,
 };
 const label = {
+    color: 'inherit',
+    fontFamily: 'inherit',
     fontSize: 14,
+    lineHeight: '21px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const compactSplitButtonSegmentHeight = layout_1.COMPACT_CONTROL_ROW_HEIGHT;
+const compactMainButtonStyle = {
+    ...mainButtonStyle,
+    boxSizing: 'border-box',
+    height: compactSplitButtonSegmentHeight,
+    paddingLeft: 6,
+    paddingRight: 6,
+    paddingTop: 6,
+    paddingBottom: 6,
+    fontSize: 12,
+};
+const compactDropdownTriggerStyle = {
+    ...dropdownTriggerStyle,
+    boxSizing: 'border-box',
+    height: compactSplitButtonSegmentHeight,
+    paddingLeft: 5,
+    paddingRight: 5,
+    paddingTop: 6,
+    paddingBottom: 6,
+};
+const compactMainButtonContent = {
+    ...mainButtonContent,
+    paddingLeft: 2,
+    paddingRight: 4,
+};
+const compactLabel = {
+    ...label,
+    fontSize: 12,
+    lineHeight: '16px',
 };
 const RENDER_TYPE_STORAGE_KEY = 'remotion.renderType';
 const getInitialRenderType = (readOnlyStudio) => {
@@ -85,7 +123,7 @@ const getInitialRenderType = (readOnlyStudio) => {
     }
     return 'server-render';
 };
-const RenderButton = ({ readOnlyStudio, }) => {
+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));
@@ -153,11 +191,12 @@ const RenderButton = ({ readOnlyStudio, }) => {
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
-                height: 16,
+                height: controlSize === 'compact' ? 14 : 16,
                 color: colors_1.CURRENT_COLOR,
+                flexShrink: 0,
             },
         };
-    }, []);
+    }, [controlSize]);
     const video = remotion_1.Internals.useVideo();
     const { getCurrentFrame } = player_1.PlayerInternals.usePlayer();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
@@ -385,10 +424,11 @@ const RenderButton = ({ readOnlyStudio, }) => {
         return {
             ...splitButtonContainer,
             borderColor: colors_1.BLACK_ALPHA_60,
+            borderRadius: controlSize === 'compact' ? 0 : 4,
             opacity: 1,
             cursor: 'pointer',
         };
-    }, []);
+    }, [controlSize]);
     const renderLabel = renderType === 'server-render'
         ? 'Render'
         : renderType === 'render-command'
@@ -399,9 +439,13 @@ const RenderButton = ({ readOnlyStudio, }) => {
     }
     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.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
-                    jsx_runtime_1.jsx("button", { type: "button", style: mainButtonStyle, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: 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: 1 }), jsx_runtime_1.jsx("span", { style: label, children: renderLabel })
-                            ] }) }), jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
+                    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'
+                                ? 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
                 ? 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/SchemaEditor/ZodDiscriminatedUnionEditor.js

@@ -47,7 +47,7 @@ const ZodDiscriminatedUnionEditor = ({ schema, setValue, value, mayPad, jsonPath
         return {
             discriminator,
             markup: (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator], small: true })
+                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator], size: "small" })
                 ] }, 'replacement')),
         };
     }, [

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

@@ -39,7 +39,7 @@ const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
     }, [enumValues, onChange, value]);
     const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: true, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, small: true }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodEnumEditor = ZodEnumEditor;

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

@@ -38,7 +38,7 @@ const ZodStaticFileEditor = ({ schema, jsonPath, setValue, value, onRemove, mayP
         });
     }, [onChange, staticFiles, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, small: true }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodStaticFileEditor = ZodStaticFileEditor;