@remotion/cli 3.3.25 → 3.3.26

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

@@ -1,3 +1,5 @@
 import React from 'react';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemotionInput: (props: React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+// TODO: refactor such that importing from '@remotion/renderer/src/get-extension-from-codec' is no longer needed
+const get_extension_from_codec_1 = require("@remotion/renderer/src/get-extension-from-codec");
 const react_1 = require("react");
 const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
 const colors_1 = require("../../helpers/colors");
@@ -36,7 +38,14 @@ const reducer = (state, action) => {
     }
     return state;
 };
-const container = {};
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: '12px 16px',
+    width: '100%',
+    borderBottom: '1px solid black',
+};
 const optionRow = {
     display: 'flex',
     flexDirection: 'row',
@@ -86,6 +95,9 @@ const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQ
     const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
     const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
     const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialImageFormat);
+    const [videoCodec, setVideoCodec] = (0, react_1.useState)('h264');
+    const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)('jpeg');
+    const [renderMode, setRenderMode] = (0, react_1.useState)('still');
     const [quality, setQuality] = (0, react_1.useState)(() => initialQuality !== null && initialQuality !== void 0 ? initialQuality : 80);
     const [scale, setScale] = (0, react_1.useState)(() => initialScale);
     const [verbose, setVerboseLogging] = (0, react_1.useState)(() => initialVerbose);
@@ -98,22 +110,24 @@ const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQ
     const onValueChange = (0, react_1.useCallback)((e) => {
         setOutName(e.target.value);
     }, []);
-    const setPng = (0, react_1.useCallback)(() => {
-        setImageFormat('png');
+    const getStringBeforeSuffix = (0, react_1.useCallback)((fileName) => {
+        const dotPos = fileName.lastIndexOf('.');
+        const bitBeforeDot = fileName.substring(0, dotPos);
+        return bitBeforeDot;
+    }, []);
+    const setCodec = (0, react_1.useCallback)((codec) => {
+        setVideoCodec(codec);
         setOutName((prev) => {
-            if (prev.endsWith('.jpeg') || prev.endsWith('.jpg')) {
-                return prev.replace(/.jpe?g$/g, '.png');
-            }
-            return prev;
+            const codecSuffix = (0, get_extension_from_codec_1.getFileExtensionFromCodec)(codec, 'final');
+            const newFileName = getStringBeforeSuffix(prev) + '.' + codecSuffix;
+            return newFileName;
         });
     }, []);
-    const setJpeg = (0, react_1.useCallback)(() => {
-        setImageFormat('jpeg');
+    const setStillFormat = (0, react_1.useCallback)((format) => {
+        setImageFormat(format);
         setOutName((prev) => {
-            if (prev.endsWith('.png')) {
-                return prev.replace(/.png$/g, '.jpeg');
-            }
-            return prev;
+            const newFileName = getStringBeforeSuffix(prev) + '.' + format;
+            return newFileName;
         });
     }, []);
     const onClickStill = (0, react_1.useCallback)(() => {
@@ -154,12 +168,12 @@ const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQ
         (0, actions_1.addVideoRenderJob)({
             compositionId,
             outName,
-            imageFormat,
+            imageFormat: videoImageFormat,
             quality: imageFormat === 'jpeg' ? quality : null,
             scale,
             verbose,
             // TODO: Make this configurable
-            codec: 'h264',
+            codec: videoCodec,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -177,6 +191,8 @@ const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQ
         scale,
         setSelectedModal,
         verbose,
+        videoCodec,
+        videoImageFormat,
     ]);
     const onQualityChangedDirectly = (0, react_1.useCallback)((newQuality) => {
         setQuality(newQuality);
@@ -227,36 +243,88 @@ const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQ
         return [
             {
                 label: 'PNG',
-                onClick: setPng,
+                onClick: renderMode === 'still'
+                    ? () => setStillFormat('png')
+                    : () => setVideoImageFormat('png'),
                 key: 'png',
-                selected: imageFormat === 'png',
+                selected: renderMode === 'still'
+                    ? imageFormat === 'png'
+                    : videoImageFormat === 'png',
             },
             {
                 label: 'JPEG',
-                onClick: setJpeg,
+                onClick: renderMode === 'still'
+                    ? () => setStillFormat('jpeg')
+                    : () => setVideoImageFormat('jpeg'),
                 key: 'jpeg',
-                selected: imageFormat === 'jpeg',
+                selected: renderMode === 'still'
+                    ? imageFormat === 'jpeg'
+                    : videoImageFormat === 'jpeg',
+            },
+        ];
+    }, [imageFormat, renderMode, setStillFormat, videoImageFormat]);
+    const videoCodecOptions = (0, react_1.useMemo)(() => {
+        const codecs = [
+            'h264',
+            'h265',
+            'vp8',
+            'vp9',
+            'mp3',
+            'aac',
+            'wav',
+            'prores',
+            'h264-mkv',
+            'gif',
+        ];
+        return codecs.map((codec) => {
+            return {
+                label: codec,
+                onClick: () => setCodec(codec),
+                key: codec,
+                selected: videoCodec === codec,
+            };
+        });
+    }, [setCodec, videoCodec]);
+    const renderTabOptions = (0, react_1.useMemo)(() => {
+        return [
+            {
+                label: 'Still',
+                onClick: () => {
+                    setRenderMode('still');
+                    setStillFormat(imageFormat);
+                },
+                key: 'still',
+                selected: renderMode === 'still',
+            },
+            {
+                label: 'Video',
+                onClick: () => {
+                    setRenderMode('video');
+                    setCodec(videoCodec);
+                },
+                key: 'video',
+                selected: renderMode === 'video',
             },
         ];
-    }, [imageFormat, setJpeg, setPng]);
+    }, [imageFormat, renderMode, setCodec, setStillFormat, videoCodec]);
     const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
         setVerboseLogging(e.target.checked);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Output name" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${compositionId}` }), (0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: renderMode === 'still' ? 'Format' : 'Codec' }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderMode === 'still' ? imageFormatOptions : videoCodecOptions }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Output name" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput
                                         // TODO: Validate and reject folders or weird file names
                                         , { 
                                             // TODO: Validate and reject folders or weird file names
-                                            warning: existence, style: input, type: "text", value: outName, onChange: onValueChange }), existence ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Will be overwritten" })) : null] }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Frame" }), (0, jsx_runtime_1.jsxs)("div", { style: rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger
-                                    // TODO: Hide if it is a still
-                                    , { 
+                                            warning: existence, style: input, type: "text", value: outName, onChange: onValueChange }), existence ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Will be overwritten" })) : null] }) })] }), (0, jsx_runtime_1.jsx)("div", { style: optionRow, children: renderMode === 'still' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Frame" }), (0, jsx_runtime_1.jsxs)("div", { style: rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger
                                         // TODO: Hide if it is a still
-                                        value: frame, onChange: onFrameChanged, 
-                                        // TODO: Actual frame
-                                        placeholder: "0-100", onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, 
-                                        // TODO: Add actual frame
-                                        max: Infinity }), ' '] })] }), (0, jsx_runtime_1.jsxs)(CollapsableOptions_1.CollapsableOptions, { showLabel: "Show advanced settings", hideLabel: "Hide advanced settings", children: [(0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Scale" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: scale, onChange: onScaleChanged, placeholder: "0.1-10", 
+                                        , { 
+                                            // TODO: Hide if it is a still
+                                            value: frame, onChange: onFrameChanged, 
+                                            // TODO: Actual frame
+                                            placeholder: "0-100", onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, 
+                                            // TODO: Add actual frame
+                                            max: Infinity }), ' '] })] })) }), (0, jsx_runtime_1.jsxs)(CollapsableOptions_1.CollapsableOptions, { showLabel: "Show advanced settings", hideLabel: "Hide advanced settings", children: [(0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Scale" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: scale, onChange: onScaleChanged, placeholder: "0.1-10", 
                                             // TODO: Does not allow non-integer steps
                                             // TODO: Cannot click and type in 0.2
-                                            onValueChange: onScaleSetDirectly, name: "scale", step: 0.05, min: MIN_SCALE, max: MAX_SCALE }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)("input", { type: 'checkbox', checked: verbose, onChange: onVerboseLoggingChanged }) })] }), imageFormat === 'jpeg' && ((0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "JPEG Quality" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: quality, onChange: onQualityChanged, placeholder: "0-100", onValueChange: onQualityChangedDirectly, name: "quality", step: 1, min: MIN_QUALITY, max: MAX_QUALITY }) })] }))] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: buttonRow, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickVideo, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render video' : 'Rendering...' }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, x: 0.5 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickStill, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render still' : 'Rendering...' })] })] })] }));
+                                            onValueChange: onScaleSetDirectly, name: "scale", step: 0.05, min: MIN_SCALE, max: MAX_SCALE }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)("input", { type: 'checkbox', checked: verbose, onChange: onVerboseLoggingChanged }) })] }), renderMode === 'video' && ((0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions }) })] })), (imageFormat === 'jpeg' || videoImageFormat === 'jpeg') && ((0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "JPEG Quality" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: quality, onChange: onQualityChanged, placeholder: "0-100", onValueChange: onQualityChangedDirectly, name: "quality", step: 1, min: MIN_QUALITY, max: MAX_QUALITY }) })] }))] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsx)("div", { style: buttonRow, children: renderMode === 'still' ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickStill, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render still' : 'Rendering...' })) : ((0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickVideo, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render video' : 'Rendering...' })) })] })] }));
 };
 exports.RenderModal = RenderModal;

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

@@ -20,11 +20,13 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     verbose: boolean;
     codec: Codec;
 }) => Promise<undefined>;
-export declare const unsubscribeFromFileExistenceWatcher: ({ file }: {
+export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
     file: string;
+    clientId: string;
 }) => Promise<undefined>;
-export declare const subscribeToFileExistenceWatcher: ({ file, }: {
+export declare const subscribeToFileExistenceWatcher: ({ file, clientId, }: {
     file: string;
+    clientId: string;
 }) => Promise<boolean>;
 export declare const openInFileExplorer: ({ directory }: {
     directory: string;

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

@@ -51,12 +51,15 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, quality, scale
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;
-const unsubscribeFromFileExistenceWatcher = ({ file }) => {
-    return (0, exports.callApi)('/api/unsubscribe-from-file-existence', { file });
+const unsubscribeFromFileExistenceWatcher = ({ file, clientId, }) => {
+    return (0, exports.callApi)('/api/unsubscribe-from-file-existence', { file, clientId });
 };
 exports.unsubscribeFromFileExistenceWatcher = unsubscribeFromFileExistenceWatcher;
-const subscribeToFileExistenceWatcher = async ({ file, }) => {
-    const { exists } = await (0, exports.callApi)('/api/subscribe-to-file-existence', { file });
+const subscribeToFileExistenceWatcher = async ({ file, clientId, }) => {
+    const { exists } = await (0, exports.callApi)('/api/subscribe-to-file-existence', {
+        file,
+        clientId,
+    });
     return exists;
 };
 exports.subscribeToFileExistenceWatcher = subscribeToFileExistenceWatcher;

package/dist/editor/helpers/client-id.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type PreviewServerState = {
+    type: 'init';
+} | {
+    type: 'connected';
+    clientId: string;
+} | {
+    type: 'disconnected';
+};
+export declare const PreviewServerConnectionCtx: React.Context<PreviewServerState>;
+export declare const previewServerConnectionRef: React.RefObject<{
+    set: (jobs: PreviewServerState) => void;
+}>;
+export declare const PreviewServerConnection: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/editor/helpers/client-id.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewServerConnection = exports.previewServerConnectionRef = exports.PreviewServerConnectionCtx = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.PreviewServerConnectionCtx = react_1.default.createContext({
+    type: 'init',
+});
+exports.previewServerConnectionRef = (0, react_1.createRef)();
+const PreviewServerConnection = ({ children }) => {
+    const [state, setState] = react_1.default.useState({
+        type: 'init',
+    });
+    (0, react_1.useImperativeHandle)(exports.previewServerConnectionRef, () => {
+        return {
+            set: (newState) => {
+                setState(newState);
+            },
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.PreviewServerConnectionCtx.Provider, { value: state, children: children }));
+};
+exports.PreviewServerConnection = PreviewServerConnection;

package/dist/editor/helpers/use-file-existence.js

@@ -4,20 +4,29 @@ exports.useFileExistence = void 0;
 const react_1 = require("react");
 const event_source_1 = require("../../event-source");
 const actions_1 = require("../components/RenderQueue/actions");
+const client_id_1 = require("./client-id");
 const useFileExistence = (outName) => {
     const [exists, setExists] = (0, react_1.useState)(false);
+    const state = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    const clientId = state.type === 'connected' ? state.clientId : undefined;
     const currentOutName = (0, react_1.useRef)('');
     currentOutName.current = outName;
     (0, react_1.useEffect)(() => {
-        (0, actions_1.subscribeToFileExistenceWatcher)({ file: outName }).then((_exists) => {
+        if (!clientId) {
+            return;
+        }
+        (0, actions_1.subscribeToFileExistenceWatcher)({
+            file: outName,
+            clientId,
+        }).then((_exists) => {
             if (currentOutName.current === outName) {
                 setExists(_exists);
             }
         });
         return () => {
-            (0, actions_1.unsubscribeFromFileExistenceWatcher)({ file: outName });
+            (0, actions_1.unsubscribeFromFileExistenceWatcher)({ file: outName, clientId });
         };
-    }, [outName]);
+    }, [clientId, outName]);
     (0, react_1.useEffect)(() => {
         const listener = (event) => {
             if (event.type !== 'watched-file-deleted') {

package/dist/event-source-events.d.ts

@@ -1,3 +1,4 @@
+import type { StaticFile } from 'remotion';
 export declare type EventSourceEvent = {
     type: 'new-input-props';
     newProps: object;
@@ -6,4 +7,7 @@ export declare type EventSourceEvent = {
 } | {
     type: 'new-env-variables';
     newEnvVariables: Record<string, string>;
+} | {
+    type: 'new-public-folder';
+    files: StaticFile[];
 };

package/dist/event-source.js

@@ -11,6 +11,9 @@ const openEventSource = () => {
             newEvent.type === 'new-env-variables') {
             window.location.reload();
         }
+        if (newEvent.type === 'new-public-folder') {
+            window.remotion_staticFiles = newEvent.files;
+        }
     });
     source.addEventListener('open', () => {
         var _a;

package/dist/preview-server/file-existence-watchers.d.ts

@@ -1,10 +1,13 @@
-export declare const subscribeToFileExistenceWatchers: ({ file: relativeFile, remotionRoot, }: {
+export declare const subscribeToFileExistenceWatchers: ({ file: relativeFile, remotionRoot, clientId, }: {
     file: string;
     remotionRoot: string;
+    clientId: string;
 }) => {
     exists: boolean;
 };
-export declare const unsubscribeFromFileExistenceWatchers: ({ file, remotionRoot, }: {
+export declare const unsubscribeFromFileExistenceWatchers: ({ file, remotionRoot, clientId, }: {
     file: string;
     remotionRoot: string;
+    clientId: string;
 }) => void;
+export declare const unsubscribeClientFileExistenceWatchers: (clientId: string) => void;

package/dist/preview-server/file-existence-watchers.js

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.unsubscribeFromFileExistenceWatchers = exports.subscribeToFileExistenceWatchers = void 0;
+exports.unsubscribeClientFileExistenceWatchers = exports.unsubscribeFromFileExistenceWatchers = exports.subscribeToFileExistenceWatchers = void 0;
 const path_1 = __importDefault(require("path"));
 const file_watcher_1 = require("../file-watcher");
 const live_events_1 = require("./live-events");
 const fileExistenceWatchers = {};
-const subscribeToFileExistenceWatchers = ({ file: relativeFile, remotionRoot, }) => {
+const subscribeToFileExistenceWatchers = ({ file: relativeFile, remotionRoot, clientId, }) => {
     const file = path_1.default.resolve(remotionRoot, relativeFile);
     const { unwatch, exists } = (0, file_watcher_1.installFileWatcher)({
         file,
@@ -33,14 +33,30 @@ const subscribeToFileExistenceWatchers = ({ file: relativeFile, remotionRoot, })
             }
         },
     });
-    fileExistenceWatchers[file] = unwatch;
+    if (!fileExistenceWatchers[clientId]) {
+        fileExistenceWatchers[clientId] = {};
+    }
+    fileExistenceWatchers[clientId][file] = unwatch;
     return { exists };
 };
 exports.subscribeToFileExistenceWatchers = subscribeToFileExistenceWatchers;
-const unsubscribeFromFileExistenceWatchers = ({ file, remotionRoot, }) => {
-    var _a;
+const unsubscribeFromFileExistenceWatchers = ({ file, remotionRoot, clientId, }) => {
+    var _a, _b;
     const actualPath = path_1.default.resolve(remotionRoot, file);
-    (_a = fileExistenceWatchers[actualPath]) === null || _a === void 0 ? void 0 : _a.call(fileExistenceWatchers);
-    delete fileExistenceWatchers[actualPath];
+    if (!fileExistenceWatchers[clientId]) {
+        return;
+    }
+    (_b = (_a = fileExistenceWatchers[clientId])[actualPath]) === null || _b === void 0 ? void 0 : _b.call(_a);
+    delete fileExistenceWatchers[clientId][actualPath];
 };
 exports.unsubscribeFromFileExistenceWatchers = unsubscribeFromFileExistenceWatchers;
+const unsubscribeClientFileExistenceWatchers = (clientId) => {
+    if (!fileExistenceWatchers[clientId]) {
+        return;
+    }
+    Object.values(fileExistenceWatchers[clientId]).forEach((unwatch) => {
+        unwatch();
+    });
+    delete fileExistenceWatchers[clientId];
+};
+exports.unsubscribeClientFileExistenceWatchers = unsubscribeClientFileExistenceWatchers;

package/dist/preview-server/public-folder.d.ts

@@ -1,12 +1,17 @@
 import type { StaticFile } from 'remotion';
-export declare const initPublicFolderWatch: ({ publicDir, remotionRoot, onUpdate, }: {
+export declare const initPublicFolderWatch: ({ publicDir, onUpdate, staticHash, }: {
     publicDir: string;
     remotionRoot: string;
     onUpdate: () => void;
+    staticHash: string;
 }) => void;
-export declare const watchPublicFolder: ({ publicDir, remotionRoot, onUpdate, }: {
+export declare const fetchFolder: ({ publicDir, staticHash, }: {
+    publicDir: string;
+    staticHash: string;
+}) => void;
+export declare const watchPublicFolder: ({ publicDir, onUpdate, staticHash, }: {
     publicDir: string;
-    remotionRoot: string;
     onUpdate: () => void;
+    staticHash: string;
 }) => void;
 export declare const getFiles: () => StaticFile[];

package/dist/preview-server/public-folder.js

@@ -3,32 +3,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFiles = exports.watchPublicFolder = exports.initPublicFolderWatch = void 0;
+exports.getFiles = exports.watchPublicFolder = exports.fetchFolder = exports.initPublicFolderWatch = void 0;
 const bundler_1 = require("@remotion/bundler");
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
-const write_files_definition_file_1 = require("./write-files-definition-file");
 let files = [];
-const initPublicFolderWatch = ({ publicDir, remotionRoot, onUpdate, }) => {
-    fetchFolder({ publicDir, remotionRoot });
-    (0, exports.watchPublicFolder)({ publicDir, remotionRoot, onUpdate });
+const initPublicFolderWatch = ({ publicDir, onUpdate, staticHash, }) => {
+    (0, exports.fetchFolder)({ publicDir, staticHash });
+    (0, exports.watchPublicFolder)({ publicDir, onUpdate, staticHash });
 };
 exports.initPublicFolderWatch = initPublicFolderWatch;
-const fetchFolder = ({ publicDir, remotionRoot, }) => {
+const fetchFolder = ({ publicDir, staticHash, }) => {
     files = bundler_1.BundlerInternals.readRecursively({
         folder: '.',
         startPath: publicDir,
+        staticHash,
+        limit: 1000,
     }).map((f) => {
         return {
             ...f,
-            path: f.path.split(path_1.default.sep).join('/'),
+            name: f.name.split(path_1.default.sep).join('/'),
         };
     });
-    (0, write_files_definition_file_1.writeFilesDefinitionFile)(files, remotionRoot);
 };
-const watchPublicFolder = ({ publicDir, remotionRoot, onUpdate, }) => {
+exports.fetchFolder = fetchFolder;
+const watchPublicFolder = ({ publicDir, onUpdate, staticHash, }) => {
     (0, fs_1.watch)(publicDir, { recursive: true }, () => {
-        fetchFolder({ publicDir, remotionRoot });
+        (0, exports.fetchFolder)({ publicDir, staticHash });
         onUpdate();
     });
 };

package/dist/preview-server/render-queue/job.d.ts

@@ -69,11 +69,13 @@ export declare type OpenInFileExplorerRequest = {
 };
 export declare type SubscribeToFileExistenceRequest = {
     file: string;
+    clientId: string;
 };
 export declare type SubscribeToFileExistenceResponse = {
     exists: boolean;
 };
 export declare type UnsubscribeFromFileExistenceRequest = {
     file: string;
+    clientId: string;
 };
 export {};

package/dist/preview-server/render-queue/process-video.js

@@ -50,6 +50,8 @@ const processVideoJob = async ({ job, remotionRoot, entryPoint, onProgress, addC
         shouldOutputImageSequence: false,
         addCleanupCallback,
         outputLocationFromUI: job.outName,
+        uiCodec: job.codec,
+        uiImageFormat: job.imageFormat,
     });
     // TODO: Allow cancel signal
     // TODO: Accept CLI options

package/dist/preview-server/routes/add-render.js

@@ -10,8 +10,7 @@ const handleAddRender = ({ input, entryPoint, remotionRoot, }) => {
             remotionRoot,
             job: {
                 cleanup: [],
-                // TODO: Allow to change codec
-                codec: 'h264',
+                codec: input.codec,
                 compositionId: input.compositionId,
                 deletedOutputLocation: false,
                 type: 'video',

package/dist/preview-server/routes/subscribe-to-file-existence.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToFileExistence = void 0;
 const file_existence_watchers_1 = require("../file-existence-watchers");
-const subscribeToFileExistence = ({ input: { file }, remotionRoot }) => {
-    // TODO: What if the user reloads the page? The file watcher doesn't get cleared
+const subscribeToFileExistence = ({ input: { file, clientId }, remotionRoot }) => {
     const { exists } = (0, file_existence_watchers_1.subscribeToFileExistenceWatchers)({
         file,
         remotionRoot,
+        clientId,
     });
     return Promise.resolve({ exists });
 };

package/dist/preview-server/routes/unsubscribe-from-file-existence.js

@@ -3,7 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.unsubscribeFromFileExistence = void 0;
 const file_existence_watchers_1 = require("../file-existence-watchers");
 const unsubscribeFromFileExistence = ({ input, remotionRoot }) => {
-    (0, file_existence_watchers_1.unsubscribeFromFileExistenceWatchers)({ file: input.file, remotionRoot });
+    (0, file_existence_watchers_1.unsubscribeFromFileExistenceWatchers)({
+        file: input.file,
+        clientId: input.clientId,
+        remotionRoot,
+    });
     return Promise.resolve(undefined);
 };
 exports.unsubscribeFromFileExistence = unsubscribeFromFileExistence;

package/dist/preview-server/routes.d.ts

@@ -1,6 +1,6 @@
 import type { IncomingMessage, ServerResponse } from 'http';
 import type { LiveEventsServer } from './live-events';
-export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, userPassedPublicDir, }: {
+export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, publicDir, }: {
     hash: string;
     hashPrefix: string;
     request: IncomingMessage;
@@ -9,5 +9,5 @@ export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveE
     getCurrentInputProps: () => object;
     getEnvVariables: () => Record<string, string>;
     remotionRoot: string;
-    userPassedPublicDir: string | null;
+    publicDir: string;
 }) => void | Promise<void>;

package/dist/preview-server/routes.js

@@ -14,6 +14,7 @@ const get_file_source_1 = require("./error-overlay/react-overlay/utils/get-file-
 const open_in_editor_1 = require("./error-overlay/react-overlay/utils/open-in-editor");
 const get_package_manager_1 = require("./get-package-manager");
 const project_info_1 = require("./project-info");
+const public_folder_1 = require("./public-folder");
 const serve_static_1 = require("./serve-static");
 const update_available_1 = require("./update-available");
 const handleUpdate = async (remotionRoot, _, response) => {
@@ -27,13 +28,14 @@ const static404 = (response) => {
     response.writeHead(404);
     response.end('The static/ prefix has been changed, this URL is no longer valid.');
 };
-const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputProps, getEnvVariables, }) => {
+const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputProps, getEnvVariables, publicDir, }) => {
     var _a;
     const [edit] = await editorGuess;
     const displayName = (0, open_in_editor_1.getDisplayNameForEditor)(edit ? edit.command : null);
     response.setHeader('content-type', 'text/html');
     response.writeHead(200);
     const packageManager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
+    (0, public_folder_1.fetchFolder)({ publicDir, staticHash: hash });
     response.end(bundler_1.BundlerInternals.indexHtml({
         staticHash: hash,
         baseDir: '/',
@@ -43,6 +45,7 @@ const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputPro
         remotionRoot,
         previewServerCommand: packageManager === 'unknown' ? null : packageManager.startCommand,
         numberOfAudioTags: (_a = parse_command_line_1.parsedCli['number-of-shared-audio-tags']) !== null && _a !== void 0 ? _a : (0, number_of_shared_audio_tags_1.getNumberOfSharedAudioTags)(),
+        publicFiles: (0, public_folder_1.getFiles)(),
         includeFavicon: true,
         title: 'Remotion Preview',
     }));
@@ -124,7 +127,7 @@ const handleFavicon = (_, response) => {
     const readStream = (0, fs_1.createReadStream)(filePath);
     readStream.pipe(response);
 };
-const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, userPassedPublicDir, }) => {
+const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, publicDir, }) => {
     const url = new URL(request.url, 'http://localhost');
     if (url.pathname === '/api/update') {
         return handleUpdate(remotionRoot, request, response);
@@ -150,9 +153,6 @@ const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, g
         return liveEventsServer.router(request, response);
     }
     if (url.pathname.startsWith(hash)) {
-        const publicDir = userPassedPublicDir
-            ? path_1.default.resolve(remotionRoot, userPassedPublicDir)
-            : path_1.default.join(remotionRoot, 'public');
         return (0, serve_static_1.serveStatic)(publicDir, hash, request, response);
     }
     if (url.pathname.startsWith(hashPrefix)) {
@@ -164,6 +164,7 @@ const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, g
         response,
         getCurrentInputProps,
         getEnvVariables,
+        publicDir,
     });
 };
 exports.handleRoutes = handleRoutes;

package/dist/preview-server/start-server.d.ts

@@ -1,6 +1,8 @@
 import type { WebpackOverrideFn } from 'remotion';
 import type { LiveEventsServer } from './live-events';
-export declare const startServer: (entry: string, userDefinedComponent: string, options: {
+export declare const startServer: (options: {
+    entry: string;
+    userDefinedComponent: string;
     webpackOverride: WebpackOverrideFn;
     getCurrentInputProps: () => object;
     getEnvVariables: () => Record<string, string>;
@@ -8,8 +10,11 @@ export declare const startServer: (entry: string, userDefinedComponent: string,
     maxTimelineTracks?: number;
     remotionRoot: string;
     keyboardShortcutsEnabled: boolean;
+    publicDir: string;
     userPassedPublicDir: string | null;
     poll: number | null;
+    hash: string;
+    hashPrefix: string;
 }) => Promise<{
     port: number;
     liveEventsServer: LiveEventsServer;

package/dist/preview-server/start-server.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.startServer = void 0;
 const bundler_1 = require("@remotion/bundler");
 const renderer_1 = require("@remotion/renderer");
-const crypto_1 = __importDefault(require("crypto"));
 const fs_1 = __importDefault(require("fs"));
 const http_1 = __importDefault(require("http"));
 const os_1 = __importDefault(require("os"));
@@ -17,12 +16,12 @@ const dev_middleware_1 = require("./dev-middleware");
 const hot_middleware_1 = require("./hot-middleware");
 const live_events_1 = require("./live-events");
 const routes_1 = require("./routes");
-const startServer = async (entry, userDefinedComponent, options) => {
+const startServer = async (options) => {
     var _a, _b, _c, _d;
     const tmpDir = await fs_1.default.promises.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'react-motion-graphics'));
     const [, config] = bundler_1.BundlerInternals.webpackConfig({
-        entry,
-        userDefinedComponent,
+        entry: options.entry,
+        userDefinedComponent: options.userDefinedComponent,
         outDir: tmpDir,
         environment: 'development',
         webpackOverride: (_a = options === null || options === void 0 ? void 0 : options.webpackOverride) !== null && _a !== void 0 ? _a : config_1.ConfigInternals.getWebpackOverrideFn(),
@@ -37,8 +36,6 @@ const startServer = async (entry, userDefinedComponent, options) => {
         poll: options.poll,
     });
     const compiler = (0, bundler_1.webpack)(config);
-    const hashPrefix = '/static-';
-    const hash = `${hashPrefix}${crypto_1.default.randomBytes(6).toString('hex')}`;
     const wdmMiddleware = (0, dev_middleware_1.wdm)(compiler);
     const whm = (0, hot_middleware_1.webpackHotMiddleware)(compiler);
     const liveEventsServer = (0, live_events_1.makeLiveEventsRouter)();
@@ -57,15 +54,15 @@ const startServer = async (entry, userDefinedComponent, options) => {
         })
             .then(() => {
             return (0, routes_1.handleRoutes)({
-                hash,
-                hashPrefix,
+                hash: options.hash,
+                hashPrefix: options.hashPrefix,
                 request,
                 response,
                 liveEventsServer,
                 getCurrentInputProps: options.getCurrentInputProps,
                 getEnvVariables: options.getEnvVariables,
                 remotionRoot: options.remotionRoot,
-                userPassedPublicDir: options.userPassedPublicDir,
+                publicDir: options.publicDir,
             });
         })
             .catch((err) => {

package/dist/preview.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.previewCommand = void 0;
 const better_opn_1 = __importDefault(require("better-opn"));
+const crypto_1 = __importDefault(require("crypto"));
 const path_1 = __importDefault(require("path"));
 const chalk_1 = require("./chalk");
 const config_1 = require("./config");
@@ -14,6 +15,8 @@ const get_input_props_1 = require("./get-input-props");
 const get_network_address_1 = require("./get-network-address");
 const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
+const get_absolute_public_dir_1 = require("./preview-server/get-absolute-public-dir");
+const public_folder_1 = require("./preview-server/public-folder");
 const start_server_1 = require("./preview-server/start-server");
 const noop = () => undefined;
 let liveEventsListener = null;
@@ -79,16 +82,40 @@ const previewCommand = async (remotionRoot, args) => {
             });
         });
     });
-    const { port, liveEventsServer } = await (0, start_server_1.startServer)(path_1.default.resolve(__dirname, 'previewEntry.js'), fullPath, {
+    const publicDir = (0, get_absolute_public_dir_1.getAbsolutePublicDir)({
+        userPassedPublicDir: config_1.ConfigInternals.getPublicDir(),
+        remotionRoot,
+    });
+    const hashPrefix = '/static-';
+    const staticHash = `${hashPrefix}${crypto_1.default.randomBytes(6).toString('hex')}`;
+    (0, public_folder_1.initPublicFolderWatch)({
+        publicDir,
+        remotionRoot,
+        onUpdate: () => {
+            waitForLiveEventsListener().then((listener) => {
+                listener.sendEventToClient({
+                    type: 'new-public-folder',
+                    files: (0, public_folder_1.getFiles)(),
+                });
+            });
+        },
+        staticHash,
+    });
+    const { port, liveEventsServer } = await (0, start_server_1.startServer)({
+        entry: path_1.default.resolve(__dirname, 'previewEntry.js'),
+        userDefinedComponent: fullPath,
         getCurrentInputProps: () => inputProps,
         getEnvVariables: () => envVariables,
         port: desiredPort,
         maxTimelineTracks: config_1.ConfigInternals.getMaxTimelineTracks(),
         remotionRoot,
         keyboardShortcutsEnabled: config_1.ConfigInternals.getKeyboardShortcutsEnabled(),
-        userPassedPublicDir: config_1.ConfigInternals.getPublicDir(),
+        publicDir,
         webpackOverride: config_1.ConfigInternals.getWebpackOverrideFn(),
         poll: config_1.ConfigInternals.getWebpackPolling(),
+        userPassedPublicDir: config_1.ConfigInternals.getPublicDir(),
+        hash: staticHash,
+        hashPrefix,
     });
     setLiveEventsListener(liveEventsServer);
     const networkAddress = (0, get_network_address_1.getNetworkAddress)();

package/dist/render-flows/render.d.ts

@@ -1,6 +1,6 @@
-import type { Browser, BrowserExecutable, ChromiumOptions, FfmpegExecutable, FrameRange, ImageFormat, LogLevel } from '@remotion/renderer';
+import type { Browser, BrowserExecutable, ChromiumOptions, Codec, FfmpegExecutable, FrameRange, ImageFormat, LogLevel } from '@remotion/renderer';
 import type { JobProgressCallback } from '../preview-server/render-queue/job';
-export declare const renderCompFlow: ({ remotionRoot, fullEntryPoint, ffmpegExecutable, ffprobeExecutable, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, inputProps, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, configFileImageFormat, outputLocationFromUI, quality, onProgress, addCleanupCallback, }: {
+export declare const renderCompFlow: ({ remotionRoot, fullEntryPoint, ffmpegExecutable, ffprobeExecutable, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, inputProps, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, configFileImageFormat, outputLocationFromUI, quality, onProgress, addCleanupCallback, uiCodec, uiImageFormat, }: {
     remotionRoot: string;
     fullEntryPoint: string;
     entryPointReason: string;
@@ -32,4 +32,6 @@ export declare const renderCompFlow: ({ remotionRoot, fullEntryPoint, ffmpegExec
     quality: number | undefined;
     onProgress: JobProgressCallback;
     addCleanupCallback: (cb: () => Promise<void>) => void;
+    uiCodec: Codec | null;
+    uiImageFormat: ImageFormat | null;
 }) => Promise<void>;

package/dist/render-flows/render.js

@@ -9,17 +9,21 @@ const fs_1 = __importDefault(require("fs"));
 const os_1 = __importDefault(require("os"));
 const path_1 = __importDefault(require("path"));
 const chalk_1 = require("../chalk");
+const config_1 = require("../config");
 const get_cli_options_1 = require("../get-cli-options");
 const get_composition_with_dimension_override_1 = require("../get-composition-with-dimension-override");
 const get_filename_1 = require("../get-filename");
+const get_final_output_codec_1 = require("../get-final-output-codec");
 const get_render_media_options_1 = require("../get-render-media-options");
 const image_formats_1 = require("../image-formats");
 const log_1 = require("../log");
+const parse_command_line_1 = require("../parse-command-line");
 const progress_bar_1 = require("../progress-bar");
 const setup_cache_1 = require("../setup-cache");
 const truthy_1 = require("../truthy");
 const user_passed_output_location_1 = require("../user-passed-output-location");
-const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable, ffprobeExecutable, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, inputProps, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, configFileImageFormat, outputLocationFromUI, quality, onProgress, addCleanupCallback, }) => {
+const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable, ffprobeExecutable, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, inputProps, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, configFileImageFormat, outputLocationFromUI, quality, onProgress, addCleanupCallback, uiCodec, uiImageFormat, }) => {
+    var _a;
     const downloads = [];
     const downloadMap = renderer_1.RenderInternals.makeDownloadMap();
     addCleanupCallback(() => renderer_1.RenderInternals.cleanDownloadMap(downloadMap));
@@ -90,10 +94,12 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
         args: remainingArgs,
         compositionIdFromUi,
     });
-    // TODO: Should use codec from UI if explicitly specified
-    const { codec, reason: codecReason } = (0, get_cli_options_1.getFinalCodec)({
+    const { codec, reason: codecReason } = (0, get_final_output_codec_1.getFinalOutputCodec)({
+        cliFlag: parse_command_line_1.parsedCli.codec,
+        configFile: (_a = config_1.ConfigInternals.getOutputCodecOrUndefined()) !== null && _a !== void 0 ? _a : null,
         downloadName: null,
         outName: (0, user_passed_output_location_1.getUserPassedOutputLocation)(argsAfterComposition),
+        uiCodec,
     });
     (0, get_cli_options_1.validateFfmepgCanUseCodec)(codec, remotionRoot);
     renderer_1.RenderInternals.validateEvenDimensionsWithCodec({
@@ -159,8 +165,11 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
         onProgress({ progress, message });
         return renderProgress.update(output);
     };
-    // TODO: Should take the one from the UI instead
-    const imageFormat = (0, image_formats_1.getImageFormat)(shouldOutputImageSequence ? undefined : codec, configFileImageFormat);
+    const imageFormat = (0, image_formats_1.getImageFormat)({
+        codec: shouldOutputImageSequence ? undefined : codec,
+        configFileImageFormat,
+        uiImageFormat,
+    });
     if (shouldOutputImageSequence) {
         fs_1.default.mkdirSync(absoluteOutputFile, {
             recursive: true,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.3.25",
+	"version": "3.3.26",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -22,16 +22,16 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.3.25",
-		"@remotion/media-utils": "3.3.25",
-		"@remotion/player": "3.3.25",
-		"@remotion/renderer": "3.3.25",
+		"@remotion/bundler": "3.3.26",
+		"@remotion/media-utils": "3.3.26",
+		"@remotion/player": "3.3.26",
+		"@remotion/renderer": "3.3.26",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
 		"prompts": "2.4.1",
-		"remotion": "3.3.25",
+		"remotion": "3.3.26",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -44,8 +44,8 @@
 		"@types/minimist": "^1.2.2",
 		"@types/node": "^16.7.5",
 		"@types/prompts": "^2.4.1",
-		"@types/react": "18.0.23",
-		"@types/react-dom": "18.0.0",
+		"@types/react": "18.0.26",
+		"@types/react-dom": "18.0.10",
 		"@types/semver": "^7.3.4",
 		"@types/webpack-env": "^1.16.0",
 		"@typescript-eslint/eslint-plugin": "5.18.0",
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "48e46dd2ede8fe903bf0139cebd6f546d7f2b5e0"
+	"gitHead": "8efe8771f7c2b1d22bd50e8c81cc37ae054dfae9"
 }