@remotion/studio
Version:
APIs for interacting with the Remotion Studio
195 lines (194 loc) • 18.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderModalAdvanced = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const client_1 = require("@remotion/renderer/client");
const react_1 = require("react");
const presets_labels_1 = require("../../helpers/presets-labels");
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 layout_1 = require("../layout");
const NumberSetting_1 = require("./NumberSetting");
const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
const RenderModalEnvironmentVariables_1 = require("./RenderModalEnvironmentVariables");
const RenderModalHr_1 = require("./RenderModalHr");
const layout_2 = require("./layout");
const container = {
flex: 1,
overflowY: 'auto',
};
const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, setx264Preset, x264Preset, codec, setMediaCacheSizeInBytes, mediaCacheSizeInBytes, offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes, offthreadVideoThreads, setOffthreadVideoThreads, enableMultiProcessOnLinux, setChromiumMultiProcessOnLinux, setUserAgent, userAgent, beep, setBeep, repro, setRepro, hardwareAcceleration, chromeModeOption, setChromeModeOption, setHardwareAcceleration, }) => {
const extendedOpenGlOptions = (0, react_1.useMemo)(() => {
return [
'angle',
'egl',
'swangle',
'swiftshader',
'vulkan',
'angle-egl',
'default',
];
}, []);
const toggleCustomMediaCacheSizeInBytes = (0, react_1.useCallback)(() => {
setMediaCacheSizeInBytes((previous) => {
if (previous === null) {
return 1000 * 1000 * 1000;
}
return null;
});
}, [setMediaCacheSizeInBytes]);
const toggleCustomOffthreadVideoCacheSizeInBytes = (0, react_1.useCallback)(() => {
setOffthreadVideoCacheSizeInBytes((previous) => {
if (previous === null) {
return 512 * 1024 * 1024;
}
return null;
});
}, [setOffthreadVideoCacheSizeInBytes]);
const toggleCustomOffthreadVideoThreads = (0, react_1.useCallback)(() => {
setOffthreadVideoThreads((previous) => {
if (previous === null) {
return 2;
}
return null;
});
}, [setOffthreadVideoThreads]);
const toggleCustomUserAgent = (0, react_1.useCallback)(() => {
setUserAgent((previous) => {
if (previous === null) {
return 'Mozilla/5.0 (Remotion)';
}
return null;
});
}, [setUserAgent]);
const onDisallowParallelEncodingChanged = (0, react_1.useCallback)((e) => {
setDisallowParallelEncoding(e.target.checked);
}, [setDisallowParallelEncoding]);
const onDisableWebSecurityChanged = (0, react_1.useCallback)((e) => {
setDisableWebSecurity(e.target.checked);
}, [setDisableWebSecurity]);
const onEnableMultiProcessOnLinux = (0, react_1.useCallback)((e) => {
setChromiumMultiProcessOnLinux(e.target.checked);
}, [setChromiumMultiProcessOnLinux]);
const onIgnoreCertificatErrors = (0, react_1.useCallback)((e) => {
setIgnoreCertificateErrors(e.target.checked);
}, [setIgnoreCertificateErrors]);
const onHeadless = (0, react_1.useCallback)((e) => {
setHeadless(e.target.checked);
}, [setHeadless]);
const onUserAgentChanged = (0, react_1.useCallback)((e) => {
setUserAgent(e.target.value);
}, [setUserAgent]);
const onPlayBeepSound = (0, react_1.useCallback)((e) => {
setBeep(e.target.checked);
}, [setBeep]);
const onReproToggle = (0, react_1.useCallback)((e) => {
setRepro(e.target.checked);
}, [setRepro]);
const openGlOptions = (0, react_1.useMemo)(() => {
return extendedOpenGlOptions.map((option) => {
return {
label: option === 'default' ? 'Default' : option,
onClick: () => setOpenGlOption(option),
key: option,
leftItem: openGlOption === option ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
id: option,
keyHint: null,
quickSwitcherLabel: null,
subMenu: null,
type: 'item',
value: option,
};
});
}, [extendedOpenGlOptions, openGlOption, setOpenGlOption]);
const chromeModeOptions = (0, react_1.useMemo)(() => {
return client_1.BrowserSafeApis.validChromeModeOptions.map((option) => {
return {
label: option,
onClick: () => setChromeModeOption(option),
key: option,
leftItem: chromeModeOption === option ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
id: option,
keyHint: null,
quickSwitcherLabel: null,
subMenu: null,
type: 'item',
value: option,
};
});
}, [chromeModeOption, setChromeModeOption]);
const x264PresetOptions = (0, react_1.useMemo)(() => {
return client_1.BrowserSafeApis.x264PresetOptions.map((option) => {
return {
label: (0, presets_labels_1.labelx264Preset)(option),
onClick: () => setx264Preset(option),
key: option,
type: 'item',
id: option,
keyHint: null,
leftItem: x264Preset === option ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
quickSwitcherLabel: null,
subMenu: null,
value: option,
};
});
}, [setx264Preset, x264Preset]);
const hardwareAccelerationValues = (0, react_1.useMemo)(() => {
return client_1.BrowserSafeApis.hardwareAccelerationOptions.map((option) => {
return {
label: option,
onClick: () => setHardwareAcceleration(option),
leftItem: hardwareAcceleration === option ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
subMenu: null,
quickSwitcherLabel: null,
type: 'item',
id: option,
keyHint: null,
value: option,
};
});
}, [hardwareAcceleration, setHardwareAcceleration]);
const changeMediaCacheSizeInBytes = (0, react_1.useCallback)((cb) => {
setMediaCacheSizeInBytes((prev) => {
if (prev === null) {
throw new TypeError('Expected previous value');
}
if (typeof cb === 'function') {
return cb(prev);
}
return cb;
});
}, [setMediaCacheSizeInBytes]);
const changeOffthreadVideoCacheSizeInBytes = (0, react_1.useCallback)((cb) => {
setOffthreadVideoCacheSizeInBytes((prev) => {
if (prev === null) {
throw new TypeError('Expected previous value');
}
if (typeof cb === 'function') {
return cb(prev);
}
return cb;
});
}, [setOffthreadVideoCacheSizeInBytes]);
const changeOffthreadVideoThreads = (0, react_1.useCallback)((cb) => {
setOffthreadVideoThreads((prev) => {
if (prev === null) {
throw new TypeError('Expected previous value');
}
if (typeof cb === 'function') {
return cb(prev);
}
return cb;
});
}, [setOffthreadVideoThreads]);
return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minConcurrency, max: maxConcurrency, step: 1, name: "Concurrency", formatter: (w) => `${w}x`, onValueChanged: setConcurrency, value: concurrency })), renderMode === 'video' && codec === 'h264' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["x264 Preset", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "x264Option" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: x264Preset, selectedId: x264Preset, values: x264PresetOptions }) })] })) : 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: ["Hardware acceleration", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "hardwareAccelerationOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: hardwareAcceleration, selectedId: hardwareAcceleration, values: hardwareAccelerationValues }) })] })) : null, (0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting
// Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
, {
// Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, hint: "delayRenderTimeoutInMillisecondsOption", value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })] }), renderMode === 'audio' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Custom @remotion/media cache size" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "mediaCacheSizeInBytesOption" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })] })), renderMode === 'audio' || mediaCacheSizeInBytes === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: 0, max: 2000 * 1024 * 1024, step: 1024, name: "@remotion/media cache size", formatter: (w) => `${w} bytes`, onValueChanged: changeMediaCacheSizeInBytes, value: mediaCacheSizeInBytes })), renderMode === 'audio' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Custom OffthreadVideo cache" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "offthreadVideoCacheSizeInBytesOption" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: offthreadVideoCacheSizeInBytes !== null, onChange: toggleCustomOffthreadVideoCacheSizeInBytes, name: "custom-audio-bitrate" }) })] })), renderMode === 'audio' ||
offthreadVideoCacheSizeInBytes === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: 0, max: 2000 * 1024 * 1024, step: 1024, name: "OffthreadVideo cache size", formatter: (w) => `${w} bytes`, onValueChanged: changeOffthreadVideoCacheSizeInBytes, value: offthreadVideoCacheSizeInBytes })), renderMode === 'audio' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "OffthreadVideo threads" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "offthreadVideoThreadsOption" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: offthreadVideoThreads !== null, onChange: toggleCustomOffthreadVideoThreads, name: "offthread-video-threads" }) })] })), renderMode === 'audio' || offthreadVideoThreads === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: 0, max: 16, step: 1, name: "OffthreadVideo threads", formatter: (w) => `${w}x`, onValueChanged: changeOffthreadVideoThreads, value: offthreadVideoThreads })), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Disable web security" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disableWebSecurity, onChange: onDisableWebSecurityChanged, name: "disable-web-security" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Ignore certificate errors" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: ignoreCertificateErrors, onChange: onIgnoreCertificatErrors, name: "ignore-certificate-errors" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Headless mode", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "headlessOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: headless, onChange: onHeadless, name: "headless" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Chrome Mode ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "chromeModeOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: chromeModeOptions, selectedId: chromeModeOption, title: "Chrome mode" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["OpenGL render backend ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "glOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Multi-process Chrome on Linux" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "enableMultiprocessOnLinuxOption" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: enableMultiProcessOnLinux, onChange: onEnableMultiProcessOnLinux, name: "enable-multi-process-on-linux" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Custom User Agent" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: userAgent !== null, onChange: toggleCustomUserAgent, name: "custom-user-agent" }) })] }), userAgent === null ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "User Agent" }), (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: userAgent, onChange: onUserAgentChanged, 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: ["Create a reproduction ", (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "reproOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: repro, onChange: onReproToggle, name: "repro" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Beep when finished ", (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "beepOnFinishOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: beep, onChange: onPlayBeepSound, name: "beep-when-finished" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsx)(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })] }));
};
exports.RenderModalAdvanced = RenderModalAdvanced;