@remotion/studio
Version:
APIs for interacting with the Remotion Studio
112 lines (111 loc) • 7.56 kB
JavaScript
"use strict";
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 layout_1 = require("../layout");
const ComboBox_1 = require("../NewComposition/ComboBox");
const InputDragger_1 = require("../NewComposition/InputDragger");
const RemInput_1 = require("../NewComposition/RemInput");
const SegmentedControl_1 = require("../SegmentedControl");
const FrameRangeSetting_1 = require("./FrameRangeSetting");
const human_readable_codec_1 = require("./human-readable-codec");
const human_readable_loglevel_1 = require("./human-readable-loglevel");
const layout_2 = require("./layout");
const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
const RenderModalOutputName_1 = require("./RenderModalOutputName");
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, showOutputName, }) => {
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 ? 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 logLevelOptions = (0, react_1.useMemo)(() => {
return ['trace', 'verbose', 'info', 'warn', 'error'].map((level) => {
return {
label: (0, human_readable_loglevel_1.humanReadableLogLevel)(level),
onClick: () => setVerboseLogging(level),
leftItem: logLevel === level ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
id: level,
keyHint: null,
quickSwitcherLabel: null,
subMenu: null,
type: 'item',
value: level,
};
});
}, [logLevel, setVerboseLogging]);
return (jsx_runtime_1.jsxs("div", { style: container, children: [renderMode === 'still' || renderMode === 'sequence' ? (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 }) })
] })) : (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: videoCodecOptions, selectedId: codec, title: "Codec" }) })
] })), renderMode === 'still' && resolvedComposition.durationInFrames > 1 ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Frame" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RightAlignInput, { children: 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' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ProRes profile" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: 'proResProfile', selectedId: proResProfile, values: proResProfileOptions }) })
] })) : null, renderMode === 'still' ? null : (jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), showOutputName ? (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' })) : null, 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" })
] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })
] })
] }));
};
exports.RenderModalBasic = RenderModalBasic;