@remotion/studio
Version:
APIs for interacting with the Remotion Studio
73 lines (72 loc) • 9.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderModalPicture = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const client_1 = require("@remotion/renderer/client");
const react_1 = require("react");
const Checkmark_1 = require("../../icons/Checkmark");
const Checkbox_1 = require("../Checkbox");
const is_menu_item_1 = require("../Menu/is-menu-item");
const ComboBox_1 = require("../NewComposition/ComboBox");
const RemInput_1 = require("../NewComposition/RemInput");
const SegmentedControl_1 = require("../SegmentedControl");
const layout_1 = require("../layout");
const CrfSetting_1 = require("./CrfSetting");
const JpegQualitySetting_1 = require("./JpegQualitySetting");
const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
const RenderModalHr_1 = require("./RenderModalHr");
const ScaleSetting_1 = require("./ScaleSetting");
const layout_2 = require("./layout");
const qualityControlModes = ['crf', 'bitrate'];
const container = {
flex: 1,
overflowY: 'auto',
};
const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, imageFormatOptions, setQualityControl, qualityControlType, videoImageFormat, setJpegQuality, jpegQuality, maxCrf, minCrf, setCrf, shouldDisplayQualityControlPicker, setCustomTargetVideoBitrateValue, crf, customTargetVideoBitrate, stillImageFormat, colorSpace, setColorSpace, pixelFormatOptions, encodingBufferSize, encodingMaxRate, setEncodingBufferSize, setEncodingMaxRate, compositionWidth, compositionHeight, }) => {
const colorSpaceOptions = (0, react_1.useMemo)(() => {
return client_1.BrowserSafeApis.validColorSpaces.map((option) => {
return {
label: option,
onClick: () => setColorSpace(option),
key: option,
id: option,
keyHint: null,
leftItem: colorSpace === option ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
quickSwitcherLabel: null,
subMenu: null,
type: 'item',
value: option,
};
});
}, [colorSpace, setColorSpace]);
const qualityControlOptions = (0, react_1.useMemo)(() => {
return qualityControlModes.map((option) => {
return {
label: option === 'crf' ? 'CRF' : 'Bitrate',
onClick: () => setQualityControl(option),
key: option,
selected: qualityControlType === option,
};
});
}, [qualityControlType, setQualityControl]);
const onTargetVideoBitrateChanged = (0, react_1.useCallback)((e) => {
setCustomTargetVideoBitrateValue(e.target.value);
}, [setCustomTargetVideoBitrateValue]);
const onEncodingBufferSizeToggled = (0, react_1.useCallback)((e) => {
setEncodingBufferSize(e.target.checked ? '10000k' : null);
}, [setEncodingBufferSize]);
const onEncodingMaxRateToggled = (0, react_1.useCallback)((e) => {
setEncodingMaxRate(e.target.checked ? '5000k' : null);
}, [setEncodingMaxRate]);
const onEncodingBufferSizeChanged = (0, react_1.useCallback)((e) => {
setEncodingBufferSize(e.target.value);
}, [setEncodingBufferSize]);
const onEncodingMaxRateChanged = (0, react_1.useCallback)((e) => {
setEncodingMaxRate(e.target.value);
}, [setEncodingMaxRate]);
return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'video' && qualityControlType !== null ? ((0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})) : null, shouldDisplayQualityControlPicker && renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, qualityControlType === 'crf' &&
renderMode !== 'still' &&
renderMode !== 'sequence' &&
crf !== null ? ((0, jsx_runtime_1.jsx)(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: "crfOption" })) : null, qualityControlType === 'bitrate' && renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Target video bitrate", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoBitrateOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null, renderMode === 'video' ? ((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.jsxs)("div", { style: layout_2.label, children: ["Custom FFmpeg -bufsize", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "encodingBufferSizeOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: encodingBufferSize !== null, onChange: onEncodingBufferSizeToggled, name: "encoding-buffer-size" }) })] }), encodingBufferSize === null ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "-bufsize value" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingBufferSize, onChange: onEncodingBufferSizeChanged, status: "ok", rightAlign: true }) }) })] })), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Custom FFmpeg -maxrate", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "encodingMaxRateOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: encodingMaxRate !== null, onChange: onEncodingMaxRateToggled, name: "encoding-max-rate" }) })] }), encodingMaxRate === null ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "-maxrate value" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingMaxRate, onChange: onEncodingMaxRateChanged, status: "ok", rightAlign: true }) }) })] }))] })) : null, renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, (0, jsx_runtime_1.jsx)(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale, compositionWidth: compositionWidth, compositionHeight: compositionHeight }), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Color space", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "colorSpaceOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: colorSpaceOptions, selectedId: colorSpace, title: "Color Space" }) })] })) : null] }));
};
exports.RenderModalPicture = RenderModalPicture;