@remotion/studio 4.0.465 → 4.0.467

package/dist/components/RenderModal/RenderModalEncoding.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalEncoding = 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 layout_1 = require("../layout");
+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 CrfSetting_1 = require("./CrfSetting");
+const layout_2 = require("./layout");
+const NumberSetting_1 = require("./NumberSetting");
+const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
+const RenderModalHr_1 = require("./RenderModalHr");
+const qualityControlModes = ['crf', 'bitrate'];
+const container = {
+    flex: 1,
+    overflowY: 'auto',
+};
+const RenderModalEncoding = ({ renderMode, codec, qualityControlType, setQualityControl, shouldDisplayQualityControlPicker, crf, minCrf, maxCrf, setCrf, customTargetVideoBitrate, setCustomTargetVideoBitrateValue, encodingBufferSize, setEncodingBufferSize, encodingMaxRate, setEncodingMaxRate, pixelFormat, pixelFormatOptions, colorSpace, setColorSpace, x264Preset, setx264Preset, gopSize, setGopSize, hardwareAcceleration, setHardwareAcceleration, disallowParallelEncoding, setDisallowParallelEncoding, }) => {
+    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 ? 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 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 ? 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 ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+                type: 'item',
+                id: option,
+                keyHint: null,
+                value: option,
+            };
+        });
+    }, [hardwareAcceleration, setHardwareAcceleration]);
+    const toggleCustomGopSize = (0, react_1.useCallback)(() => {
+        setGopSize((previous) => {
+            if (previous === null) {
+                return 120;
+            }
+            return null;
+        });
+    }, [setGopSize]);
+    const changeGopSize = (0, react_1.useCallback)((cb) => {
+        setGopSize((prev) => {
+            if (prev === null) {
+                throw new TypeError('Expected previous value');
+            }
+            if (typeof cb === 'function') {
+                return cb(prev);
+            }
+            return cb;
+        });
+    }, [setGopSize]);
+    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]);
+    const onDisallowParallelEncodingChanged = (0, react_1.useCallback)((e) => {
+        setDisallowParallelEncoding(e.target.checked);
+    }, [setDisallowParallelEncoding]);
+    return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [shouldDisplayQualityControlPicker && renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Quality control" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })
+                ] })) : null, qualityControlType === 'crf' &&
+                renderMode === 'video' &&
+                crf !== null ? (jsx_runtime_1.jsx(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: "crfOption" })) : null, qualityControlType === 'bitrate' && renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Target video bitrate",
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoBitrateOption" })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: layout_2.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok", rightAlign: true }) }) })
+                ] })) : null, renderMode === 'video' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom FFmpeg -bufsize",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "encodingBufferSizeOption" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: encodingBufferSize !== null, onChange: onEncodingBufferSizeToggled, name: "encoding-buffer-size" }) })
+                        ] }), encodingBufferSize === null ? null : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "-bufsize value" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingBufferSize, onChange: onEncodingBufferSizeChanged, status: "ok", rightAlign: true }) }) })
+                        ] })), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom FFmpeg -maxrate",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "encodingMaxRateOption" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: encodingMaxRate !== null, onChange: onEncodingMaxRateToggled, name: "encoding-max-rate" }) })
+                        ] }), encodingMaxRate === null ? null : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "-maxrate value" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingMaxRate, onChange: onEncodingMaxRateChanged, status: "ok", rightAlign: true }) }) })
+                        ] })), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Pixel format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })
+                        ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Color space",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "colorSpaceOption" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: colorSpaceOptions, selectedId: colorSpace, title: "Color Space" }) })
+                        ] }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), codec === 'h264' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["x264 Preset",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "x264Option" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: x264Preset, selectedId: x264Preset, values: x264PresetOptions }) })
+                        ] })) : null, codec !== 'gif' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom GOP size",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "gopSizeOption" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: gopSize !== null, onChange: toggleCustomGopSize, name: "custom-gop-size" }) })
+                        ] })) : null, codec !== 'gif' && gopSize !== null ? (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { min: 1, max: 10000, step: 1, name: "GOP size", formatter: (value) => `${value} frames`, onValueChanged: changeGopSize, value: gopSize })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Hardware acceleration",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "hardwareAccelerationOption" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: hardwareAcceleration, selectedId: hardwareAcceleration, values: hardwareAccelerationValues }) })
+                        ] })
+                ] })) : null, renderMode === 'still' ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderMode === 'video' ? jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "No parallel encoding" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })
+                        ] })
+                ] }))] }));
+};
+exports.RenderModalEncoding = RenderModalEncoding;

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

@@ -1,37 +1,16 @@
-import type { ColorSpace, PixelFormat, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 import React from 'react';
-import type { ComboboxValue } from '../NewComposition/ComboBox';
 import type { SegmentedControlItem } from '../SegmentedControl';
 import type { RenderType } from './RenderModalAdvanced';
-declare const qualityControlModes: readonly ["crf", "bitrate"];
-export type QualityControl = (typeof qualityControlModes)[number];
 export declare const RenderModalPicture: React.FC<{
     readonly renderMode: RenderType;
     readonly scale: number;
     readonly setScale: React.Dispatch<React.SetStateAction<number>>;
-    readonly pixelFormat: PixelFormat;
-    readonly colorSpace: ColorSpace;
-    readonly setColorSpace: React.Dispatch<React.SetStateAction<ColorSpace>>;
     readonly imageFormatOptions: SegmentedControlItem[];
-    readonly setQualityControl: React.Dispatch<React.SetStateAction<QualityControl>>;
-    readonly qualityControlType: QualityControl | null;
     readonly videoImageFormat: VideoImageFormat;
     readonly stillImageFormat: StillImageFormat;
     readonly setJpegQuality: React.Dispatch<React.SetStateAction<number>>;
     readonly jpegQuality: number;
-    readonly maxCrf: number;
-    readonly minCrf: number;
-    readonly setCrf: React.Dispatch<React.SetStateAction<number>>;
-    readonly setCustomTargetVideoBitrateValue: React.Dispatch<React.SetStateAction<string>>;
-    readonly crf: number | null;
-    readonly customTargetVideoBitrate: string;
-    readonly shouldDisplayQualityControlPicker: boolean;
-    readonly pixelFormatOptions: ComboboxValue[];
-    readonly encodingBufferSize: string | null;
-    readonly setEncodingBufferSize: React.Dispatch<React.SetStateAction<string | null>>;
-    readonly encodingMaxRate: string | null;
-    readonly setEncodingMaxRate: React.Dispatch<React.SetStateAction<string | null>>;
     readonly compositionWidth: number;
     readonly compositionHeight: number;
 }>;
-export {};

package/dist/components/RenderModal/RenderModalPicture.js

@@ -2,98 +2,20 @@
 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 layout_1 = require("../layout");
 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 CrfSetting_1 = require("./CrfSetting");
 const JpegQualitySetting_1 = require("./JpegQualitySetting");
-const layout_2 = require("./layout");
-const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
+const layout_1 = require("./layout");
 const RenderModalHr_1 = require("./RenderModalHr");
 const ScaleSetting_1 = require("./ScaleSetting");
-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 ? 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 (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Image Format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })
-                ] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && (jsx_runtime_1.jsx(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && (jsx_runtime_1.jsx(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'video' && qualityControlType !== null ? (jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {})) : null, shouldDisplayQualityControlPicker && renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Quality control" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })
-                ] })) : null, qualityControlType === 'crf' &&
-                renderMode !== 'still' &&
-                renderMode !== 'sequence' &&
-                crf !== null ? (jsx_runtime_1.jsx(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: "crfOption" })) : null, qualityControlType === 'bitrate' && renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Target video bitrate",
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoBitrateOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: layout_2.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok", rightAlign: true }) }) })
-                ] })) : null, renderMode === 'video' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom FFmpeg -bufsize",
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "encodingBufferSizeOption" })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: encodingBufferSize !== null, onChange: onEncodingBufferSizeToggled, name: "encoding-buffer-size" }) })
-                        ] }), encodingBufferSize === null ? null : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "-bufsize value" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingBufferSize, onChange: onEncodingBufferSizeChanged, status: "ok", rightAlign: true }) }) })
-                        ] })), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom FFmpeg -maxrate",
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "encodingMaxRateOption" })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: encodingMaxRate !== null, onChange: onEncodingMaxRateToggled, name: "encoding-max-rate" }) })
-                        ] }), encodingMaxRate === null ? null : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "-maxrate value" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingMaxRate, onChange: onEncodingMaxRateChanged, status: "ok", rightAlign: true }) }) })
-                        ] }))] })) : null, renderMode === 'video' ? jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}) : null, jsx_runtime_1.jsx(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale, compositionWidth: compositionWidth, compositionHeight: compositionHeight }), renderMode === 'video' ? jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Pixel format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })
-                ] })) : null, renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Color space",
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "colorSpaceOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: colorSpaceOptions, selectedId: colorSpace, title: "Color Space" }) })
-                ] })) : null] }));
+const RenderModalPicture = ({ renderMode, scale, setScale, imageFormatOptions, videoImageFormat, setJpegQuality, jpegQuality, stillImageFormat, compositionWidth, compositionHeight, }) => {
+    return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Image Format" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })
+                ] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' ? (jsx_runtime_1.jsx(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })) : null, renderMode === 'still' && stillImageFormat === 'jpeg' ? (jsx_runtime_1.jsx(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })) : null, renderMode === 'video' ? jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}) : null, jsx_runtime_1.jsx(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale, compositionWidth: compositionWidth, compositionHeight: compositionHeight })
+        ] }));
 };
 exports.RenderModalPicture = RenderModalPicture;

package/dist/components/RenderModal/ServerRenderModal.d.ts

@@ -20,6 +20,7 @@ type RenderModalProps = {
     readonly initialEnforceAudioTrack: boolean;
     readonly initialProResProfile: _InternalTypes['ProResProfile'] | null;
     readonly initialx264Preset: X264Preset;
+    readonly initialGopSize: number | null;
     readonly initialPixelFormat: PixelFormat | null;
     readonly initialVideoBitrate: string | null;
     readonly initialAudioBitrate: string | null;

package/dist/components/RenderModal/ServerRenderModal.js

@@ -19,6 +19,7 @@ const file_1 = require("../../icons/file");
 const frame_1 = require("../../icons/frame");
 const gear_1 = require("../../icons/gear");
 const gif_1 = require("../../icons/gif");
+const video_1 = require("../../icons/video");
 const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
 const Button_1 = require("../Button");
@@ -39,6 +40,8 @@ const render_modals_1 = require("./render-modals");
 const RenderModalAdvanced_1 = require("./RenderModalAdvanced");
 const RenderModalAudio_1 = require("./RenderModalAudio");
 const RenderModalBasic_1 = require("./RenderModalBasic");
+const RenderModalEncoding_1 = require("./RenderModalEncoding");
+const RenderModalEnvironmentVariables_1 = require("./RenderModalEnvironmentVariables");
 const RenderModalGif_1 = require("./RenderModalGif");
 const RenderModalPicture_1 = require("./RenderModalPicture");
 const ResolveCompositionBeforeModal_1 = require("./ResolveCompositionBeforeModal");
@@ -61,7 +64,7 @@ const reducer = (state, action) => {
     }
     return state;
 };
-const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialOffthreadVideoThreads, initialMediaCacheSizeInBytes, initialDarkMode, initialUserAgent, defaultProps, inFrameMark, outFrameMark, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, initialBeep, initialRepro, initialForSeamlessAacConcatenation, renderTypeOfLastRender, initialHardwareAcceleration, initialSampleRate, defaultMetadata, initialChromeMode, renderDefaults, }) => {
+const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialGopSize, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialOffthreadVideoThreads, initialMediaCacheSizeInBytes, initialDarkMode, initialUserAgent, defaultProps, inFrameMark, outFrameMark, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, initialBeep, initialRepro, initialForSeamlessAacConcatenation, renderTypeOfLastRender, initialHardwareAcceleration, initialSampleRate, defaultMetadata, initialChromeMode, renderDefaults, }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
@@ -159,6 +162,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
         return (_a = initialProResProfile !== null && initialProResProfile !== void 0 ? initialProResProfile : resolvedComposition.defaultProResProfile) !== null && _a !== void 0 ? _a : 'hq';
     });
     const [x264PresetSetting, setx264Preset] = (0, react_1.useState)(() => initialx264Preset);
+    const [gopSize, setGopSize] = (0, react_1.useState)(() => initialGopSize);
     const [hardwareAcceleration, setHardwareAcceleration] = (0, react_1.useState)(() => initialHardwareAcceleration);
     const [userPreferredPixelFormat, setPixelFormat] = (0, react_1.useState)(() => {
         var _a;
@@ -450,6 +454,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
                 hardwareAcceleration !== 'required'
                 ? crf
                 : null,
+            gopSize,
             endFrame,
             startFrame,
             muted,
@@ -529,6 +534,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
         beepOnFinish,
         repro,
         forSeamlessAacConcatenation,
+        gopSize,
         separateAudioTo,
         setSelectedModal,
         metadata,
@@ -798,6 +804,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
                 hardwareAcceleration !== 'required'
                 ? crf
                 : null,
+            gopSize,
             videoBitrate,
             audioBitrate,
             audioCodec,
@@ -852,6 +859,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
         everyNthFrame,
         frame,
         forSeamlessAacConcatenation,
+        gopSize,
         hardwareAcceleration,
         headless,
         ignoreCertificateErrors,
@@ -990,13 +998,17 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { style: render_modals_1.icon }) }),
                                     "Audio"] })) : null, shownTabs.includes('gif') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gif_1.GifIcon, { style: render_modals_1.icon }) }),
-                                    "GIF"] })) : null, shownTabs.includes('advanced') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [
+                                    "GIF"] })) : null, shownTabs.includes('encoding') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'encoding', onClick: () => setTab('encoding'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { style: render_modals_1.icon, color: "currentcolor" }) }),
+                                    "Encoding"] })) : null, shownTabs.includes('environment') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'environment', onClick: () => setTab('environment'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { style: render_modals_1.icon }) }),
+                                    "Environment"] })) : null, shownTabs.includes('advanced') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { style: render_modals_1.icon }) }),
-                                    "Other"] })) : null] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, setVerboseLogging: setLogLevel, logLevel: logLevel, showOutputName: !readOnlyStudio, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? (jsx_runtime_1.jsx(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setColorSpace: setColorSpace, colorSpace: colorSpace, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName, sampleRate: sampleRate, setSampleRate: setSampleRate })) : tab === 'gif' ? (jsx_runtime_1.jsx(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
+                                    "Other"] })) : null] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, setVerboseLogging: setLogLevel, logLevel: logLevel, showOutputName: !readOnlyStudio, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? (jsx_runtime_1.jsx(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, imageFormatOptions: imageFormatOptions, jpegQuality: jpegQuality, setJpegQuality: setJpegQuality, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName, sampleRate: sampleRate, setSampleRate: setSampleRate })) : tab === 'gif' ? (jsx_runtime_1.jsx(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'encoding' ? (jsx_runtime_1.jsx(RenderModalEncoding_1.RenderModalEncoding, { renderMode: renderMode, codec: codec, qualityControlType: qualityControlType, setQualityControl: setQualityControl, shouldDisplayQualityControlPicker: supportsBothQualityControls, crf: crf, setCrf: setCrf, maxCrf: maxCrf, minCrf: minCrf, customTargetVideoBitrate: customTargetVideoBitrate, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, colorSpace: colorSpace, setColorSpace: setColorSpace, x264Preset: x264Preset, setx264Preset: setx264Preset, gopSize: gopSize, setGopSize: setGopSize, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding })) : tab === 'environment' ? (jsx_runtime_1.jsx(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,
-                            } })) : (jsx_runtime_1.jsx(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, offthreadVideoThreads: offthreadVideoThreads, setOffthreadVideoThreads: setOffthreadVideoThreads, enableMultiProcessOnLinux: multiProcessOnLinux, setChromiumMultiProcessOnLinux: setChromiumMultiProcessOnLinux, codec: codec, userAgent: userAgent, setUserAgent: setUserAgent, setBeep: setBeepOnFinish, beep: beepOnFinish, repro: repro, setRepro: setRepro, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, chromeModeOption: chromeMode, setChromeModeOption: setChromeMode, darkMode: darkMode, setDarkMode: setDarkMode })) })
+                            } })) : (jsx_runtime_1.jsx(RenderModalAdvanced_1.RenderModalAdvanced, { concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, offthreadVideoThreads: offthreadVideoThreads, setOffthreadVideoThreads: setOffthreadVideoThreads, enableMultiProcessOnLinux: multiProcessOnLinux, setChromiumMultiProcessOnLinux: setChromiumMultiProcessOnLinux, userAgent: userAgent, setUserAgent: setUserAgent, setBeep: setBeepOnFinish, beep: beepOnFinish, repro: repro, setRepro: setRepro, chromeModeOption: chromeMode, setChromeModeOption: setChromeMode, darkMode: darkMode, setDarkMode: setDarkMode })) })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/get-render-modal-warnings.d.ts

@@ -1,4 +1,10 @@
 import type { PropsEditType } from './DataEditor';
+export declare const CANNOT_SAVE_DEFAULT_PROPS_DOCS = "https://www.remotion.dev/docs/troubleshooting/cannot-save-default-props";
+export type RenderModalWarning = {
+    readonly id: string;
+    readonly message: string;
+    readonly resolveLink?: string;
+};
 export type TypeCanSaveState = {
     canUpdate: true;
 } | {
@@ -15,4 +21,4 @@ export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, i
     jsSetUsed: boolean;
     inJSONEditor: boolean;
     propsEditType: PropsEditType;
-}) => string[];
+}) => RenderModalWarning[];

package/dist/components/RenderModal/get-render-modal-warnings.js

@@ -1,7 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRenderModalWarnings = void 0;
+exports.getRenderModalWarnings = exports.CANNOT_SAVE_DEFAULT_PROPS_DOCS = void 0;
 const no_react_1 = require("remotion/no-react");
+exports.CANNOT_SAVE_DEFAULT_PROPS_DOCS = 'https://www.remotion.dev/docs/troubleshooting/cannot-save-default-props';
+const warningOrNull = (id, message) => {
+    if (message === null) {
+        return null;
+    }
+    return {
+        id,
+        message,
+    };
+};
 const getInputPropsWarning = ({ cliProps, propsEditType, }) => {
     if (Object.keys(cliProps).length > 0 &&
         propsEditType === 'default-props') {
@@ -19,7 +29,11 @@ const getCannotSaveDefaultProps = (canSaveDefaultProps) => {
     if (!canSaveDefaultProps.determined) {
         return null;
     }
-    return `Can't save default props: ${canSaveDefaultProps.reason}.`;
+    return {
+        id: 'cannot-save-default-props',
+        message: `Can't save default props: ${canSaveDefaultProps.reason}.`,
+        resolveLink: exports.CANNOT_SAVE_DEFAULT_PROPS_DOCS,
+    };
 };
 const customDateUsed = (used, inJSONEditor) => {
     if (used && inJSONEditor) {
@@ -47,12 +61,12 @@ const setUsed = (used, inJSONEditor) => {
 };
 const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }) => {
     return [
-        getInputPropsWarning({ cliProps, propsEditType }),
+        warningOrNull('input-props-override', getInputPropsWarning({ cliProps, propsEditType })),
         getCannotSaveDefaultProps(canSaveDefaultProps),
-        customDateUsed(isCustomDateUsed, inJSONEditor),
-        staticFileUsed(customFileUsed, inJSONEditor),
-        mapUsed(jsMapUsed, inJSONEditor),
-        setUsed(jsSetUsed, inJSONEditor),
+        warningOrNull('custom-date-used', customDateUsed(isCustomDateUsed, inJSONEditor)),
+        warningOrNull('static-file-used', staticFileUsed(customFileUsed, inJSONEditor)),
+        warningOrNull('map-used', mapUsed(jsMapUsed, inJSONEditor)),
+        warningOrNull('set-used', setUsed(jsSetUsed, inJSONEditor)),
     ].filter(no_react_1.NoReactInternals.truthy);
 };
 exports.getRenderModalWarnings = getRenderModalWarnings;

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

@@ -43,7 +43,7 @@ export declare const addSequenceRenderJob: ({ compositionId, outName, imageForma
     chromeMode: "chrome-for-testing" | "headless-shell";
     mediaCacheSizeInBytes: number | null;
 }) => Promise<undefined>;
-export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, metadata, hardwareAcceleration, chromeMode, mediaCacheSizeInBytes, sampleRate, }: {
+export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, gopSize, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, metadata, hardwareAcceleration, chromeMode, mediaCacheSizeInBytes, sampleRate, }: {
     compositionId: string;
     outName: string;
     imageFormat: "jpeg" | "none" | "png";
@@ -53,6 +53,7 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     codec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
     concurrency: number;
     crf: number | null;
+    gopSize: number | null;
     startFrame: number;
     endFrame: number;
     muted: boolean;

package/dist/components/RenderQueue/actions.js

@@ -63,7 +63,7 @@ const addSequenceRenderJob = ({ compositionId, outName, imageFormat, startFrame,
     });
 };
 exports.addSequenceRenderJob = addSequenceRenderJob;
-const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, metadata, hardwareAcceleration, chromeMode, mediaCacheSizeInBytes, sampleRate, }) => {
+const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, gopSize, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, metadata, hardwareAcceleration, chromeMode, mediaCacheSizeInBytes, sampleRate, }) => {
     return (0, call_api_1.callApi)('/api/render', {
         compositionId,
         type: 'video',
@@ -75,6 +75,7 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
         codec,
         concurrency,
         crf,
+        gopSize,
         endFrame,
         startFrame,
         muted,

package/dist/components/SidebarRenderButton.js

@@ -47,6 +47,7 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: defaults.proResProfile,
             initialx264Preset: defaults.x264Preset,
+            initialGopSize: defaults.gopSize,
             initialPixelFormat: null,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,

package/dist/components/Timeline/Timeline.js

@@ -40,6 +40,7 @@ const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
@@ -73,6 +74,7 @@ const TimelineInner = () => {
     var _a;
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
@@ -101,13 +103,13 @@ const TimelineInner = () => {
                     return null;
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
-            }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
-                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
+            }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+                        jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
                                 jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
                                             jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                         ] }) })
-                            ] }) })
-                ] })
+                            ] })
+                    ] })) })
         ] }));
 };
 exports.Timeline = react_1.default.memo(TimelineInner);

package/dist/components/Timeline/TimelineEffectFieldRow.js

@@ -8,6 +8,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
+const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_prop_queue_1 = require("./save-prop-queue");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
@@ -130,7 +131,7 @@ const Value = ({ field, nodePath, validatedLocation }) => {
     }
     if (propStatus === null || !propStatus.canUpdate) {
         if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'computed') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed" });
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
         }
         return null;
     }

package/dist/components/Timeline/TimelineEffectGroupRow.d.ts

@@ -8,6 +8,7 @@ export declare const TimelineEffectGroupRow: React.FC<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly effectIndex: number;
     readonly effectSchema: SequenceSchema;
+    readonly documentationLink: string | null;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;