@remotion/studio 4.0.521 → 4.0.523

package/dist/components/Transcription/whisper-languages.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WHISPER_LANGUAGES = void 0;
+exports.WHISPER_LANGUAGES = [
+    ['af', 'Afrikaans'],
+    ['sq', 'Albanian'],
+    ['am', 'Amharic'],
+    ['ar', 'Arabic'],
+    ['hy', 'Armenian'],
+    ['as', 'Assamese'],
+    ['az', 'Azerbaijani'],
+    ['ba', 'Bashkir'],
+    ['eu', 'Basque'],
+    ['be', 'Belarusian'],
+    ['bn', 'Bengali'],
+    ['bs', 'Bosnian'],
+    ['br', 'Breton'],
+    ['bg', 'Bulgarian'],
+    ['my', 'Burmese'],
+    ['ca', 'Catalan'],
+    ['zh', 'Chinese'],
+    ['hr', 'Croatian'],
+    ['cs', 'Czech'],
+    ['da', 'Danish'],
+    ['nl', 'Dutch'],
+    ['en', 'English'],
+    ['et', 'Estonian'],
+    ['fo', 'Faroese'],
+    ['fi', 'Finnish'],
+    ['fr', 'French'],
+    ['gl', 'Galician'],
+    ['ka', 'Georgian'],
+    ['de', 'German'],
+    ['el', 'Greek'],
+    ['gu', 'Gujarati'],
+    ['ht', 'Haitian Creole'],
+    ['ha', 'Hausa'],
+    ['haw', 'Hawaiian'],
+    ['he', 'Hebrew'],
+    ['hi', 'Hindi'],
+    ['hu', 'Hungarian'],
+    ['is', 'Icelandic'],
+    ['id', 'Indonesian'],
+    ['it', 'Italian'],
+    ['ja', 'Japanese'],
+    ['jw', 'Javanese'],
+    ['kn', 'Kannada'],
+    ['kk', 'Kazakh'],
+    ['km', 'Khmer'],
+    ['ko', 'Korean'],
+    ['lo', 'Lao'],
+    ['la', 'Latin'],
+    ['lv', 'Latvian'],
+    ['ln', 'Lingala'],
+    ['lt', 'Lithuanian'],
+    ['lb', 'Luxembourgish'],
+    ['mk', 'Macedonian'],
+    ['mg', 'Malagasy'],
+    ['ms', 'Malay'],
+    ['ml', 'Malayalam'],
+    ['mt', 'Maltese'],
+    ['mi', 'Maori'],
+    ['mr', 'Marathi'],
+    ['mn', 'Mongolian'],
+    ['ne', 'Nepali'],
+    ['no', 'Norwegian'],
+    ['nn', 'Nynorsk'],
+    ['oc', 'Occitan'],
+    ['ps', 'Pashto'],
+    ['fa', 'Persian'],
+    ['pl', 'Polish'],
+    ['pt', 'Portuguese'],
+    ['pa', 'Punjabi'],
+    ['ro', 'Romanian'],
+    ['ru', 'Russian'],
+    ['sa', 'Sanskrit'],
+    ['sr', 'Serbian'],
+    ['sn', 'Shona'],
+    ['sd', 'Sindhi'],
+    ['si', 'Sinhala'],
+    ['sk', 'Slovak'],
+    ['sl', 'Slovenian'],
+    ['so', 'Somali'],
+    ['es', 'Spanish'],
+    ['su', 'Sundanese'],
+    ['sw', 'Swahili'],
+    ['sv', 'Swedish'],
+    ['tl', 'Tagalog'],
+    ['tg', 'Tajik'],
+    ['ta', 'Tamil'],
+    ['tt', 'Tatar'],
+    ['te', 'Telugu'],
+    ['th', 'Thai'],
+    ['bo', 'Tibetan'],
+    ['tr', 'Turkish'],
+    ['tk', 'Turkmen'],
+    ['uk', 'Ukrainian'],
+    ['ur', 'Urdu'],
+    ['uz', 'Uzbek'],
+    ['vi', 'Vietnamese'],
+    ['cy', 'Welsh'],
+    ['yi', 'Yiddish'],
+    ['yo', 'Yoruba'],
+];

package/dist/components/Transcription/whisper-webgpu-capability.d.ts

@@ -0,0 +1,2 @@
+export declare const WHISPER_WEBGPU_PACKAGE = "@remotion/whisper-webgpu";
+export declare const isWhisperWebGpuInstalled: () => boolean;

package/dist/components/Transcription/whisper-webgpu-capability.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isWhisperWebGpuInstalled = exports.WHISPER_WEBGPU_PACKAGE = void 0;
+const OptionalPackageModal_1 = require("../OptionalPackageModal");
+exports.WHISPER_WEBGPU_PACKAGE = '@remotion/whisper-webgpu';
+const isWhisperWebGpuInstalled = () => (0, OptionalPackageModal_1.isOptionalPackageInstalled)(exports.WHISPER_WEBGPU_PACKAGE);
+exports.isWhisperWebGpuInstalled = isWhisperWebGpuInstalled;

package/dist/components/UndoRedoButtons.js

@@ -3,12 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UndoRedoButtons = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
-const is_mac_1 = require("../helpers/is-mac");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const redo_1 = require("../icons/redo");
 const undo_1 = require("../icons/undo");
 const call_api_1 = require("./call-api");
@@ -73,12 +72,8 @@ const UndoRedoButtons = () => {
         // remains open. Keep undo and redo available in that higher z-index context.
         const undo = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'z',
-            commandCtrlKey: true,
-            callback: (e) => {
-                if (e.shiftKey) {
-                    return;
-                }
+            action: 'undo',
+            callback: () => {
                 if (undoFile) {
                     onUndo();
                 }
@@ -87,14 +82,10 @@ const UndoRedoButtons = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: true,
         });
-        const redoWithShiftZ = keybindings.registerKeybinding({
+        const redo = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'z',
-            commandCtrlKey: true,
-            callback: (e) => {
-                if (!e.shiftKey) {
-                    return;
-                }
+            action: 'redo',
+            callback: () => {
                 if (redoFile) {
                     onRedo();
                 }
@@ -103,35 +94,19 @@ const UndoRedoButtons = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: true,
         });
-        const redoWithY = is_mac_1.isMac
-            ? null
-            : keybindings.registerKeybinding({
-                event: 'keydown',
-                key: 'y',
-                commandCtrlKey: true,
-                callback: () => {
-                    if (redoFile) {
-                        onRedo();
-                    }
-                },
-                preventDefault: true,
-                triggerIfInputFieldFocused: false,
-                keepRegisteredWhenNotHighestContext: true,
-            });
         return () => {
             undo.unregister();
-            redoWithShiftZ.unregister();
-            redoWithY === null || redoWithY === void 0 ? void 0 : redoWithY.unregister();
+            redo.unregister();
         };
     }, [keybindings, onRedo, onUndo, redoFile, undoFile]);
-    const undoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+    const undoShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('undo');
+    const redoShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('redo');
+    const undoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || undoShortcut === ''
         ? 'Undo'
-        : `Undo (${ShortcutHint_1.cmdOrCtrlCharacter}+Z)`;
-    const redoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        : `Undo (${undoShortcut})`;
+    const redoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || redoShortcut === ''
         ? 'Redo'
-        : is_mac_1.isMac
-            ? `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Shift+Z)`
-            : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
+        : `Redo (${redoShortcut})`;
     const renderUndo = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(undo_1.UndoIcon, { style: iconStyle, color: color });
     }, []);

package/dist/components/UpdatesSettings.js

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
-const clipboard_1 = require("../icons/clipboard");
+const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
+const copy_1 = require("../icons/copy");
 const InlineAction_1 = require("./InlineAction");
 const KnownBugs_1 = require("./KnownBugs");
 const ModalButton_1 = require("./ModalButton");
@@ -165,10 +166,10 @@ const RenderedReleaseNotes = ({ release }) => {
         resizeObserver.current = observer;
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { style: releaseNotesTitle, children: [release.version, formattedReleaseDate === null
+            jsx_runtime_1.jsxs("div", { style: releaseNotesTitle, children: ["v", release.version, formattedReleaseDate === null
                         ? null
                         : ` \u2013\u00a0${formattedReleaseDate}`] }), document === null ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Release notes could not be loaded.", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: `https://github.com/remotion-dev/remotion/releases/tag/v${release.version}`, children: "View them on GitHub" }),
-                    "."] })) : (jsx_runtime_1.jsx("iframe", { ref: frameRef, onLoad: onLoad, sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin", scrolling: "no", srcDoc: document, style: { ...releaseNotesFrame, height }, title: `Release notes for Remotion ${release.version}` }))] }));
+                    "."] })) : (jsx_runtime_1.jsx("iframe", { ref: frameRef, onLoad: onLoad, sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin", scrolling: "no", srcDoc: document, style: { ...releaseNotesFrame, height }, title: `Release notes for Remotion v${release.version}` }))] }));
 };
 const UpdatesSettings = () => {
     const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
@@ -213,17 +214,20 @@ const UpdatesSettings = () => {
     const updateActionType = (remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.remotionUpgradeSkillAvailable)
         ? 'skill'
         : 'command';
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const onClick = (0, react_1.useCallback)(() => {
         if (updateAction === null) {
             return;
         }
-        (0, copy_text_1.copyText)(updateAction).catch((err) => {
+        (0, copy_text_1.copyText)(updateAction)
+            .then(markCopied)
+            .catch((err) => {
             (0, NotificationCenter_1.showNotification)('Could not copy: ' + err.message, 2000);
         });
-    }, [updateAction]);
+    }, [markCopied, updateAction]);
     const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
-    }, []);
+        return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, color: color, style: copyIcon });
+    }, [copied]);
     const onUpgrade = (0, react_1.useCallback)(() => {
         if (info) {
             upgrade(info.latestVersion);
@@ -251,20 +255,16 @@ const UpdatesSettings = () => {
     }
     if (!info.updateAvailable && !info.skillsUpdateAvailable) {
         return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsxs("div", { style: title, children: ["You", "'re", " up to date."] }), jsx_runtime_1.jsxs("div", { style: text, children: ["Remotion ", info.currentVersion, " and your Remotion Agent Skills are up to date."] })
+                jsx_runtime_1.jsxs("div", { style: title, children: ["You", "'re", " up to date."] }), jsx_runtime_1.jsxs("div", { style: text, children: ["Remotion v", info.currentVersion, " and your Remotion Agent Skills are up to date."] })
             ] }));
     }
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [info.updateAvailable && info.packageManager !== 'unknown' ? (jsx_runtime_1.jsxs("div", { style: { paddingTop: 12 }, children: [
-                    jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onUpgrade, children: ["Upgrade to ", info.latestVersion] }), jsx_runtime_1.jsx("div", { style: { ...text, marginTop: 8 }, children: "You will need to restart Studio after upgrading." })
-                ] })) : null, upgradeError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: upgradeError, type: "error", align: "flex-start" })) : null, hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs !== null && knownBugs !== void 0 ? knownBugs : [] }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["Or run the following ", updateActionType, ":"] })
-                ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["A new Remotion update is available. You can also run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [info.updateAvailable ? (jsx_runtime_1.jsx("div", { style: title, children: "A new Remotion update is available." })) : null, info.updateAvailable && info.packageManager !== 'unknown' ? (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onUpgrade, children: ["Upgrade to v", info.latestVersion] }) })) : null, upgradeError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: upgradeError, type: "error", align: "flex-start" })) : null, hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version v", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs !== null && knownBugs !== void 0 ? knownBugs : [] }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["Or run the following ", updateActionType, ":"] })
+                ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["You can also run the following ", updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                     jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, title: "Copy command" })
-                ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["This will update Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, info.skillsUpdateAvailable
-                        ? ' and update your project Remotion Agent Skills.'
-                        : '.'] })) : null, info.updateAvailable ? ((releaseNotes === null || releaseNotes === void 0 ? void 0 : releaseNotes.currentVersion) === info.currentVersion &&
+                ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["You", "'re", " currently running Remotion v", info.currentVersion, "."] })) : null, info.updateAvailable ? ((releaseNotes === null || releaseNotes === void 0 ? void 0 : releaseNotes.currentVersion) === info.currentVersion &&
                 releaseNotes.latestVersion === info.latestVersion ? (releaseNotes.releases.length === 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx("div", { style: releaseNotesTitle, children: info.latestVersion }), jsx_runtime_1.jsxs("div", { style: text, children: ["Release notes could not be loaded.", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "View them on GitHub" }),
+                    jsx_runtime_1.jsxs("div", { style: releaseNotesTitle, children: ["v", info.latestVersion] }), jsx_runtime_1.jsxs("div", { style: text, children: ["Release notes could not be loaded.", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "View them on GitHub" }),
                             "."] })
                 ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [releaseNotes.releases.map((release) => (jsx_runtime_1.jsx(RenderedReleaseNotes, { release: release }, release.version))), releaseNotes.hasMore ? (jsx_runtime_1.jsxs("div", { style: { ...text, paddingTop: 12 }, children: ["Showing the 5 most recent releases.", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "View all releases on GitHub" }),
                             "."] })) : null] }))) : (jsx_runtime_1.jsx("div", { style: text, children: "Loading release notes..." }))) : null] }));

package/dist/components/VideoMatting/LazyModels.d.ts

@@ -0,0 +1 @@
+export { Models as default } from './Models';

package/dist/components/VideoMatting/LazyModels.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const Models_1 = require("./Models");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Models_1.Models; } });

package/dist/components/VideoMatting/Models.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Models: React.FC<{
+    readonly description: string | null;
+    readonly indent: boolean;
+    readonly visible: boolean;
+}>;

package/dist/components/VideoMatting/Models.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Models = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const video_matting_1 = require("@remotion/video-matting");
+const react_1 = require("react");
+const ModelManager_1 = require("../ModelManager");
+const AVAILABLE_MODELS = (0, video_matting_1.getAvailableModels)();
+const Models = ({ description, indent, visible }) => {
+    const isModelCached = (0, react_1.useCallback)((model) => (0, video_matting_1.isVideoMattingModelCached)({ model }), []);
+    const loadModel = (0, react_1.useCallback)((model, onProgress) => (0, video_matting_1.loadVideoMattingModel)({
+        model,
+        onProgress: (progress) => onProgress(progress.progress),
+    }), []);
+    const removeModel = (0, react_1.useCallback)((model) => (0, video_matting_1.removeVideoMattingModel)({ model }), []);
+    return (jsx_runtime_1.jsx(ModelManager_1.ModelManager, { ariaLabel: "Video matting models", availableModels: AVAILABLE_MODELS, description: description, indent: indent, isModelCached: isModelCached, loadModel: loadModel, prepare: null, removeModel: removeModel, visible: visible }));
+};
+exports.Models = Models;

package/dist/components/VideoMatting/VideoMattingModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { VideoMattingModalState } from '../../state/modals';
+export declare const VideoMattingModal: React.FC<VideoMattingModalState>;

package/dist/components/VideoMatting/VideoMattingModal.js

@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoMattingModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
+const video_matting_1 = require("@remotion/video-matting");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const Checkmark_1 = require("../../icons/Checkmark");
+const models_1 = require("../../icons/models");
+const separation_1 = require("../../icons/separation");
+const modals_1 = require("../../state/modals");
+const sidebar_1 = require("../../state/sidebar");
+const Button_1 = require("../Button");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const ModalHeader_1 = require("../ModalHeader");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const DismissableModal_1 = require("../NewComposition/DismissableModal");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
+const OptionsPanel_1 = require("../OptionsPanel");
+const public_output_name_1 = require("../public-output-name");
+const layout_1 = require("../RenderModal/layout");
+const render_modals_1 = require("../RenderModal/render-modals");
+const RenderModalHr_1 = require("../RenderModal/RenderModalHr");
+const RenderModalOutputName_1 = require("../RenderModal/RenderModalOutputName");
+const context_1 = require("../RenderQueue/context");
+const vertical_1 = require("../Tabs/vertical");
+const use_model_cache_status_1 = require("../use-model-cache-status");
+const use_static_files_1 = require("../use-static-files");
+const Models_1 = require("./Models");
+const MODELS = (0, video_matting_1.getAvailableModels)();
+const controlStyle = { width: 330, maxWidth: '100%' };
+const panelStyle = {
+    ...render_modals_1.optionsPanel,
+    flexDirection: 'column',
+    paddingTop: 16,
+};
+const modalStyle = {
+    ...render_modals_1.outerModalStyle,
+    height: 'auto',
+    maxHeight: 'calc(100vh - 40px)',
+    minHeight: render_modals_1.outerModalStyle.height,
+    outline: 'none',
+};
+const modalLayout = {
+    ...render_modals_1.horizontalLayout,
+    flex: '1 1 auto',
+};
+const hiddenPanel = { display: 'none' };
+const validationStyle = { padding: '0 16px 8px' };
+const makeOptions = ({ items, selected, setSelected, }) => items.map(({ id, label: optionLabel }) => ({
+    type: 'item',
+    id,
+    value: id,
+    label: optionLabel,
+    leftItem: id === selected ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+    keyHint: null,
+    quickSwitcherLabel: null,
+    subMenu: null,
+    disabled: false,
+    onClick: () => setSelected(id),
+}));
+const VideoMattingModal = ({ displayName, src, }) => {
+    var _a, _b;
+    const [tab, setTab] = (0, react_1.useState)('separate');
+    const isModelCached = (0, react_1.useCallback)((selectedModel) => (0, video_matting_1.isVideoMattingModelCached)({ model: selectedModel }), []);
+    const cachedModels = (0, use_model_cache_status_1.useModelCacheStatus)({
+        isModelCached,
+        models: MODELS,
+        refreshKey: tab,
+    });
+    const baseName = (0, react_1.useMemo)(() => (0, public_output_name_1.getDefaultOutputBaseName)(src, displayName, 'video'), [displayName, src]);
+    const [baseOutName, setBaseOutName] = (0, react_1.useState)(`${baseName}-base.webm`);
+    const [foregroundOutName, setForegroundOutName] = (0, react_1.useState)(`${baseName}-foreground.webm`);
+    const [model, setModel] = (0, react_1.useState)('ben2-base');
+    const [audio, setAudio] = (0, react_1.useState)('base');
+    const [videoBitrate, setVideoBitrate] = (0, react_1.useState)('very-high');
+    const [support, setSupport] = (0, react_1.useState)({ type: 'checking' });
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
+    const { addVideoMattingJob, videoMattingJobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        setSupport({ type: 'checking' });
+        (0, video_matting_1.canUseVideoMatting)({ model }).then((result) => {
+            if (!cancelled) {
+                setSupport(result.supported
+                    ? { type: 'supported' }
+                    : { type: 'unsupported', message: result.detailedReason });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [model]);
+    const normalizedBase = baseOutName.normalize('NFC').toLowerCase();
+    const normalizedForeground = foregroundOutName.normalize('NFC').toLowerCase();
+    const duplicateOutput = normalizedBase === normalizedForeground;
+    const queuedOutputs = new Set(videoMattingJobs
+        .filter((job) => job.status === 'idle' || job.status === 'running')
+        .flatMap((job) => [job.baseOutName, job.foregroundOutName])
+        .map((name) => name.normalize('NFC').toLowerCase()));
+    const baseError = (_a = (0, public_output_name_1.validatePublicOutputName)({ extension: '.webm', outName: baseOutName })) !== null && _a !== void 0 ? _a : (duplicateOutput
+        ? 'Base and foreground outputs must be different'
+        : queuedOutputs.has(normalizedBase)
+            ? 'Another video matting job is using this output file'
+            : null);
+    const foregroundError = (_b = (0, public_output_name_1.validatePublicOutputName)({
+        extension: '.webm',
+        outName: foregroundOutName,
+    })) !== null && _b !== void 0 ? _b : (duplicateOutput
+        ? 'Base and foreground outputs must be different'
+        : queuedOutputs.has(normalizedForeground)
+            ? 'Another video matting job is using this output file'
+            : null);
+    const baseExists = staticFiles.some((file) => file.name.normalize('NFC').toLowerCase() === normalizedBase);
+    const foregroundExists = staticFiles.some((file) => file.name.normalize('NFC').toLowerCase() === normalizedForeground);
+    const canSubmit = support.type === 'supported' &&
+        baseError === null &&
+        foregroundError === null;
+    const modelOptions = (0, react_1.useMemo)(() => makeOptions({
+        items: MODELS.map((item) => ({
+            id: item.name,
+            label: `${item.name} · ${(0, studio_shared_1.formatBytes)(item.webGpuDownloadSize)}${cachedModels.has(item.name) ? ' · Downloaded' : ''}`,
+        })),
+        selected: model,
+        setSelected: setModel,
+    }), [cachedModels, model]);
+    const audioOptions = (0, react_1.useMemo)(() => makeOptions({
+        items: [
+            { id: 'base', label: 'Background layer' },
+            { id: 'foreground', label: 'Foreground layer' },
+            { id: 'both', label: 'Both layers' },
+            { id: 'none', label: 'No audio' },
+        ],
+        selected: audio,
+        setSelected: setAudio,
+    }), [audio]);
+    const qualityOptions = (0, react_1.useMemo)(() => makeOptions({
+        items: ['very-low', 'low', 'medium', 'high', 'very-high'].map((id) => ({
+            id: id,
+            label: id
+                .split('-')
+                .map((part) => part[0].toUpperCase() + part.slice(1))
+                .join(' '),
+        })),
+        selected: videoBitrate,
+        setSelected: setVideoBitrate,
+    }), [videoBitrate]);
+    const submit = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!canSubmit)
+            return;
+        addVideoMattingJob({
+            src,
+            displayName,
+            baseOutName,
+            foregroundOutName,
+            model,
+            audio,
+            videoBitrate,
+        });
+        setSidebarCollapsedState({ left: null, right: 'expanded' });
+        (0, OptionsPanel_1.persistSelectedOptionsSidebarPanel)('renders');
+        (_a = options_sidebar_tabs_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
+        setSelectedModal(null);
+    }, [
+        addVideoMattingJob,
+        audio,
+        baseOutName,
+        canSubmit,
+        displayName,
+        foregroundOutName,
+        model,
+        setSelectedModal,
+        setSidebarCollapsedState,
+        src,
+        videoBitrate,
+    ]);
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: `Track matting ${displayName}`, children: jsx_runtime_1.jsxs("div", { style: modalStyle, children: [
+                jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Track matting ${displayName}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+                        jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { disabled: !canSubmit, onClick: submit, title: support.type === 'unsupported' ? support.message : undefined, style: {
+                                ...render_modals_1.buttonStyle,
+                                backgroundColor: canSubmit
+                                    ? render_modals_1.buttonStyle.backgroundColor
+                                    : colors_1.BLUE_DISABLED,
+                            }, children: "Separate" })
+                    ] }), jsx_runtime_1.jsxs("div", { style: modalLayout, children: [
+                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { autoFocus: true, onClick: () => setTab('separate'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: render_modals_1.icon }) })), selected: tab === 'separate', style: render_modals_1.horizontalTab, children: "Separate" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { onClick: () => setTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), selected: tab === 'models', style: render_modals_1.horizontalTab, children: "Models" })] }), jsx_runtime_1.jsxs("div", { style: tab === 'separate' ? panelStyle : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
+                                jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: "Base video output file", existingOutputPath: window.remotion_publicFolderExists
+                                        ? `${window.remotion_publicFolderExists}/${baseOutName}`
+                                        : null, existence: baseExists, inputStyle: layout_1.input, label: "Base output in public/", onValueChange: (event) => setBaseOutName(event.target.value), outName: baseOutName, validationMessage: baseError }), jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: "Foreground video output file", existingOutputPath: window.remotion_publicFolderExists
+                                        ? `${window.remotion_publicFolderExists}/${foregroundOutName}`
+                                        : null, existence: foregroundExists, inputStyle: layout_1.input, label: "Foreground output in public/", onValueChange: (event) => setForegroundOutName(event.target.value), outName: foregroundOutName, validationMessage: foregroundError }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
+                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Model" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: modelOptions, selectedId: model, title: "Model", style: controlStyle }) })
+                                    ] }), support.type === 'unsupported' ? (jsx_runtime_1.jsx("div", { style: validationStyle, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: support.message, type: "error" }) })) : null, jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
+                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Audio" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioOptions, selectedId: audio, title: "Audio", style: controlStyle }) })
+                                    ] }), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
+                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Video quality" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: qualityOptions, selectedId: String(videoBitrate), title: "Video quality", style: controlStyle }) })
+                                    ] })
+                            ] }), jsx_runtime_1.jsx(Models_1.Models, { description: 'Models are downloaded automatically when needed.\nYou can also manage the browser cache here.', indent: true, visible: tab === 'models' })
+                    ] })
+            ] }) }));
+};
+exports.VideoMattingModal = VideoMattingModal;

package/dist/components/VideoMatting/VideoMattingModalWithOptionalPackage.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { VideoMattingModalState } from '../../state/modals';
+export declare const VideoMattingModalWithOptionalPackage: React.FC<{
+    readonly state: VideoMattingModalState;
+}>;

package/dist/components/VideoMatting/VideoMattingModalWithOptionalPackage.js

@@ -0,0 +1,46 @@
+"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.VideoMattingModalWithOptionalPackage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const OptionalPackageModal_1 = require("../OptionalPackageModal");
+const video_matting_capability_1 = require("./video-matting-capability");
+const LazyVideoMattingModal = react_1.default.lazy(async () => {
+    const { VideoMattingModal } = await Promise.resolve().then(() => __importStar(require('./VideoMattingModal')));
+    return { default: VideoMattingModal };
+});
+const VideoMattingModalWithOptionalPackage = ({ state }) => (jsx_runtime_1.jsx(OptionalPackageModal_1.OptionalPackageModal, { ariaLabel: "Install video matting package", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, title: "Track matting", children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyVideoMattingModal, { ...state }) }) }));
+exports.VideoMattingModalWithOptionalPackage = VideoMattingModalWithOptionalPackage;

package/dist/components/VideoMatting/video-matting-capability.d.ts

@@ -0,0 +1,2 @@
+export declare const VIDEO_MATTING_PACKAGE = "@remotion/video-matting";
+export declare const isVideoMattingInstalled: () => boolean;

package/dist/components/VideoMatting/video-matting-capability.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isVideoMattingInstalled = exports.VIDEO_MATTING_PACKAGE = void 0;
+const OptionalPackageModal_1 = require("../OptionalPackageModal");
+exports.VIDEO_MATTING_PACKAGE = '@remotion/video-matting';
+const isVideoMattingInstalled = () => (0, OptionalPackageModal_1.isOptionalPackageInstalled)(exports.VIDEO_MATTING_PACKAGE);
+exports.isVideoMattingInstalled = isVideoMattingInstalled;