@remotion/studio 4.0.396 → 4.0.397

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/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 = ['?', '*', '+', ':', '%'];
@@ -100,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;
@@ -316,6 +319,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 setRenderProgress(progress);
             },
             transparent,
+            muted,
             outputTarget: 'web-fs',
         });
         setRenderProgress(null);
@@ -348,6 +352,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         resolvedComposition.fps,
         outName,
         transparent,
+        muted,
         resolvedComposition.defaultProps,
         resolvedComposition.id,
         unresolvedComposition.calculateMetadata,
@@ -362,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;