@remotion/studio 4.0.431 → 4.0.433

package/dist/Studio.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const Studio: React.FC<{
     readonly rootComponent: React.FC;
     readonly readOnly: boolean;
+    readonly visualModeEnabled: boolean;
 }>;

package/dist/Studio.js

@@ -9,25 +9,23 @@ const Editor_1 = require("./components/Editor");
 const EditorContexts_1 = require("./components/EditorContexts");
 const ServerDisconnected_1 = require("./components/Notifications/ServerDisconnected");
 const use_static_files_1 = require("./components/use-static-files");
-const fast_refresh_context_1 = require("./fast-refresh-context");
 const FastRefreshProvider_1 = require("./FastRefreshProvider");
 const inject_css_1 = require("./helpers/inject-css");
 const ResolveCompositionConfigInStudio_1 = require("./ResolveCompositionConfigInStudio");
 const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };
-const StudioInner = ({ rootComponent, readOnly }) => {
+const StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
     var _a;
-    const { fastRefreshes, manualRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', nonceContextSeed: fastRefreshes + manualRefreshes, children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
+    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { visualModeEnabled: visualModeEnabled, frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
                             jsx_runtime_1.jsx(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
                                 ? null
                                 : (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }) }));
 };
-const Studio = ({ rootComponent, readOnly }) => {
+const Studio = ({ rootComponent, readOnly, visualModeEnabled }) => {
     (0, react_1.useLayoutEffect)(() => {
         (0, inject_css_1.injectCSS)();
     }, []);
-    return (jsx_runtime_1.jsx(FastRefreshProvider_1.FastRefreshProvider, { children: jsx_runtime_1.jsx(StudioInner, { rootComponent: rootComponent, readOnly: readOnly }) }));
+    return (jsx_runtime_1.jsx(FastRefreshProvider_1.FastRefreshProvider, { children: jsx_runtime_1.jsx(StudioInner, { rootComponent: rootComponent, readOnly: readOnly, visualModeEnabled: visualModeEnabled }) }));
 };
 exports.Studio = Studio;

package/dist/components/AssetSelectorItem.js

@@ -161,20 +161,19 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     }, []);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const relativePath = (0, react_1.useMemo)(() => {
+        return parentFolder ? parentFolder + '/' + item.name : item.name;
+    }, [parentFolder, item.name]);
     const selected = (0, react_1.useMemo)(() => {
         if (canvasContent && canvasContent.type === 'asset') {
-            const nameWOParent = canvasContent.asset.split('/').pop();
-            return nameWOParent === item.name;
+            return canvasContent.asset === relativePath;
         }
         return false;
-    }, [canvasContent, item.name]);
+    }, [canvasContent, relativePath]);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
     const onClick = (0, react_1.useCallback)(() => {
-        const relativePath = parentFolder
-            ? parentFolder + '/' + item.name
-            : item.name;
         setCanvasContent({ type: 'asset', asset: relativePath });
         (0, url_state_1.pushUrl)(`/assets/${relativePath}`);
         if (isMobileLayout) {
@@ -182,8 +181,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         }
     }, [
         isMobileLayout,
-        item.name,
-        parentFolder,
+        relativePath,
         setCanvasContent,
         setSidebarCollapsedState,
     ]);

package/dist/components/CompositionSelector.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
+const sort_by_nonce_history_1 = require("../helpers/sort-by-nonce-history");
 const z_index_1 = require("../state/z-index");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const CurrentComposition_1 = require("./CurrentComposition");
@@ -72,24 +73,30 @@ const CompositionSelector = () => {
     const { foldersExpanded } = (0, react_1.useContext)(persist_open_folders_1.ExpandedFoldersContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const sortedCompositions = (0, react_1.useMemo)(() => {
+        return (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(compositions);
+    }, [compositions]);
+    const sortedFolders = (0, react_1.useMemo)(() => {
+        return (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(folders);
+    }, [folders]);
     const items = (0, react_1.useMemo)(() => {
-        return (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
-    }, [compositions, folders, foldersExpanded]);
-    const showCurrentComposition = canvasContent && canvasContent.type === 'composition';
+        return (0, create_folder_tree_1.createFolderTree)(sortedCompositions, sortedFolders, foldersExpanded);
+    }, [sortedCompositions, sortedFolders, foldersExpanded]);
     const list = (0, react_1.useMemo)(() => {
         return {
-            height: showCurrentComposition
-                ? `calc(100% - ${CurrentComposition_1.CURRENT_COMPOSITION_HEIGHT}px)`
-                : '100%',
+            height: `calc(100% - ${CurrentComposition_1.CURRENT_COMPOSITION_HEIGHT}px)`,
             overflowY: 'auto',
         };
-    }, [showCurrentComposition]);
+    }, []);
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         var _a;
         (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.toggleFolder(folderName, parentName);
     }, []);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [showCurrentComposition ? jsx_runtime_1.jsx(CurrentComposition_1.CurrentComposition, {}) : null, jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
-                    return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: showCurrentComposition ? canvasContent.compositionId : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx(CurrentComposition_1.CurrentComposition, {}), jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
+                    return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
+                            ? canvasContent.compositionId
+                            : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
                 }) })
         ] }));
 };

package/dist/components/CurrentComposition.js

@@ -37,10 +37,7 @@ const row = {
 };
 const CurrentComposition = () => {
     const video = remotion_1.Internals.useVideo();
-    if (!video) {
-        return jsx_runtime_1.jsx("div", { style: container });
-    }
-    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs("div", { children: [
-                    jsx_runtime_1.jsx("div", { style: title, children: video.id }), jsx_runtime_1.jsxs("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx("div", { style: subtitle, children: "Still" })) : (jsx_runtime_1.jsxs("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] }) }) }));
+    return (jsx_runtime_1.jsx("div", { style: container, children: video ? (jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs("div", { children: [
+                    jsx_runtime_1.jsx("div", { style: title, children: video.id }), jsx_runtime_1.jsxs("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx("div", { style: subtitle, children: "Still" })) : (jsx_runtime_1.jsxs("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] }) })) : null }));
 };
 exports.CurrentComposition = CurrentComposition;

package/dist/components/EditorContent.js

@@ -11,6 +11,7 @@ const SplitterContainer_1 = require("./Splitter/SplitterContainer");
 const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
 const Timeline_1 = require("./Timeline/Timeline");
+const TimelineEmptyState_1 = require("./Timeline/TimelineEmptyState");
 const noop = () => undefined;
 const container = {
     display: 'flex',
@@ -21,13 +22,11 @@ const container = {
 const EditorContent = ({ readOnlyStudio, children }) => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    // Preventing multiple renders so the update check doesn't get rendered twice and needs to be aborted
-    const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== 'composition';
+    const showTimeline = canvasContent !== null && !isStill && canvasContent.type === 'composition';
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [
-                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), onlyTopPanel ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(Timeline_1.Timeline, {}) })
-                        ] }))] })
+                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
+                ] })
         ] }));
 };
 exports.EditorContent = EditorContent;

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

@@ -8,4 +8,5 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly status: RemInputStatus;
     readonly formatter?: ((str: string | number) => string) | undefined;
     readonly rightAlign: boolean;
+    readonly small?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/NewComposition/InputDragger.js

@@ -45,27 +45,34 @@ const RemInput_1 = require("./RemInput");
 const isInt = (num) => {
     return num % 1 === 0;
 };
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, ...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);
+    const pointerDownRef = (0, react_1.useRef)(false);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...RemInput_1.inputBaseStyle,
             backgroundColor: 'transparent',
             borderColor: 'transparent',
             padding: '4px 6px',
+            ...{ outline: 'none' },
         };
     }, []);
     const span = (0, react_1.useMemo)(() => ({
-        borderBottom: '1px dotted ' + colors_1.BLUE,
-        paddingBottom: 1,
-        color: colors_1.BLUE,
+        color: dragging ? 'var(--remotion-cli-internals-blue-hovered)' : colors_1.BLUE,
         cursor: 'ew-resize',
         userSelect: 'none',
         WebkitUserSelect: 'none',
-        fontSize: 13,
+        fontSize: small ? 12 : 14,
         fontVariantNumeric: 'tabular-nums',
-    }), []);
+    }), [dragging, small]);
+    const onFocus = (0, react_1.useCallback)(() => {
+        if (!small || pointerDownRef.current) {
+            return;
+        }
+        setInputFallback(true);
+    }, [small]);
     const onClick = (0, react_1.useCallback)((e) => {
         if (!(0, input_dragger_click_lock_1.getClickLock)()) {
             e.stopPropagation();
@@ -78,6 +85,12 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     const onEscape = (0, react_1.useCallback)(() => {
         setInputFallback(false);
     }, []);
+    const onInputChange = (0, react_1.useCallback)((e) => {
+        const parsed = Number(e.target.value);
+        if (e.target.value !== '' && !Number.isNaN(parsed)) {
+            onValueChange(parsed);
+        }
+    }, [onValueChange]);
     const onBlur = (0, react_1.useCallback)(() => {
         if (!fallbackRef.current) {
             return;
@@ -106,6 +119,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         return Math.ceil(val * factor) / factor;
     };
     const onPointerDown = (0, react_1.useCallback)((e) => {
+        pointerDownRef.current = true;
+        const target = e.currentTarget;
         const { pageX, pageY, button } = e;
         if (button !== 0) {
             return;
@@ -119,6 +134,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             const max = Number(_max !== null && _max !== void 0 ? _max : Infinity);
             if (distanceFromStart > 4) {
                 (0, input_dragger_click_lock_1.setClickLock)(true);
+                setDragging(true);
+                target.blur();
             }
             const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
             const newValue = Math.min(max, Math.max(min, Number(value) + diff));
@@ -129,6 +146,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         window.addEventListener('mousemove', moveListener);
         window.addEventListener('pointerup', () => {
             window.removeEventListener('mousemove', moveListener);
+            pointerDownRef.current = false;
+            setDragging(false);
             if (lastDragValue !== null && onValueChangeEnd) {
                 onValueChangeEnd(lastDragValue);
             }
@@ -155,8 +174,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         return 0.0001;
     }, [_min, _step]);
     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, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props }) }));
+        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, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props, ...(small ? { style: { padding: '4px 6px', fontSize: 12 } } : {}) }) }));
     }
-    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: style, onClick: onClick, onFocus: onFocus, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
 };
 exports.InputDragger = react_1.default.forwardRef(InputDraggerForwardRefFn);

package/dist/components/OptionsPanel.js

@@ -120,6 +120,6 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         };
     }, [reset]);
     return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
-            jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [visualControlsTabActivated ? (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'visual-controls', onClick: onVisualControlsSelected, children: "Controls" })) : null, composition ? (jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? (jsx_runtime_1.jsx(GlobalPropsEditorUpdateButton_1.GlobalPropsEditorUpdateButton, { compositionId: composition.id, currentDefaultProps: currentDefaultProps })) : null] })) : null, renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === `input-props` && composition ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving, readOnlyStudio: readOnlyStudio }, composition.id)) : panel === 'visual-controls' && visualControlsTabActivated ? (jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
+            jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [visualControlsTabActivated ? (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'visual-controls', onClick: onVisualControlsSelected, children: "Controls" })) : null, jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist && composition ? (jsx_runtime_1.jsx(GlobalPropsEditorUpdateButton_1.GlobalPropsEditorUpdateButton, { compositionId: composition.id, currentDefaultProps: currentDefaultProps })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'input-props' ? (composition ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving, readOnlyStudio: readOnlyStudio }, composition.id)) : null) : panel === 'visual-controls' && visualControlsTabActivated ? (jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/components/PlaybackRatePersistor.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const playbackrate_1 = require("../state/playbackrate");
 const PlaybackRatePersistor = () => {
-    const { setPlaybackRate, playbackRate } = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
+    const { setPlaybackRate, playbackRate } = remotion_1.Internals.useTimelineContext();
     (0, react_1.useEffect)(() => {
         setPlaybackRate((0, playbackrate_1.loadPlaybackRate)());
     }, [setPlaybackRate]);

package/dist/components/PreviewToolbar.js

@@ -25,6 +25,7 @@ const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+const TOOLBAR_HEIGHT = 56;
 const container = {
     display: 'flex',
     justifyContent: 'center',
@@ -34,6 +35,7 @@ const container = {
     alignItems: 'center',
     flexDirection: 'row',
     background: colors_1.BACKGROUND,
+    height: TOOLBAR_HEIGHT,
 };
 const mobileContainer = {
     ...container,
@@ -72,7 +74,7 @@ const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
 };
 const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
-    const { playbackRate, setPlaybackRate } = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
+    const { playbackRate, setPlaybackRate } = remotion_1.Internals.useTimelineContext();
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -140,7 +142,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                             jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {})
                         ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), 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.jsx(CheckboardToggle_1.CheckboardToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), isFullscreenSupported && jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}), jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? 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(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (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 }), (0, should_show_render_button_1.shouldShowRenderButton)(readOnlyStudio) ? (jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio })) : null, 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/RenderModal/WebRenderModal.d.ts

@@ -1,3 +1,3 @@
 import type { WebRenderModalState } from '../../state/modals';
-export type RenderType = 'still' | 'video';
+export type RenderType = 'still' | 'video' | 'audio';
 export declare const WebRenderModalWithLoader: React.FC<WebRenderModalState>;

package/dist/components/RenderModal/WebRenderModal.js

@@ -77,7 +77,6 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 };
 // TODO: Switch to server-side rendering
 // TODO: Filter out codecs that are not supported for the container
-// TODO: Add more containers
 // TODO: Shortcut: Shift + R
 // TODO: Apply defaultCodec
 // TODO: Apply defaultOutName
@@ -96,7 +95,11 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
             ? true
             : resolvedComposition.durationInFrames > 1;
     });
-    const [renderMode, setRenderMode] = (0, react_1.useState)(isVideo ? 'video' : 'still');
+    const [renderMode, setRenderMode] = (0, react_1.useState)(initialContainer && (0, web_renderer_1.isAudioOnlyContainer)(initialContainer)
+        ? 'audio'
+        : isVideo
+            ? 'video'
+            : 'still');
     const [tab, setTab] = (0, react_1.useState)('general');
     const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialStillImageFormat !== null && initialStillImageFormat !== void 0 ? initialStillImageFormat : 'png');
     const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
@@ -170,36 +173,52 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         return defaultOut;
     });
     const [outName, setOutName] = (0, react_1.useState)(() => initialOutNameState);
+    const updateOutNameExtension = (0, react_1.useCallback)((extension) => {
+        setOutName((prev) => (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + extension);
+    }, []);
     const setStillFormat = (0, react_1.useCallback)((format) => {
         setImageFormat(format);
-        setOutName((prev) => {
-            const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + format;
-            return newFileName;
-        });
-    }, []);
+        updateOutNameExtension(format);
+    }, [updateOutNameExtension]);
     const setContainerFormat = (0, react_1.useCallback)((newContainer) => {
+        setContainer(newContainer);
+        const defaultVideoCodec = (0, web_renderer_1.getDefaultVideoCodecForContainer)(newContainer);
+        if (defaultVideoCodec) {
+            setCodec(defaultVideoCodec);
+        }
+        setAudioCodec((0, web_renderer_1.getDefaultAudioCodecForContainer)(newContainer));
+        updateOutNameExtension(newContainer);
+    }, [updateOutNameExtension]);
+    const setCodecWithContainer = (0, react_1.useCallback)((newCodec) => {
+        setCodec(newCodec);
+        const newContainer = (0, web_renderer_1.getDefaultContainerForCodec)(newCodec);
         setContainer(newContainer);
         setAudioCodec((0, web_renderer_1.getDefaultAudioCodecForContainer)(newContainer));
-        setOutName((prev) => {
-            const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + newContainer;
-            return newFileName;
-        });
-    }, []);
+        updateOutNameExtension(newContainer);
+    }, [updateOutNameExtension]);
     const onRenderModeChange = (0, react_1.useCallback)((newMode) => {
         setRenderMode(newMode);
         if (newMode === 'video') {
-            setOutName((prev) => {
-                const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + container;
-                return newFileName;
-            });
+            const newContainer = (0, web_renderer_1.isAudioOnlyContainer)(container)
+                ? 'mp4'
+                : container;
+            setContainer(newContainer);
+            setAudioCodec((0, web_renderer_1.getDefaultAudioCodecForContainer)(newContainer));
+            updateOutNameExtension(newContainer);
+        }
+        else if (newMode === 'audio') {
+            const newContainer = 'wav';
+            setContainer(newContainer);
+            setMuted(false);
+            setAudioCodec((0, web_renderer_1.getDefaultAudioCodecForContainer)(newContainer));
+            updateOutNameExtension(newContainer);
+            setTab((prev) => (prev === 'picture' ? 'general' : prev));
         }
         else if (newMode === 'still') {
-            setOutName((prev) => {
-                const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + imageFormat;
-                return newFileName;
-            });
+            updateOutNameExtension(imageFormat);
+            setTab((prev) => (prev === 'audio' ? 'general' : prev));
         }
-    }, [container, imageFormat]);
+    }, [container, imageFormat, updateOutNameExtension]);
     const renderTabOptions = (0, react_1.useMemo)(() => {
         const options = [
             {
@@ -211,7 +230,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 selected: renderMode === 'still',
             },
         ];
-        // Only show video option if composition has more than 1 frame
+        // Only show video/audio options if composition has more than 1 frame
         if (resolvedComposition.durationInFrames > 1) {
             options.push({
                 label: 'Video',
@@ -221,6 +240,14 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 key: 'video',
                 selected: renderMode === 'video',
             });
+            options.push({
+                label: 'Audio',
+                onClick: () => {
+                    onRenderModeChange('audio');
+                },
+                key: 'audio',
+                selected: renderMode === 'audio',
+            });
         }
         return options;
     }, [renderMode, resolvedComposition.durationInFrames, onRenderModeChange]);
@@ -315,7 +342,9 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 compositionId: resolvedComposition.id,
                 outName,
                 container,
-                videoCodec: effectiveVideoCodec,
+                videoCodec: (0, web_renderer_1.isAudioOnlyContainer)(container)
+                    ? null
+                    : effectiveVideoCodec,
                 audioCodec: effectiveAudioCodec,
                 startFrame: finalStartFrame,
                 endFrame: finalEndFrame,
@@ -382,16 +411,16 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { style: render_modals_1.icon }) }),
                                     "General"] }), 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"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [
+                                    "Input Props"] }), renderMode !== 'audio' ? (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"] }), renderMode === 'video' ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [
+                                    "Picture"] })) : null, renderMode === 'video' || renderMode === '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, 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"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => setTab('license'), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { style: render_modals_1.icon }) }),
                                     "License"] })
-                        ] }), 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(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodec, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : tab === 'picture' ? (jsx_runtime_1.jsx(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(WebRenderModalAudio_1.WebRenderModalAudio, { muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? (jsx_runtime_1.jsx(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) : (jsx_runtime_1.jsx(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })
+                        ] }), 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(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : tab === 'picture' ? (jsx_runtime_1.jsx(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(WebRenderModalAudio_1.WebRenderModalAudio, { renderMode: renderMode, muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? (jsx_runtime_1.jsx(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) : (jsx_runtime_1.jsx(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/WebRenderModalAudio.d.ts

@@ -1,6 +1,8 @@
 import type { WebRendererAudioCodec, WebRendererContainer, WebRendererQuality } from '@remotion/web-renderer';
 import React from 'react';
+import type { RenderType } from './WebRenderModal';
 export declare const WebRenderModalAudio: React.FC<{
+    readonly renderMode: RenderType;
     readonly muted: boolean;
     readonly setMuted: React.Dispatch<React.SetStateAction<boolean>>;
     readonly audioCodec: WebRendererAudioCodec;

package/dist/components/RenderModal/WebRenderModalAudio.js

@@ -34,11 +34,19 @@ const humanReadableWebAudioCodec = (audioCodec) => {
             return 'AAC';
         case 'opus':
             return 'Opus';
+        case 'mp3':
+            return 'MP3';
+        case 'vorbis':
+            return 'Vorbis';
+        case 'pcm-s16':
+            return 'Lossless (PCM)';
+        case 'flac':
+            return 'FLAC';
         default:
-            return audioCodec;
+            throw new Error(`Unsupported audio codec: ${audioCodec}`);
     }
 };
-const WebRenderModalAudio = ({ muted, setMuted, audioCodec, setAudioCodec, audioBitrate, setAudioBitrate, container: videoContainer, encodableCodecs, effectiveAudioCodec, }) => {
+const WebRenderModalAudio = ({ renderMode, muted, setMuted, audioCodec, setAudioCodec, audioBitrate, setAudioBitrate, container: videoContainer, encodableCodecs, effectiveAudioCodec, }) => {
     const containerSupported = (0, react_1.useMemo)(() => (0, web_renderer_1.getSupportedAudioCodecsForContainer)(videoContainer), [videoContainer]);
     const audioCodecOptions = (0, react_1.useMemo)(() => {
         return containerSupported.map((codec) => {
@@ -58,9 +66,9 @@ const WebRenderModalAudio = ({ muted, setMuted, audioCodec, setAudioCodec, audio
         });
     }, [containerSupported, encodableCodecs, audioCodec, setAudioCodec]);
     const audioBitrateOptions = (0, react_1.useMemo)(() => (0, quality_options_1.getQualityOptions)(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
-    return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsx(MutedSetting_1.MutedSetting, { enforceAudioTrack: false, muted: muted, setMuted: setMuted }), !muted ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+    const isAudioOnly = renderMode === 'audio';
+    const showAudioSettings = isAudioOnly || !muted;
+    return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [isAudioOnly ? null : (jsx_runtime_1.jsx(MutedSetting_1.MutedSetting, { enforceAudioTrack: false, muted: muted, setMuted: setMuted })), showAudioSettings ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isAudioOnly ? null : jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Audio Quality",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
                                 ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioBitrateOptions, selectedId: audioBitrate, title: "Audio Quality" }) })