@remotion/studio 4.0.526 → 4.0.528

package/dist/components/wrap-jsx-node-api.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapJsxNode = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const wrapJsxNode = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations) {
+        return browserStudioOperations.wrapJsxNode(request);
+    }
+    return (0, call_api_1.callApi)('/api/wrap-jsx-node', request);
+};
+exports.wrapJsxNode = wrapJsxNode;

package/dist/error-overlay/remotion-overlay/OpenInEditor.js

@@ -7,9 +7,13 @@ const AppLaunchButton_1 = require("../../components/AppLaunchButton");
 const NotificationCenter_1 = require("../../components/Notifications/NotificationCenter");
 const SettingsContext_1 = require("../../components/SettingsContext");
 const use_configure_default_apps_1 = require("../../components/use-configure-default-apps");
+const colors_1 = require("../../helpers/colors");
+const copy_text_1 = require("../../helpers/copy-text");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const clipboard_1 = require("../../icons/clipboard");
 const editor_1 = require("../../icons/editor");
+const format_location_1 = require("./format-location");
 const ShortcutHint_1 = require("./ShortcutHint");
 const menuLabel = {
     color: 'inherit',
@@ -17,10 +21,14 @@ const menuLabel = {
     fontSize: 13,
     lineHeight: '16px',
 };
+const copyIcon = { height: 16, width: 16 };
 const OpenInEditor = ({ stack, canHaveKeyboardShortcuts, editorId, editorName, size }) => {
     const { editorInfo } = (0, SettingsContext_1.useSettings)();
     const configureDefaultApps = (0, use_configure_default_apps_1.useConfigureDefaultApps)();
     const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    const sourcePath = stack.originalFileName
+        ? (0, format_location_1.formatLocation)(stack.originalFileName)
+        : null;
     const openWithEditor = (0, react_1.useCallback)(async (selectedEditorId, selectedEditorName) => {
         try {
             const response = await (0, open_in_editor_1.openInEditor)(stack, selectedEditorId);
@@ -35,6 +43,16 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts, editorId, editorName, s
     const openPreferredEditor = (0, react_1.useCallback)(() => {
         openWithEditor(editorId, editorName).catch(() => undefined);
     }, [editorId, editorName, openWithEditor]);
+    const copyPath = (0, react_1.useCallback)(() => {
+        if (sourcePath === null) {
+            return;
+        }
+        (0, copy_text_1.copyText)(sourcePath)
+            .then(() => (0, NotificationCenter_1.showNotification)('Copied path', 1500))
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy path: ${err.message}`, 2000);
+        });
+    }, [sourcePath]);
     (0, react_1.useEffect)(() => {
         if (!canHaveKeyboardShortcuts) {
             return;
@@ -66,8 +84,33 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts, editorId, editorName, s
             type: 'item',
             value: editor.id,
         }));
-        return editorItems;
-    }, [editorId, editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors, openWithEditor]);
+        if (sourcePath === null) {
+            return editorItems;
+        }
+        return [
+            ...editorItems,
+            ...(editorItems.length > 0
+                ? [{ type: 'divider', id: 'copy-path-divider' }]
+                : []),
+            {
+                id: 'copy-path',
+                keyHint: null,
+                label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Copy path" }),
+                leftItem: jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: colors_1.LIGHT_TEXT, style: copyIcon }),
+                onClick: copyPath,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'copy-path',
+            },
+        ];
+    }, [
+        copyPath,
+        editorId,
+        editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors,
+        openWithEditor,
+        sourcePath,
+    ]);
     return (jsx_runtime_1.jsxs(AppLaunchButton_1.AppLaunchButton, { actionButtonId: "error-overlay-open-in-editor", ariaLabel: `Open in ${editorName}`, disabled: false, menuAriaLabel: "Open in another app", menuButtonId: "error-overlay-open-in-another-app", menuItems: menuItems, onConfigureApps: configureDefaultApps, onClick: openPreferredEditor, size: size, style: null, title: `Open in ${editorName}`, children: [
             jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editorId, size: size === 'default' ? 14 : 18 }),
             "Open in ", editorName, canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "o", cmdOrCtrl: true })) : null] }));

package/dist/error-overlay/remotion-overlay/StackFrame.js

@@ -13,7 +13,15 @@ const format_location_1 = require("./format-location");
 const location = {
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'monospace',
-    overflowWrap: 'anywhere',
+    textAlign: 'left',
+    whiteSpace: 'nowrap',
+};
+const locationMask = 'linear-gradient(to right, black calc(100% - 20px), transparent)';
+const locationContainer = {
+    ...location,
+    maskImage: locationMask,
+    overflow: 'hidden',
+    WebkitMaskImage: locationMask,
 };
 const header = {
     paddingTop: 10,
@@ -39,6 +47,27 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
             !((_b = s.originalFileName) === null || _b === void 0 ? void 0 : _b.startsWith('webpack/'))) ||
             isFirst;
     });
+    const locationRef = (0, react_1.useRef)(null);
+    const [locationOverflows, setLocationOverflows] = (0, react_1.useState)(false);
+    const fileLocation = s.originalFileName
+        ? `${(0, format_location_1.formatLocation)(s.originalFileName)}:${s.originalLineNumber}`
+        : null;
+    (0, react_1.useLayoutEffect)(() => {
+        const element = locationRef.current;
+        if (!element) {
+            return;
+        }
+        const update = () => {
+            setLocationOverflows(element.scrollWidth > element.clientWidth);
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(element);
+        if (element.firstElementChild) {
+            observer.observe(element.firstElementChild);
+        }
+        return () => observer.disconnect();
+    }, [fileLocation, fontSize]);
     const canOpenFileLocation = Boolean(editorId && s.originalFileName);
     const onOpenFileLocation = (0, react_1.useCallback)(() => {
         if (!canOpenFileLocation) {
@@ -64,7 +93,7 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
                     paddingLeft: horizontalSpacing,
                     paddingRight: horizontalSpacing,
                 }, children: [
-                    jsx_runtime_1.jsxs("div", { style: left, children: [functionName === null ? null : (jsx_runtime_1.jsx("div", { style: { ...fnName, fontSize }, children: functionName })), s.originalFileName ? (jsx_runtime_1.jsx("div", { style: { ...location, fontSize }, children: canOpenFileLocation ? (jsx_runtime_1.jsxs("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onOpenFileLocation, style: {
+                    jsx_runtime_1.jsxs("div", { style: left, children: [functionName === null ? null : (jsx_runtime_1.jsx("div", { style: { ...fnName, fontSize }, children: functionName })), fileLocation ? (jsx_runtime_1.jsx("div", { ref: locationRef, style: { ...locationContainer, fontSize }, title: locationOverflows ? fileLocation : undefined, children: canOpenFileLocation ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onOpenFileLocation, style: {
                                         ...location,
                                         ...(0, hoverable_1.hoverableStyle)({
                                             idleBackground: colors_1.TRANSPARENT,
@@ -78,7 +107,7 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
                                         cursor: 'default',
                                         fontSize,
                                         padding: 0,
-                                    }, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) })) : null] }), headerAction, collapsible &&
+                                    }, children: fileLocation })) : (fileLocation) })) : null] }), headerAction, collapsible &&
                         s.originalScriptCode &&
                         s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: jsx_runtime_1.jsx("div", { style: {
                                 display: 'flex',

package/dist/esm/{CaptionQueueProcessor-k0yrm3dj.mjs → CaptionQueueProcessor-nr7hjcga.mjs}

@@ -1,12 +1,20 @@
 import {
   loadModelForJob
-} from "./index-v4tr1bft.mjs";
+} from "./index-09txs1bj.mjs";
+import {
+  installRequiredPackages
+} from "./index-dh3zk2hv.mjs";
 import {
   RenderQueueContext
-} from "./index-9x6e1dq0.mjs";
+} from "./index-hqxc6tzp.mjs";
 import {
+  callApi,
+  getBrowserStudioOperations,
   writeStaticFile
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
+import"./index-qve7mdfp.mjs";
+import"./index-5zrb1ft4.mjs";
+import"./index-wqc43mw0.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/RenderQueue/CaptionQueueProcessor.tsx
@@ -14,6 +22,7 @@ import {
   canUseWhisperWebGpu,
   clearStaleModels,
   disposeWhisperModel,
+  downloadWhisperModel,
   isWhisperModelCached,
   loadWhisperModel,
   toCaptions,
@@ -36,13 +45,24 @@ var resampleMediaTo16Khz = async ({
   src,
   audioStreamIndex,
   requestInit,
-  onProgress
+  onProgress,
+  signal
 }) => {
+  signal.throwIfAborted();
   const input = new Input({
     formats: ALL_FORMATS,
     source: new UrlSource(src, requestInit === null ? {} : { requestInit })
   });
   const waveformChunks = [];
+  let conversion = null;
+  let cancellation = null;
+  const onAbort = () => {
+    cancellation = conversion?.cancel().catch(() => {
+      return;
+    }) ?? null;
+    input.dispose();
+  };
+  signal.addEventListener("abort", onAbort, { once: true });
   try {
     onProgress(0);
     const audioTracks = await input.getAudioTracks();
@@ -58,7 +78,8 @@ var resampleMediaTo16Khz = async ({
       format: new WavOutputFormat,
       target: new NullTarget
     });
-    const conversion = await Conversion.init({
+    signal.throwIfAborted();
+    conversion = await Conversion.init({
       input,
       output,
       tracks: "all",
@@ -72,6 +93,7 @@ var resampleMediaTo16Khz = async ({
           forceTranscode: true,
           numberOfChannels: 1,
           process: (sample) => {
+            signal.throwIfAborted();
             const floats = new Float32Array(sample.allocationSize({ format: "f32", planeIndex: 0 }) / Float32Array.BYTES_PER_ELEMENT);
             sample.copyTo(floats, { format: "f32", planeIndex: 0 });
             waveformChunks.push({
@@ -85,13 +107,22 @@ var resampleMediaTo16Khz = async ({
         };
       }
     });
+    signal.throwIfAborted();
     if (!conversion.isValid) {
       throw new Error("The audio track cannot be decoded in this browser. Try converting the media to WAV first.");
     }
     conversion.onProgress = (progress) => onProgress(progress);
     await conversion.execute();
+    signal.throwIfAborted();
     onProgress(1);
   } finally {
+    signal.removeEventListener("abort", onAbort);
+    await cancellation;
+    if (signal.aborted && conversion && cancellation === null) {
+      await conversion.cancel().catch(() => {
+        return;
+      });
+    }
     input.dispose();
   }
   const waveformLength = waveformChunks.reduce((maximum, chunk) => Math.max(maximum, chunk.startFrame + chunk.waveform.length), 0);
@@ -113,17 +144,23 @@ var CaptionQueueProcessor = () => {
     updateCaptionJobProgress,
     markCaptionJobDone,
     markCaptionJobFailed,
+    markCaptionJobCancelled,
+    markCaptionJobSaving,
+    getAbortController,
     setProcessCaptionJobCallback
   } = useContext(RenderQueueContext);
   const processJob = useCallback(async (job) => {
+    const { signal } = getAbortController(job.id);
     let captionCount = null;
     let processingError = null;
     try {
+      signal.throwIfAborted();
       updateCaptionJobProgress(job.id, {
         message: "Checking WebGPU support...",
         value: 0
       });
       const support = await canUseWhisperWebGpu();
+      signal.throwIfAborted();
       if (!support.supported) {
         throw new Error(support.detailedReason);
       }
@@ -132,15 +169,21 @@ var CaptionQueueProcessor = () => {
         value: 0.02
       });
       await clearStaleModels();
+      signal.throwIfAborted();
       await loadModelForJob({
+        signal,
         model: job.model,
         progressStart: 0.03,
         progressSpan: 0.27,
         isModelCached: (model) => isWhisperModelCached({ model }),
-        loadModel: (model, onProgress) => loadWhisperModel({
-          model,
-          onProgress: (progress) => onProgress(progress.progress)
-        }),
+        loadModel: async (model, onProgress) => {
+          await downloadWhisperModel({
+            signal,
+            model,
+            onProgress: (progress) => onProgress(progress.progress)
+          });
+          await loadWhisperModel({ model, signal });
+        },
         updateProgress: (progress) => updateCaptionJobProgress(job.id, progress)
       });
       updateCaptionJobProgress(job.id, {
@@ -148,6 +191,7 @@ var CaptionQueueProcessor = () => {
         value: 0.3
       });
       const channelWaveform = await resampleMediaTo16Khz({
+        signal,
         src: job.src,
         audioStreamIndex: job.audioStreamIndex,
         requestInit: job.requestInit,
@@ -163,6 +207,7 @@ var CaptionQueueProcessor = () => {
         value: 0.5
       });
       const transcription = await transcribe({
+        signal,
         channelWaveform,
         model: job.model,
         task: job.task,
@@ -179,14 +224,37 @@ var CaptionQueueProcessor = () => {
       const { captions } = toCaptions({
         whisperWebGpuOutput: transcription
       });
-      updateCaptionJobProgress(job.id, {
-        message: `Saving ${job.outName}...`,
-        value: 0.95
-      });
-      await writeStaticFile({
-        contents: JSON.stringify(captions, null, 2),
-        filePath: job.outName
-      });
+      signal.throwIfAborted();
+      markCaptionJobSaving(job.id);
+      if (job.target === null) {
+        updateCaptionJobProgress(job.id, {
+          message: `Saving ${job.outName}...`,
+          value: 0.95
+        });
+        await writeStaticFile({
+          contents: JSON.stringify(captions, null, 2),
+          filePath: job.outName
+        });
+      } else {
+        updateCaptionJobProgress(job.id, {
+          message: "Adding Basic captions...",
+          value: 0.95
+        });
+        await installRequiredPackages([
+          { name: "@remotion/captions", version: null }
+        ]);
+        const request = {
+          fileName: job.target.fileName,
+          nodePath: job.target.nodePath.nodePath,
+          durationInFrames: job.target.durationInFrames,
+          captions
+        };
+        const browserStudioOperations = getBrowserStudioOperations();
+        const response = browserStudioOperations ? await browserStudioOperations.insertBasicCaptions(request) : await callApi("/api/insert-basic-captions", request);
+        if (!response.success) {
+          throw new Error(response.reason);
+        }
+      }
       captionCount = captions.length;
     } catch (error) {
       processingError = error instanceof Error ? error : new Error(String(error));
@@ -194,12 +262,21 @@ var CaptionQueueProcessor = () => {
     try {
       await disposeWhisperModel({ model: job.model });
     } catch {}
-    if (processingError) {
+    if (signal.aborted) {
+      markCaptionJobCancelled(job.id);
+    } else if (processingError) {
       markCaptionJobFailed(job.id, processingError);
     } else {
       markCaptionJobDone(job.id, captionCount ?? 0);
     }
-  }, [markCaptionJobDone, markCaptionJobFailed, updateCaptionJobProgress]);
+  }, [
+    getAbortController,
+    markCaptionJobCancelled,
+    markCaptionJobDone,
+    markCaptionJobFailed,
+    markCaptionJobSaving,
+    updateCaptionJobProgress
+  ]);
   useEffect(() => {
     setProcessCaptionJobCallback(processJob);
     return () => setProcessCaptionJobCallback(null);

package/dist/esm/LazyModels-ajkn7fs3.mjs

@@ -0,0 +1,12 @@
+import {
+  Models
+} from "./index-9q9w8v9p.mjs";
+import"./index-t7xnxdf8.mjs";
+import"./index-890dd9b3.mjs";
+import"./index-qve7mdfp.mjs";
+import"./index-5zrb1ft4.mjs";
+import"./index-wqc43mw0.mjs";
+import"./index-rcv7qkt5.mjs";
+export {
+  Models as default
+};

package/dist/esm/LazyModels-g1g7cf4e.mjs

@@ -0,0 +1,12 @@
+import {
+  Models
+} from "./index-8nt6a0mw.mjs";
+import"./index-t7xnxdf8.mjs";
+import"./index-890dd9b3.mjs";
+import"./index-qve7mdfp.mjs";
+import"./index-5zrb1ft4.mjs";
+import"./index-wqc43mw0.mjs";
+import"./index-rcv7qkt5.mjs";
+export {
+  Models as default
+};

package/dist/esm/{TranscriptionModal-ymnx1c7m.mjs → TranscriptionModal-e18bzbkb.mjs}

@@ -2,11 +2,10 @@ import {
   useModelCacheStatus
 } from "./index-7tt71e8n.mjs";
 import {
-  GearIcon,
   NumberSetting,
   getDefaultCaptionOutputName,
   validateCaptionOutputName
-} from "./index-f97r9e2g.mjs";
+} from "./index-xac20sv4.mjs";
 import {
   Button,
   Checkbox,
@@ -14,9 +13,9 @@ import {
   Combobox,
   DismissableModal,
   ExpandedFolderIconSolid,
+  GearIcon,
   InfoBubble,
   ModalHeader,
-  ModelsIcon,
   RemotionInput,
   RenderModalHr,
   SetSelectedModalContext,
@@ -30,24 +29,28 @@ import {
   optionsSidebarTabs,
   persistSelectedOptionsSidebarPanel,
   rightRow,
-  showNotification,
   useStaticFiles
-} from "./index-bs39wngg.mjs";
+} from "./index-x6r9bn12.mjs";
+import {
+  showNotification
+} from "./index-dh3zk2hv.mjs";
 import {
   RenderQueueContext
-} from "./index-9x6e1dq0.mjs";
+} from "./index-hqxc6tzp.mjs";
 import {
   openInFileExplorer
-} from "./index-eb5txqp6.mjs";
+} from "./index-s6qya2gg.mjs";
 import {
   getBrowserStudioOperations
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
+import"./index-t7tbt980.mjs";
 import {
   Models
-} from "./index-5gd8k9yv.mjs";
-import"./index-g7k2dvar.mjs";
+} from "./index-9q9w8v9p.mjs";
+import"./index-t7xnxdf8.mjs";
 import {
   InlineAction,
+  ModelsIcon,
   Spacing,
   VERTICAL_SCROLLBAR_CLASSNAME,
   ValidationMessage,
@@ -61,13 +64,14 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-cdy8v54v.mjs";
+} from "./index-890dd9b3.mjs";
+import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED,
   LIGHT_TEXT,
   WHITE
-} from "./index-k426ye99.mjs";
+} from "./index-wqc43mw0.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/Transcription/TranscriptionModal.tsx
@@ -770,7 +774,8 @@ var TranscriptionModal = ({
   audioStreamIndex,
   displayName,
   requestInit,
-  src
+  src,
+  target
 }) => {
   const [tab, setTab] = useState("transcribe");
   const isModelCached = useCallback((model) => isWhisperModelCached({ model }), []);
@@ -811,8 +816,8 @@ var TranscriptionModal = ({
     };
   }, []);
   const normalizedOutName = outName.normalize("NFC").toLowerCase();
-  const queuedOutputExists = captionJobs.some((job) => (job.status === "idle" || job.status === "running") && job.outName.normalize("NFC").toLowerCase() === normalizedOutName);
-  const outputValidationMessage = validateCaptionOutputName(outName) ?? (queuedOutputExists ? "Another caption job is already using this output file" : null);
+  const queuedOutputExists = captionJobs.some((job) => job.target === null && (job.status === "idle" || job.status === "running" || job.status === "saving") && job.outName.normalize("NFC").toLowerCase() === normalizedOutName);
+  const outputValidationMessage = target === null ? validateCaptionOutputName(outName) ?? (queuedOutputExists ? "Another caption job is already using this output file" : null) : null;
   const exists = staticFiles.some((file) => file.name.normalize("NFC").toLowerCase() === normalizedOutName);
   const chunkValidationMessage = strideLengthInSeconds * 2 >= chunkLengthInSeconds ? "Stride length must be less than half of chunk length" : null;
   const decodingValidationMessage = !Number.isFinite(temperature) ? "Temperature must be a finite number greater than 0" : temperature <= 0 ? "Temperature must be greater than 0" : !Number.isInteger(topK) || topK < 0 ? "Top K must be a non-negative integer" : !Number.isFinite(repetitionPenalty) ? "Repetition penalty must be a finite number greater than 0" : repetitionPenalty <= 0 ? "Repetition penalty must be greater than 0" : !Number.isInteger(noRepeatNgramSize) || noRepeatNgramSize < 0 ? "No-repeat n-gram size must be a non-negative integer" : null;
@@ -834,7 +839,8 @@ var TranscriptionModal = ({
       displayName,
       audioStreamIndex,
       requestInit,
-      outName,
+      outName: target === null ? outName : "Basic captions",
+      target,
       model: selectedModel,
       language: modelInfo.multilingual ? selectedLanguage : null,
       task: modelInfo.supportsTranslation ? selectedTask : "transcribe",
@@ -861,6 +867,7 @@ var TranscriptionModal = ({
     forceFullSequences,
     noRepeatNgramSize,
     outName,
+    target,
     repetitionPenalty,
     requestInit,
     src,
@@ -873,13 +880,14 @@ var TranscriptionModal = ({
     temperature,
     topK
   ]);
+  const title = target === null ? `Transcribe ${displayName}` : "Generate captions";
   return /* @__PURE__ */ jsx(DismissableModal, {
-    ariaLabel: `Transcribe ${displayName}`,
+    ariaLabel: title,
     children: /* @__PURE__ */ jsxs("div", {
       style: transcriptionModalStyle,
       children: [
         /* @__PURE__ */ jsx(ModalHeader, {
-          title: `Transcribe ${displayName}`
+          title
         }),
         /* @__PURE__ */ jsxs("div", {
           style: container,
@@ -895,7 +903,7 @@ var TranscriptionModal = ({
                 ...buttonStyle,
                 backgroundColor: canTranscribe ? buttonStyle.backgroundColor : BLUE_DISABLED
               },
-              children: "Transcribe"
+              children: target === null ? "Transcribe" : "Generate captions"
             })
           ]
         }),
@@ -951,13 +959,13 @@ var TranscriptionModal = ({
               style: tab === "transcribe" ? settingsPanel : hiddenPanel,
               className: VERTICAL_SCROLLBAR_CLASSNAME,
               children: [
-                /* @__PURE__ */ jsx(OutputSettings, {
+                target === null ? /* @__PURE__ */ jsx(OutputSettings, {
                   exists,
                   onOutNameChange,
                   outName,
                   validationMessage: outputValidationMessage
-                }),
-                /* @__PURE__ */ jsx(RenderModalHr, {}),
+                }) : null,
+                target === null ? /* @__PURE__ */ jsx(RenderModalHr, {}) : null,
                 /* @__PURE__ */ jsx(ModelSettings, {
                   cachedModels,
                   selectedLanguage,