@remotion/studio 4.0.395 → 4.0.397

package/dist/components/Modals.js

@@ -23,7 +23,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && ((0, jsx_runtime_1.jsx)(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && ((0, jsx_runtime_1.jsx)(WebRenderModal_1.WebRenderModalWithLoader, { type: "web-render", initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && ((0, jsx_runtime_1.jsx)(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && ((0, jsx_runtime_1.jsx)(WebRenderModal_1.WebRenderModalWithLoader, { type: "web-render", initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, initialLogLevel: modalContextType.initialLogLevel })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'server-render' && ((0, jsx_runtime_1.jsx)(ServerRenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })), modalContextType &&
                 canRender &&

package/dist/components/PreviewToolbar.js

@@ -8,7 +8,7 @@ const check_fullscreen_support_1 = require("../helpers/check-fullscreen-support"
 const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const mobile_layout_1 = require("../helpers/mobile-layout");
-const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
+const should_show_render_button_1 = require("../helpers/should-show-render-button");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const loop_1 = require("../state/loop");
 const CheckboardToggle_1 = require("./CheckboardToggle");
@@ -24,7 +24,6 @@ const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
-const TriggerWebRender_1 = require("./WebRender/TriggerWebRender");
 const layout_1 = require("./layout");
 const container = {
     display: 'flex',
@@ -134,6 +133,6 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
             };
         }
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: previewToolbarRef, style: isMobileLayout ? mobileContainer : container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { ref: leftScrollIndicatorRef, style: scrollIndicatorLeft }), isMobileLayout ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 })] })) : null, (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isMobileLayout && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), !isMobileLayout && (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), show_browser_rendering_1.SHOW_BROWSER_RENDERING ? (0, jsx_runtime_1.jsx)(TriggerWebRender_1.TriggerWebRender, {}) : null, readOnlyStudio ? null : (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), (0, jsx_runtime_1.jsx)("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: previewToolbarRef, style: isMobileLayout ? mobileContainer : container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { ref: leftScrollIndicatorRef, style: scrollIndicatorLeft }), isMobileLayout ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 })] })) : null, (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isMobileLayout && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), !isMobileLayout && (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, should_show_render_button_1.shouldShowRenderButton)(readOnlyStudio) ? ((0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), (0, jsx_runtime_1.jsx)("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/components/RenderButton.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
-export declare const RenderButton: React.FC;
+export type RenderType = 'server-render' | 'client-render';
+export declare const RenderButton: React.FC<{
+    readonly readOnlyStudio: boolean;
+}>;

package/dist/components/RenderButton.js

@@ -1,29 +1,107 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const caret_1 = require("../icons/caret");
 const render_1 = require("../icons/render");
 const in_out_1 = require("../state/in-out");
 const modals_1 = require("../state/modals");
-const Button_1 = require("./Button");
+const z_index_1 = require("../state/z-index");
+const is_menu_item_1 = require("./Menu/is-menu-item");
+const portals_1 = require("./Menu/portals");
+const styles_1 = require("./Menu/styles");
+const MenuContent_1 = require("./NewComposition/MenuContent");
 const layout_1 = require("./layout");
-const button = {
+const splitButtonContainer = {
+    display: 'inline-flex',
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    borderRadius: 4,
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    overflow: 'hidden',
+};
+const mainButtonStyle = {
     paddingLeft: 7,
     paddingRight: 7,
     paddingTop: 7,
     paddingBottom: 7,
+    background: 'transparent',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: 14,
+    fontFamily: 'inherit',
+};
+const dividerStyle = {
+    width: 1,
+    backgroundColor: colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    alignSelf: 'stretch',
+};
+const dropdownTriggerStyle = {
+    paddingLeft: 6,
+    paddingRight: 6,
+    paddingTop: 7,
+    paddingBottom: 7,
+    background: 'transparent',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+};
+const mainButtonContent = {
+    paddingLeft: 4,
+    paddingRight: 6,
 };
 const label = {
     fontSize: 14,
 };
-const RenderButton = () => {
+const RENDER_TYPE_STORAGE_KEY = 'remotion.renderType';
+const getInitialRenderType = (readOnlyStudio) => {
+    if (!show_browser_rendering_1.SHOW_BROWSER_RENDERING) {
+        return 'server-render';
+    }
+    if (readOnlyStudio) {
+        return 'client-render';
+    }
+    try {
+        const stored = localStorage.getItem(RENDER_TYPE_STORAGE_KEY);
+        if (stored === 'server-render' || stored === 'client-render') {
+            return stored;
+        }
+    }
+    catch (_a) {
+        // localStorage might not be available
+    }
+    return 'server-render';
+};
+const RenderButton = ({ readOnlyStudio, }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const [renderType, setRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
+    const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
+    const dropdownRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
+    const size = player_1.PlayerInternals.useElementSize(dropdownRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
@@ -41,7 +119,7 @@ const RenderButton = () => {
     const video = remotion_1.Internals.useVideo();
     const getCurrentFrame = player_1.PlayerInternals.useFrameImperative();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const onClick = (0, react_1.useCallback)(() => {
+    const openServerRenderModal = (0, react_1.useCallback)(() => {
         var _a, _b, _c;
         if (!video) {
             return null;
@@ -101,9 +179,178 @@ const RenderButton = () => {
             renderDefaults: defaults,
         });
     }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
+    const openClientRenderModal = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!video) {
+            return null;
+        }
+        const defaults = window.remotion_renderDefaults;
+        if (!defaults) {
+            throw new TypeError('Expected defaults');
+        }
+        setSelectedModal({
+            type: 'web-render',
+            compositionId: video.id,
+            initialFrame: getCurrentFrame(),
+            defaultProps: (_a = props[video.id]) !== null && _a !== void 0 ? _a : video.defaultProps,
+            inFrameMark: inFrame,
+            outFrameMark: outFrame,
+            initialLogLevel: defaults.logLevel,
+        });
+    }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
+    const onClick = (0, react_1.useCallback)(() => {
+        if (!show_browser_rendering_1.SHOW_BROWSER_RENDERING || renderType === 'server-render') {
+            openServerRenderModal();
+        }
+        else {
+            openClientRenderModal();
+        }
+    }, [renderType, openServerRenderModal, openClientRenderModal]);
+    const onHideDropdown = (0, react_1.useCallback)(() => {
+        setDropdownOpened(false);
+    }, []);
+    const handleRenderTypeChange = (0, react_1.useCallback)((newType) => {
+        setRenderType(newType);
+        try {
+            localStorage.setItem(RENDER_TYPE_STORAGE_KEY, newType);
+        }
+        catch (_a) {
+            // localStorage might not be available
+        }
+        setDropdownOpened(false);
+        if (newType === 'server-render') {
+            openServerRenderModal();
+        }
+        else {
+            openClientRenderModal();
+        }
+    }, [openServerRenderModal, openClientRenderModal]);
+    const dropdownValues = (0, react_1.useMemo)(() => {
+        return [
+            {
+                type: 'item',
+                id: 'server-render',
+                label: 'Server-side render',
+                value: 'server-render',
+                onClick: () => handleRenderTypeChange('server-render'),
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            },
+            {
+                type: 'item',
+                id: 'client-render',
+                label: 'Client-side render',
+                value: 'client-render',
+                onClick: () => handleRenderTypeChange('client-render'),
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            },
+        ];
+    }, [handleRenderTypeChange]);
+    (0, react_1.useEffect)(() => {
+        const { current } = dropdownRef;
+        if (!current) {
+            return;
+        }
+        const onPointerDown = () => {
+            return setDropdownOpened((o) => {
+                if (!o) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                }
+                return !o;
+            });
+        };
+        const onClickDropdown = (e) => {
+            e.stopPropagation();
+            const isKeyboardInitiated = e.detail === 0;
+            if (!isKeyboardInitiated) {
+                return;
+            }
+            return setDropdownOpened((o) => {
+                if (!o) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                    window.addEventListener('pointerup', (evt) => {
+                        if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
+                            setDropdownOpened(false);
+                        }
+                    }, {
+                        once: true,
+                    });
+                }
+                return !o;
+            });
+        };
+        current.addEventListener('pointerdown', onPointerDown);
+        current.addEventListener('click', onClickDropdown);
+        return () => {
+            current.removeEventListener('pointerdown', onPointerDown);
+            current.removeEventListener('click', onClickDropdown);
+        };
+    }, [refresh]);
+    const spaceToBottom = (0, react_1.useMemo)(() => {
+        const margin = 10;
+        if (size && dropdownOpened) {
+            return size.windowSize.height - (size.top + size.height) - margin;
+        }
+        return 0;
+    }, [dropdownOpened, size]);
+    const spaceToTop = (0, react_1.useMemo)(() => {
+        const margin = 10;
+        if (size && dropdownOpened) {
+            return size.top - margin;
+        }
+        return 0;
+    }, [dropdownOpened, size]);
+    const derivedMaxHeight = (0, react_1.useMemo)(() => {
+        return spaceToTop > spaceToBottom ? spaceToTop : spaceToBottom;
+    }, [spaceToBottom, spaceToTop]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (!dropdownOpened || !size) {
+            return null;
+        }
+        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
+        return {
+            ...(verticalLayout === 'top'
+                ? {
+                    ...styles_1.menuContainerTowardsBottom,
+                    top: size.top + size.height,
+                }
+                : {
+                    ...styles_1.menuContainerTowardsTop,
+                    bottom: size.windowSize.height - size.top,
+                }),
+            right: size.windowSize.width - size.left - size.width,
+        };
+    }, [dropdownOpened, size, spaceToBottom, spaceToTop]);
+    const containerStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...splitButtonContainer,
+            borderColor: colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            opacity: connectionStatus !== 'connected' ? 0.7 : 1,
+            cursor: connectionStatus !== 'connected' ? 'inherit' : 'pointer',
+        };
+    }, [connectionStatus]);
+    const renderLabel = renderType === 'server-render' ? 'Render' : 'Render on web';
+    const shouldShowDropdown = (0, react_1.useMemo)(() => {
+        // Server render is not available
+        if (readOnlyStudio) {
+            return false;
+        }
+        // client render is not available
+        if (!show_browser_rendering_1.SHOW_BROWSER_RENDERING) {
+            return false;
+        }
+        return true;
+    }, [readOnlyStudio]);
     if (!video) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { id: "render-modal-button", title: tooltip, onClick: onClick, buttonContainerStyle: button, disabled: connectionStatus !== 'connected', children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("span", { style: label, children: "Render" })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: connectionStatus !== 'connected' && renderType === 'server-render', onClick: openServerRenderModal, type: "button" }), ' ', (0, jsx_runtime_1.jsx)("button", { style: { display: 'none' }, id: "render-modal-button-client", disabled: connectionStatus !== 'connected' && renderType === 'server-render', onClick: openClientRenderModal, type: "button" }), (0, jsx_runtime_1.jsxs)("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", style: mainButtonStyle, onClick: onClick, id: "render-modal-button", disabled: connectionStatus !== 'connected' && renderType === 'server-render', children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", style: mainButtonContent, children: [(0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { fill: "currentcolor", svgProps: iconStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("span", { style: label, children: renderLabel })] }) }), shouldShowDropdown ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: dividerStyle }), (0, jsx_runtime_1.jsx)("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, disabled: connectionStatus !== 'connected', className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {}) })] })) : null] }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
 };
 exports.RenderButton = RenderButton;

package/dist/components/RenderModal/RenderModalBasic.js

@@ -8,7 +8,6 @@ const react_1 = require("react");
 const prores_labels_1 = require("../../helpers/prores-labels");
 const use_file_existence_1 = require("../../helpers/use-file-existence");
 const Checkmark_1 = require("../../icons/Checkmark");
-const Checkbox_1 = require("../Checkbox");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const RemInput_1 = require("../NewComposition/RemInput");
@@ -18,6 +17,7 @@ const FrameRangeSetting_1 = require("./FrameRangeSetting");
 const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const RenderModalOutputName_1 = require("./RenderModalOutputName");
 const human_readable_codec_1 = require("./human-readable-codec");
+const human_readable_loglevel_1 = require("./human-readable-loglevel");
 const layout_2 = require("./layout");
 const container = {
     flex: 1,
@@ -76,9 +76,21 @@ const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setV
     const onValueChange = (0, react_1.useCallback)((e) => {
         setOutName(e.target.value);
     }, [setOutName]);
-    const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
-        setVerboseLogging(e.target.checked ? 'verbose' : 'info');
-    }, [setVerboseLogging]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'still' || renderMode === 'sequence' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: videoCodecOptions, selectedId: codec, title: "Codec" }) })] })), renderMode === 'still' && resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: 'proResProfile', selectedId: proResProfile, values: proResProfileOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage, label: renderMode === 'sequence' ? 'Folder name' : 'Output name' }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Verbose logging ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: logLevel === 'verbose', onChange: onVerboseLoggingChanged, name: "verbose-logging" }) })] })] }));
+    const logLevelOptions = (0, react_1.useMemo)(() => {
+        return ['trace', 'verbose', 'info', 'warn', 'error'].map((level) => {
+            return {
+                label: (0, human_readable_loglevel_1.humanReadableLogLevel)(level),
+                onClick: () => setVerboseLogging(level),
+                leftItem: logLevel === level ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: level,
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: level,
+            };
+        });
+    }, [logLevel, setVerboseLogging]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'still' || renderMode === 'sequence' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: videoCodecOptions, selectedId: codec, title: "Codec" }) })] })), renderMode === 'still' && resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: 'proResProfile', selectedId: proResProfile, values: proResProfileOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage, label: renderMode === 'sequence' ? 'Folder name' : 'Output name' }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Log Level ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })] })] }));
 };
 exports.RenderModalBasic = RenderModalBasic;

package/dist/components/RenderModal/WebRenderModal.js

@@ -6,6 +6,7 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
+const audio_1 = require("../../icons/audio");
 const data_1 = require("../../icons/data");
 const file_1 = require("../../icons/file");
 const frame_1 = require("../../icons/frame");
@@ -20,6 +21,7 @@ const get_string_before_suffix_1 = require("./get-string-before-suffix");
 const render_modals_1 = require("./render-modals");
 const ResolveCompositionBeforeModal_1 = require("./ResolveCompositionBeforeModal");
 const WebRenderModalAdvanced_1 = require("./WebRenderModalAdvanced");
+const WebRenderModalAudio_1 = require("./WebRenderModalAudio");
 const WebRenderModalBasic_1 = require("./WebRenderModalBasic");
 const WebRenderModalPicture_1 = require("./WebRenderModalPicture");
 const invalidCharacters = ['?', '*', '+', ':', '%'];
@@ -70,17 +72,22 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 // TODO: Shortcut: Shift + R
 // TODO: Apply defaultCodec
 // TODO: Apply defaultOutName
-const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, }) => {
+const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, }) => {
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Should not be able to render without resolving comp first');
     }
     const { resolved: { result: resolvedComposition }, unresolved: unresolvedComposition, } = context;
-    const [renderMode, setRenderMode] = (0, react_1.useState)('video');
+    const [isVideo] = (0, react_1.useState)(() => {
+        return typeof resolvedComposition.durationInFrames === 'undefined'
+            ? true
+            : resolvedComposition.durationInFrames > 1;
+    });
+    const [renderMode, setRenderMode] = (0, react_1.useState)(isVideo ? 'video' : 'still');
     const [tab, setTab] = (0, react_1.useState)('general');
     const [imageFormat, setImageFormat] = (0, react_1.useState)('png');
     const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
-    const [logLevel, setLogLevel] = (0, react_1.useState)('info');
+    const [logLevel, setLogLevel] = (0, react_1.useState)(() => initialLogLevel);
     const [inputProps, setInputProps] = (0, react_1.useState)(() => defaultProps);
     const [delayRenderTimeout, setDelayRenderTimeout] = (0, react_1.useState)(30000);
     const [mediaCacheSizeInBytes, setMediaCacheSizeInBytes] = (0, react_1.useState)(null);
@@ -95,6 +102,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     const [endFrame, setEndFrame] = (0, react_1.useState)(() => outFrameMark !== null && outFrameMark !== void 0 ? outFrameMark : null);
     const [renderProgress, setRenderProgress] = (0, react_1.useState)(null);
     const [transparent, setTransparent] = (0, react_1.useState)(false);
+    const [muted, setMuted] = (0, react_1.useState)(false);
     const finalEndFrame = (0, react_1.useMemo)(() => {
         if (endFrame === null) {
             return resolvedComposition.durationInFrames - 1;
@@ -116,7 +124,11 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     const [initialOutName] = (0, react_1.useState)(() => {
         return (0, studio_shared_1.getDefaultOutLocation)({
             compositionName: resolvedComposition.id,
-            defaultExtension: container,
+            defaultExtension: renderMode === 'still'
+                ? imageFormat
+                : isVideo
+                    ? container
+                    : imageFormat,
             type: 'asset',
             compositionDefaultOutName: resolvedComposition.defaultOutName,
             clientSideRender: true,
@@ -235,7 +247,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         }
     }, [outName, imageFormat, renderMode, container]);
     const onRenderStill = (0, react_1.useCallback)(async () => {
-        const blob = await (0, web_renderer_1.renderStillOnWeb)({
+        const { blob } = await (0, web_renderer_1.renderStillOnWeb)({
             composition: {
                 component: unresolvedComposition.component,
                 width: resolvedComposition.width,
@@ -307,6 +319,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 setRenderProgress(progress);
             },
             transparent,
+            muted,
             outputTarget: 'web-fs',
         });
         setRenderProgress(null);
@@ -339,6 +352,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         resolvedComposition.fps,
         outName,
         transparent,
+        muted,
         resolvedComposition.defaultProps,
         resolvedComposition.id,
         unresolvedComposition.calculateMetadata,
@@ -353,7 +367,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     }, [renderMode, onRenderStill, onRenderVideo]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.outerModalStyle, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: onRender, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: [renderProgress
                                 ? `Rendering... ${renderProgress.renderedFrames}/${finalEndFrame}`
-                                : `Render ${renderMode}`, (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.leftSidebar, children: [(0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "General"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: render_modals_1.icon }) }), "Input Props"] }), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: render_modals_1.icon }) }), "Picture"] })) : null, (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "Advanced"] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, codec: codec, setCodec: setCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent })) : ((0, jsx_runtime_1.jsx)(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) })] })] }));
+                                : `Render ${renderMode}`, (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.leftSidebar, children: [(0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "General"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: render_modals_1.icon }) }), "Input Props"] }), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: render_modals_1.icon }) }), "Picture"] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: render_modals_1.icon }) }), "Audio"] })) : null, (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "Advanced"] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, codec: codec, setCodec: setCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAudio_1.WebRenderModalAudio, { muted: muted, setMuted: setMuted })) : ((0, jsx_runtime_1.jsx)(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) })] })] }));
 };
 const WebRenderModalWithLoader = (props) => {
     return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: props.compositionId, children: (0, jsx_runtime_1.jsx)(WebRenderModal, { ...props }) }) }));

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

@@ -0,0 +1,5 @@
+import type React from 'react';
+export declare const WebRenderModalAudio: React.FC<{
+    readonly muted: boolean;
+    readonly setMuted: React.Dispatch<React.SetStateAction<boolean>>;
+}>;

package/dist/components/RenderModal/WebRenderModalAudio.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebRenderModalAudio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const MutedSetting_1 = require("./MutedSetting");
+const container = {
+    flex: 1,
+    overflowY: 'auto',
+};
+const WebRenderModalAudio = ({ muted, setMuted }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: false, muted: muted, setMuted: setMuted }) }));
+};
+exports.WebRenderModalAudio = WebRenderModalAudio;

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -4,13 +4,13 @@ exports.WebRenderModalBasic = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkmark_1 = require("../../icons/Checkmark");
-const Checkbox_1 = require("../Checkbox");
 const layout_1 = require("../layout");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const RemInput_1 = require("../NewComposition/RemInput");
 const SegmentedControl_1 = require("../SegmentedControl");
 const FrameRangeSetting_1 = require("./FrameRangeSetting");
+const human_readable_loglevel_1 = require("./human-readable-loglevel");
 const layout_2 = require("./layout");
 const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const RenderModalOutputName_1 = require("./RenderModalOutputName");
@@ -40,6 +40,21 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
             },
         ];
     }, [imageFormat, setStillFormat]);
+    const logLevelOptions = (0, react_1.useMemo)(() => {
+        return ['trace', 'verbose', 'info', 'warn', 'error'].map((level) => {
+            return {
+                label: (0, human_readable_loglevel_1.humanReadableLogLevel)(level),
+                onClick: () => setLogLevel(level),
+                leftItem: logLevel === level ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: level,
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: level,
+            };
+        });
+    }, [logLevel, setLogLevel]);
     const containerOptions = (0, react_1.useMemo)(() => {
         return [
             {
@@ -125,9 +140,6 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
             },
         ];
     }, [codec, setCodec]);
-    const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
-        setLogLevel(e.target.checked ? 'verbose' : 'info');
-    }, [setLogLevel]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] }), resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Container" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: codecOptions, selectedId: codec, title: "Codec" }) })] }), (0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })] })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: "Download name" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Verbose logging ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: logLevel === 'verbose', onChange: onVerboseLoggingChanged, name: "verbose-logging" }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] }), resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Container" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: codecOptions, selectedId: codec, title: "Codec" }) })] }), (0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })] })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: "Download name" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Log Level ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })] })] }));
 };
 exports.WebRenderModalBasic = WebRenderModalBasic;

package/dist/components/RenderModal/human-readable-loglevel.d.ts

@@ -0,0 +1,2 @@
+import type { LogLevel } from 'remotion';
+export declare const humanReadableLogLevel: (logLevel: LogLevel) => "Trace" | "Verbose" | "Info" | "Warn" | "Error";