@remotion/cli 4.0.21 → 4.0.23

package/dist/editor/components/RenderModal/RenderModalAdvanced.js

@@ -2,7 +2,9 @@
 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");
@@ -15,13 +17,21 @@ const container = {
     flex: 1,
     overflowY: 'auto',
 };
-const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, }) => {
+const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, setx264Preset, x264Preset, codec, offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes, }) => {
     const extendedOpenGlOptions = (0, react_1.useMemo)(() => {
         return ['angle', 'egl', 'swangle', 'swiftshader', 'default'];
     }, []);
     const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
         setVerboseLogging(e.target.checked);
     }, [setVerboseLogging]);
+    const toggleCustomOffthreadVideoCacheSizeInBytes = (0, react_1.useCallback)(() => {
+        setOffthreadVideoCacheSizeInBytes((previous) => {
+            if (previous === null) {
+                return 512 * 1024 * 1024;
+            }
+            return null;
+        });
+    }, [setOffthreadVideoCacheSizeInBytes]);
     const onDisallowParallelEncodingChanged = (0, react_1.useCallback)((e) => {
         setDisallowParallelEncoding(e.target.checked);
     }, [setDisallowParallelEncoding]);
@@ -50,10 +60,39 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
             };
         });
     }, [extendedOpenGlOptions, openGlOption, setOpenGlOption]);
-    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 })), (0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting
+    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,
+                selected: x264Preset === option,
+                type: 'item',
+                id: option,
+                keyHint: null,
+                leftItem: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: option,
+            };
+        });
+    }, [setx264Preset, x264Preset]);
+    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]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'video' && codec === 'h264' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "x264 Preset" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: x264Preset, selectedId: x264Preset, values: x264PresetOptions }) })] })) : null, 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 })), (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, value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: verbose, onChange: onVerboseLoggingChanged, name: "verbose-logging" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Disable web security" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.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_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Ignore certificate errors " }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.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_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Headless mode" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: headless, onChange: onHeadless, name: "headless" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "OpenGL render backend" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsx)(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })] }));
+                min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.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_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Custom OffthreadVideo cache" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.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: minConcurrency, max: 2000 * 1024 * 1024, step: 1024, name: "OffthreadVideo cache size", formatter: (w) => `${w} bytes`, onValueChanged: changeOffthreadVideoCacheSizeInBytes, value: offthreadVideoCacheSizeInBytes })), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: verbose, onChange: onVerboseLoggingChanged, name: "verbose-logging" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Disable web security" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.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_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Ignore certificate errors " }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.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_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Headless mode" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: headless, onChange: onHeadless, name: "headless" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "OpenGL render backend" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsx)(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })] }));
 };
 exports.RenderModalAdvanced = RenderModalAdvanced;

package/dist/editor/components/RenderModal/RenderModalBasic.js

@@ -75,6 +75,6 @@ const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setV
     const onValueChange = (0, react_1.useCallback)((e) => {
         setOutName(e.target.value);
     }, [setOutName]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'still' ? ((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)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.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)(RenderModalInput_1.RenderModalInput, { existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'still' ? ((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)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.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)(RenderModalInput_1.RenderModalInput, { existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage })] }));
 };
 exports.RenderModalBasic = RenderModalBasic;

package/dist/editor/components/RenderModal/RenderModalPicture.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import type { SegmentedControlItem } from '../SegmentedControl';
 import type { RenderType } from './RenderModalAdvanced';
 declare const qualityControlModes: readonly ["crf", "bitrate"];
-export type QualityControl = typeof qualityControlModes[number];
+export type QualityControl = (typeof qualityControlModes)[number];
 export declare const RenderModalPicture: React.FC<{
     renderMode: RenderType;
     scale: number;

package/dist/editor/components/RenderModal/SchemaEditor/ZodDiscriminatedUnionEditor.js

@@ -58,7 +58,7 @@ const ZodDiscriminatedUnionEditor = ({ schema, setValue, showSaveButton, saving,
         return {
             discriminator: typedSchema.discriminator,
             markup: ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: true, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value[typedSchema.discriminator] ===
-                            defaultValue[typedSchema.discriminator], jsonPath: [...jsonPath, typedSchema.discriminator], onRemove: onRemove, onReset: reset, onSave: save, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, suffix: null, valid: localValue.zodValidation.success }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[typedSchema.discriminator] })] })),
+                            defaultValue[typedSchema.discriminator], jsonPath: [...jsonPath, typedSchema.discriminator], onRemove: onRemove, onReset: reset, onSave: save, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, suffix: null, valid: localValue.zodValidation.success }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[typedSchema.discriminator] })] }, 'replacement')),
         };
     }, [
         comboBoxValues,

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.d.ts

@@ -0,0 +1,14 @@
+export type SerializedJSONWithCustomFields = {
+    serializedString: string;
+    customDateUsed: boolean;
+    customFileUsed: boolean;
+    mapUsed: boolean;
+    setUsed: boolean;
+};
+export declare const FILE_TOKEN = "remotion-file:";
+export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
+    data: unknown;
+    indent: number | undefined;
+    staticBase: string;
+}) => SerializedJSONWithCustomFields;
+export declare const deserializeJSONWithCustomFields: (data: string) => any;

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = void 0;
+const DATE_TOKEN = 'remotion-date:';
+exports.FILE_TOKEN = 'remotion-file:';
+const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
+    let customDateUsed = false;
+    let customFileUsed = false;
+    let mapUsed = false;
+    let setUsed = false;
+    const serializedString = JSON.stringify(data, function (key, value) {
+        const item = this[key];
+        if (item instanceof Date) {
+            customDateUsed = true;
+            return `${DATE_TOKEN}${item.toISOString()}`;
+        }
+        if (item instanceof Map) {
+            mapUsed = true;
+            return value;
+        }
+        if (item instanceof Set) {
+            setUsed = true;
+            return value;
+        }
+        if (typeof item === 'string' && item.startsWith(staticBase)) {
+            customFileUsed = true;
+            return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
+        }
+        return value;
+    }, indent);
+    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+};
+exports.serializeJSONWithDate = serializeJSONWithDate;
+const deserializeJSONWithCustomFields = (data) => {
+    return JSON.parse(data, (_, value) => {
+        if (typeof value === 'string' && value.startsWith(DATE_TOKEN)) {
+            return new Date(value.replace(DATE_TOKEN, ''));
+        }
+        return value;
+    });
+};
+exports.deserializeJSONWithCustomFields = deserializeJSONWithCustomFields;

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

package/dist/editor/components/RenderModal/layout.js

@@ -12,7 +12,7 @@ exports.optionRow = {
     paddingBottom: 8,
 };
 exports.label = {
-    width: 170,
+    width: 220,
     fontSize: 15,
     lineHeight: '40px',
     color: colors_1.LIGHT_TEXT,

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -1,8 +1,8 @@
-import type { AudioCodec, Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { AudioCodec, Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { RenderJob } from '../../../preview-server/render-queue/job';
 import type { RequiredChromiumOptions } from '../../../required-chromium-options';
 import type { EnumPath } from '../RenderModal/SchemaEditor/extract-enum-json-paths';
-export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }: {
+export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, }: {
     compositionId: string;
     outName: string;
     imageFormat: StillImageFormat;
@@ -14,8 +14,9 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     delayRenderTimeout: number;
     envVariables: Record<string, string>;
     inputProps: Record<string, unknown>;
+    offthreadVideoCacheSizeInBytes: number | null;
 }) => Promise<undefined>;
-export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }: {
+export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, }: {
     compositionId: string;
     outName: string;
     imageFormat: VideoImageFormat;
@@ -30,6 +31,7 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     muted: boolean;
     enforceAudioTrack: boolean;
     proResProfile: ProResProfile | null;
+    x264Preset: X264Preset | null;
     pixelFormat: PixelFormat;
     audioBitrate: string | null;
     videoBitrate: string | null;
@@ -41,6 +43,7 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     chromiumOptions: RequiredChromiumOptions;
     envVariables: Record<string, string>;
     inputProps: Record<string, unknown>;
+    offthreadVideoCacheSizeInBytes: number | null;
 }) => Promise<undefined>;
 export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
     file: string;

package/dist/editor/components/RenderQueue/actions.js

@@ -26,7 +26,7 @@ const callApi = (endpoint, body, signal) => {
         });
     });
 };
-const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }) => {
+const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, }) => {
     return callApi('/api/render', {
         compositionId,
         type: 'still',
@@ -44,10 +44,11 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
             staticBase: window.remotion_staticBase,
             indent: undefined,
         }).serializedString,
+        offthreadVideoCacheSizeInBytes,
     });
 };
 exports.addStillRenderJob = addStillRenderJob;
-const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }) => {
+const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, }) => {
     return callApi('/api/render', {
         compositionId,
         type: 'video',
@@ -64,6 +65,7 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
         muted,
         enforceAudioTrack,
         proResProfile,
+        x264Preset,
         pixelFormat,
         audioBitrate,
         videoBitrate,
@@ -79,6 +81,7 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
             staticBase: window.remotion_staticBase,
             indent: undefined,
         }).serializedString,
+        offthreadVideoCacheSizeInBytes,
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;

package/dist/editor/components/RightPanel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type SidebarPanel = 'input-props' | 'renders';
+export declare const persistSelectedPanel: (panel: SidebarPanel) => void;
+export declare const rightSidebarTabs: React.RefObject<{
+    selectRendersPanel: () => void;
+}>;
+export declare const RightPanel: React.FC<{}>;
+export {};

package/dist/editor/components/RightPanel.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RightPanel = exports.rightSidebarTabs = exports.persistSelectedPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const DataEditor_1 = require("./RenderModal/DataEditor");
+const RenderQueue_1 = require("./RenderQueue");
+const RendersTab_1 = require("./RendersTab");
+const Tabs_1 = require("./Tabs");
+const container = {
+    height: '100%',
+    width: '100%',
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+};
+const PropsEditor = ({ composition }) => {
+    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const setInputProps = (0, react_1.useCallback)((newProps) => {
+        updateProps({
+            id: composition.id,
+            defaultProps: composition.defaultProps,
+            newProps,
+        });
+    }, [composition.defaultProps, composition.id, updateProps]);
+    const actualProps = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {}; }, [composition.defaultProps, composition.id, props]);
+    return ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props" }, composition.id));
+};
+const localStorageKey = 'remotion.sidebarPanel';
+const getSelectedPanel = () => {
+    const panel = localStorage.getItem(localStorageKey);
+    if (panel === 'renders') {
+        return 'renders';
+    }
+    return 'input-props';
+};
+const tabsContainer = {
+    backgroundColor: colors_1.BACKGROUND,
+};
+const persistSelectedPanel = (panel) => {
+    localStorage.setItem(localStorageKey, panel);
+};
+exports.persistSelectedPanel = persistSelectedPanel;
+exports.rightSidebarTabs = (0, react_1.createRef)();
+const RightPanel = () => {
+    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
+    const onCompositionsSelected = (0, react_1.useCallback)(() => {
+        setPanel('input-props');
+        (0, exports.persistSelectedPanel)('input-props');
+    }, []);
+    const onRendersSelected = (0, react_1.useCallback)(() => {
+        setPanel('renders');
+        (0, exports.persistSelectedPanel)('renders');
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.rightSidebarTabs, () => {
+        return {
+            selectRendersPanel: () => {
+                setPanel('renders');
+                (0, exports.persistSelectedPanel)('renders');
+            },
+        };
+    }, []);
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const composition = (0, react_1.useMemo)(() => {
+        for (const comp of compositions) {
+            if (comp.id === currentComposition) {
+                return comp;
+            }
+        }
+        return null;
+    }, [compositions, currentComposition]);
+    if (composition === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, children: "Props" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(PropsEditor, { composition: composition }))] }));
+};
+exports.RightPanel = RightPanel;

package/dist/editor/components/SidebarRenderButton.js

@@ -61,6 +61,7 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialMuted: defaults.muted,
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: defaults.proResProfile,
+            initialx264Preset: defaults.x264Preset,
             initialPixelFormat: defaults.pixelFormat,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,
@@ -72,12 +73,19 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialDisableWebSecurity: defaults.disableWebSecurity,
             initialOpenGlRenderer: defaults.openGlRenderer,
             initialHeadless: defaults.headless,
+            initialOffthreadVideoCacheSizeInBytes: defaults.offthreadVideoCacheSizeInBytes,
             initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
             defaultProps: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps,
             inFrameMark: null,
             outFrameMark: null,
         });
-    }, [composition.defaultProps, composition.id, isVideo, props, setSelectedModal]);
+    }, [
+        composition.defaultProps,
+        composition.id,
+        isVideo,
+        props,
+        setSelectedModal,
+    ]);
     const renderAction = (0, react_1.useCallback)((color) => {
         return (0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });
     }, [iconStyle]);

package/dist/editor/components/UpdateCheck.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PackageManager } from '../../preview-server/get-package-manager';
 export type UpdateInfo = {
     currentVersion: string;

package/dist/editor/helpers/colors.d.ts

@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.25)";

package/dist/editor/helpers/convert-env-variables.d.ts

@@ -1,2 +1,8 @@
-export declare const envVariablesObjectToArray: (envVariables: Record<string, string>) => [string, string][];
-export declare const envVariablesArrayToObject: (envVariables: [string, string][]) => Record<string, string>;
+export declare const envVariablesObjectToArray: (envVariables: Record<string, string>) => [
+    string,
+    string
+][];
+export declare const envVariablesArrayToObject: (envVariables: [
+    string,
+    string
+][]) => Record<string, string>;

package/dist/editor/helpers/document-title.js

@@ -12,6 +12,7 @@ const setCurrentVideoId = (id) => {
 };
 exports.setCurrentVideoId = setCurrentVideoId;
 const setUnsavedProps = (unsaved) => {
+    window.remotion_unsavedProps = unsaved;
     unsavedProps = unsaved;
 };
 exports.setUnsavedProps = setUnsavedProps;

package/dist/editor/helpers/presets-labels.d.ts

@@ -0,0 +1,2 @@
+import type { X264Preset } from '@remotion/renderer';
+export declare const labelx264Preset: (profile: X264Preset) => "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";

package/dist/editor/helpers/presets-labels.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.labelx264Preset = void 0;
+const labelx264Preset = (profile) => {
+    if (profile === 'ultrafast') {
+        return 'ultrafast';
+    }
+    if (profile === 'superfast') {
+        return 'superfast';
+    }
+    if (profile === 'veryfast') {
+        return 'veryfast';
+    }
+    if (profile === 'faster') {
+        return 'faster';
+    }
+    if (profile === 'fast') {
+        return 'fast';
+    }
+    if (profile === 'medium') {
+        return 'medium';
+    }
+    if (profile === 'slow') {
+        return 'slow';
+    }
+    if (profile === 'slower') {
+        return 'slower';
+    }
+    if (profile === 'veryslow') {
+        return 'veryslow';
+    }
+    if (profile === 'placebo') {
+        return 'placebo';
+    }
+    throw new TypeError(`Unknown x264 preset: ${profile}`);
+};
+exports.labelx264Preset = labelx264Preset;

package/dist/editor/helpers/render-modal-sections.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Codec } from '@remotion/renderer';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';

package/dist/editor/state/modals.d.ts

@@ -1,4 +1,4 @@
-import type { AudioCodec, Codec, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { AudioCodec, Codec, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type React from 'react';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
@@ -22,6 +22,7 @@ export type RenderModalState = {
     initialMuted: boolean;
     initialEnforceAudioTrack: boolean;
     initialProResProfile: ProResProfile;
+    initialx264Preset: X264Preset;
     initialPixelFormat: PixelFormat;
     initialVideoBitrate: string | null;
     initialAudioBitrate: string | null;
@@ -33,6 +34,7 @@ export type RenderModalState = {
     initialOpenGlRenderer: OpenGlRenderer | null;
     initialIgnoreCertificateErrors: boolean;
     initialHeadless: boolean;
+    initialOffthreadVideoCacheSizeInBytes: number | null;
     minConcurrency: number;
     maxConcurrency: number;
     defaultProps: Record<string, unknown>;

package/dist/get-cli-options.d.ts

@@ -16,6 +16,7 @@ export declare const getCliOptions: (options: {
     crf: import("@remotion/renderer").Crf | null;
     pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
     proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
+    x264Preset: "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
     everyNthFrame: number;
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
@@ -33,5 +34,6 @@ export declare const getCliOptions: (options: {
     videoBitrate: string | null;
     height: number | null;
     width: number | null;
-    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+    configFileImageFormat: "none" | "png" | "jpeg" | undefined;
+    offthreadVideoCacheSizeInBytes: number | null;
 }>;

package/dist/get-cli-options.js

@@ -44,6 +44,10 @@ const getProResProfile = () => {
     const proResProfile = config_1.ConfigInternals.getProResProfile();
     return proResProfile;
 };
+const getx264Preset = () => {
+    const x264Preset = config_1.ConfigInternals.getPresetProfile();
+    return x264Preset;
+};
 const getAndValidateBrowser = async (browserExecutable) => {
     const browser = getBrowser();
     try {
@@ -71,6 +75,7 @@ const getCliOptions = async (options) => {
     const videoBitrate = config_1.ConfigInternals.getVideoBitrate();
     const pixelFormat = config_1.ConfigInternals.getPixelFormat();
     const proResProfile = getProResProfile();
+    const x264Preset = getx264Preset();
     const browserExecutable = config_1.ConfigInternals.getBrowserExecutable();
     const scale = config_1.ConfigInternals.getScale();
     const port = config_1.ConfigInternals.getServerPort();
@@ -99,6 +104,7 @@ const getCliOptions = async (options) => {
         crf,
         pixelFormat,
         proResProfile,
+        x264Preset,
         everyNthFrame,
         numberOfGifLoops,
         stillFrame: config_1.ConfigInternals.getStillFrame(),
@@ -117,6 +123,7 @@ const getCliOptions = async (options) => {
         height,
         width,
         configFileImageFormat: config_1.ConfigInternals.getUserPreferredVideoImageFormat(),
+        offthreadVideoCacheSizeInBytes: config_1.ConfigInternals.getOffthreadVideoCacheSizeInBytes(),
     };
 };
 exports.getCliOptions = getCliOptions;

package/dist/get-composition-id.d.ts

@@ -1,6 +1,6 @@
 import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, LogLevel, RemotionServer } from '@remotion/renderer';
 import type { VideoConfig } from 'remotion';
-export declare const getCompositionId: ({ args, compositionIdFromUi, serializedInputPropsWithCustomSchema, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, logLevel, indent, server, }: {
+export declare const getCompositionId: ({ args, compositionIdFromUi, serializedInputPropsWithCustomSchema, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, logLevel, indent, server, offthreadVideoCacheSizeInBytes, }: {
     args: string[];
     compositionIdFromUi: string | null;
     serializedInputPropsWithCustomSchema: string;
@@ -14,6 +14,7 @@ export declare const getCompositionId: ({ args, compositionIdFromUi, serializedI
     logLevel: LogLevel;
     indent: boolean;
     server: RemotionServer;
+    offthreadVideoCacheSizeInBytes: number | null;
 }) => Promise<{
     compositionId: string;
     reason: string;

package/dist/get-composition-id.js

@@ -16,7 +16,7 @@ const getCompName = ({ cliArgs, compositionIdFromUi, }) => {
     const [compName, ...remainingArgs] = cliArgs;
     return { compName, remainingArgs, reason: 'Passed as argument' };
 };
-const getCompositionId = async ({ args, compositionIdFromUi, serializedInputPropsWithCustomSchema, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, logLevel, indent, server, }) => {
+const getCompositionId = async ({ args, compositionIdFromUi, serializedInputPropsWithCustomSchema, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, logLevel, indent, server, offthreadVideoCacheSizeInBytes, }) => {
     const { compName, remainingArgs, reason: compReason, } = getCompName({
         cliArgs: args,
         compositionIdFromUi,
@@ -36,6 +36,7 @@ const getCompositionId = async ({ args, compositionIdFromUi, serializedInputProp
             server,
             indent,
             onBrowserLog: null,
+            offthreadVideoCacheSizeInBytes,
         });
         if (propsSize > 10000000) {
             log_1.Log.warnAdvanced({
@@ -67,6 +68,7 @@ const getCompositionId = async ({ args, compositionIdFromUi, serializedInputProp
             serveUrlOrWebpackUrl,
             onBrowserLog: null,
             serializedInputPropsWithCustomSchema,
+            offthreadVideoCacheSizeInBytes,
         });
         const { compositionId, reason } = await (0, show_compositions_picker_1.showSingleCompositionsPicker)(comps);
         if (compositionId && typeof compositionId === 'string') {

package/dist/get-composition-with-dimension-override.d.ts

@@ -1,6 +1,6 @@
 import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, LogLevel, RemotionServer } from '@remotion/renderer';
 import type { VideoConfig } from 'remotion';
-export declare const getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, serializedInputPropsWithCustomSchema, logLevel, server, }: {
+export declare const getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, serializedInputPropsWithCustomSchema, logLevel, server, offthreadVideoCacheSizeInBytes, }: {
     height: number | null;
     width: number | null;
     args: string[];
@@ -16,6 +16,7 @@ export declare const getCompositionWithDimensionOverride: ({ height, width, args
     logLevel: LogLevel;
     serializedInputPropsWithCustomSchema: string;
     server: RemotionServer;
+    offthreadVideoCacheSizeInBytes: number | null;
 }) => Promise<{
     compositionId: string;
     reason: string;