@remotion/studio 4.0.527 → 4.0.529

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/CompositionIdListItem.js

@@ -28,6 +28,6 @@ const CompositionIdListItem = ({ id, isActive, onSelect }) => {
             ...exports.listItemStyle,
             ...(hover ? exports.listItemHoverStyle : {}),
             ...(isActive ? exports.listItemActiveStyle : {}),
-        }, title: id, children: id }));
+        }, "aria-label": id, children: id }));
 };
 exports.CompositionIdListItem = CompositionIdListItem;

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,9 +84,34 @@ 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]);
-    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: [
+        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, 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, role: "group", style: { ...locationContainer, fontSize }, "aria-label": 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-npa6szn1.mjs → CaptionQueueProcessor-qj37c6r2.mjs}

@@ -1,22 +1,20 @@
 import {
   loadModelForJob
-} from "./index-v4tr1bft.mjs";
+} from "./index-09txs1bj.mjs";
 import {
   installRequiredPackages
-} from "./index-21hxsfaa.mjs";
+} from "./index-vtr5qzam.mjs";
 import {
   RenderQueueContext
-} from "./index-9x6e1dq0.mjs";
-import {
-  callApi
-} from "./index-r1gr3j3a.mjs";
+} from "./index-hqxc6tzp.mjs";
 import {
+  callApi,
   getBrowserStudioOperations,
   writeStaticFile
-} from "./index-cw0pnpg5.mjs";
-import"./index-9xxg6218.mjs";
+} from "./index-dfy1t576.mjs";
+import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
-import"./index-k426ye99.mjs";
+import"./index-3qb54r5j.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/RenderQueue/CaptionQueueProcessor.tsx
@@ -24,6 +22,7 @@ import {
   canUseWhisperWebGpu,
   clearStaleModels,
   disposeWhisperModel,
+  downloadWhisperModel,
   isWhisperModelCached,
   loadWhisperModel,
   toCaptions,
@@ -46,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();
@@ -68,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",
@@ -82,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({
@@ -95,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);
@@ -123,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);
       }
@@ -142,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, {
@@ -158,6 +191,7 @@ var CaptionQueueProcessor = () => {
         value: 0.3
       });
       const channelWaveform = await resampleMediaTo16Khz({
+        signal,
         src: job.src,
         audioStreamIndex: job.audioStreamIndex,
         requestInit: job.requestInit,
@@ -173,6 +207,7 @@ var CaptionQueueProcessor = () => {
         value: 0.5
       });
       const transcription = await transcribe({
+        signal,
         channelWaveform,
         model: job.model,
         task: job.task,
@@ -189,6 +224,8 @@ var CaptionQueueProcessor = () => {
       const { captions } = toCaptions({
         whisperWebGpuOutput: transcription
       });
+      signal.throwIfAborted();
+      markCaptionJobSaving(job.id);
       if (job.target === null) {
         updateCaptionJobProgress(job.id, {
           message: `Saving ${job.outName}...`,
@@ -225,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-rjsrgap5.mjs

@@ -0,0 +1,12 @@
+import {
+  Models
+} from "./index-f9hxt5yh.mjs";
+import"./index-vnc2wdfd.mjs";
+import"./index-m01zjph7.mjs";
+import"./index-qve7mdfp.mjs";
+import"./index-5zrb1ft4.mjs";
+import"./index-3qb54r5j.mjs";
+import"./index-rcv7qkt5.mjs";
+export {
+  Models as default
+};

package/dist/esm/LazyModels-rnbjx98t.mjs

@@ -0,0 +1,12 @@
+import {
+  Models
+} from "./index-jc22b2wb.mjs";
+import"./index-vnc2wdfd.mjs";
+import"./index-m01zjph7.mjs";
+import"./index-qve7mdfp.mjs";
+import"./index-5zrb1ft4.mjs";
+import"./index-3qb54r5j.mjs";
+import"./index-rcv7qkt5.mjs";
+export {
+  Models as default
+};

package/dist/esm/{TranscriptionModal-79m5wgcj.mjs → TranscriptionModal-y7zeqj2d.mjs}

@@ -2,11 +2,10 @@ import {
   useModelCacheStatus
 } from "./index-7tt71e8n.mjs";
 import {
-  GearIcon,
   NumberSetting,
   getDefaultCaptionOutputName,
   validateCaptionOutputName
-} from "./index-vxwg66ar.mjs";
+} from "./index-r9bj4tta.mjs";
 import {
   Button,
   Checkbox,
@@ -14,9 +13,9 @@ import {
   Combobox,
   DismissableModal,
   ExpandedFolderIconSolid,
+  GearIcon,
   InfoBubble,
   ModalHeader,
-  ModelsIcon,
   RemotionInput,
   RenderModalHr,
   SetSelectedModalContext,
@@ -31,26 +30,27 @@ import {
   persistSelectedOptionsSidebarPanel,
   rightRow,
   useStaticFiles
-} from "./index-ppspzgn9.mjs";
+} from "./index-m2a95v3p.mjs";
 import {
   showNotification
-} from "./index-21hxsfaa.mjs";
+} from "./index-vtr5qzam.mjs";
 import {
   RenderQueueContext
-} from "./index-9x6e1dq0.mjs";
+} from "./index-hqxc6tzp.mjs";
 import {
   openInFileExplorer
-} from "./index-e855w59j.mjs";
-import"./index-r1gr3j3a.mjs";
+} from "./index-19d05w9e.mjs";
 import {
   getBrowserStudioOperations
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
+import"./index-24wge6y5.mjs";
 import {
   Models
-} from "./index-614tdz2q.mjs";
-import"./index-r0ejh5sy.mjs";
+} from "./index-f9hxt5yh.mjs";
+import"./index-vnc2wdfd.mjs";
 import {
   InlineAction,
+  ModelsIcon,
   Spacing,
   VERTICAL_SCROLLBAR_CLASSNAME,
   ValidationMessage,
@@ -64,14 +64,14 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-5t2dwxsk.mjs";
-import"./index-9xxg6218.mjs";
+} from "./index-m01zjph7.mjs";
+import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED,
   LIGHT_TEXT,
   WHITE
-} from "./index-k426ye99.mjs";
+} from "./index-3qb54r5j.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/Transcription/TranscriptionModal.tsx
@@ -299,7 +299,7 @@ var TranscriptionSettingLabel = ({ children, inputId, name }) => {
         x: 0.5
       }),
       /* @__PURE__ */ jsx(InfoBubble, {
-        title: `Learn more about ${name}`,
+        "aria-label": `Learn more about ${name}`,
         children: /* @__PURE__ */ jsx("div", {
           style: tooltipContent,
           children
@@ -424,7 +424,7 @@ var ModelSettings = ({
             children: /* @__PURE__ */ jsx(Combobox, {
               values: modelOptions,
               selectedId: selectedModel,
-              title: "Whisper model",
+              "aria-label": "Whisper model",
               style: controlStyle
             })
           })
@@ -442,7 +442,7 @@ var ModelSettings = ({
             children: /* @__PURE__ */ jsx(Combobox, {
               values: languageOptions,
               selectedId: selectedLanguage,
-              title: "Spoken language",
+              "aria-label": "Spoken language",
               style: controlStyle
             })
           })
@@ -460,7 +460,7 @@ var ModelSettings = ({
             children: /* @__PURE__ */ jsx(Combobox, {
               values: taskOptions,
               selectedId: effectiveTask,
-              title: "Task",
+              "aria-label": "Task",
               style: controlStyle
             })
           })
@@ -560,7 +560,7 @@ var OutputSettings = ({ exists, onOutNameChange, outName, validationMessage }) =
                       isBrowserStudio ? null : /* @__PURE__ */ jsx(InlineAction, {
                         onClick: openExistingOutput,
                         renderAction: renderOpenIcon,
-                        title: `Open in ${fileManagerName}`,
+                        "aria-label": `Open in ${fileManagerName}`,
                         variant: null
                       }),
                       "Exists, will be overwritten"
@@ -816,7 +816,7 @@ var TranscriptionModal = ({
     };
   }, []);
   const normalizedOutName = outName.normalize("NFC").toLowerCase();
-  const queuedOutputExists = captionJobs.some((job) => job.target === null && (job.status === "idle" || job.status === "running") && job.outName.normalize("NFC").toLowerCase() === normalizedOutName);
+  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;
@@ -898,7 +898,7 @@ var TranscriptionModal = ({
             /* @__PURE__ */ jsx(Button, {
               onClick: onAddToQueue,
               disabled: !canTranscribe,
-              title: transcribeDisabledReason,
+              "aria-label": transcribeDisabledReason,
               style: {
                 ...buttonStyle,
                 backgroundColor: canTranscribe ? buttonStyle.backgroundColor : BLUE_DISABLED