@remotion/studio
Version:
APIs for interacting with the Remotion Studio
85 lines (84 loc) • 6.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderModalBasic = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const client_1 = require("@remotion/renderer/client");
const pure_1 = require("@remotion/renderer/pure");
const react_1 = require("react");
const prores_labels_1 = require("../../helpers/prores-labels");
const use_file_existence_1 = require("../../helpers/use-file-existence");
const Checkmark_1 = require("../../icons/Checkmark");
const Checkbox_1 = require("../Checkbox");
const ComboBox_1 = require("../NewComposition/ComboBox");
const InputDragger_1 = require("../NewComposition/InputDragger");
const RemInput_1 = require("../NewComposition/RemInput");
const SegmentedControl_1 = require("../SegmentedControl");
const layout_1 = require("../layout");
const FrameRangeSetting_1 = require("./FrameRangeSetting");
const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
const RenderModalOutputName_1 = require("./RenderModalOutputName");
const human_readable_codec_1 = require("./human-readable-codec");
const layout_2 = require("./layout");
const container = {
flex: 1,
};
const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setVideoCodec: setCodec, proResProfile, setProResProfile, frame, setFrame, resolvedComposition, setOutName, setEndFrame, endFrame, setStartFrame, startFrame, validationMessage, setVerboseLogging, logLevel, }) => {
const existence = (0, use_file_existence_1.useFileExistence)(outName);
const videoCodecOptions = (0, react_1.useMemo)(() => {
return client_1.BrowserSafeApis.validCodecs
.filter((c) => {
return pure_1.NoReactAPIs.isAudioCodec(c) === (renderMode === 'audio');
})
.map((codecOption) => {
return {
label: (0, human_readable_codec_1.humanReadableCodec)(codecOption),
onClick: () => setCodec(codecOption),
key: codecOption,
leftItem: codec === codecOption ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
id: codecOption,
keyHint: null,
quickSwitcherLabel: null,
subMenu: null,
type: 'item',
value: codecOption,
};
});
}, [renderMode, setCodec, codec]);
const proResProfileOptions = (0, react_1.useMemo)(() => {
return client_1.BrowserSafeApis.proResProfileOptions.map((option) => {
return {
label: (0, prores_labels_1.labelProResProfile)(option),
onClick: () => setProResProfile(option),
key: option,
selected: proResProfile === option,
type: 'item',
id: option,
keyHint: null,
leftItem: null,
quickSwitcherLabel: null,
subMenu: null,
value: option,
};
});
}, [proResProfile, setProResProfile]);
const onFrameSetDirectly = (0, react_1.useCallback)((newFrame) => {
setFrame(newFrame);
}, [setFrame]);
const onFrameChanged = (0, react_1.useCallback)((e) => {
setFrame((q) => {
const newFrame = parseFloat(e);
if (Number.isNaN(newFrame)) {
return q;
}
return newFrame;
});
}, [setFrame]);
const onValueChange = (0, react_1.useCallback)((e) => {
setOutName(e.target.value);
}, [setOutName]);
const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
setVerboseLogging(e.target.checked ? 'verbose' : 'info');
}, [setVerboseLogging]);
return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'still' || renderMode === 'sequence' ? ((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 }) })] })) : ((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: videoCodecOptions, selectedId: codec, title: "Codec" }) })] })), renderMode === 'still' && 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, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: 'proResProfile', selectedId: proResProfile, values: proResProfileOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage, label: renderMode === 'sequence' ? 'Folder name' : 'Output name' }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Verbose logging ", (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)(Checkbox_1.Checkbox, { checked: logLevel === 'verbose', onChange: onVerboseLoggingChanged, name: "verbose-logging" }) })] })] }));
};
exports.RenderModalBasic = RenderModalBasic;