@remotion/cli 3.3.76 → 3.3.77

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderErrorModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const make_retry_payload_1 = require("../../../preview-server/render-queue/make-retry-payload");
+const modals_1 = require("../../state/modals");
+const layout_1 = require("../layout");
+const ModalContainer_1 = require("../ModalContainer");
+const ModalHeader_1 = require("../ModalHeader");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("../RenderQueue/actions");
+const container = {
+    padding: 20,
+    maxWidth: 1200,
+    paddingTop: 0,
+};
+const codeBlock = {
+    backgroundColor: 'black',
+    whiteSpace: 'pre',
+    padding: 12,
+    borderRadius: 4,
+    fontFamily: 'monospace',
+    overflow: 'auto',
+    maxHeight: 300,
+};
+const spacer = {
+    height: layout_1.SPACING_UNIT,
+    width: layout_1.SPACING_UNIT,
+};
+const buttonRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+};
+const RenderErrorModal = ({ job }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onQuit = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const onRetry = (0, react_1.useCallback)(() => {
+        const retryPayload = (0, make_retry_payload_1.makeRetryPayload)(job);
+        setSelectedModal(retryPayload);
+    }, [job, setSelectedModal]);
+    const onClickOnRemove = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+        (0, actions_1.removeRenderJob)(job).catch((err) => {
+            var _a;
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                content: 'Failed to remove render job: ' + err.message,
+                created: Date.now(),
+                duration: 2000,
+                id: String(Math.random()),
+            });
+            console.log(err);
+        });
+    }, [job, setSelectedModal]);
+    if (job.status !== 'failed') {
+        throw new Error('should not have rendered this modal');
+    }
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${job.compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "The render failed because of the following error:" }), (0, jsx_runtime_1.jsx)("div", { style: codeBlock, children: job.error.stack }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: buttonRow, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, children: "Retry" }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onQuit, children: "Close" })] })] })] }));
+};
+exports.RenderErrorModal = RenderErrorModal;

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

@@ -0,0 +1,28 @@
+import type { Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import React from 'react';
+import type { RenderType } from './RenderModalAdvanced';
+export declare const RenderModal: React.FC<{
+    compositionId: string;
+    initialFrame: number;
+    initialVideoImageFormat: VideoImageFormat;
+    initialStillImageFormat: StillImageFormat;
+    initialQuality: number;
+    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;
+}>;

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

@@ -0,0 +1,484 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModal = 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 Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const audio_1 = require("../../icons/audio");
+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 modals_1 = require("../../state/modals");
+const layout_1 = require("../layout");
+const ModalContainer_1 = require("../ModalContainer");
+const ModalHeader_1 = require("../ModalHeader");
+const actions_1 = require("../RenderQueue/actions");
+const SegmentedControl_1 = require("../SegmentedControl");
+const SidebarContent_1 = require("../SidebarContent");
+const Tabs_1 = require("../Tabs");
+const CrfSetting_1 = require("./CrfSetting");
+const RenderModalAdvanced_1 = require("./RenderModalAdvanced");
+const RenderModalAudio_1 = require("./RenderModalAudio");
+const RenderModalBasic_1 = require("./RenderModalBasic");
+const RenderModalGif_1 = require("./RenderModalGif");
+const RenderModalPicture_1 = require("./RenderModalPicture");
+const initialState = { type: 'idle' };
+const reducer = (state, action) => {
+    if (action.type === 'start') {
+        return {
+            type: 'load',
+        };
+    }
+    if (action.type === 'fail') {
+        return {
+            type: 'error',
+        };
+    }
+    if (action.type === 'succeed') {
+        return {
+            type: 'success',
+        };
+    }
+    return state;
+};
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: '12px 16px',
+    width: '100%',
+    borderBottom: '1px solid black',
+};
+const scrollPanel = {
+    minHeight: '35vh',
+    maxHeight: '50vh',
+    overflow: 'auto',
+    minWidth: 650,
+};
+const horizontalLayout = {
+    display: 'flex',
+    flexDirection: 'row',
+};
+const leftSidebar = {
+    padding: 12,
+};
+const horizontalTab = {
+    width: 250,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    textAlign: 'left',
+    fontSize: 16,
+    fontWeight: 'bold',
+    paddingLeft: 15,
+    paddingTop: 12,
+    paddingBottom: 12,
+};
+const iconContainer = {
+    width: 20,
+    height: 20,
+    marginRight: 15,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const icon = {
+    color: 'currentcolor',
+    height: 20,
+};
+const buttonStyle = {
+    backgroundColor: 'var(--blue)',
+    color: 'white',
+};
+const flexer = {
+    flex: 1,
+};
+const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialAudioCodec, initialVideoCodec, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onQuit = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const isMounted = (0, react_1.useRef)(true);
+    const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
+    const [unclampedFrame, setFrame] = (0, react_1.useState)(() => initialFrame);
+    const [stillImageFormat, setStillImageFormat] = (0, react_1.useState)(() => initialStillImageFormat);
+    const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)(() => initialVideoImageFormat);
+    const [concurrency, setConcurrency] = (0, react_1.useState)(() => initialConcurrency);
+    const [videoCodec, setVideoSpecificalCodec] = (0, react_1.useState)(() => initialVideoCodec);
+    // TODO replace hardcoded initial codec with derived one
+    const [customAudioCodec, setCustomAudioCodec] = (0, react_1.useState)(null);
+    const [audioCodec, setAudioSpecificalCodec] = (0, react_1.useState)(() => initialAudioCodec);
+    const [mutedState, setMuted] = (0, react_1.useState)(() => initialMuted);
+    const [enforceAudioTrackState, setEnforceAudioTrackState] = (0, react_1.useState)(() => initialEnforceAudioTrack);
+    const [renderMode, setRenderModeState] = (0, react_1.useState)(initialRenderType);
+    const [quality, setQuality] = (0, react_1.useState)(() => initialQuality);
+    const [scale, setScale] = (0, react_1.useState)(() => initialScale);
+    const [verbose, setVerboseLogging] = (0, react_1.useState)(() => initialVerbose);
+    const [outName, setOutName] = (0, react_1.useState)(() => initialOutName);
+    const [endFrameOrNull, setEndFrame] = (0, react_1.useState)(() => null);
+    const [startFrameOrNull, setStartFrame] = (0, react_1.useState)(() => null);
+    const [proResProfileSetting, setProResProfile] = (0, react_1.useState)(() => initialProResProfile);
+    const [pixelFormat, setPixelFormat] = (0, react_1.useState)(() => initialPixelFormat);
+    const [qualityControlType, setQualityControl] = (0, react_1.useState)(() => initialVideoBitrate === null ? 'crf' : 'bitrate');
+    const [shouldHaveCustomTargetAudioBitrate, setShouldHaveCustomTargetAudioBitrate,] = (0, react_1.useState)(() => initialAudioBitrate !== null);
+    const [customTargetAudioBitrate, setCustomTargetAudioBitrateValue] = (0, react_1.useState)(() => initialAudioBitrate !== null && initialAudioBitrate !== void 0 ? initialAudioBitrate : '256K');
+    const [customTargetVideoBitrate, setCustomTargetVideoBitrateValue] = (0, react_1.useState)(() => initialVideoBitrate !== null && initialVideoBitrate !== void 0 ? initialVideoBitrate : '1M');
+    const [limitNumberOfGifLoops, setLimitNumberOfGifLoops] = (0, react_1.useState)(() => initialNumberOfGifLoops !== null);
+    const [numberOfGifLoopsSetting, setNumberOfGifLoopsSetting] = (0, react_1.useState)(() => initialNumberOfGifLoops !== null && initialNumberOfGifLoops !== void 0 ? initialNumberOfGifLoops : 1);
+    // TODO: Allow to modify
+    const [delayRenderTimeout] = (0, react_1.useState)(() => initialDelayRenderTimeout);
+    const codec = (0, react_1.useMemo)(() => {
+        if (renderMode === 'audio') {
+            return audioCodec;
+        }
+        return videoCodec;
+    }, [audioCodec, renderMode, videoCodec]);
+    const numberOfGifLoops = (0, react_1.useMemo)(() => {
+        if (codec === 'gif' && limitNumberOfGifLoops) {
+            return numberOfGifLoopsSetting;
+        }
+        return null;
+    }, [codec, limitNumberOfGifLoops, numberOfGifLoopsSetting]);
+    const audioBitrate = (0, react_1.useMemo)(() => {
+        if (shouldHaveCustomTargetAudioBitrate) {
+            return customTargetAudioBitrate;
+        }
+        return null;
+    }, [customTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate]);
+    const videoBitrate = (0, react_1.useMemo)(() => {
+        if (qualityControlType === 'bitrate') {
+            return customTargetVideoBitrate;
+        }
+        return null;
+    }, [customTargetVideoBitrate, qualityControlType]);
+    const { crf, maxCrf, minCrf, setCrf, shouldDisplayOption: shouldDisplayCrfOption, } = (0, CrfSetting_1.useCrfState)(codec);
+    const dispatchIfMounted = (0, react_1.useCallback)((payload) => {
+        if (isMounted.current === false)
+            return;
+        dispatch(payload);
+    }, []);
+    const muted = (0, react_1.useMemo)(() => {
+        if (renderMode === 'video') {
+            return mutedState;
+        }
+        return false;
+    }, [mutedState, renderMode]);
+    const enforceAudioTrack = (0, react_1.useMemo)(() => {
+        if (renderMode === 'video') {
+            return enforceAudioTrackState;
+        }
+        return false;
+    }, [enforceAudioTrackState, renderMode]);
+    const proResProfile = (0, react_1.useMemo)(() => {
+        if (renderMode === 'video' && codec === 'prores') {
+            return proResProfileSetting;
+        }
+        return null;
+    }, [codec, proResProfileSetting, renderMode]);
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const currentComposition = (0, react_1.useMemo)(() => {
+        for (const composition of compositions) {
+            if (composition.id === compositionId) {
+                return composition;
+            }
+        }
+        return null;
+    }, [compositionId, compositions]);
+    if (currentComposition === null) {
+        throw new Error('This composition does not exist');
+    }
+    const endFrame = (0, react_1.useMemo)(() => {
+        if (endFrameOrNull === null) {
+            return currentComposition.durationInFrames - 1;
+        }
+        return Math.max(0, Math.min(currentComposition.durationInFrames - 1, endFrameOrNull));
+    }, [currentComposition.durationInFrames, endFrameOrNull]);
+    const startFrame = (0, react_1.useMemo)(() => {
+        if (startFrameOrNull === null) {
+            return 0;
+        }
+        return Math.max(0, Math.min(endFrame - 1, startFrameOrNull));
+    }, [endFrame, startFrameOrNull]);
+    const frame = (0, react_1.useMemo)(() => {
+        const parsed = Math.floor(unclampedFrame);
+        return Math.max(0, Math.min(currentComposition.durationInFrames - 1, parsed));
+    }, [currentComposition.durationInFrames, unclampedFrame]);
+    const getStringBeforeSuffix = (0, react_1.useCallback)((fileName) => {
+        const dotPos = fileName.lastIndexOf('.');
+        const bitBeforeDot = fileName.substring(0, dotPos);
+        return bitBeforeDot;
+    }, []);
+    const deriveFinalAudioCodec = (0, react_1.useCallback)((passedVideoCodec, passedAudioCodec) => {
+        if (passedAudioCodec !== null &&
+            client_1.BrowserSafeApis.supportedAudioCodecs[passedVideoCodec].includes(passedAudioCodec)) {
+            return passedAudioCodec;
+        }
+        return client_1.BrowserSafeApis.defaultAudioCodecs[passedVideoCodec].compressed;
+    }, []);
+    const setDefaultOutName = (0, react_1.useCallback)((options) => {
+        if (options.type === 'still') {
+            setOutName((prev) => {
+                const newFileName = getStringBeforeSuffix(prev) + '.' + options.imageFormat;
+                return newFileName;
+            });
+        }
+        else {
+            setOutName((prev) => {
+                const codecSuffix = client_1.BrowserSafeApis.getFileExtensionFromCodec(options.codec, deriveFinalAudioCodec(options.codec, options.audioCodec) // What happens for null?
+                );
+                const newFileName = getStringBeforeSuffix(prev) + '.' + codecSuffix;
+                return newFileName;
+            });
+        }
+    }, [deriveFinalAudioCodec, getStringBeforeSuffix]);
+    const setAudioCodec = (0, react_1.useCallback)((newAudioCodec) => {
+        setCustomAudioCodec(newAudioCodec);
+        setDefaultOutName({
+            type: 'render',
+            codec: videoCodec,
+            audioCodec: newAudioCodec,
+        });
+    }, [setDefaultOutName, videoCodec]);
+    const setCodec = (0, react_1.useCallback)((newCodec) => {
+        if (renderMode === 'audio') {
+            setAudioSpecificalCodec(newCodec);
+        }
+        else {
+            setVideoSpecificalCodec(newCodec);
+        }
+        // TODO: Audio codec is not implemented and hardcoded
+        setDefaultOutName({
+            type: 'render',
+            codec: newCodec,
+            audioCodec: deriveFinalAudioCodec(newCodec, customAudioCodec),
+        });
+    }, [customAudioCodec, deriveFinalAudioCodec, renderMode, setDefaultOutName]);
+    const setStillFormat = (0, react_1.useCallback)((format) => {
+        setStillImageFormat(format);
+        setDefaultOutName({ type: 'still', imageFormat: format });
+    }, [setDefaultOutName]);
+    const onClickStill = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = SidebarContent_1.leftSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
+        dispatchIfMounted({ type: 'start' });
+        (0, actions_1.addStillRenderJob)({
+            compositionId,
+            outName,
+            imageFormat: stillImageFormat,
+            quality: stillImageFormat === 'jpeg' ? quality : null,
+            frame,
+            scale,
+            verbose,
+        })
+            .then(() => {
+            dispatchIfMounted({ type: 'succeed' });
+            setSelectedModal(null);
+        })
+            .catch(() => {
+            dispatchIfMounted({ type: 'fail' });
+        });
+    }, [
+        compositionId,
+        dispatchIfMounted,
+        frame,
+        stillImageFormat,
+        outName,
+        quality,
+        scale,
+        setSelectedModal,
+        verbose,
+    ]);
+    const [everyNthFrameSetting, setEveryNthFrameSetting] = (0, react_1.useState)(() => initialEveryNthFrame);
+    const everyNthFrame = (0, react_1.useMemo)(() => {
+        if (codec === 'gif') {
+            return everyNthFrameSetting;
+        }
+        return 1;
+    }, [codec, everyNthFrameSetting]);
+    const onClickVideo = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = SidebarContent_1.leftSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
+        dispatchIfMounted({ type: 'start' });
+        (0, actions_1.addVideoRenderJob)({
+            compositionId,
+            outName,
+            imageFormat: videoImageFormat,
+            quality: stillImageFormat === 'jpeg' ? quality : null,
+            scale,
+            verbose,
+            codec,
+            concurrency,
+            crf: qualityControlType === 'crf' ? crf : null,
+            endFrame,
+            startFrame,
+            muted,
+            enforceAudioTrack,
+            proResProfile,
+            pixelFormat,
+            audioBitrate,
+            videoBitrate,
+            everyNthFrame,
+            numberOfGifLoops,
+            delayRenderTimeout,
+            audioCodec: deriveFinalAudioCodec(codec, customAudioCodec),
+        })
+            .then(() => {
+            dispatchIfMounted({ type: 'succeed' });
+            setSelectedModal(null);
+        })
+            .catch(() => {
+            dispatchIfMounted({ type: 'fail' });
+        });
+    }, [
+        dispatchIfMounted,
+        compositionId,
+        outName,
+        videoImageFormat,
+        stillImageFormat,
+        quality,
+        scale,
+        verbose,
+        codec,
+        concurrency,
+        qualityControlType,
+        crf,
+        endFrame,
+        startFrame,
+        muted,
+        enforceAudioTrack,
+        proResProfile,
+        pixelFormat,
+        audioBitrate,
+        videoBitrate,
+        everyNthFrame,
+        numberOfGifLoops,
+        delayRenderTimeout,
+        deriveFinalAudioCodec,
+        customAudioCodec,
+        setSelectedModal,
+    ]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const imageFormatOptions = (0, react_1.useMemo)(() => {
+        if (renderMode === 'still') {
+            return [
+                {
+                    label: 'PNG',
+                    onClick: () => setStillFormat('png'),
+                    key: 'png',
+                    selected: stillImageFormat === 'png',
+                },
+                {
+                    label: 'JPEG',
+                    onClick: () => setStillFormat('jpeg'),
+                    key: 'jpeg',
+                    selected: stillImageFormat === 'jpeg',
+                },
+                {
+                    label: 'PDF',
+                    onClick: () => setStillFormat('pdf'),
+                    key: 'pdf',
+                    selected: stillImageFormat === 'pdf',
+                },
+                {
+                    label: 'WebP',
+                    onClick: () => setStillFormat('webp'),
+                    key: 'webp',
+                    selected: stillImageFormat === 'webp',
+                },
+            ];
+        }
+        return [
+            {
+                label: 'PNG',
+                onClick: () => setVideoImageFormat('png'),
+                key: 'png',
+                selected: videoImageFormat === 'png',
+            },
+            {
+                label: 'JPEG',
+                onClick: () => setVideoImageFormat('jpeg'),
+                key: 'jpeg',
+                selected: videoImageFormat === 'jpeg',
+            },
+        ];
+    }, [stillImageFormat, renderMode, setStillFormat, videoImageFormat]);
+    const setRenderMode = (0, react_1.useCallback)((newRenderMode) => {
+        setRenderModeState(newRenderMode);
+        if (newRenderMode === 'audio') {
+            // TODO: Audio codec is not implemented but hardcoded
+            setDefaultOutName({
+                type: 'render',
+                codec: audioCodec,
+                audioCodec: 'pcm-16',
+            });
+        }
+        if (newRenderMode === 'video') {
+            // TODO: Audio codec is not implemented but hardcoded
+            setDefaultOutName({
+                type: 'render',
+                codec: videoCodec,
+                audioCodec: deriveFinalAudioCodec(videoCodec, customAudioCodec),
+            });
+        }
+        if (newRenderMode === 'still') {
+            setDefaultOutName({ type: 'still', imageFormat: stillImageFormat });
+        }
+    }, [
+        audioCodec,
+        customAudioCodec,
+        deriveFinalAudioCodec,
+        setDefaultOutName,
+        stillImageFormat,
+        videoCodec,
+    ]);
+    const renderTabOptions = (0, react_1.useMemo)(() => {
+        if ((currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.durationInFrames) < 2) {
+            return [
+                {
+                    label: 'Still',
+                    onClick: () => {
+                        setRenderMode('still');
+                    },
+                    key: 'still',
+                    selected: renderMode === 'still',
+                },
+            ];
+        }
+        return [
+            {
+                label: 'Still',
+                onClick: () => {
+                    setRenderMode('still');
+                },
+                key: 'still',
+                selected: renderMode === 'still',
+            },
+            {
+                label: 'Video',
+                onClick: () => {
+                    setRenderMode('video');
+                },
+                key: 'video',
+                selected: renderMode === 'video',
+            },
+            {
+                label: 'Audio',
+                onClick: () => {
+                    setRenderMode('audio');
+                },
+                key: 'audio',
+                selected: renderMode === 'audio',
+            },
+        ];
+    }, [currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.durationInFrames, renderMode, setRenderMode]);
+    const [tab, setTab] = (0, react_1.useState)('general');
+    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)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: renderMode === 'still' ? onClickStill : onClickVideo, disabled: state.type === 'load', style: buttonStyle, children: state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...' })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] }), renderMode === 'still' ? null : ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })), codec === 'gif' ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, (0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })] }), (0, jsx_runtime_1.jsxs)("div", { style: scrollPanel, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, customAudioCodec: deriveFinalAudioCodec(codec, customAudioCodec), currentComposition: currentComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setCodec: setCodec, setAudioCodec: setAudioCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, setPixelFormat: setPixelFormat, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, quality: quality, qualityControlType: qualityControlType, setQuality: setQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, shouldDisplayCrfOption: shouldDisplayCrfOption, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 })] })] })] }));
+};
+exports.RenderModal = RenderModal;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare type RenderType = 'still' | 'video' | 'audio';
+export declare const RenderModalAdvanced: React.FC<{
+    renderMode: RenderType;
+    minConcurrency: number;
+    maxConcurrency: number;
+    setConcurrency: React.Dispatch<React.SetStateAction<number>>;
+    concurrency: number;
+    setVerboseLogging: React.Dispatch<React.SetStateAction<boolean>>;
+    verbose: boolean;
+}>;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalAdvanced = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("./layout");
+const NumberSetting_1 = require("./NumberSetting");
+const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, }) => {
+    const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
+        setVerboseLogging(e.target.checked);
+    }, [setVerboseLogging]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minConcurrency, max: maxConcurrency, step: 1, name: "Concurrency", onValueChanged: setConcurrency, value: concurrency })), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: verbose, onChange: onVerboseLoggingChanged }) })] })] }));
+};
+exports.RenderModalAdvanced = RenderModalAdvanced;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { RenderType } from './RenderModalAdvanced';
+export declare const RenderModalAudio: React.FC<{
+    muted: boolean;
+    setMuted: React.Dispatch<React.SetStateAction<boolean>>;
+    renderMode: RenderType;
+    enforceAudioTrack: boolean;
+    setEnforceAudioTrackState: React.Dispatch<React.SetStateAction<boolean>>;
+    shouldHaveCustomTargetAudioBitrate: boolean;
+    setShouldHaveCustomTargetAudioBitrate: React.Dispatch<React.SetStateAction<boolean>>;
+    setCustomTargetAudioBitrateValue: React.Dispatch<React.SetStateAction<string>>;
+    customTargetAudioBitrate: string;
+}>;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalAudio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../Checkbox");
+const RemInput_1 = require("../NewComposition/RemInput");
+const EnforceAudioTrackSetting_1 = require("./EnforceAudioTrackSetting");
+const layout_1 = require("./layout");
+const MutedSetting_1 = require("./MutedSetting");
+const RenderModalHr_1 = require("./RenderModalHr");
+const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setEnforceAudioTrackState, setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate, setCustomTargetAudioBitrateValue, customTargetAudioBitrate, }) => {
+    const onShouldHaveTargetAudioBitrateChanged = (0, react_1.useCallback)((e) => {
+        setShouldHaveCustomTargetAudioBitrate(e.target.checked);
+    }, [setShouldHaveCustomTargetAudioBitrate]);
+    // TODO: When rendering, mp3 does not support the "crf" option. Ignoring.
+    const onTargetAudioBitrateChanged = (0, react_1.useCallback)((e) => {
+        setCustomTargetAudioBitrateValue(e.target.value);
+    }, [setCustomTargetAudioBitrateValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'video' && ((0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { muted: muted, setMuted: setMuted })), renderMode === 'video' && ((0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState })), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), renderMode === 'still' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Custom audio bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: shouldHaveCustomTargetAudioBitrate, onChange: onShouldHaveTargetAudioBitrateChanged }) })] })), shouldHaveCustomTargetAudioBitrate && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target audio bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetAudioBitrate, onChange: onTargetAudioBitrateChanged }) }) })] })) : null] }));
+};
+exports.RenderModalAudio = RenderModalAudio;