@remotion/studio 4.0.402 → 4.0.403

package/dist/components/Menu/MenuSubItem.d.ts

@@ -16,4 +16,5 @@ export declare const MenuSubItem: React.FC<{
     readonly onNextMenu: () => void;
     readonly subMenuActivated: SubMenuActivated;
     readonly setSubMenuActivated: React.Dispatch<React.SetStateAction<SubMenuActivated>>;
+    readonly disabled?: boolean;
 }>;

package/dist/components/Menu/MenuSubItem.js

@@ -44,7 +44,7 @@ const leftSpace = {
     justifyContent: 'center',
     alignItems: 'center',
 };
-const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, selected, onItemSelected, keyHint, subMenu, onQuitMenu, subMenuActivated, setSubMenuActivated, }) => {
+const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, selected, onItemSelected, keyHint, subMenu, onQuitMenu, subMenuActivated, setSubMenuActivated, disabled, }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const size = player_1.PlayerInternals.useElementSize(ref, {
@@ -56,21 +56,29 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            backgroundColor: selected ? colors_1.CLEAR_HOVER : 'transparent',
+            backgroundColor: selected && !disabled ? colors_1.CLEAR_HOVER : 'transparent',
+            opacity: disabled ? 0.5 : 1,
+            cursor: disabled ? 'not-allowed' : 'default',
         };
-    }, [selected]);
+    }, [selected, disabled]);
     const onPointerUp = (0, react_1.useCallback)((e) => {
+        if (disabled) {
+            return;
+        }
         if (subMenu) {
             setSubMenuActivated('with-mouse');
             setHovered(true);
             return;
         }
         onActionChosen(id, e);
-    }, [id, onActionChosen, setSubMenuActivated, subMenu]);
+    }, [disabled, id, onActionChosen, setSubMenuActivated, subMenu]);
     const onPointerEnter = (0, react_1.useCallback)(() => {
+        if (disabled) {
+            return;
+        }
         onItemSelected(id);
         setHovered(true);
-    }, [id, onItemSelected]);
+    }, [disabled, id, onItemSelected]);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);

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

@@ -18,6 +18,7 @@ export type SelectionItem = {
     leftItem: React.ReactNode;
     subMenu: SubMenu | null;
     quickSwitcherLabel: string | null;
+    disabled?: boolean;
 };
 export type ComboboxValue = DividerItem | SelectionItem;
 export declare const Combobox: React.FC<{

package/dist/components/NewComposition/MenuContent.js

@@ -38,6 +38,9 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
     const onItemSelected = (0, react_1.useCallback)((id) => {
         setSelectedItem(id);
     }, []);
+    const isItemSelectable = (0, react_1.useCallback)((v) => {
+        return v.type !== 'divider' && !v.disabled;
+    }, []);
     const onArrowUp = (0, react_1.useCallback)(() => {
         setSelectedItem((prevItem) => {
             if (prevItem === null) {
@@ -47,34 +50,34 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             if ((topItemCanBeUnselected && index === 0) || prevItem === null) {
                 return null;
             }
-            const previousItems = values.filter((v, i) => i < index && v.type !== 'divider');
+            const previousItems = values.filter((v, i) => i < index && isItemSelectable(v));
             if (previousItems.length > 0) {
                 return previousItems[previousItems.length - 1].id;
             }
-            const firstNonDivider = values.find((v) => v.type !== 'divider');
-            if (firstNonDivider) {
-                return firstNonDivider.id;
+            const firstSelectable = values.find((v) => isItemSelectable(v));
+            if (firstSelectable) {
+                return firstSelectable.id;
             }
             throw new Error('could not find previous item');
         });
-    }, [topItemCanBeUnselected, values]);
+    }, [topItemCanBeUnselected, values, isItemSelectable]);
     const onArrowDown = (0, react_1.useCallback)(() => {
         setSelectedItem((prevItem) => {
             const index = values.findIndex((val) => val.id === prevItem);
-            const nextItem = values.find((v, i) => i > index && v.type !== 'divider');
+            const nextItem = values.find((v, i) => i > index && isItemSelectable(v));
             if (nextItem) {
                 return nextItem.id;
             }
-            const lastNonDivider = values
+            const lastSelectable = values
                 .slice()
                 .reverse()
-                .find((v) => v.type !== 'divider');
-            if (lastNonDivider) {
-                return lastNonDivider.id;
+                .find((v) => isItemSelectable(v));
+            if (lastSelectable) {
+                return lastSelectable.id;
             }
             throw new Error('could not find next item');
         });
-    }, [values]);
+    }, [values, isItemSelectable]);
     const onEnter = (0, react_1.useCallback)(() => {
         if (selectedItem === null) {
             return onHide();
@@ -86,6 +89,9 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         if (item.type === 'divider') {
             throw new Error('cannot find divider');
         }
+        if (item.disabled) {
+            return;
+        }
         if (item.subMenu) {
             return setSubMenuActivated('without-mouse');
         }
@@ -249,7 +255,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
                 }
                 onHide();
             };
-            return ((0, jsx_runtime_1.jsx)(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated }, item.id));
+            return ((0, jsx_runtime_1.jsx)(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated, disabled: item.disabled }, item.id));
         }) }));
 };
 exports.MenuContent = MenuContent;

package/dist/components/RenderModal/WebRenderModal.js

@@ -22,6 +22,8 @@ const DataEditor_1 = require("./DataEditor");
 const get_string_before_suffix_1 = require("./get-string-before-suffix");
 const render_modals_1 = require("./render-modals");
 const ResolveCompositionBeforeModal_1 = require("./ResolveCompositionBeforeModal");
+const use_encodable_audio_codecs_1 = require("./use-encodable-audio-codecs");
+const use_encodable_video_codecs_1 = require("./use-encodable-video-codecs");
 const WebRendererExperimentalBadge_1 = require("./WebRendererExperimentalBadge");
 const WebRenderModalAdvanced_1 = require("./WebRenderModalAdvanced");
 const WebRenderModalAudio_1 = require("./WebRenderModalAudio");
@@ -99,6 +101,8 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     // Video-specific state
     const [codec, setCodec] = (0, react_1.useState)('h264');
     const [container, setContainer] = (0, react_1.useState)('mp4');
+    const [audioCodec, setAudioCodec] = (0, react_1.useState)('aac');
+    const [audioBitrate, setAudioBitrate] = (0, react_1.useState)('medium');
     const [videoBitrate, setVideoBitrate] = (0, react_1.useState)('high');
     const [hardwareAcceleration, setHardwareAcceleration] = (0, react_1.useState)('no-preference');
     const [keyframeIntervalInSeconds, setKeyframeIntervalInSeconds] = (0, react_1.useState)(5);
@@ -108,6 +112,22 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     const [transparent, setTransparent] = (0, react_1.useState)(false);
     const [muted, setMuted] = (0, react_1.useState)(false);
     const [licenseKey, setLicenseKey] = (0, react_1.useState)(initialLicenseKey);
+    const encodableAudioCodecs = (0, use_encodable_audio_codecs_1.useEncodableAudioCodecs)(container);
+    const encodableVideoCodecs = (0, use_encodable_video_codecs_1.useEncodableVideoCodecs)(container);
+    const effectiveAudioCodec = (0, react_1.useMemo)(() => {
+        var _a;
+        if (encodableAudioCodecs.includes(audioCodec)) {
+            return audioCodec;
+        }
+        return (_a = encodableAudioCodecs[0]) !== null && _a !== void 0 ? _a : audioCodec;
+    }, [audioCodec, encodableAudioCodecs]);
+    const effectiveVideoCodec = (0, react_1.useMemo)(() => {
+        var _a;
+        if (encodableVideoCodecs.includes(codec)) {
+            return codec;
+        }
+        return (_a = encodableVideoCodecs[0]) !== null && _a !== void 0 ? _a : codec;
+    }, [codec, encodableVideoCodecs]);
     const finalEndFrame = (0, react_1.useMemo)(() => {
         if (endFrame === null) {
             return resolvedComposition.durationInFrames - 1;
@@ -149,6 +169,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     }, []);
     const setContainerFormat = (0, react_1.useCallback)((newContainer) => {
         setContainer(newContainer);
+        setAudioCodec((0, web_renderer_1.getDefaultAudioCodecForContainer)(newContainer));
         setOutName((prev) => {
             const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + newContainer;
             return newFileName;
@@ -162,7 +183,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 return newFileName;
             });
         }
-        else {
+        else if (newMode === 'still') {
             setOutName((prev) => {
                 const newFileName = (0, get_string_before_suffix_1.getStringBeforeSuffix)(prev) + '.' + imageFormat;
                 return newFileName;
@@ -316,7 +337,9 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
             delayRenderTimeoutInMilliseconds: delayRenderTimeout,
             mediaCacheSizeInBytes,
             logLevel,
-            videoCodec: codec,
+            videoCodec: effectiveVideoCodec,
+            audioCodec: effectiveAudioCodec,
+            audioBitrate,
             container,
             videoBitrate,
             hardwareAcceleration,
@@ -348,7 +371,9 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         delayRenderTimeout,
         mediaCacheSizeInBytes,
         logLevel,
-        codec,
+        effectiveVideoCodec,
+        effectiveAudioCodec,
+        audioBitrate,
         container,
         videoBitrate,
         hardwareAcceleration,
@@ -376,7 +401,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     }, [renderMode, onRenderStill, onRenderVideo]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.outerModalStyle, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: onRender, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: [renderProgress
                                 ? `Rendering... ${renderProgress.renderedFrames}/${finalEndFrame}`
-                                : `Render ${renderMode}`, (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.container, children: (0, jsx_runtime_1.jsx)(WebRendererExperimentalBadge_1.WebRendererExperimentalBadge, {}) }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.leftSidebar, children: [(0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "General"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: render_modals_1.icon }) }), "Input Props"] }), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: render_modals_1.icon }) }), "Picture"] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: render_modals_1.icon }) }), "Audio"] })) : null, (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: render_modals_1.icon }) }), "Other"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => setTab('license'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(certificate_1.CertificateIcon, { style: render_modals_1.icon }) }), "License"] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, 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, codec: codec, setCodec: setCodec, 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' ? ((0, 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' ? ((0, jsx_runtime_1.jsx)(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAudio_1.WebRenderModalAudio, { muted: muted, setMuted: setMuted })) : tab === 'advanced' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) : ((0, jsx_runtime_1.jsx)(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })] })] }));
+                                : `Render ${renderMode}`, (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.container, children: (0, jsx_runtime_1.jsx)(WebRendererExperimentalBadge_1.WebRendererExperimentalBadge, {}) }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.leftSidebar, children: [(0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "General"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: render_modals_1.icon }) }), "Input Props"] }), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: render_modals_1.icon }) }), "Picture"] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: render_modals_1.icon }) }), "Audio"] })) : null, (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: render_modals_1.icon }) }), "Other"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => setTab('license'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(certificate_1.CertificateIcon, { style: render_modals_1.icon }) }), "License"] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, 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' ? ((0, 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' ? ((0, jsx_runtime_1.jsx)(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent })) : tab === 'audio' ? ((0, 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' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) : ((0, jsx_runtime_1.jsx)(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })] })] }));
 };
 const WebRenderModalWithLoader = (props) => {
     return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: props.compositionId, children: (0, jsx_runtime_1.jsx)(WebRenderModal, { ...props }) }) }));

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

@@ -1,5 +1,13 @@
-import type React from 'react';
+import type { WebRendererAudioCodec, WebRendererContainer, WebRendererQuality } from '@remotion/web-renderer';
+import React from 'react';
 export declare const WebRenderModalAudio: React.FC<{
     readonly muted: boolean;
     readonly setMuted: React.Dispatch<React.SetStateAction<boolean>>;
+    readonly audioCodec: WebRendererAudioCodec;
+    readonly setAudioCodec: React.Dispatch<React.SetStateAction<WebRendererAudioCodec>>;
+    readonly audioBitrate: WebRendererQuality;
+    readonly setAudioBitrate: React.Dispatch<React.SetStateAction<WebRendererQuality>>;
+    readonly container: WebRendererContainer;
+    readonly encodableCodecs: WebRendererAudioCodec[];
+    readonly effectiveAudioCodec: WebRendererAudioCodec;
 }>;

package/dist/components/RenderModal/WebRenderModalAudio.js

@@ -2,13 +2,62 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebRenderModalAudio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const web_renderer_1 = require("@remotion/web-renderer");
+const react_1 = require("react");
+const Checkmark_1 = require("../../icons/Checkmark");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const layout_1 = require("../layout");
 const MutedSetting_1 = require("./MutedSetting");
+const RenderModalHr_1 = require("./RenderModalHr");
+const layout_2 = require("./layout");
+const quality_options_1 = require("./quality-options");
 const container = {
     flex: 1,
     overflowY: 'auto',
 };
-const WebRenderModalAudio = ({ muted, setMuted }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: false, muted: muted, setMuted: setMuted }) }));
+const fallbackNoticeStyle = {
+    backgroundColor: 'rgba(59, 130, 246, 0.15)',
+    border: '1px solid rgba(59, 130, 246, 0.4)',
+    borderRadius: 4,
+    padding: '8px 12px',
+    marginLeft: 16,
+    marginRight: 16,
+    marginTop: 8,
+    fontSize: 13,
+    lineHeight: 1.4,
+    color: '#60a5fa',
+};
+const humanReadableWebAudioCodec = (audioCodec) => {
+    switch (audioCodec) {
+        case 'aac':
+            return 'AAC';
+        case 'opus':
+            return 'Opus';
+        default:
+            return audioCodec;
+    }
+};
+const WebRenderModalAudio = ({ 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) => {
+            const isEncodable = encodableCodecs.includes(codec);
+            return {
+                label: humanReadableWebAudioCodec(codec),
+                onClick: () => setAudioCodec(codec),
+                leftItem: audioCodec === codec ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: codec,
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: codec,
+                disabled: !isEncodable,
+            };
+        });
+    }, [containerSupported, encodableCodecs, audioCodec, setAudioCodec]);
+    const audioBitrateOptions = (0, react_1.useMemo)(() => (0, quality_options_1.getQualityOptions)(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [(0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: false, muted: muted, setMuted: setMuted }), !muted ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Audio Quality", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioBitrateOptions, selectedId: audioBitrate, title: "Audio Quality" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Audio Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions, selectedId: audioCodec, title: "Audio Codec" }) })] }), effectiveAudioCodec !== audioCodec ? ((0, jsx_runtime_1.jsxs)("div", { style: fallbackNoticeStyle, children: [humanReadableWebAudioCodec(audioCodec), " is not available in this browser. Using ", humanReadableWebAudioCodec(effectiveAudioCodec), ' ', "instead."] })) : null] })) : null] }));
 };
 exports.WebRenderModalAudio = WebRenderModalAudio;

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

@@ -13,8 +13,9 @@ type WebRenderModalBasicProps = {
     readonly onFrameSetDirectly: (newFrame: number) => void;
     readonly container: WebRendererContainer;
     readonly setContainerFormat: (container: WebRendererContainer) => void;
-    readonly codec: WebRendererVideoCodec;
     readonly setCodec: (codec: WebRendererVideoCodec) => void;
+    readonly encodableVideoCodecs: WebRendererVideoCodec[];
+    readonly effectiveVideoCodec: WebRendererVideoCodec;
     readonly startFrame: number | null;
     readonly setStartFrame: React.Dispatch<React.SetStateAction<number | null>>;
     readonly endFrame: number | null;

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -17,7 +17,7 @@ const RenderModalOutputName_1 = require("./RenderModalOutputName");
 const tabContainer = {
     flex: 1,
 };
-const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, setStillFormat, frame, onFrameChanged, onFrameSetDirectly, container, setContainerFormat, codec, setCodec, startFrame, setStartFrame, endFrame, setEndFrame, outName, onOutNameChange, validationMessage, logLevel, setLogLevel, }) => {
+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 [
             {
@@ -81,65 +81,26 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
             },
         ];
     }, [container, setContainerFormat]);
+    const codecLabels = (0, react_1.useMemo)(() => ({
+        h264: 'H.264',
+        h265: 'H.265',
+        vp8: 'VP8',
+        vp9: 'VP9',
+        av1: 'AV1',
+    }), []);
     const codecOptions = (0, react_1.useMemo)(() => {
-        return [
-            {
-                label: 'H.264',
-                onClick: () => setCodec('h264'),
-                leftItem: codec === 'h264' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'h264',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'h264',
-            },
-            {
-                label: 'H.265',
-                onClick: () => setCodec('h265'),
-                leftItem: codec === 'h265' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'h265',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'h265',
-            },
-            {
-                label: 'VP8',
-                onClick: () => setCodec('vp8'),
-                leftItem: codec === 'vp8' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'vp8',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'vp8',
-            },
-            {
-                label: 'VP9',
-                onClick: () => setCodec('vp9'),
-                leftItem: codec === 'vp9' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'vp9',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'vp9',
-            },
-            {
-                label: 'AV1',
-                onClick: () => setCodec('av1'),
-                leftItem: codec === 'av1' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'av1',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'av1',
-            },
-        ];
-    }, [codec, setCodec]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] }), resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Container" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: codecOptions, selectedId: codec, title: "Codec" }) })] }), (0, 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 })] })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: "Download name" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Log Level ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })] })] }));
+        return encodableVideoCodecs.map((c) => ({
+            label: codecLabels[c],
+            onClick: () => setCodec(c),
+            leftItem: effectiveVideoCodec === c ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+            id: c,
+            keyHint: null,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: c,
+        }));
+    }, [encodableVideoCodecs, effectiveVideoCodec, setCodec, codecLabels]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] }), resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Container" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, title: "Codec" }) })] }), (0, 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 })] })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: "Download name" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Log Level ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })] })] }));
 };
 exports.WebRenderModalBasic = WebRenderModalBasic;

package/dist/components/RenderModal/WebRenderModalPicture.js

@@ -3,74 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebRenderModalPicture = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Checkmark_1 = require("../../icons/Checkmark");
 const Checkbox_1 = require("../Checkbox");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const layout_1 = require("./layout");
 const NumberSetting_1 = require("./NumberSetting");
+const quality_options_1 = require("./quality-options");
 const tabContainer = {
     flex: 1,
 };
 const WebRenderModalPicture = ({ renderMode, videoBitrate, setVideoBitrate, keyframeIntervalInSeconds, setKeyframeIntervalInSeconds, transparent, setTransparent, }) => {
-    const qualityOptions = (0, react_1.useMemo)(() => {
-        return [
-            {
-                label: 'Very Low',
-                onClick: () => setVideoBitrate('very-low'),
-                leftItem: videoBitrate === 'very-low' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'very-low',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'very-low',
-            },
-            {
-                label: 'Low',
-                onClick: () => setVideoBitrate('low'),
-                leftItem: videoBitrate === 'low' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'low',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'low',
-            },
-            {
-                label: 'Medium',
-                onClick: () => setVideoBitrate('medium'),
-                leftItem: videoBitrate === 'medium' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'medium',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'medium',
-            },
-            {
-                label: 'High',
-                onClick: () => setVideoBitrate('high'),
-                leftItem: videoBitrate === 'high' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'high',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'high',
-            },
-            {
-                label: 'Very High',
-                onClick: () => setVideoBitrate('very-high'),
-                leftItem: videoBitrate === 'very-high' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: 'very-high',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'very-high',
-            },
-        ];
-    }, [videoBitrate, setVideoBitrate]);
+    const qualityOptions = (0, react_1.useMemo)(() => (0, quality_options_1.getQualityOptions)(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
     const onTransparentChanged = (0, react_1.useCallback)((e) => {
         setTransparent(e.target.checked);
     }, [setTransparent]);

package/dist/components/RenderModal/quality-options.d.ts

@@ -0,0 +1,3 @@
+import type { WebRendererQuality } from '@remotion/web-renderer';
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+export declare const getQualityOptions: (selectedQuality: WebRendererQuality, setQuality: (quality: WebRendererQuality) => void) => ComboboxValue[];

package/dist/components/RenderModal/quality-options.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getQualityOptions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Checkmark_1 = require("../../icons/Checkmark");
+const QUALITY_OPTIONS = [
+    { value: 'very-low', label: 'Very Low' },
+    { value: 'low', label: 'Low' },
+    { value: 'medium', label: 'Medium' },
+    { value: 'high', label: 'High' },
+    { value: 'very-high', label: 'Very High' },
+];
+const getQualityOptions = (selectedQuality, setQuality) => {
+    return QUALITY_OPTIONS.map(({ value, label }) => ({
+        label,
+        onClick: () => setQuality(value),
+        leftItem: selectedQuality === value ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+        id: value,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: 'item',
+        value,
+    }));
+};
+exports.getQualityOptions = getQualityOptions;

package/dist/components/RenderModal/use-encodable-audio-codecs.d.ts

@@ -0,0 +1,2 @@
+import type { WebRendererAudioCodec, WebRendererContainer } from '@remotion/web-renderer';
+export declare const useEncodableAudioCodecs: (container: WebRendererContainer) => WebRendererAudioCodec[];

package/dist/components/RenderModal/use-encodable-audio-codecs.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEncodableAudioCodecs = void 0;
+const web_renderer_1 = require("@remotion/web-renderer");
+const react_1 = require("react");
+const useEncodableAudioCodecs = (container) => {
+    var _a;
+    const cacheRef = (0, react_1.useRef)({});
+    const [codecsByContainer, setCodecsByContainer] = (0, react_1.useState)(() => {
+        // Initialize with fallback for the current container
+        return {
+            [container]: (0, web_renderer_1.getSupportedAudioCodecsForContainer)(container),
+        };
+    });
+    (0, react_1.useEffect)(() => {
+        const cached = cacheRef.current[container];
+        // Already fetched or currently fetching for this container
+        if (cached) {
+            return;
+        }
+        const supported = (0, web_renderer_1.getSupportedAudioCodecsForContainer)(container);
+        // Mark as fetching to prevent duplicate requests
+        cacheRef.current[container] = {
+            codecs: supported,
+            status: 'fetching',
+        };
+        (0, web_renderer_1.getEncodableAudioCodecs)(container)
+            .then((encodable) => {
+            cacheRef.current[container] = {
+                codecs: encodable,
+                status: 'done',
+            };
+            setCodecsByContainer((prev) => ({
+                ...prev,
+                [container]: encodable,
+            }));
+        })
+            .catch(() => {
+            // On error, keep using the supported codecs fallback
+            cacheRef.current[container] = {
+                codecs: supported,
+                status: 'done',
+            };
+        });
+    }, [container]);
+    // Return codecs for current container, or fall back to supported codecs
+    return ((_a = codecsByContainer[container]) !== null && _a !== void 0 ? _a : (0, web_renderer_1.getSupportedAudioCodecsForContainer)(container));
+};
+exports.useEncodableAudioCodecs = useEncodableAudioCodecs;

package/dist/components/RenderModal/use-encodable-video-codecs.d.ts

@@ -0,0 +1,2 @@
+import type { WebRendererContainer, WebRendererVideoCodec } from '@remotion/web-renderer';
+export declare const useEncodableVideoCodecs: (container: WebRendererContainer) => WebRendererVideoCodec[];