@remotion/studio 4.0.82 → 4.0.84

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.81 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.83 build /Users/jonathanburger/remotion/packages/studio
 > tsc -d
 

package/.turbo/turbo-lint.log

@@ -0,0 +1,10 @@
+
+> @remotion/studio@4.0.83 lint /Users/jonathanburger/remotion/packages/studio
+> eslint src --ext ts,tsx
+
+
+/Users/jonathanburger/remotion/packages/studio/src/error-overlay/react-overlay/utils/get-source-map.ts
+  54:1  warning  Unexpected 'todo' comment: 'TODO: Can import this from...'  no-warning-comments
+
+✖ 1 problem (0 errors, 1 warning)
+

package/dist/command.d.ts

@@ -0,0 +1,2 @@
+import type { LogLevel } from '@remotion/renderer';
+export declare const studioCommand: (remotionRoot: string, args: string[], logLevel: LogLevel) => Promise<void>;

package/dist/command.js

@@ -0,0 +1,157 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.studioCommand = void 0;
+const node_crypto_1 = __importDefault(require("node:crypto"));
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
+const better_opn_1 = require("../../cli/src/better-opn");
+const chalk_1 = require("../../cli/src/chalk");
+const config_1 = require("../../cli/src/config");
+const convert_entry_point_to_serve_url_1 = require("../../cli/src/convert-entry-point-to-serve-url");
+const entry_point_1 = require("../../cli/src/entry-point");
+const get_env_1 = require("../../cli/src/get-env");
+const get_input_props_1 = require("../../cli/src/get-input-props");
+const get_network_address_1 = require("../../cli/src/get-network-address");
+const log_1 = require("../../cli/src/log");
+const parse_command_line_1 = require("../../cli/src/parse-command-line");
+const get_absolute_public_dir_1 = require("../../cli/src/preview-server/get-absolute-public-dir");
+const live_events_1 = require("../../cli/src/preview-server/live-events");
+const public_folder_1 = require("../../cli/src/preview-server/public-folder");
+const start_server_1 = require("../../cli/src/preview-server/start-server");
+const server_ready_comment_1 = require("../../cli/src/server-ready-comment");
+const watch_root_file_1 = require("./watch-root-file");
+const noop = () => undefined;
+const getShouldOpenBrowser = () => {
+    var _a;
+    // Minimist quirk: Adding `--no-open` flag will result in {['no-open']: false, open: true}
+    // @ts-expect-error
+    if (parse_command_line_1.parsedCli.open === false) {
+        return {
+            shouldOpenBrowser: false,
+            reasonForBrowserDecision: '--no-open specified',
+        };
+    }
+    if (((_a = process.env.BROWSER) !== null && _a !== void 0 ? _a : '').toLowerCase() === 'none') {
+        return {
+            shouldOpenBrowser: false,
+            reasonForBrowserDecision: 'env BROWSER=none was set',
+        };
+    }
+    if (config_1.ConfigInternals.getShouldOpenBrowser() === false) {
+        return { shouldOpenBrowser: false, reasonForBrowserDecision: 'Config file' };
+    }
+    return { shouldOpenBrowser: true, reasonForBrowserDecision: 'default' };
+};
+const getPort = () => {
+    if (parse_command_line_1.parsedCli.port) {
+        return parse_command_line_1.parsedCli.port;
+    }
+    const serverPort = config_1.ConfigInternals.getStudioPort();
+    if (serverPort) {
+        return serverPort;
+    }
+    return null;
+};
+const studioCommand = async (remotionRoot, args, logLevel) => {
+    const { file, reason } = (0, entry_point_1.findEntryPoint)(args, remotionRoot, logLevel);
+    log_1.Log.verbose({ indent: false, logLevel }, 'Entry point:', file, 'reason:', reason);
+    if (!file) {
+        log_1.Log.error('No Remotion entrypoint was found. Specify an additional argument manually:');
+        log_1.Log.error('  npx remotion studio src/index.ts');
+        log_1.Log.error('See https://www.remotion.dev/docs/register-root for more information.');
+        process.exit(1);
+    }
+    const desiredPort = getPort();
+    const fullEntryPath = (0, convert_entry_point_to_serve_url_1.convertEntryPointToServeUrl)(file);
+    let inputProps = (0, get_input_props_1.getInputProps)((newProps) => {
+        (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+            inputProps = newProps;
+            listener.sendEventToClient({
+                type: 'new-input-props',
+                newProps,
+            });
+        });
+    }, logLevel);
+    let envVariables = (0, get_env_1.getEnvironmentVariables)((newEnvVariables) => {
+        (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+            envVariables = newEnvVariables;
+            listener.sendEventToClient({
+                type: 'new-env-variables',
+                newEnvVariables,
+            });
+        });
+    }, logLevel);
+    const publicDir = (0, get_absolute_public_dir_1.getAbsolutePublicDir)({
+        userPassedPublicDir: config_1.ConfigInternals.getPublicDir(),
+        remotionRoot,
+    });
+    const hash = node_crypto_1.default.randomBytes(6).toString('hex');
+    const outputHashPrefix = '/outputs-';
+    const outputHash = `${outputHashPrefix}${hash}`;
+    const staticHashPrefix = '/static-';
+    const staticHash = `${staticHashPrefix}${hash}`;
+    (0, public_folder_1.initPublicFolderWatch)({
+        publicDir,
+        remotionRoot,
+        onUpdate: () => {
+            (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+                const files = (0, public_folder_1.getFiles)();
+                listener.sendEventToClient({
+                    type: 'new-public-folder',
+                    files,
+                    folderExists: files.length > 0
+                        ? publicDir
+                        : (0, node_fs_1.existsSync)(publicDir)
+                            ? publicDir
+                            : null,
+                });
+            });
+        },
+        staticHash,
+    });
+    (0, watch_root_file_1.watchRootFile)(remotionRoot);
+    const { port, liveEventsServer } = await (0, start_server_1.startServer)({
+        entry: node_path_1.default.resolve(__dirname, 'previewEntry.js'),
+        userDefinedComponent: fullEntryPath,
+        getCurrentInputProps: () => inputProps,
+        getEnvVariables: () => envVariables,
+        port: desiredPort,
+        maxTimelineTracks: config_1.ConfigInternals.getMaxTimelineTracks(),
+        remotionRoot,
+        keyboardShortcutsEnabled: config_1.ConfigInternals.getKeyboardShortcutsEnabled(),
+        publicDir,
+        webpackOverride: config_1.ConfigInternals.getWebpackOverrideFn(),
+        poll: config_1.ConfigInternals.getWebpackPolling(),
+        userPassedPublicDir: config_1.ConfigInternals.getPublicDir(),
+        staticHash,
+        staticHashPrefix,
+        outputHash,
+        outputHashPrefix,
+        logLevel,
+    });
+    (0, live_events_1.setLiveEventsListener)(liveEventsServer);
+    const networkAddress = (0, get_network_address_1.getNetworkAddress)();
+    if (networkAddress) {
+        (0, server_ready_comment_1.setServerReadyComment)(`Local: ${chalk_1.chalk.underline(`http://localhost:${port}`)}, Network: ${chalk_1.chalk.underline(`http://${networkAddress}:${port}`)}`);
+    }
+    else {
+        (0, server_ready_comment_1.setServerReadyComment)(`http://localhost:${port}`);
+    }
+    (0, server_ready_comment_1.printServerReadyComment)('Server ready');
+    const { reasonForBrowserDecision, shouldOpenBrowser } = getShouldOpenBrowser();
+    if (shouldOpenBrowser) {
+        await (0, better_opn_1.openBrowser)({
+            url: `http://localhost:${port}`,
+            browserArgs: parse_command_line_1.parsedCli['browser-args'],
+            browserFlag: parse_command_line_1.parsedCli.browser,
+        });
+    }
+    else {
+        log_1.Log.verbose({ indent: false, logLevel }, `Not opening browser, reason: ${reasonForBrowserDecision}`);
+    }
+    await new Promise(noop);
+};
+exports.studioCommand = studioCommand;

package/dist/components/Modals.js

@@ -16,7 +16,7 @@ const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = () => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type === 'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, 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, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, 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, initialBeep: modalContextType.initialBeep, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

package/dist/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/NewComposition/RemInputTypeColor.d.ts

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/NewComposition/RemTextarea.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
     status: 'error' | 'warning' | 'ok';
 };
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/components/PlayBeepSound.d.ts

@@ -0,0 +1,2 @@
+declare const playBeepSound: (renderId: string) => Promise<void>;
+export default playBeepSound;

package/dist/components/PlayBeepSound.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const beeped = {};
+const playBeepSound = async (renderId) => {
+    if (beeped[renderId]) {
+        return;
+    }
+    beeped[renderId] = true;
+    const beepAudio = new Audio('/beep.wav');
+    try {
+        await beepAudio.play();
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error playing beep sound:', error);
+        throw error;
+    }
+};
+exports.default = playBeepSound;

package/dist/components/RenderButton.js

@@ -87,6 +87,7 @@ const RenderButton = () => {
             initialEncodingBufferSize: defaults.encodingBufferSize,
             initialEncodingMaxRate: defaults.encodingMaxRate,
             initialUserAgent: defaults.userAgent,
+            initialBeep: defaults.beepOnFinish,
         });
     }, [video, setSelectedModal, frame, props, inFrame, outFrame]);
     if (!video) {

package/dist/components/RenderModal/OptionExplainer.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionExplainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
-const layout_1 = require("../layout");
 const MenuDivider_1 = require("../Menu/MenuDivider");
+const layout_1 = require("../layout");
 const CliCopyButton_1 = require("./CliCopyButton");
 const container = {
     fontSize: 14,
@@ -51,6 +51,6 @@ const copyWrapper = {
     justifyContent: 'flex-end',
 };
 const OptionExplainer = ({ option }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "__remotion-info-button-container", children: [(0, jsx_runtime_1.jsxs)("div", { style: padding, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { style: title, children: option.name }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" })] }), (0, jsx_runtime_1.jsx)("div", { style: description, children: option.description('ssr') })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "CLI flag" }), (0, jsx_runtime_1.jsx)("div", { style: flexSpacer }), (0, jsx_runtime_1.jsxs)("code", { children: ["--", option.cliFlag] }), (0, jsx_runtime_1.jsx)("div", { style: copyWrapper, children: (0, jsx_runtime_1.jsx)(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "Node.JS option" }), (0, jsx_runtime_1.jsx)("div", { style: flexSpacer }), (0, jsx_runtime_1.jsx)("code", { children: option.ssrName }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 3.75 })] }), (0, jsx_runtime_1.jsx)("div", { style: infoRow })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "__remotion-info-button-container", children: [(0, jsx_runtime_1.jsxs)("div", { style: padding, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { style: title, children: option.name }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" })] }), (0, jsx_runtime_1.jsx)("div", { style: description, children: option.description('ssr') })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "CLI flag" }), (0, jsx_runtime_1.jsx)("div", { style: flexSpacer }), (0, jsx_runtime_1.jsxs)("code", { children: ["--", option.cliFlag] }), (0, jsx_runtime_1.jsx)("div", { style: copyWrapper, children: (0, jsx_runtime_1.jsx)(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })] }), option.ssrName ? ((0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "Node.JS option" }), (0, jsx_runtime_1.jsx)("div", { style: flexSpacer }), (0, jsx_runtime_1.jsx)("code", { children: option.ssrName }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 3.75 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: infoRow })] })] }));
 };
 exports.OptionExplainer = OptionExplainer;

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

@@ -31,6 +31,7 @@ type RenderModalProps = {
     initialEncodingMaxRate: string | null;
     initialEncodingBufferSize: string | null;
     initialUserAgent: string | null;
+    initialBeep: boolean;
     defaultProps: Record<string, unknown>;
     inFrameMark: number | null;
     outFrameMark: number | null;

package/dist/components/RenderModal/RenderModal.js

@@ -117,7 +117,7 @@ const outer = {
     display: 'flex',
     flexDirection: 'column',
 };
-const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialUserAgent, defaultProps, inFrameMark, outFrameMark, onClose, resolvedComposition, unresolvedComposition, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, }) => {
+const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialUserAgent, defaultProps, inFrameMark, outFrameMark, onClose, resolvedComposition, unresolvedComposition, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, initialBeep, }) => {
     const isMounted = (0, react_1.useRef)(true);
     const [isVideo] = (0, react_1.useState)(() => {
         return typeof resolvedComposition.durationInFrames === 'undefined'
@@ -161,6 +161,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const [disallowParallelEncoding, setDisallowParallelEncoding] = (0, react_1.useState)(false);
     const [disableWebSecurity, setDisableWebSecurity] = (0, react_1.useState)(() => initialDisableWebSecurity);
     const [headless, setHeadless] = (0, react_1.useState)(() => initialHeadless);
+    const [beepOnFinish, setBeepOnFinish] = (0, react_1.useState)(() => initialBeep);
     const [ignoreCertificateErrors, setIgnoreCertificateErrors] = (0, react_1.useState)(() => initialIgnoreCertificateErrors);
     const [multiProcessOnLinux, setChromiumMultiProcessOnLinux] = (0, react_1.useState)(() => initialMultiProcessOnLinux);
     const [openGlOption, setOpenGlOption] = (0, react_1.useState)(() => initialGl !== null && initialGl !== void 0 ? initialGl : 'default');
@@ -387,6 +388,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             inputProps,
             offthreadVideoCacheSizeInBytes,
             multiProcessOnLinux,
+            beepOnFinish,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -411,6 +413,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         inputProps,
         offthreadVideoCacheSizeInBytes,
         multiProcessOnLinux,
+        beepOnFinish,
         onClose,
     ]);
     const [everyNthFrameSetting, setEveryNthFrameSetting] = (0, react_1.useState)(() => initialEveryNthFrame);
@@ -468,6 +471,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             multiProcessOnLinux,
             encodingBufferSize,
             encodingMaxRate,
+            beepOnFinish,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -512,6 +516,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         multiProcessOnLinux,
         encodingBufferSize,
         encodingMaxRate,
+        beepOnFinish,
         onClose,
     ]);
     const onClickSequence = (0, react_1.useCallback)(() => {
@@ -537,6 +542,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             offthreadVideoCacheSizeInBytes,
             disallowParallelEncoding,
             multiProcessOnLinux,
+            beepOnFinish,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -564,6 +570,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         offthreadVideoCacheSizeInBytes,
         disallowParallelEncoding,
         multiProcessOnLinux,
+        beepOnFinish,
         onClose,
     ]);
     (0, react_1.useEffect)(() => {
@@ -738,7 +745,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         else {
             onClickVideo();
         }
-    }, [onClickSequence, onClickStill, onClickVideo, renderDisabled, renderMode]);
+    }, [renderDisabled, renderMode, onClickStill, onClickSequence, onClickVideo]);
     (0, react_1.useEffect)(() => {
         const enter = registerKeybinding({
             callback() {
@@ -774,7 +781,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
                             ...buttonStyle,
                             backgroundColor: outnameValidation.valid ? colors_1.BLUE : colors_1.BLUE_DISABLED,
-                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setColorSpace: setColorSpace, colorSpace: colorSpace, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { inputProps: inputProps, setInputProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setLogLevel, logLevel: logLevel, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, enableMultiProcessOnLinux: multiProcessOnLinux, setChromiumMultiProcessOnLinux: setChromiumMultiProcessOnLinux, codec: codec, userAgent: userAgent, setUserAgent: setUserAgent })) })] })] }));
+                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setColorSpace: setColorSpace, colorSpace: colorSpace, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { inputProps: inputProps, setInputProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setLogLevel, logLevel: logLevel, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, enableMultiProcessOnLinux: multiProcessOnLinux, setChromiumMultiProcessOnLinux: setChromiumMultiProcessOnLinux, codec: codec, userAgent: userAgent, setUserAgent: setUserAgent, setBeep: setBeepOnFinish, beep: beepOnFinish })) })] })] }));
 };
 const RenderModalWithLoader = (props) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);

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

@@ -33,4 +33,6 @@ export declare const RenderModalAdvanced: React.FC<{
     setChromiumMultiProcessOnLinux: React.Dispatch<React.SetStateAction<boolean>>;
     userAgent: string | null;
     setUserAgent: React.Dispatch<React.SetStateAction<string | null>>;
+    setBeep: React.Dispatch<React.SetStateAction<boolean>>;
+    beep: boolean;
 }>;

package/dist/components/RenderModal/RenderModalAdvanced.js

@@ -20,7 +20,7 @@ const container = {
     flex: 1,
     overflowY: 'auto',
 };
-const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, logLevel, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, setx264Preset, x264Preset, codec, offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes, enableMultiProcessOnLinux, setChromiumMultiProcessOnLinux, setUserAgent, userAgent, }) => {
+const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, logLevel, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, setx264Preset, x264Preset, codec, offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes, enableMultiProcessOnLinux, setChromiumMultiProcessOnLinux, setUserAgent, userAgent, beep, setBeep, }) => {
     const extendedOpenGlOptions = (0, react_1.useMemo)(() => {
         return [
             'angle',
@@ -69,6 +69,9 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
     const onUserAgentChanged = (0, react_1.useCallback)((e) => {
         setUserAgent(e.target.value);
     }, [setUserAgent]);
+    const onPlayBeepSound = (0, react_1.useCallback)((e) => {
+        setBeep(e.target.checked);
+    }, [setBeep]);
     const openGlOptions = (0, react_1.useMemo)(() => {
         return extendedOpenGlOptions.map((option) => {
             return {
@@ -118,6 +121,6 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
             , { 
                 // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
                 min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })] }), renderMode === 'audio' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Custom OffthreadVideo cache" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "offthreadVideoCacheSizeInBytes" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: offthreadVideoCacheSizeInBytes !== null, onChange: toggleCustomOffthreadVideoCacheSizeInBytes, name: "custom-audio-bitrate" }) })] })), renderMode === 'audio' ||
-                offthreadVideoCacheSizeInBytes === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minConcurrency, max: 2000 * 1024 * 1024, step: 1024, name: "OffthreadVideo cache size", formatter: (w) => `${w} bytes`, onValueChanged: changeOffthreadVideoCacheSizeInBytes, value: offthreadVideoCacheSizeInBytes })), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Disable web security" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disableWebSecurity, onChange: onDisableWebSecurityChanged, name: "disable-web-security" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Ignore certificate errors" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: ignoreCertificateErrors, onChange: onIgnoreCertificatErrors, name: "ignore-certificate-errors" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Headless mode" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: headless, onChange: onHeadless, name: "headless" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["OpenGL render backend ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "glOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Multi-process Chrome on Linux" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "enableMultiprocessOnLinuxOption" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: enableMultiProcessOnLinux, onChange: onEnableMultiProcessOnLinux, name: "enable-multi-process-on-linux" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Custom User Agent" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: userAgent !== null, onChange: toggleCustomUserAgent, name: "custom-user-agent" }) })] }), userAgent === null ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "User Agent" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: userAgent, onChange: onUserAgentChanged, status: "ok", rightAlign: true }) }) })] })), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsx)(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })] }));
+                offthreadVideoCacheSizeInBytes === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minConcurrency, max: 2000 * 1024 * 1024, step: 1024, name: "OffthreadVideo cache size", formatter: (w) => `${w} bytes`, onValueChanged: changeOffthreadVideoCacheSizeInBytes, value: offthreadVideoCacheSizeInBytes })), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Disable web security" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disableWebSecurity, onChange: onDisableWebSecurityChanged, name: "disable-web-security" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Ignore certificate errors" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: ignoreCertificateErrors, onChange: onIgnoreCertificatErrors, name: "ignore-certificate-errors" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Headless mode" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: headless, onChange: onHeadless, name: "headless" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["OpenGL render backend ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "glOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Multi-process Chrome on Linux" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "enableMultiprocessOnLinuxOption" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: enableMultiProcessOnLinux, onChange: onEnableMultiProcessOnLinux, name: "enable-multi-process-on-linux" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Custom User Agent" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: userAgent !== null, onChange: toggleCustomUserAgent, name: "custom-user-agent" }) })] }), userAgent === null ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "User Agent" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: userAgent, onChange: onUserAgentChanged, status: "ok", rightAlign: true }) }) })] })), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Beep when finished ", (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "beepOnFinishOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: beep, onChange: onPlayBeepSound, name: "beep-when-finished" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsx)(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })] }));
 };
 exports.RenderModalAdvanced = RenderModalAdvanced;

package/dist/components/RenderModal/RenderModalAudio.js

@@ -6,15 +6,14 @@ const client_1 = require("@remotion/renderer/client");
 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 RemInput_1 = require("../NewComposition/RemInput");
 const EnforceAudioTrackSetting_1 = require("./EnforceAudioTrackSetting");
-const human_readable_audio_codecs_1 = require("./human-readable-audio-codecs");
-const layout_2 = require("./layout");
 const MutedSetting_1 = require("./MutedSetting");
 const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const RenderModalHr_1 = require("./RenderModalHr");
+const human_readable_audio_codecs_1 = require("./human-readable-audio-codecs");
+const layout_1 = require("./layout");
 const container = {
     flex: 1,
 };
@@ -41,6 +40,6 @@ const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setE
             };
         });
     }, [codec, setAudioCodec]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' && audioCodecOptions(codec).length >= 2 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Audio Codec" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, title: "AudioCodec" }) })] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: enforceAudioTrack, muted: muted, setMuted: setMuted })) : null, (renderMode === 'video' || renderMode === 'audio') && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})] })), renderMode === 'still' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Custom audio bitrate" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "audioBitrateOption" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: shouldHaveCustomTargetAudioBitrate, onChange: onShouldHaveTargetAudioBitrateChanged, name: "custom-audio-bitrate" }) })] })), shouldHaveCustomTargetAudioBitrate && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Target audio bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: customTargetAudioBitrate, onChange: onTargetAudioBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' && audioCodecOptions(codec).length >= 2 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Audio Codec" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, title: "AudioCodec" }) })] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: enforceAudioTrack, muted: muted, setMuted: setMuted })) : null, (renderMode === 'video' || renderMode === 'audio') && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})] })), renderMode === 'still' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Custom audio bitrate", ' ', (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "audioBitrateOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: shouldHaveCustomTargetAudioBitrate, onChange: onShouldHaveTargetAudioBitrateChanged, name: "custom-audio-bitrate" }) })] })), shouldHaveCustomTargetAudioBitrate && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target audio bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetAudioBitrate, onChange: onTargetAudioBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null] }));
 };
 exports.RenderModalAudio = RenderModalAudio;

package/dist/components/RenderModal/SchemaEditor/ZodArrayEditor.js

@@ -69,7 +69,7 @@ const ZodArrayEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSav
                         var _a;
                         return (
                         // eslint-disable-next-line react/no-array-index-key
-                        (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor, { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, defaultValue: (_a = defaultValue[i]) !== null && _a !== void 0 ? _a : (0, create_zod_values_1.createZodValues)(def.type, z, zodTypes), onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }), (0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: i, onChange: onChange, isLast: i === localValue.value.length - 1 })] }, `${i}${localValue.keyStabilityRevision}`));
+                        (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor, { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, defaultValue: (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[i]) !== null && _a !== void 0 ? _a : (0, create_zod_values_1.createZodValues)(def.type, z, zodTypes), onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }), (0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: i, onChange: onChange, isLast: i === localValue.value.length - 1 })] }, `${i}${localValue.keyStabilityRevision}`));
                     }) }) })) : null, (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] }));
 };
 exports.ZodArrayEditor = ZodArrayEditor;

package/dist/components/RenderQueue/actions.d.ts

@@ -2,7 +2,7 @@ import type { AudioCodec, Codec, ColorSpace, LogLevel, PixelFormat, ProResProfil
 import type { RenderJob } from '../../preview-server/job';
 import type { RequiredChromiumOptions } from '../../required-chromium-options';
 import type { EnumPath } from '../RenderModal/SchemaEditor/extract-enum-json-paths';
-export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, multiProcessOnLinux, }: {
+export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, multiProcessOnLinux, beepOnFinish, }: {
     compositionId: string;
     outName: string;
     imageFormat: StillImageFormat;
@@ -16,8 +16,9 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     inputProps: Record<string, unknown>;
     offthreadVideoCacheSizeInBytes: number | null;
     multiProcessOnLinux: boolean;
+    beepOnFinish: boolean;
 }) => Promise<undefined>;
-export declare const addSequenceRenderJob: ({ compositionId, outName, imageFormat, startFrame, endFrame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, concurrency, offthreadVideoCacheSizeInBytes, jpegQuality, disallowParallelEncoding, multiProcessOnLinux, }: {
+export declare const addSequenceRenderJob: ({ compositionId, outName, imageFormat, startFrame, endFrame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, concurrency, offthreadVideoCacheSizeInBytes, jpegQuality, disallowParallelEncoding, multiProcessOnLinux, beepOnFinish, }: {
     compositionId: string;
     outName: string;
     imageFormat: VideoImageFormat;
@@ -34,8 +35,9 @@ export declare const addSequenceRenderJob: ({ compositionId, outName, imageForma
     offthreadVideoCacheSizeInBytes: number | null;
     disallowParallelEncoding: boolean;
     multiProcessOnLinux: boolean;
+    beepOnFinish: boolean;
 }) => Promise<undefined>;
-export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, }: {
+export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, }: {
     compositionId: string;
     outName: string;
     imageFormat: VideoImageFormat;
@@ -67,6 +69,7 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     multiProcessOnLinux: boolean;
     encodingMaxRate: string | null;
     encodingBufferSize: string | null;
+    beepOnFinish: boolean;
 }) => Promise<undefined>;
 export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
     file: string;

package/dist/components/RenderQueue/actions.js

@@ -26,7 +26,7 @@ const callApi = (endpoint, body, signal) => {
         });
     });
 };
-const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, multiProcessOnLinux, }) => {
+const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, multiProcessOnLinux, beepOnFinish, }) => {
     return callApi('/api/render', {
         compositionId,
         type: 'still',
@@ -46,10 +46,11 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
         }).serializedString,
         offthreadVideoCacheSizeInBytes,
         multiProcessOnLinux,
+        beepOnFinish,
     });
 };
 exports.addStillRenderJob = addStillRenderJob;
-const addSequenceRenderJob = ({ compositionId, outName, imageFormat, startFrame, endFrame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, concurrency, offthreadVideoCacheSizeInBytes, jpegQuality, disallowParallelEncoding, multiProcessOnLinux, }) => {
+const addSequenceRenderJob = ({ compositionId, outName, imageFormat, startFrame, endFrame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, concurrency, offthreadVideoCacheSizeInBytes, jpegQuality, disallowParallelEncoding, multiProcessOnLinux, beepOnFinish, }) => {
     return callApi('/api/render', {
         compositionId,
         type: 'sequence',
@@ -72,10 +73,11 @@ const addSequenceRenderJob = ({ compositionId, outName, imageFormat, startFrame,
         offthreadVideoCacheSizeInBytes,
         disallowParallelEncoding,
         multiProcessOnLinux,
+        beepOnFinish,
     });
 };
 exports.addSequenceRenderJob = addSequenceRenderJob;
-const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, }) => {
+const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, }) => {
     return callApi('/api/render', {
         compositionId,
         type: 'video',
@@ -113,6 +115,7 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
         multiProcessOnLinux,
         encodingBufferSize,
         encodingMaxRate,
+        beepOnFinish,
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;

package/dist/components/SidebarRenderButton.js

@@ -64,6 +64,7 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialEncodingBufferSize: defaults.encodingBufferSize,
             initialEncodingMaxRate: defaults.encodingMaxRate,
             initialUserAgent: defaults.userAgent,
+            initialBeep: defaults.beepOnFinish,
         });
     }, [composition.defaultProps, composition.id, props, setSelectedModal]);
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/Timeline/TimelineEyeToggler.js

@@ -0,0 +1 @@
+"use strict";