@remotion/studio 4.0.431 → 4.0.432

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

@@ -16,18 +16,18 @@ const ResolveCompositionConfigInStudio_1 = require("./ResolveCompositionConfigIn
 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', 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: [
                             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/NewComposition/DuplicateComposition.js

@@ -175,10 +175,7 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Duplicate ${resolved.result.id}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
-                    jsx_runtime_1.jsxs("div", { style: content, children: [initialCompType === 'composition' ? (
-                            // We allow converting from a composition to a still, but
-                            // not the other way around
-                            jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: content, children: [initialCompType === 'composition' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Type" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [

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

@@ -41,8 +41,6 @@ const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton
         setClickableButtonHovered(false);
     }, []);
     const labelContent = (jsx_runtime_1.jsxs("span", { style: labelStyle, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), " ", suffix ? suffix : null] }));
-    return (jsx_runtime_1.jsxs("div", { style: compactStyles, className: scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_CLASSNAME, "data-json-path": jsonPath.join('.'), children: [handleClick ? (
-            // Minus the padding that a button has (user agent padding-line-start)
-            jsx_runtime_1.jsx("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', padding: 0 }, children: labelContent })) : (labelContent), jsx_runtime_1.jsx(layout_1.Flex, {}), isDefaultValue ? null : jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? (jsx_runtime_1.jsx(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? jsx_runtime_1.jsx(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
+    return (jsx_runtime_1.jsxs("div", { style: compactStyles, className: scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_CLASSNAME, "data-json-path": jsonPath.join('.'), children: [handleClick ? (jsx_runtime_1.jsx("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', padding: 0 }, children: labelContent })) : (labelContent), jsx_runtime_1.jsx(layout_1.Flex, {}), isDefaultValue ? null : jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? (jsx_runtime_1.jsx(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? jsx_runtime_1.jsx(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
 };
 exports.SchemaLabel = SchemaLabel;

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

@@ -75,9 +75,7 @@ const ZodArrayEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSav
                         onSave(() => localValue.value, false, false);
                     }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? (jsx_runtime_1.jsx(RevisionContextProvider, { children: jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [localValue.value.map((child, i) => {
                             var _a;
-                            return (
-                            // eslint-disable-next-line react/no-array-index-key
-                            jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
+                            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
                                     jsx_runtime_1.jsx(ZodArrayItemEditor_1.ZodArrayItemEditor, { onChange: onChange, value: child, elementSchema: arrayElement, index: i, jsonPath: jsonPath, defaultValue: (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[i]) !== null && _a !== void 0 ? _a : (0, create_zod_values_1.createZodValues)(arrayElement, z, zodTypes), onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad, mayRemove: true }), jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: i, onChange: onChange, isLast: i === localValue.value.length - 1, showAddButton: true })
                                 ] }, `${i}${localValue.keyStabilityRevision}`));
                         }), value.length === 0 ? (jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: 0, onChange: onChange, isLast: true, showAddButton: true })) : null] }) })) : null, jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })

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

@@ -23,9 +23,7 @@ const ZodFieldValidation = ({ localValue, path }) => {
     }
     return (jsx_runtime_1.jsxs("div", { style: legend, children: [
             jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: zodValidation.error.format()._errors[0], type: "error" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Zod validation failure", children: jsx_runtime_1.jsxs("div", { style: stackTrace, children: [
-                        jsx_runtime_1.jsx("div", { style: stackTraceLabel, children: "Zod Validation has failed:" }), zodValidation.error.issues.map((error, index) => (
-                        // eslint-disable-next-line react/no-array-index-key
-                        jsx_runtime_1.jsxs("div", { style: stackTraceLabel, children: ["Type: ", error.code, " ",
+                        jsx_runtime_1.jsx("div", { style: stackTraceLabel, children: "Zod Validation has failed:" }), zodValidation.error.issues.map((error, index) => (jsx_runtime_1.jsxs("div", { style: stackTraceLabel, children: ["Type: ", error.code, " ",
                                 jsx_runtime_1.jsx("br", {}),
                                 "Message: ", error.message, jsx_runtime_1.jsx("br", {}),
                                 "Path: ", path.join('.')] }, index)))] }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })

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

@@ -75,9 +75,7 @@ const ZodTupleEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSav
                         onSave(() => localValue.value, false, false);
                     }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? (jsx_runtime_1.jsx(RevisionContextProvider, { children: jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [localValue.value.map((child, i) => {
                             var _a;
-                            return (
-                            // eslint-disable-next-line react/no-array-index-key
-                            jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
+                            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
                                     jsx_runtime_1.jsx(ZodTupleItemEditor_1.ZodTupleItemEditor, { onChange: onChange, value: child, tupleItems: tupleItems, index: i, jsonPath: jsonPath, defaultValue: (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[i]) !== null && _a !== void 0 ? _a : (0, create_zod_values_1.createZodValues)(tupleItems[i], z, zodTypes), onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }), jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: i, onChange: onChange, isLast: i === localValue.value.length - 1, showAddButton: false })
                                 ] }, `${i}${localValue.keyStabilityRevision}`));
                         }), value.length === 0 ? (jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: 0, onChange: onChange, isLast: true, showAddButton: false })) : null] }) })) : null, jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })

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,17 @@ const humanReadableWebAudioCodec = (audioCodec) => {
             return 'AAC';
         case 'opus':
             return 'Opus';
+        case 'mp3':
+            return 'MP3';
+        case 'vorbis':
+            return 'Vorbis';
+        case 'pcm-s16':
+            return 'Lossless (PCM)';
         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 +64,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" }) })

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -17,6 +17,25 @@ const RenderModalOutputName_1 = require("./RenderModalOutputName");
 const tabContainer = {
     flex: 1,
 };
+const containerLabels = {
+    mp4: 'MP4',
+    webm: 'WebM',
+    mkv: 'MKV',
+    mov: 'MOV',
+    wav: 'WAV',
+    mp3: 'MP3',
+    aac: 'AAC',
+    ogg: 'OGG',
+};
+const videoContainers = ['mp4', 'webm', 'mkv', 'mov'];
+const audioContainers = ['wav', 'mp3', 'aac', 'ogg'];
+const codecLabels = {
+    h264: 'H.264',
+    h265: 'H.265',
+    vp8: 'VP8',
+    vp9: 'VP9',
+    av1: 'AV1',
+};
 const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, setStillFormat, frame, onFrameChanged, onFrameSetDirectly, container, setContainerFormat, setCodec, encodableVideoCodecs, effectiveVideoCodec, startFrame, setStartFrame, endFrame, setEndFrame, outName, onOutNameChange, validationMessage, logLevel, setLogLevel, }) => {
     const imageFormatOptions = (0, react_1.useMemo)(() => {
         return [
@@ -56,38 +75,19 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
         });
     }, [logLevel, setLogLevel]);
     const containerOptions = (0, react_1.useMemo)(() => {
-        return [
-            {
-                label: 'MP4',
-                onClick: () => setContainerFormat('mp4'),
-                leftItem: container === 'mp4' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                id: 'mp4',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'mp4',
-            },
-            {
-                label: 'WebM',
-                onClick: () => setContainerFormat('webm'),
-                leftItem: container === 'webm' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                id: 'webm',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'webm',
-            },
-        ];
-    }, [container, setContainerFormat]);
-    const codecLabels = (0, react_1.useMemo)(() => ({
-        h264: 'H.264',
-        h265: 'H.265',
-        vp8: 'VP8',
-        vp9: 'VP9',
-        av1: 'AV1',
-    }), []);
+        const containers = renderMode === 'audio' ? audioContainers : videoContainers;
+        return containers.map((c) => ({
+            label: containerLabels[c],
+            onClick: () => setContainerFormat(c),
+            leftItem: container === c ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            id: c,
+            keyHint: null,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: c,
+        }));
+    }, [container, setContainerFormat, renderMode]);
     const codecOptions = (0, react_1.useMemo)(() => {
         return encodableVideoCodecs.map((c) => ({
             label: codecLabels[c],
@@ -100,7 +100,7 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
             type: 'item',
             value: c,
         }));
-    }, [encodableVideoCodecs, effectiveVideoCodec, setCodec, codecLabels]);
+    }, [encodableVideoCodecs, effectiveVideoCodec, setCodec]);
     return (jsx_runtime_1.jsxs("div", { style: tabContainer, children: [renderMode === 'still' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })
@@ -109,11 +109,11 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
                         ] })) : null] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Container" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })
-                        ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                        ] }), renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Codec",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })
                                 ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, title: "Codec" }) })
-                        ] }), jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })
+                        ] })) : null, jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })
                 ] })), jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name' }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Log Level ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -53,7 +53,7 @@ const ClientRenderQueueProcessor = () => {
         };
     }, [getCompositionForJob]);
     const processVideoJob = (0, react_1.useCallback)(async (job, signal, onProgress) => {
-        var _a, _b;
+        var _a, _b, _c;
         const compositionRef = getCompositionForJob(job.id);
         if (!compositionRef) {
             throw new Error(`Composition not found for job ${job.id}`);
@@ -74,7 +74,7 @@ const ClientRenderQueueProcessor = () => {
             delayRenderTimeoutInMilliseconds: job.delayRenderTimeout,
             mediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
             logLevel: job.logLevel,
-            videoCodec: job.videoCodec,
+            videoCodec: (_b = job.videoCodec) !== null && _b !== void 0 ? _b : undefined,
             audioCodec: job.audioCodec,
             audioBitrate: job.audioBitrate,
             container: job.container,
@@ -93,7 +93,7 @@ const ClientRenderQueueProcessor = () => {
                 });
             },
             outputTarget: 'web-fs',
-            licenseKey: (_b = job.licenseKey) !== null && _b !== void 0 ? _b : undefined,
+            licenseKey: (_c = job.licenseKey) !== null && _c !== void 0 ? _c : undefined,
         });
         return {
             getBlob,

package/dist/components/RenderQueue/client-side-render-types.d.ts

@@ -46,7 +46,7 @@ export type ClientStillRenderJob = ClientRenderJobBase & {
 export type ClientVideoRenderJob = ClientRenderJobBase & {
     type: 'client-video';
     container: WebRendererContainer;
-    videoCodec: WebRendererVideoCodec;
+    videoCodec: WebRendererVideoCodec | null;
     audioCodec: WebRendererAudioCodec;
     startFrame: number;
     endFrame: number;