@remotion/studio 4.0.522 → 4.0.523

package/dist/components/RadioButton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const RadioButton: React.FC<{
     readonly checked: boolean;
+    readonly disabled: boolean;
     readonly children: React.ReactNode;
     readonly onClick: () => void;
 }>;

package/dist/components/RadioButton.js

@@ -54,8 +54,8 @@ const label = {
     fontSize: 14,
     lineHeight: '20px',
 };
-const RadioButton = ({ checked, children, onClick }) => {
-    return (jsx_runtime_1.jsxs("button", { "aria-checked": checked, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onClick, role: "radio", style: row, type: "button", children: [
+const RadioButton = ({ checked, disabled, children, onClick }) => {
+    return (jsx_runtime_1.jsxs("button", { "aria-checked": checked, disabled: disabled, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onClick, role: "radio", style: row, type: "button", children: [
             jsx_runtime_1.jsx("span", { style: circle, children: checked ? jsx_runtime_1.jsx("span", { style: bullet }) : null }), jsx_runtime_1.jsx("span", { style: label, children: children })
         ] }));
 };

package/dist/components/RenderButton.js

@@ -42,6 +42,7 @@ const browser_studio_operations_1 = require("../helpers/browser-studio-operation
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const caret_1 = require("../icons/caret");
 const render_1 = require("../icons/render");
 const in_out_1 = require("../state/in-out");
@@ -128,7 +129,10 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         }
         return preferredRenderType;
     }, [connectionStatus, isBrowserStudio, preferredRenderType, readOnlyStudio]);
-    const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
+    const renderShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('render');
+    const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || renderShortcut === ''
+        ? ''
+        : `(${renderShortcut})`;
     const tooltip = renderType === 'render-command'
         ? 'Copy a CLI command to render this composition ' + shortcut
         : 'Export the current composition ' + shortcut;

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

@@ -1,5 +1,9 @@
 import type { AvailableOptions } from '@remotion/renderer/client';
 import React from 'react';
+type NumberSettingHint = AvailableOptions | {
+    readonly content: React.ReactNode;
+    readonly title: string;
+};
 export declare const NumberSetting: React.FC<{
     readonly name: string;
     readonly value: number;
@@ -8,5 +12,6 @@ export declare const NumberSetting: React.FC<{
     readonly min: number;
     readonly step: number;
     readonly formatter?: (value: string | number) => string;
-    readonly hint?: AvailableOptions;
+    readonly hint?: NumberSettingHint;
 }>;
+export {};

package/dist/components/RenderModal/NumberSetting.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const layout_1 = require("../layout");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const RemInput_1 = require("../NewComposition/RemInput");
+const InfoBubble_1 = require("./InfoBubble");
 const layout_2 = require("./layout");
 const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, formatter }) => {
@@ -23,8 +24,7 @@ const NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, form
     }, [onValueChanged]);
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: [name, hint ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: hint })
-                        ] })) : null] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RightAlignInput, { children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { value: value, name: name.toLowerCase(), onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), typeof hint === 'string' ? (jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: hint })) : (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: hint.title, children: hint.content }))] })) : null] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RightAlignInput, { children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { value: value, name: name.toLowerCase(), "aria-label": `${name}: ${formatter ? formatter(value) : value}`, onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
                             .map((f) => (f !== null && f !== undefined ? f : ''))
                             .join('-'), min: min, max: max, formatter: formatter, status: "ok", rightAlign: true }) }) })
         ] }));

package/dist/components/RenderModal/RenderModalBasic.js

@@ -101,7 +101,7 @@ const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setV
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Frame" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RightAlignInput, { children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })
                 ] })) : null, renderMode === 'video' && codec === 'prores' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ProRes profile" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: 'proResProfile', selectedId: proResProfile, values: proResProfileOptions }) })
-                ] })) : null, renderMode === 'still' ? null : (jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), showOutputName ? (jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage, label: renderMode === 'sequence' ? 'Folder name' : 'Output name' })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                ] })) : null, renderMode === 'still' ? null : (jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), showOutputName ? (jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: null, existingOutputPath: null, existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage, label: renderMode === 'sequence' ? 'Folder name' : 'Output name' })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Log Level ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })

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

@@ -1,5 +1,7 @@
 import React from 'react';
 type Props = {
+    readonly ariaLabel: string | null;
+    readonly existingOutputPath: string | null;
     readonly existence: boolean;
     readonly inputStyle: React.CSSProperties;
     readonly outName: string;
@@ -7,5 +9,5 @@ type Props = {
     readonly validationMessage: string | null;
     readonly label: string;
 };
-export declare const RenderModalOutputName: ({ existence, inputStyle, outName, onValueChange, validationMessage, label: labelText, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const RenderModalOutputName: ({ ariaLabel, existingOutputPath, existence, inputStyle, outName, onValueChange, validationMessage, label: labelText, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RenderModal/RenderModalOutputName.js

@@ -38,12 +38,12 @@ const outputNameInputContainer = {
     minWidth: 0,
     maxWidth: 280,
 };
-const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange, validationMessage, label: labelText, }) => {
+const RenderModalOutputName = ({ ariaLabel, existingOutputPath, existence, inputStyle, outName, onValueChange, validationMessage, label: labelText, }) => {
     const openExistingOutput = (0, react_1.useCallback)(() => {
-        (0, actions_1.openInFileExplorer)({ directory: outName }).catch((err) => {
+        (0, actions_1.openInFileExplorer)({ directory: existingOutputPath !== null && existingOutputPath !== void 0 ? existingOutputPath : outName }).catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
         });
-    }, [outName]);
+    }, [existingOutputPath, outName]);
     const renderOpenIcon = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: openIconStyle, color: color });
     }, []);
@@ -51,7 +51,7 @@ const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange,
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     return (jsx_runtime_1.jsxs("div", { style: outputNameRow, children: [
             jsx_runtime_1.jsx(layout_1.Column, { children: jsx_runtime_1.jsx("div", { style: layout_2.label, children: labelText }) }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { style: outputNameInputContainer, children: [
-                        jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : undefined, status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage, type: 'error' })
                             ] })) : existence ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` })), "Exists, will be overwritten"] }), type: 'warning' })

package/dist/components/RenderModal/SeparateAudioOption.js

@@ -24,7 +24,7 @@ const SeparateAudioOptionInput = ({ separateAudioTo, setSeparateAudioTo, audioCo
         }
         return null;
     }, [audioCodec, separateAudioTo]);
-    return (jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { existence: existence, inputStyle: layout_2.input, onValueChange: onValueChange, outName: separateAudioTo, label: 'Separate audio to', validationMessage: validationMessage }));
+    return (jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: null, existingOutputPath: null, existence: existence, inputStyle: layout_2.input, onValueChange: onValueChange, outName: separateAudioTo, label: 'Separate audio to', validationMessage: validationMessage }));
 };
 exports.SeparateAudioOptionInput = SeparateAudioOptionInput;
 const SeparateAudioOption = ({ separateAudioTo, setSeparateAudioTo, audioCodec, outName }) => {

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -121,7 +121,7 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "codec", id: "videoCodecOption" })
                                 ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, title: "Codec" }) })
                         ] })) : null, jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })
-                ] })), jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name' }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                ] })), jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: null, existingOutputPath: null, existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name' }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Log Level ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "logLevel", id: "logLevelOption" })
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CaptionJob } from './caption-job-types';
+export declare const CaptionQueueItem: React.FC<{
+    readonly job: CaptionJob;
+    readonly selected: boolean;
+}>;

package/dist/components/RenderQueue/CaptionQueueItem.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaptionQueueItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const url_state_1 = require("../../helpers/url-state");
+const InlineAction_1 = require("../InlineAction");
+const layout_1 = require("../layout");
+const use_select_asset_1 = require("../use-select-asset");
+const CircularProgress_1 = require("./CircularProgress");
+const context_1 = require("./context");
+const item_style_1 = require("./item-style");
+const SuccessIcon_1 = require("./SuccessIcon");
+const container = {
+    padding: 12,
+    display: 'flex',
+    flexDirection: 'row',
+    paddingBottom: 10,
+    paddingRight: 4,
+    marginBottom: 1,
+    marginLeft: 4,
+    borderRadius: 4,
+    width: 'calc(100% - 4px)',
+};
+const title = {
+    fontSize: 13,
+    lineHeight: 1,
+};
+const right = {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+};
+const subtitleContainer = {
+    maxWidth: '100%',
+    flex: 1,
+    display: 'flex',
+    overflow: 'hidden',
+};
+const subtitle = {
+    ...item_style_1.renderQueueItemSubtitleStyle,
+    cursor: 'default',
+};
+const statusIcon = {
+    height: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+    width: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+};
+const removeIcon = {
+    height: 16,
+    color: colors_1.CURRENT_COLOR,
+};
+const CaptionJobStatus = ({ job }) => {
+    if (job.status === 'running') {
+        return (jsx_runtime_1.jsx("div", { style: statusIcon, role: "progressbar", "aria-label": "Caption job progress", "aria-valuetext": job.progress.message, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(job.progress.value * 100), children: jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: Math.max(0.07, job.progress.value) }) }));
+    }
+    if (job.status === 'done') {
+        return jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {});
+    }
+    if (job.status === 'failed') {
+        return (jsx_runtime_1.jsx("svg", { style: statusIcon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.FAIL_COLOR, d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z" }) }));
+    }
+    return (jsx_runtime_1.jsx("svg", { style: statusIcon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
+};
+const CaptionQueueItem = ({ job, selected }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { removeCaptionJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
+    const isHoverable = job.status === 'done';
+    const containerStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+                hovered: isHoverable && hovered,
+                selected,
+            }),
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+        };
+    }, [hovered, isHoverable, selected]);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const scrollCurrentIntoView = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = document
+            .querySelector(`.${item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+    }, []);
+    const onClick = (0, react_1.useCallback)(() => {
+        if (job.status !== 'done') {
+            return;
+        }
+        selectAsset(job.outName);
+        (0, url_state_1.pushUrl)(`/assets/${job.outName}`);
+    }, [job, selectAsset]);
+    (0, react_1.useEffect)(() => {
+        if (selected) {
+            scrollCurrentIntoView();
+        }
+    }, [scrollCurrentIntoView, selected]);
+    const onRemove = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        removeCaptionJob(job.id);
+    }, [job.id, removeCaptionJob]);
+    const renderRemoveAction = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx("svg", { style: removeIcon, viewBox: "0 0 320 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }));
+    }, []);
+    const message = (0, react_1.useMemo)(() => {
+        if (job.status === 'idle') {
+            return 'Queued for transcription';
+        }
+        if (job.status === 'running') {
+            return job.progress.message;
+        }
+        if (job.status === 'failed') {
+            return job.error.message;
+        }
+        return job.outName;
+    }, [job]);
+    return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, style: containerStyle, align: "center", onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, className: selected ? item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME : undefined, children: [
+            jsx_runtime_1.jsx(CaptionJobStatus, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [
+                    jsx_runtime_1.jsx("div", { style: title, children: job.displayName }), jsx_runtime_1.jsx("div", { style: subtitleContainer, children: jsx_runtime_1.jsx("span", { style: subtitle, title: message, children: message }) })
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), job.status === 'running' ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderRemoveAction, onClick: onRemove, title: "Remove", variant: null }))] }));
+};
+exports.CaptionQueueItem = CaptionQueueItem;

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

@@ -0,0 +1 @@
+export declare const CaptionQueueProcessor: React.FC;

package/dist/components/RenderQueue/CaptionQueueProcessor.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaptionQueueProcessor = void 0;
+const whisper_webgpu_1 = require("@remotion/whisper-webgpu");
+const react_1 = require("react");
+const write_static_file_1 = require("../../api/write-static-file");
+const resample_media_to_16_khz_1 = require("../Transcription/resample-media-to-16-khz");
+const context_1 = require("./context");
+const load_model_for_job_1 = require("./load-model-for-job");
+const CaptionQueueProcessor = () => {
+    const { updateCaptionJobProgress, markCaptionJobDone, markCaptionJobFailed, setProcessCaptionJobCallback, } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const processJob = (0, react_1.useCallback)(async (job) => {
+        let captionCount = null;
+        let processingError = null;
+        try {
+            updateCaptionJobProgress(job.id, {
+                message: 'Checking WebGPU support...',
+                value: 0,
+            });
+            const support = await (0, whisper_webgpu_1.canUseWhisperWebGpu)();
+            if (!support.supported) {
+                throw new Error(support.detailedReason);
+            }
+            updateCaptionJobProgress(job.id, {
+                message: `Checking ${job.model}...`,
+                value: 0.02,
+            });
+            await (0, whisper_webgpu_1.clearStaleModels)();
+            await (0, load_model_for_job_1.loadModelForJob)({
+                model: job.model,
+                progressStart: 0.03,
+                progressSpan: 0.27,
+                isModelCached: (model) => (0, whisper_webgpu_1.isWhisperModelCached)({ model }),
+                loadModel: (model, onProgress) => (0, whisper_webgpu_1.loadWhisperModel)({
+                    model,
+                    onProgress: (progress) => onProgress(progress.progress),
+                }),
+                updateProgress: (progress) => updateCaptionJobProgress(job.id, progress),
+            });
+            updateCaptionJobProgress(job.id, {
+                message: `Preparing ${job.displayName}...`,
+                value: 0.3,
+            });
+            const channelWaveform = await (0, resample_media_to_16_khz_1.resampleMediaTo16Khz)({
+                src: job.src,
+                audioStreamIndex: job.audioStreamIndex,
+                requestInit: job.requestInit,
+                onProgress: (progress) => {
+                    updateCaptionJobProgress(job.id, {
+                        message: `Preparing ${job.displayName}...`,
+                        value: 0.3 + progress * 0.2,
+                    });
+                },
+            });
+            updateCaptionJobProgress(job.id, {
+                message: `Transcribing ${job.displayName}...`,
+                value: 0.5,
+            });
+            const transcription = await (0, whisper_webgpu_1.transcribe)({
+                channelWaveform,
+                model: job.model,
+                task: job.task,
+                chunkLengthInSeconds: job.chunkLengthInSeconds,
+                strideLengthInSeconds: job.strideLengthInSeconds,
+                forceFullSequences: job.forceFullSequences,
+                doSample: job.doSample,
+                temperature: job.temperature,
+                topK: job.topK,
+                repetitionPenalty: job.repetitionPenalty,
+                noRepeatNgramSize: job.noRepeatNgramSize,
+                ...(job.language === null ? {} : { language: job.language }),
+            });
+            const { captions } = (0, whisper_webgpu_1.toCaptions)({
+                whisperWebGpuOutput: transcription,
+            });
+            updateCaptionJobProgress(job.id, {
+                message: `Saving ${job.outName}...`,
+                value: 0.95,
+            });
+            await (0, write_static_file_1.writeStaticFile)({
+                contents: JSON.stringify(captions, null, 2),
+                filePath: job.outName,
+            });
+            captionCount = captions.length;
+        }
+        catch (error) {
+            processingError =
+                error instanceof Error ? error : new Error(String(error));
+        }
+        try {
+            await (0, whisper_webgpu_1.disposeWhisperModel)({ model: job.model });
+        }
+        catch (_a) {
+            // The pipeline is removed from the in-memory registry before disposal.
+            // A cleanup failure should not hide a successfully written caption file.
+        }
+        if (processingError) {
+            markCaptionJobFailed(job.id, processingError);
+        }
+        else {
+            markCaptionJobDone(job.id, captionCount !== null && captionCount !== void 0 ? captionCount : 0);
+        }
+    }, [markCaptionJobDone, markCaptionJobFailed, updateCaptionJobProgress]);
+    (0, react_1.useEffect)(() => {
+        setProcessCaptionJobCallback(processJob);
+        return () => setProcessCaptionJobCallback(null);
+    }, [processJob, setProcessCaptionJobCallback]);
+    return null;
+};
+exports.CaptionQueueProcessor = CaptionQueueProcessor;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CaptionQueueProcessorLoader: React.FC;

package/dist/components/RenderQueue/CaptionQueueProcessorLoader.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaptionQueueProcessorLoader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const OptionalPackageModal_1 = require("../OptionalPackageModal");
+const whisper_webgpu_capability_1 = require("../Transcription/whisper-webgpu-capability");
+const context_1 = require("./context");
+const LazyCaptionQueueProcessor = react_1.default.lazy(async () => {
+    const { CaptionQueueProcessor } = await Promise.resolve().then(() => __importStar(require('./CaptionQueueProcessor')));
+    return { default: CaptionQueueProcessor };
+});
+const CaptionQueueProcessorLoader = () => {
+    const { captionJobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const installed = (0, OptionalPackageModal_1.useOptionalPackageInstalled)(whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE);
+    if (!installed || captionJobs.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyCaptionQueueProcessor, {}) }));
+};
+exports.CaptionQueueProcessorLoader = CaptionQueueProcessorLoader;

package/dist/components/RenderQueue/RenderQueueItem.js

@@ -10,6 +10,7 @@ const url_state_1 = require("../../helpers/url-state");
 const layout_1 = require("../layout");
 const client_side_render_types_1 = require("./client-side-render-types");
 const context_1 = require("./context");
+const item_style_1 = require("./item-style");
 const RenderQueueCancelledMessage_1 = require("./RenderQueueCancelledMessage");
 const RenderQueueCopyToClipboard_1 = require("./RenderQueueCopyToClipboard");
 const RenderQueueDownloadItem_1 = require("./RenderQueueDownloadItem");
@@ -50,7 +51,6 @@ const subtitle = {
     display: 'flex',
     overflow: 'hidden',
 };
-const SELECTED_CLASSNAME = '__remotion_selected_classname';
 const RenderQueueItem = ({ job, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
@@ -78,7 +78,7 @@ const RenderQueueItem = ({ job, selected }) => {
     const scrollCurrentIntoView = (0, react_1.useCallback)(() => {
         var _a;
         (_a = document
-            .querySelector(`.${SELECTED_CLASSNAME}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+            .querySelector(`.${item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
     }, []);
     const clientBlobInfo = (0, react_1.useMemo)(() => {
         if (!isClientJob || job.status !== 'done' || !job.getBlob) {
@@ -146,7 +146,7 @@ const RenderQueueItem = ({ job, selected }) => {
         job.status === 'failed' ||
         job.status === 'cancelled') &&
         !((0, context_1.isClientRenderJob)(job) && (0, client_side_render_types_1.isRestoredClientJob)(job));
-    return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, draggable: canDrag, onDragStart: onDragStart, onDragEnd: onDragEnd, className: selected ? SELECTED_CLASSNAME : undefined, children: [
+    return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, draggable: canDrag, onDragStart: onDragStart, onDragEnd: onDragEnd, className: selected ? item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME : undefined, children: [
             jsx_runtime_1.jsx(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [
                     jsx_runtime_1.jsx("div", { style: title, children: job.compositionId }), jsx_runtime_1.jsx("div", { style: subtitle, children: job.status === 'done' ? (jsx_runtime_1.jsx(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? (jsx_runtime_1.jsx(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : job.status === 'saving' ? (jsx_runtime_1.jsx(RenderQueueSavingMessage_1.RenderQueueSavingMessage, {})) : job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : null })
                 ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [canCopyToClipboard ? (jsx_runtime_1.jsx(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, canRepeat ? jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (clientBlobInfo ? (jsx_runtime_1.jsx(RenderQueueDownloadItem_1.RenderQueueDownloadItem, { job: job })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }))) : null] })) : null] }));

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { VideoMattingJob } from './video-matting-job-types';
+export declare const VideoMattingQueueItem: React.FC<{
+    readonly job: VideoMattingJob;
+    readonly selected: boolean;
+}>;