@remotion/cli 3.3.42 → 3.3.43

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.PreviewServerConnectionCtx).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.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialQuality: modalContextType.initialQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialAudioCodec: modalContextType.initialAudioCodec, initialVideoCodec: modalContextType.initialVideoCodec, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout })), 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.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialImageFormat: modalContextType.initialImageFormat, initialQuality: modalContextType.initialQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialCodec: modalContextType.initialCodec })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-error' && ((0, jsx_runtime_1.jsx)(RenderErrorModal_1.RenderErrorModal, { job: modalContextType.job })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

package/dist/editor/components/RenderButton.js

@@ -4,7 +4,6 @@ exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 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 render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
 const InlineAction_1 = require("./InlineAction");
@@ -19,44 +18,24 @@ const RenderButton = ({ composition, visible }) => {
     }, []);
     const isVideo = composition.durationInFrames > 1;
     const onClick = (0, react_1.useCallback)((e) => {
-        const defaults = window.remotion_renderDefaults;
-        if (!defaults) {
-            throw new Error('expected defaults');
-        }
+        var _a, _b, _c, _d, _e;
         e.stopPropagation();
-        const { initialAudioCodec, initialRenderType, initialVideoCodec } = (0, get_default_video_contexts_1.getDefaultCodecs)({
-            defaultCodec: defaults.codec,
-            isStill: !isVideo,
-        });
         setSelectedModal({
             type: 'render',
             compositionId: composition.id,
             initialFrame: 0,
-            initialVideoImageFormat: defaults.videoImageFormat,
-            initialStillImageFormat: defaults.stillImageFormat,
-            initialQuality: defaults.quality,
-            initialScale: defaults.scale,
-            initialVerbose: defaults.logLevel === 'verbose',
+            initialImageFormat: isVideo ? 'jpeg' : 'png',
+            // TODO: Determine defaults from config file
+            initialQuality: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.quality) !== null && _b !== void 0 ? _b : 80,
+            initialScale: (_d = (_c = window.remotion_renderDefaults) === null || _c === void 0 ? void 0 : _c.scale) !== null && _d !== void 0 ? _d : 1,
+            initialVerbose: ((_e = window.remotion_renderDefaults) === null || _e === void 0 ? void 0 : _e.logLevel) === 'verbose',
             initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
                 compositionName: composition.id,
                 defaultExtension: isVideo ? 'mp4' : 'png',
                 type: 'asset',
             }),
-            initialAudioCodec,
-            initialRenderType,
-            initialVideoCodec,
-            initialConcurrency: defaults.concurrency,
-            maxConcurrency: defaults.maxConcurrency,
-            minConcurrency: defaults.minConcurrency,
-            initialMuted: defaults.muted,
-            initialEnforceAudioTrack: defaults.enforceAudioTrack,
-            initialProResProfile: defaults.proResProfile,
-            initialPixelFormat: defaults.pixelFormat,
-            initialAudioBitrate: defaults.audioBitrate,
-            initialVideoBitrate: defaults.videoBitrate,
-            initialEveryNthFrame: defaults.everyNthFrame,
-            initialNumberOfGifLoops: defaults.numberOfGifLoops,
-            initialDelayRenderTimeout: defaults.delayRenderTimeout,
+            initialRenderType: isVideo ? 'video' : 'still',
+            initialCodec: 'h264',
         });
     }, [composition.id, isVideo, setSelectedModal]);
     if (!visible) {

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

@@ -2,14 +2,14 @@
 import type { Codec } from '@remotion/renderer';
 export declare const useCrfState: (codec: Codec) => {
     crf: number;
-    setCrf: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setCrf: (updater: (prev: number) => number) => void;
     minCrf: number;
     maxCrf: number;
     shouldDisplayOption: boolean;
 };
 export declare const CrfSetting: React.FC<{
     crf: number;
-    setCrf: React.Dispatch<React.SetStateAction<number>>;
+    setCrf: (value: (prevVal: number) => number) => void;
     min: number;
     max: number;
 }>;

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

@@ -4,7 +4,9 @@ exports.CrfSetting = exports.useCrfState = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
-const NumberSetting_1 = require("./NumberSetting");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const RemInput_1 = require("../NewComposition/RemInput");
+const layout_1 = require("./layout");
 const getDefaultCrfState = () => {
     return client_1.BrowserSafeApis.validCodecs
         .map((c) => {
@@ -20,17 +22,16 @@ const getDefaultCrfState = () => {
 const useCrfState = (codec) => {
     const [state, setState] = (0, react_1.useState)(() => getDefaultCrfState());
     const range = client_1.BrowserSafeApis.getValidCrfRanges(codec);
-    const setCrf = (updater) => {
-        setState((q) => {
-            return {
-                ...q,
-                [codec]: typeof updater === 'number' ? updater : updater(q[codec]),
-            };
-        });
-    };
     return {
         crf: state[codec],
-        setCrf,
+        setCrf: (updater) => {
+            setState((q) => {
+                return {
+                    ...q,
+                    [codec]: updater(q[codec]),
+                };
+            });
+        },
         minCrf: range[0],
         maxCrf: range[1],
         shouldDisplayOption: range[0] !== range[1],
@@ -38,6 +39,18 @@ const useCrfState = (codec) => {
 };
 exports.useCrfState = useCrfState;
 const CrfSetting = ({ crf, setCrf, min, max }) => {
-    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: min, max: max, name: "CRF", onValueChanged: setCrf, value: crf, step: 1 }));
+    const onCrfSetDirectly = (0, react_1.useCallback)((newCrf) => {
+        setCrf(() => newCrf);
+    }, [setCrf]);
+    const onCrfChanged = (0, react_1.useCallback)((e) => {
+        setCrf((q) => {
+            const newCrf = parseFloat(e);
+            if (Number.isNaN(newCrf)) {
+                return q;
+            }
+            return Math.min(max, Math.max(newCrf, min));
+        });
+    }, [max, min, setCrf]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "CRF" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: crf, onTextChange: onCrfChanged, placeholder: `${min}-${max}`, onValueChange: onCrfSetDirectly, name: "crf", step: 1, min: min, max: max }) }) })] }));
 };
 exports.CrfSetting = CrfSetting;

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

@@ -1,28 +1,14 @@
-import type { Codec, PixelFormat, ProResProfile, StillImageFormat } from '@remotion/renderer';
+import type { Codec, StillImageFormat } from '@remotion/renderer';
 import React from 'react';
-import type { RenderType } from './RenderModalAdvanced';
+export declare type RenderType = 'still' | 'video';
 export declare const RenderModal: React.FC<{
     compositionId: string;
     initialFrame: number;
-    initialVideoImageFormat: StillImageFormat;
-    initialStillImageFormat: StillImageFormat;
-    initialQuality: number;
+    initialImageFormat: StillImageFormat;
+    initialQuality: number | null;
     initialScale: number;
     initialVerbose: boolean;
     initialOutName: string;
     initialRenderType: RenderType;
-    initialAudioCodec: Codec;
-    initialVideoCodec: Codec;
-    initialConcurrency: number;
-    minConcurrency: number;
-    maxConcurrency: number;
-    initialMuted: boolean;
-    initialEnforceAudioTrack: boolean;
-    initialProResProfile: ProResProfile;
-    initialPixelFormat: PixelFormat;
-    initialVideoBitrate: string | null;
-    initialAudioBitrate: string | null;
-    initialEveryNthFrame: number;
-    initialNumberOfGifLoops: number | null;
-    initialDelayRenderTimeout: number;
+    initialCodec: Codec;
 }>;