@remotion/cli 3.3.78 → 3.3.79

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

@@ -1,488 +0,0 @@
-"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 render_modal_sections_1 = require("../../helpers/render-modal-sections");
-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, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialAudioCodec, }) => {
-    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 [videoCodecForVideoTab, setVideoCodecForVideoTab] = (0, react_1.useState)(() => initialVideoCodecForVideoTab);
-    const [userSelectedAudioCodec, setUserSelectedAudioCodec] = (0, react_1.useState)(() => initialAudioCodec);
-    const [videoCodecForAudioTab, setVideoCodecForAudioTab] = (0, react_1.useState)(() => initialVideoCodecForAudioTab);
-    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 [disallowParallelEncoding, setDisallowParallelEncoding] = (0, react_1.useState)(false);
-    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);
-    const [delayRenderTimeout, setDelayRenderTimeout] = (0, react_1.useState)(() => initialDelayRenderTimeout);
-    const codec = (0, react_1.useMemo)(() => {
-        if (renderMode === 'audio') {
-            return videoCodecForAudioTab;
-        }
-        return videoCodecForVideoTab;
-    }, [videoCodecForAudioTab, renderMode, videoCodecForVideoTab]);
-    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));
-                const newFileName = getStringBeforeSuffix(prev) + '.' + codecSuffix;
-                return newFileName;
-            });
-        }
-    }, [deriveFinalAudioCodec, getStringBeforeSuffix]);
-    const setAudioCodec = (0, react_1.useCallback)((newAudioCodec) => {
-        setUserSelectedAudioCodec(newAudioCodec);
-        setDefaultOutName({
-            type: 'render',
-            codec: videoCodecForVideoTab,
-            audioCodec: newAudioCodec,
-        });
-    }, [setDefaultOutName, videoCodecForVideoTab]);
-    const setCodec = (0, react_1.useCallback)((newCodec) => {
-        if (renderMode === 'audio') {
-            setVideoCodecForAudioTab(newCodec);
-        }
-        else {
-            setVideoCodecForVideoTab(newCodec);
-        }
-        setDefaultOutName({
-            type: 'render',
-            codec: newCodec,
-            audioCodec: deriveFinalAudioCodec(newCodec, userSelectedAudioCodec),
-        });
-    }, [
-        userSelectedAudioCodec,
-        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 audioCodec = deriveFinalAudioCodec(codec, userSelectedAudioCodec);
-    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,
-            disallowParallelEncoding,
-        })
-            .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,
-        audioCodec,
-        disallowParallelEncoding,
-        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') {
-            setDefaultOutName({
-                type: 'render',
-                codec: videoCodecForAudioTab,
-                audioCodec: deriveFinalAudioCodec(videoCodecForAudioTab, userSelectedAudioCodec),
-            });
-        }
-        if (newRenderMode === 'video') {
-            setDefaultOutName({
-                type: 'render',
-                codec: videoCodecForVideoTab,
-                audioCodec: deriveFinalAudioCodec(videoCodecForVideoTab, userSelectedAudioCodec),
-            });
-        }
-        if (newRenderMode === 'still') {
-            setDefaultOutName({ type: 'still', imageFormat: stillImageFormat });
-        }
-    }, [
-        videoCodecForAudioTab,
-        userSelectedAudioCodec,
-        deriveFinalAudioCodec,
-        setDefaultOutName,
-        stillImageFormat,
-        videoCodecForVideoTab,
-    ]);
-    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, shownTabs } = (0, render_modal_sections_1.useRenderModalSections)(renderMode, codec);
-    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: [shownTabs.includes('general') ? ((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"] })) : null, shownTabs.includes('picture') ? ((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"] })) : null, shownTabs.includes('audio') ? ((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"] })) : null, shownTabs.includes('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, shownTabs.includes('advanced') ? ((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"] })) : null] }), (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, currentComposition: currentComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, 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, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, 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, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 })] })] })] }));
-};
-exports.RenderModal = RenderModal;

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

@@ -1,15 +0,0 @@
-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;
-    delayRenderTimeout: number;
-    setDelayRenderTimeout: React.Dispatch<React.SetStateAction<number>>;
-    disallowParallelEncoding: boolean;
-    setDisallowParallelEncoding: React.Dispatch<React.SetStateAction<boolean>>;
-}>;

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

@@ -1,22 +0,0 @@
-"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, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, }) => {
-    const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
-        setVerboseLogging(e.target.checked);
-    }, [setVerboseLogging]);
-    const onDisallowParallelEncodingChanged = (0, react_1.useCallback)((e) => {
-        setDisallowParallelEncoding(e.target.checked);
-    }, [setDisallowParallelEncoding]);
-    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", formatter: (w) => `${w}x`, onValueChanged: setConcurrency, value: concurrency })), (0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting
-            // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
-            , { 
-                // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
-                min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged }) })] }), (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

@@ -1,17 +0,0 @@
-import type { AudioCodec, Codec } from '@remotion/renderer';
-import React from '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;
-    audioCodec: AudioCodec;
-    setAudioCodec: (newAudioCodec: AudioCodec) => void;
-    codec: Codec;
-}>;

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

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderModalAudio = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const client_1 = require("@remotion/renderer/client");
-const react_1 = require("react");
-const Checkmark_1 = require("../../icons/Checkmark");
-const Checkbox_1 = require("../Checkbox");
-const ComboBox_1 = require("../NewComposition/ComboBox");
-const RemInput_1 = require("../NewComposition/RemInput");
-const EnforceAudioTrackSetting_1 = require("./EnforceAudioTrackSetting");
-const human_readable_audio_codecs_1 = require("./human-readable-audio-codecs");
-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, audioCodec, codec, setAudioCodec, }) => {
-    const onShouldHaveTargetAudioBitrateChanged = (0, react_1.useCallback)((e) => {
-        setShouldHaveCustomTargetAudioBitrate(e.target.checked);
-    }, [setShouldHaveCustomTargetAudioBitrate]);
-    const onTargetAudioBitrateChanged = (0, react_1.useCallback)((e) => {
-        setCustomTargetAudioBitrateValue(e.target.value);
-    }, [setCustomTargetAudioBitrateValue]);
-    const audioCodecOptions = (0, react_1.useCallback)((currentCodec) => {
-        return client_1.BrowserSafeApis.supportedAudioCodecs[currentCodec].map((audioCodecOption) => {
-            return {
-                label: (0, human_readable_audio_codecs_1.humanReadableAudioCodec)(audioCodecOption),
-                onClick: () => setAudioCodec(audioCodecOption),
-                key: audioCodecOption,
-                leftItem: codec === audioCodecOption ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                id: audioCodecOption,
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: audioCodecOption,
-            };
-        });
-    }, [codec, setAudioCodec]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'video' && audioCodecOptions(codec).length >= 2 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Audio Codec" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, title: "AudioCodec" }) })] })) : null, renderMode === 'video' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: enforceAudioTrack, muted: muted, setMuted: setMuted }), (0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, 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;

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

@@ -1,22 +0,0 @@
-import type { Codec, ProResProfile } from '@remotion/renderer';
-import React from 'react';
-import type { TComposition } from 'remotion';
-import type { SegmentedControlItem } from '../SegmentedControl';
-import type { RenderType } from './RenderModalAdvanced';
-export declare const RenderModalBasic: React.FC<{
-    renderMode: RenderType;
-    imageFormatOptions: SegmentedControlItem[];
-    codec: Codec;
-    setVideoCodec: (newCodec: Codec) => void;
-    outName: string;
-    proResProfile: ProResProfile | null;
-    setProResProfile: React.Dispatch<React.SetStateAction<ProResProfile>>;
-    frame: number;
-    setFrame: React.Dispatch<React.SetStateAction<number>>;
-    currentComposition: TComposition<unknown>;
-    setOutName: (value: React.SetStateAction<string>) => void;
-    setEndFrame: React.Dispatch<React.SetStateAction<number | null>>;
-    startFrame: number;
-    endFrame: number;
-    setStartFrame: React.Dispatch<React.SetStateAction<number | null>>;
-}>;