@remotion/studio
Version:
APIs for interacting with the Remotion Studio
83 lines (82 loc) • 4.75 kB
JavaScript
"use strict";
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 layout_1 = require("../layout");
const is_menu_item_1 = require("../Menu/is-menu-item");
const ComboBox_1 = require("../NewComposition/ComboBox");
const layout_2 = require("./layout");
const MutedSetting_1 = require("./MutedSetting");
const quality_options_1 = require("./quality-options");
const RenderModalHr_1 = require("./RenderModalHr");
const container = {
flex: 1,
overflowY: 'auto',
};
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';
case 'mp3':
return 'MP3';
case 'vorbis':
return 'Vorbis';
case 'pcm-s16':
return 'Lossless (PCM)';
case 'flac':
return 'FLAC';
default:
throw new Error(`Unsupported audio codec: ${audioCodec}`);
}
};
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) => {
const isEncodable = encodableCodecs.includes(codec);
return {
label: humanReadableWebAudioCodec(codec),
onClick: () => setAudioCodec(codec),
leftItem: audioCodec === codec ? 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]);
const isAudioOnly = renderMode === 'audio';
const showAudioSettings = isAudioOnly || !muted;
const showAudioCodecSetting = !isAudioOnly || containerSupported.length > 1;
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" }) })
] }), showAudioCodecSetting ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Audio Codec",
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: audioCodecOptions, selectedId: audioCodec, title: "Audio Codec" }) })
] })) : null, showAudioCodecSetting && effectiveAudioCodec !== audioCodec ? (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;