@remotion/cli 4.0.50 → 4.0.52

package/dist/benchmark.js

@@ -84,7 +84,7 @@ const makeBenchmarkProgressBar = ({ totalRuns, run, progress, doneIn, }) => {
     ].join(' ');
 };
 const benchmarkCommand = async (remotionRoot, args) => {
-    var _a, _b;
+    var _a, _b, _c;
     const runs = (_a = parse_command_line_1.parsedCli.runs) !== null && _a !== void 0 ? _a : DEFAULT_RUNS;
     const { file, reason, remainingArgs } = (0, entry_point_1.findEntryPoint)(args, remotionRoot);
     if (!file) {
@@ -165,14 +165,15 @@ const benchmarkCommand = async (remotionRoot, args) => {
     }
     const benchmark = {};
     let count = 1;
-    const { codec, reason: codecReason } = (0, get_final_output_codec_1.getFinalOutputCodec)({
-        cliFlag: parse_command_line_1.parsedCli.codec,
-        downloadName: null,
-        outName: null,
-        configFile: (_b = config_1.ConfigInternals.getOutputCodecOrUndefined()) !== null && _b !== void 0 ? _b : null,
-        uiCodec: null,
-    });
     for (const composition of compositions) {
+        const { codec, reason: codecReason } = (0, get_final_output_codec_1.getFinalOutputCodec)({
+            cliFlag: parse_command_line_1.parsedCli.codec,
+            downloadName: null,
+            outName: null,
+            configFile: (_b = config_1.ConfigInternals.getOutputCodecOrUndefined()) !== null && _b !== void 0 ? _b : null,
+            uiCodec: null,
+            compositionCodec: (_c = composition.defaultCodec) !== null && _c !== void 0 ? _c : null,
+        });
         const concurrency = getValidConcurrency(unparsedConcurrency);
         benchmark[composition.id] = {};
         for (const con of concurrency) {

package/dist/config/chromium-flags.d.ts

@@ -3,7 +3,7 @@ export declare const getChromiumDisableWebSecurity: () => boolean;
 export declare const setChromiumDisableWebSecurity: (should: boolean) => void;
 export declare const getIgnoreCertificateErrors: () => boolean;
 export declare const setChromiumIgnoreCertificateErrors: (should: boolean) => void;
-export declare const getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | null;
+export declare const getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl" | null;
 export declare const setChromiumOpenGlRenderer: (renderer: OpenGlRenderer) => void;
 export declare const getChromiumHeadlessMode: () => boolean;
 export declare const setChromiumHeadlessMode: (should: boolean) => void;

package/dist/config/index.d.ts

@@ -103,10 +103,10 @@ declare global {
          */
         readonly setChromiumHeadlessMode: (should: boolean) => void;
         /**
-         * Set the OpenGL rendering backend for Chrome. Possible values: 'egl', 'angle', 'swiftshader', 'swangle' and 'vulkan'.
+         * Set the OpenGL rendering backend for Chrome. Possible values: 'egl', 'angle', 'swiftshader', 'swangle', 'vulkan' and 'angle-egl'.
          * Default: 'swangle' in Lambda, null elsewhere.
          */
-        readonly setChromiumOpenGlRenderer: (renderer: 'swangle' | 'angle' | 'egl' | 'swiftshader' | 'vulkan') => void;
+        readonly setChromiumOpenGlRenderer: (renderer: 'swangle' | 'angle' | 'egl' | 'swiftshader' | 'vulkan' | 'angle-egl') => void;
         /**
          * Set the user agent for Chrome. Only works during rendering.
          * Default is the default user agent for Chrome
@@ -306,7 +306,7 @@ export declare const ConfigInternals: {
     getChromiumDisableWebSecurity: () => boolean;
     getIgnoreCertificateErrors: () => boolean;
     getChromiumHeadlessMode: () => boolean;
-    getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | null;
+    getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl" | null;
     getEveryNthFrame: () => number;
     getConcurrency: () => string | number | null;
     getCurrentPuppeteerTimeout: () => number;

package/dist/config/log.d.ts

@@ -1 +1 @@
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;
+export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn", setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const CurrentComposition: () => JSX.Element;

package/dist/editor/components/Modals.js

@@ -16,7 +16,7 @@ const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = () => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type === 'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
+}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/RenderButton.js

@@ -2,12 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const get_default_out_name_1 = require("../../get-default-out-name");
 const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
-const get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
 const client_id_1 = require("../helpers/client-id");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_1 = require("../icons/render");
@@ -48,34 +45,19 @@ const RenderButton = () => {
         if (!video) {
             return null;
         }
-        const isVideo = video.durationInFrames > 1;
         const defaults = window.remotion_renderDefaults;
         if (!defaults) {
             throw new TypeError('Expected defaults');
         }
-        const { initialAudioCodec, initialRenderType, initialVideoCodec } = (0, get_default_video_contexts_1.getDefaultCodecs)({
-            defaultCodec: defaults.codec,
-            renderType: isVideo ? 'video' : 'still',
-        });
         setSelectedModal({
             type: 'render',
             compositionId: video.id,
             initialFrame: frame,
             initialStillImageFormat: defaults.stillImageFormat,
             initialVideoImageFormat: defaults.videoImageFormat,
-            initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
-                compositionName: video.id,
-                defaultExtension: isVideo
-                    ? client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, defaults.audioCodec)
-                    : defaults.stillImageFormat,
-                type: 'asset',
-            }),
             initialJpegQuality: defaults.jpegQuality,
             initialScale: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1,
             initialVerbose: defaults.logLevel === 'verbose',
-            initialVideoCodecForAudioTab: initialAudioCodec,
-            initialRenderType,
-            initialVideoCodecForVideoTab: initialVideoCodec,
             initialConcurrency: defaults.concurrency,
             maxConcurrency: defaults.maxConcurrency,
             minConcurrency: defaults.minConcurrency,
@@ -89,7 +71,7 @@ const RenderButton = () => {
             initialEveryNthFrame: defaults.everyNthFrame,
             initialNumberOfGifLoops: defaults.numberOfGifLoops,
             initialDelayRenderTimeout: defaults.delayRenderTimeout,
-            initialAudioCodec: defaults.audioCodec,
+            defaultConfigurationAudioCodec: defaults.audioCodec,
             initialEnvVariables: window.process.env,
             initialDisableWebSecurity: defaults.disableWebSecurity,
             initialOpenGlRenderer: defaults.openGlRenderer,
@@ -101,6 +83,7 @@ const RenderButton = () => {
             outFrameMark: outFrame,
             initialColorSpace: defaults.colorSpace,
             initialMultiProcessOnLinux: defaults.multiProcessOnLinux,
+            defaultConfigurationVideoCodec: defaults.codec,
         });
     }, [video, setSelectedModal, frame, props, inFrame, outFrame]);
     if (!video) {

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

@@ -1,6 +1,5 @@
 import type { AudioCodec, Codec, ColorSpace, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import React from 'react';
-import type { RenderType } from './RenderModalAdvanced';
 type RenderModalProps = {
     compositionId: string;
     initialFrame: number;
@@ -9,11 +8,6 @@ type RenderModalProps = {
     initialJpegQuality: number;
     initialScale: number;
     initialVerbose: boolean;
-    initialOutName: string;
-    initialRenderType: RenderType;
-    initialVideoCodecForAudioTab: Codec;
-    initialVideoCodecForVideoTab: Codec;
-    initialAudioCodec: AudioCodec | null;
     initialConcurrency: number;
     minConcurrency: number;
     maxConcurrency: number;
@@ -38,6 +32,8 @@ type RenderModalProps = {
     inFrameMark: number | null;
     outFrameMark: number | null;
     initialMultiProcessOnLinux: boolean;
+    defaultConfigurationVideoCodec: Codec | null;
+    defaultConfigurationAudioCodec: AudioCodec | null;
 };
 export declare const RenderModalWithLoader: React.FC<RenderModalProps>;
 export {};

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

@@ -16,6 +16,8 @@ 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 get_default_out_name_1 = require("../../../get-default-out-name");
+const get_default_video_contexts_1 = require("../../../preview-server/render-queue/get-default-video-contexts");
 const colors_1 = require("../../helpers/colors");
 const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
@@ -114,8 +116,21 @@ const outer = {
     display: 'flex',
     flexDirection: 'column',
 };
-const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialAudioCodec, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, defaultProps, inFrameMark, outFrameMark, onClose, resolvedComposition, unresolvedComposition, initialColorSpace, initialMultiProcessOnLinux, }) => {
+const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialVerbose, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, defaultProps, inFrameMark, outFrameMark, onClose, resolvedComposition, unresolvedComposition, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, }) => {
     const isMounted = (0, react_1.useRef)(true);
+    const [isVideo] = (0, react_1.useState)(() => {
+        return typeof resolvedComposition.durationInFrames === 'undefined'
+            ? true
+            : resolvedComposition.durationInFrames > 1;
+    });
+    const [{ initialAudioCodec, initialRenderType, initialVideoCodec, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, },] = (0, react_1.useState)(() => {
+        return (0, get_default_video_contexts_1.getDefaultCodecs)({
+            defaultConfigurationVideoCodec,
+            compositionDefaultVideoCodec: resolvedComposition.defaultCodec,
+            defaultConfigurationAudioCodec,
+            renderType: isVideo ? 'video' : 'still',
+        });
+    });
     const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
     const [unclampedFrame, setFrame] = (0, react_1.useState)(() => initialFrame);
     const [saving, setSaving] = (0, react_1.useState)(false);
@@ -126,6 +141,15 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const [videoCodecForVideoTab, setVideoCodecForVideoTab] = (0, react_1.useState)(() => initialVideoCodecForVideoTab);
     const [userSelectedAudioCodec, setUserSelectedAudioCodec] = (0, react_1.useState)(() => initialAudioCodec);
     const [envVariables, setEnvVariables] = (0, react_1.useState)(() => (0, convert_env_variables_1.envVariablesObjectToArray)(initialEnvVariables).filter(([key]) => key !== 'NODE_ENV'));
+    const [initialOutName] = (0, react_1.useState)(() => {
+        return (0, get_default_out_name_1.getDefaultOutLocation)({
+            compositionName: resolvedComposition.id,
+            defaultExtension: isVideo
+                ? client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, initialAudioCodec)
+                : initialStillImageFormat,
+            type: 'asset',
+        });
+    });
     const [videoCodecForAudioTab, setVideoCodecForAudioTab] = (0, react_1.useState)(() => initialVideoCodecForAudioTab);
     const [mutedState, setMuted] = (0, react_1.useState)(() => initialMuted);
     const [enforceAudioTrackState, setEnforceAudioTrackState] = (0, react_1.useState)(() => initialEnforceAudioTrack);

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

@@ -19,7 +19,15 @@ const container = {
 };
 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, enableMultiProcessOnLinux, setChromiumMultiProcessOnLinux, }) => {
     const extendedOpenGlOptions = (0, react_1.useMemo)(() => {
-        return ['angle', 'egl', 'swangle', 'swiftshader', 'vulkan', 'default'];
+        return [
+            'angle',
+            'egl',
+            'swangle',
+            'swiftshader',
+            'vulkan',
+            'angle-egl',
+            'default',
+        ];
     }, []);
     const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
         setVerboseLogging(e.target.checked);

package/dist/editor/components/SidebarRenderButton.js

@@ -2,11 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidebarRenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const get_default_out_name_1 = require("../../get-default-out-name");
-const get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
 const client_id_1 = require("../helpers/client-id");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
@@ -22,9 +19,6 @@ const SidebarRenderButton = ({ composition, visible }) => {
     }, []);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const isVideo = typeof composition.durationInFrames === 'undefined'
-        ? true
-        : composition.durationInFrames > 1;
     const onClick = (0, react_1.useCallback)((e) => {
         var _a;
         const defaults = window.remotion_renderDefaults;
@@ -32,10 +26,6 @@ const SidebarRenderButton = ({ composition, visible }) => {
             throw new Error('expected defaults');
         }
         e.stopPropagation();
-        const { initialAudioCodec, initialRenderType, initialVideoCodec } = (0, get_default_video_contexts_1.getDefaultCodecs)({
-            defaultCodec: defaults.codec,
-            renderType: isVideo ? 'video' : 'still',
-        });
         setSelectedModal({
             type: 'render',
             compositionId: composition.id,
@@ -45,16 +35,6 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialJpegQuality: defaults.jpegQuality,
             initialScale: defaults.scale,
             initialVerbose: defaults.logLevel === 'verbose',
-            initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
-                compositionName: composition.id,
-                defaultExtension: isVideo
-                    ? client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, defaults.audioCodec)
-                    : defaults.stillImageFormat,
-                type: 'asset',
-            }),
-            initialVideoCodecForAudioTab: initialAudioCodec,
-            initialRenderType,
-            initialVideoCodecForVideoTab: initialVideoCodec,
             initialConcurrency: defaults.concurrency,
             maxConcurrency: defaults.maxConcurrency,
             minConcurrency: defaults.minConcurrency,
@@ -68,7 +48,7 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialEveryNthFrame: defaults.everyNthFrame,
             initialNumberOfGifLoops: defaults.numberOfGifLoops,
             initialDelayRenderTimeout: defaults.delayRenderTimeout,
-            initialAudioCodec: defaults.audioCodec,
+            defaultConfigurationAudioCodec: defaults.audioCodec,
             initialEnvVariables: window.process.env,
             initialDisableWebSecurity: defaults.disableWebSecurity,
             initialOpenGlRenderer: defaults.openGlRenderer,
@@ -80,14 +60,9 @@ const SidebarRenderButton = ({ composition, visible }) => {
             outFrameMark: null,
             initialColorSpace: defaults.colorSpace,
             initialMultiProcessOnLinux: defaults.multiProcessOnLinux,
+            defaultConfigurationVideoCodec: defaults.codec,
         });
-    }, [
-        composition.defaultProps,
-        composition.id,
-        isVideo,
-        props,
-        setSelectedModal,
-    ]);
+    }, [composition.defaultProps, composition.id, 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/Timeline/TimelineInOutPointerHandle.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 export declare const inPointerHandle: React.RefObject<HTMLDivElement>;
 export declare const outPointerHandle: React.RefObject<HTMLDivElement>;
-export declare const TimelineInOutPointerHandle: React.FC<{
+type Props = {
     dragging: boolean;
     type: 'in' | 'out';
     atFrame: number;
-}>;
+};
+export declare const TimelineInOutPointerHandle: React.FC<Props>;
+export {};

package/dist/editor/components/Timeline/TimelineInOutPointerHandle.js

@@ -17,12 +17,8 @@ const line = {
 };
 exports.inPointerHandle = (0, react_1.createRef)();
 exports.outPointerHandle = (0, react_1.createRef)();
-const TimelineInOutPointerHandle = ({ dragging, type, atFrame }) => {
-    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, type }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
-    if (timelineWidth === null) {
-        throw new Error('Timeline width is null');
-    }
     const style = (0, react_1.useMemo)(() => {
         return {
             ...line,
@@ -34,4 +30,13 @@ const TimelineInOutPointerHandle = ({ dragging, type, atFrame }) => {
     }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
     return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
 };
+const TimelineInOutPointerHandle = ({ dragging, type, atFrame, }) => {
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    // When switching from a content which has no timeline (still or asset preview)
+    // the timeline first needs to mount, so we need to wait for the timeline width
+    if (timelineWidth === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(InnerTimelineInOutPointerHandle, { atFrame: atFrame, dragging: dragging, timelineWidth: timelineWidth, type: type }));
+};
 exports.TimelineInOutPointerHandle = TimelineInOutPointerHandle;

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.25)" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)";

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

@@ -1,7 +1,6 @@
 import type { AudioCodec, Codec, ColorSpace, 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';
 import type { Bug, UpdateInfo } from '../components/UpdateCheck';
 export type CompType = 'composition' | 'still';
 export type RenderModalState = {
@@ -11,13 +10,8 @@ export type RenderModalState = {
     initialStillImageFormat: StillImageFormat;
     initialVideoImageFormat: VideoImageFormat;
     initialJpegQuality: number;
-    initialOutName: string;
     initialScale: number;
     initialVerbose: boolean;
-    initialRenderType: RenderType;
-    initialVideoCodecForAudioTab: Codec;
-    initialVideoCodecForVideoTab: Codec;
-    initialAudioCodec: AudioCodec | null;
     initialConcurrency: number;
     initialMuted: boolean;
     initialEnforceAudioTrack: boolean;
@@ -42,6 +36,8 @@ export type RenderModalState = {
     defaultProps: Record<string, unknown>;
     inFrameMark: number | null;
     outFrameMark: number | null;
+    defaultConfigurationVideoCodec: Codec;
+    defaultConfigurationAudioCodec: AudioCodec | null;
 };
 export type ModalState = {
     type: 'new-comp';

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

@@ -21,7 +21,7 @@ export declare const getCliOptions: (options: {
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
     browserExecutable: BrowserExecutable;
-    logLevel: "verbose" | "info" | "warn" | "error";
+    logLevel: "error" | "verbose" | "info" | "warn";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;

package/dist/get-cli-options.js

@@ -48,10 +48,14 @@ const getx264Preset = () => {
     const x264Preset = config_1.ConfigInternals.getPresetProfile();
     return x264Preset;
 };
-const getAndValidateBrowser = async (browserExecutable) => {
+const getAndValidateBrowser = async ({ browserExecutable, indent, logLevel, }) => {
     const browser = getBrowser();
     try {
-        await renderer_1.RenderInternals.ensureLocalBrowser(browserExecutable);
+        await renderer_1.RenderInternals.ensureLocalBrowser({
+            preferredBrowserExecutable: browserExecutable,
+            indent,
+            logLevel,
+        });
     }
     catch (err) {
         log_1.Log.error('Could not download a browser for rendering frames.');
@@ -97,6 +101,7 @@ const getCliOptions = async (options) => {
         setting: 'concurrency',
         checkIfValidForCurrentMachine: false,
     });
+    const logLevel = config_1.ConfigInternals.Logging.getLogLevel();
     return {
         puppeteerTimeout: config_1.ConfigInternals.getCurrentPuppeteerTimeout(),
         concurrency,
@@ -105,7 +110,11 @@ const getCliOptions = async (options) => {
         inputProps: (0, get_input_props_1.getInputProps)(null),
         envVariables: await (0, get_env_1.getEnvironmentVariables)(null),
         jpegQuality: config_1.ConfigInternals.getJpegQuality(),
-        browser: await getAndValidateBrowser(browserExecutable),
+        browser: await getAndValidateBrowser({
+            browserExecutable,
+            indent: false,
+            logLevel,
+        }),
         crf,
         pixelFormat,
         proResProfile,

package/dist/get-final-output-codec.d.ts

@@ -1,10 +1,11 @@
 import type { Codec, CodecOrUndefined } from '@remotion/renderer';
-export declare const getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, }: {
+export declare const getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, compositionCodec, }: {
     cliFlag: CodecOrUndefined;
     outName: string | null;
     downloadName: string | null;
     configFile: Codec | null;
     uiCodec: Codec | null;
+    compositionCodec: Codec | null;
 }) => {
     codec: Codec;
     reason: string;

package/dist/get-final-output-codec.js

@@ -12,7 +12,7 @@ const deriveCodecsFromFilename = (extension) => {
         possible: (_b = renderer_1.RenderInternals.makeFileExtensionMap()[extension]) !== null && _b !== void 0 ? _b : [],
     };
 };
-const getFinalOutputCodec = ({ cliFlag, configFile, downloadName, outName, uiCodec, }) => {
+const getFinalOutputCodec = ({ cliFlag, configFile, downloadName, outName, uiCodec, compositionCodec, }) => {
     if (uiCodec) {
         return { codec: uiCodec, reason: 'via UI' };
     }
@@ -49,6 +49,9 @@ const getFinalOutputCodec = ({ cliFlag, configFile, downloadName, outName, uiCod
             reason: 'derived from out name',
         };
     }
+    if (compositionCodec) {
+        return { codec: compositionCodec, reason: 'via calculateMetadata' };
+    }
     if (configFile) {
         return {
             codec: configFile,

package/dist/gpu.d.ts

@@ -0,0 +1,2 @@
+export declare const GPU_COMMAND = "gpu";
+export declare const gpuCommand: (remotionRoot: string) => Promise<void>;

package/dist/gpu.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gpuCommand = exports.GPU_COMMAND = void 0;
+const renderer_1 = require("@remotion/renderer");
+const chalk_1 = require("./chalk");
+const get_cli_options_1 = require("./get-cli-options");
+const log_1 = require("./log");
+exports.GPU_COMMAND = 'gpu';
+const gpuCommand = async (remotionRoot) => {
+    const { browserExecutable, logLevel, chromiumOptions } = await (0, get_cli_options_1.getCliOptions)({
+        isLambda: false,
+        remotionRoot,
+        type: 'get-compositions',
+    });
+    const statuses = await renderer_1.RenderInternals.getChromiumGpuInformation({
+        browserExecutable,
+        indent: false,
+        logLevel,
+        chromiumOptions,
+    });
+    for (const { feature, status } of statuses) {
+        log_1.Log.info(`${feature}: ${colorStatus(status)}`);
+    }
+};
+exports.gpuCommand = gpuCommand;
+const colorStatus = (status) => {
+    if (status === 'Enabled') {
+        return chalk_1.chalk.green(status);
+    }
+    if (status === 'Hardware accelerated') {
+        return chalk_1.chalk.green(status);
+    }
+    if (status === 'Disabled') {
+        return chalk_1.chalk.red(status);
+    }
+    if (status === 'Software only. Hardware acceleration disabled') {
+        return chalk_1.chalk.red(status);
+    }
+    if (status === 'Software only, hardware acceleration unavailable') {
+        return chalk_1.chalk.red(status);
+    }
+    return status;
+};