@remotion/studio 4.0.522 → 4.0.523

package/dist/api/install-package.js

@@ -4,14 +4,16 @@ exports.installPackages = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../components/call-api");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const optional_package_dependencies_1 = require("../helpers/optional-package-dependencies");
 const installPackages = async (dependencies) => {
     if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
         throw new Error('installPackages() is only available in the Studio');
     }
+    const dependenciesWithAuxiliaryPackages = (0, optional_package_dependencies_1.withRequiredAuxiliaryPackages)(dependencies);
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     if (browserStudioOperations !== null) {
         const response = await browserStudioOperations.packageInstallation.installPackages({
-            dependencies: [...dependencies],
+            dependencies: dependenciesWithAuxiliaryPackages,
         });
         if (!response.success) {
             const error = new Error(response.reason);
@@ -24,7 +26,7 @@ const installPackages = async (dependencies) => {
         throw new Error('installPackages() is not available in Read-Only Studio');
     }
     return (0, call_api_1.callApi)('/api/install-package', {
-        dependencies: [...dependencies],
+        dependencies: dependenciesWithAuxiliaryPackages,
     });
 };
 exports.installPackages = installPackages;

package/dist/components/AssetAudioVolume.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const AssetAudioVolume: React.FC<{
+    readonly src: string | null;
+    readonly waveformSampleRate: number | null;
+}>;

package/dist/components/AssetAudioVolume.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetAudioVolume = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const timeline_utils_1 = require("@remotion/timeline-utils");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const AssetAudioVolume = ({ src, waveformSampleRate }) => {
+    const [value, setValue] = (0, react_1.useState)('Calculating…');
+    (0, react_1.useEffect)(() => {
+        setValue('Calculating…');
+        if (src === null || waveformSampleRate === null) {
+            return;
+        }
+        return (0, timeline_utils_1.subscribeToWaveformPeaks)({
+            src,
+            waveformSampleRate,
+            onPeaks: (_peaks, final, averageVolume) => {
+                if (final) {
+                    setValue((0, timeline_utils_1.formatAverageAudioVolume)(averageVolume));
+                }
+            },
+            onError: () => setValue('Unavailable'),
+        });
+    }, [src, waveformSampleRate]);
+    return (jsx_runtime_1.jsx("span", { style: {
+            fontFamily: 'sans-serif',
+            fontSize: 13,
+            lineHeight: '20px',
+            color: colors_1.LIGHT_TEXT,
+        }, title: "RMS level across all channels over the full audio track, including silence.", children: value }));
+};
+exports.AssetAudioVolume = AssetAudioVolume;

package/dist/components/Canvas.js

@@ -510,8 +510,7 @@ const Canvas = ({ canvasContent, size }) => {
     (0, react_1.useEffect)(() => {
         const resetBinding = keybindings.registerKeybinding({
             event: 'keydown',
-            key: '0',
-            commandCtrlKey: false,
+            action: 'resetZoom',
             callback: onReset,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -519,8 +518,7 @@ const Canvas = ({ canvasContent, size }) => {
         });
         const zoomIn = keybindings.registerKeybinding({
             event: 'keydown',
-            key: '+',
-            commandCtrlKey: false,
+            action: 'zoomIn',
             callback: onZoomIn,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -528,8 +526,7 @@ const Canvas = ({ canvasContent, size }) => {
         });
         const zoomOut = keybindings.registerKeybinding({
             event: 'keydown',
-            key: '-',
-            commandCtrlKey: false,
+            action: 'zoomOut',
             callback: onZoomOut,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -773,6 +770,7 @@ const Canvas = ({ canvasContent, size }) => {
             try {
                 const [newPreflight, currentPreflight] = await Promise.all([
                     (0, element_install_api_1.prepareElementInstall)({
+                        installationName: null,
                         destination: {
                             type: 'new-composition',
                             compositionFile: null,
@@ -780,6 +778,7 @@ const Canvas = ({ canvasContent, size }) => {
                         element: activeElementInstallRequest.element,
                     }),
                     (0, element_install_api_1.prepareElementInstall)({
+                        installationName: null,
                         destination: {
                             type: 'current-composition',
                             compositionFile: activeElementInstallRequest.compositionFile,

package/dist/components/CaptionInspector.js

@@ -1,12 +1,47 @@
 "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.CaptionInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
 const upload_1 = require("../icons/upload");
-const Button_1 = require("./Button");
+const modals_1 = require("../state/modals");
 const CaptionTextEditor_1 = require("./CaptionTextEditor");
+const InlineAction_1 = require("./InlineAction");
 const CollapsibleInspectorSectionHeader_1 = require("./InspectorPanel/CollapsibleInspectorSectionHeader");
 const common_1 = require("./InspectorPanel/common");
 const styles_1 = require("./InspectorPanel/styles");
@@ -26,38 +61,57 @@ const readOnlyStatus = {
 const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onTextCancel, onReplaceCaptions, onToggle, readOnly, readOnlyTitle, }) => {
     const fileInput = (0, react_1.useRef)(null);
     const [isImporting, setIsImporting] = (0, react_1.useState)(false);
-    const importCaptions = (0, react_1.useCallback)(async (event) => {
-        var _a;
-        const file = (_a = event.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
-        event.currentTarget.value = '';
-        if (!file || onReplaceCaptions === null) {
+    const { setSelectedModal } = react_1.default.useContext(modals_1.SetSelectedModalContext);
+    const importCaptions = (0, react_1.useCallback)(async ({ fileName, contents, }) => {
+        if (onReplaceCaptions === null) {
             return;
         }
         setIsImporting(true);
         try {
             onReplaceCaptions((0, parse_caption_file_1.parseCaptionFile)({
-                fileName: file.name,
-                contents: await file.text(),
+                fileName,
+                contents: await contents,
             }));
         }
         catch (error) {
-            (0, NotificationCenter_1.showNotification)(`Could not import ${file.name}: ${error instanceof Error ? error.message : String(error)}`, 5000);
+            (0, NotificationCenter_1.showNotification)(`Could not import ${fileName}: ${error instanceof Error ? error.message : String(error)}`, 5000);
         }
         finally {
             setIsImporting(false);
         }
     }, [onReplaceCaptions]);
+    const onFileSelected = (0, react_1.useCallback)((event) => {
+        var _a;
+        const file = (_a = event.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
+        event.currentTarget.value = '';
+        if (!file) {
+            return;
+        }
+        importCaptions({ fileName: file.name, contents: file.text() }).catch(() => undefined);
+    }, [importCaptions]);
+    const openCaptionSelection = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode: 'assets',
+            invocationTimestamp: Date.now(),
+            assetSelection: {
+                initialQuery: 'type:json',
+                onSelectFile: () => {
+                    var _a;
+                    return (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
+                },
+                onSelected: (asset) => {
+                    return importCaptions({
+                        fileName: asset.name,
+                        contents: fetch(asset.src).then((response) => response.text()),
+                    }).catch(() => undefined);
+                },
+            },
+            compositionSelection: null,
+        });
+    }, [importCaptions, setSelectedModal]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderEnd, children: [onReplaceCaptions === null ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: importCaptions, type: "file" }), jsx_runtime_1.jsxs(Button_1.Button, { buttonContainerStyle: {
-                                            alignItems: 'center',
-                                            display: 'flex',
-                                            gap: 4,
-                                        }, disabled: isImporting, onClick: () => {
-                                            var _a;
-                                            return (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
-                                        }, size: "condensed", title: importTooltip, children: [
-                                            jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: colors_1.CURRENT_COLOR, focusable: "false", style: { height: 12, width: 12 } }), isImporting ? 'Importing…' : 'Import'] })
-                                ] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
+                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: onFileSelected, type: "file" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Import captions", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: isImporting, onClick: openCaptionSelection, renderAction: (color) => (jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: color, focusable: "false", style: { height: 14, width: 14 } })), title: importTooltip, variant: null })] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
 };
 exports.CaptionInspector = CaptionInspector;

package/dist/components/CheckboardToggle.js

@@ -6,14 +6,9 @@ const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
 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 checkerboard_1 = require("../state/checkerboard");
 const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = [
-    'Show transparency as checkerboard',
-    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(T)',
-]
-    .filter(no_react_1.NoReactInternals.truthy)
-    .join(' ');
 const CheckboardToggle = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const onClick = (0, react_1.useCallback)(() => {
@@ -21,6 +16,13 @@ const CheckboardToggle = () => {
             return !c;
         });
     }, [setCheckerboard]);
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleCheckerboard');
+    const accessibilityLabel = [
+        'Show transparency as checkerboard',
+        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || shortcut === '' ? null : `(${shortcut})`,
+    ]
+        .filter(no_react_1.NoReactInternals.truthy)
+        .join(' ');
     return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": checkerboard, onClick: onClick, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
                 jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : color, d: "M256 48h184c13.3 0 24 10.7 24 24v184H256V48zM48 256h208v208H72c-13.3 0-24-10.7-24-24V256z" }), jsx_runtime_1.jsx("rect", { x: "48", y: "48", width: "416", height: "416", rx: "24", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" }), jsx_runtime_1.jsx("path", { d: "M256 48v416M48 256h416", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" })
             ] })) }));

package/dist/components/Checkbox.d.ts

@@ -8,6 +8,7 @@ export declare const Checkbox: React.FC<{
     readonly checked: boolean;
     readonly onChange: React.ChangeEventHandler<HTMLInputElement>;
     readonly name: string;
+    readonly inputId?: string;
     readonly disabled?: boolean;
     readonly variant?: CheckboxVariant;
 }>;

package/dist/components/Checkbox.js

@@ -13,7 +13,7 @@ const CHECKMARK_SIZES = {
     default: 14,
     small: 13,
 };
-const Checkbox = ({ checked, onChange, disabled, name, variant = 'default' }) => {
+const Checkbox = ({ checked, onChange, disabled, inputId, name, variant = 'default' }) => {
     const size = SIZES[variant];
     const checkmarkSize = CHECKMARK_SIZES[variant];
     const background = (0, react_1.useMemo)(() => ({
@@ -47,7 +47,7 @@ const Checkbox = ({ checked, onChange, disabled, name, variant = 'default' }) =>
         };
     }, [disabled, size]);
     return (jsx_runtime_1.jsxs("div", { style: background, children: [
-            jsx_runtime_1.jsx("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: checkmarkSize }) : null })
+            jsx_runtime_1.jsx("input", { id: inputId, style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: checkmarkSize }) : null })
         ] }));
 };
 exports.Checkbox = Checkbox;

package/dist/components/CompositionContextButton.js

@@ -7,6 +7,7 @@ const client_id_1 = require("../helpers/client-id");
 const hoverable_1 = require("../helpers/hoverable");
 const ellipsis_1 = require("../icons/ellipsis");
 const InlineDropdown_1 = require("./InlineDropdown");
+const layout_1 = require("./layout");
 const revealStyle = {
     display: 'flex',
 };
@@ -26,6 +27,8 @@ const CompositionContextButton = ({ visible, getItems, readOnlyStudio }) => {
     if (!visible || (connectionStatus !== 'connected' && !readOnlyStudio)) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: revealStyle, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }) }));
+    return (jsx_runtime_1.jsxs("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: revealStyle, children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
+        ] }));
 };
 exports.CompositionContextButton = CompositionContextButton;

package/dist/components/CompositionSelectorItem.js

@@ -513,7 +513,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     if (item.type === 'folder') {
         const folderPath = getFolderPath(item);
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { style: reorderWrapper, children: [reorderLineStyle ? (jsx_runtime_1.jsx("div", { "data-composition-reorder-line": true, style: reorderLineStyle })) : null, jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: `__remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onItemDragStart, onDragEnd: onItemDragEnd, onDragOver: onRowDragOver, onDragLeave: onRowDragLeave, onDrop: onRowDrop, title: item.folderName, role: "button", "aria-expanded": item.expanded, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: colors_1.CURRENT_COLOR })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.CURRENT_COLOR, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: true, readOnlyStudio: window.remotion_isReadOnlyStudio })
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { style: reorderWrapper, children: [reorderLineStyle ? (jsx_runtime_1.jsx("div", { "data-composition-reorder-line": true, style: reorderLineStyle })) : null, jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: `__remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onItemDragStart, onDragEnd: onItemDragEnd, onDragOver: onRowDragOver, onDragLeave: onRowDragLeave, onDrop: onRowDrop, title: item.folderName, role: "button", "aria-expanded": item.expanded, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: colors_1.CURRENT_COLOR })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.CURRENT_COLOR, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.folderName }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: true, readOnlyStudio: window.remotion_isReadOnlyStudio })
                                     ] }) })
                         ] }) }), item.expanded ? (jsx_runtime_1.jsx("div", { onDragOver: onFolderChildListDragOver, onDrop: onFolderChildListDrop, children: item.items.map((childItem, index) => {
                         return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, canReorder: canReorder, activeDragRef: activeDragRef, parentFolderPath: folderPath, previousSibling: index === 0 ? null : item.items[index - 1], nextSibling: index === item.items.length - 1
@@ -522,7 +522,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                     }) })) : null] }));
     }
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { style: reorderWrapper, children: [reorderLineStyle ? (jsx_runtime_1.jsx("div", { "data-composition-reorder-line": true, style: reorderLineStyle })) : null, jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onItemDragStart, onDragEnd: onItemDragEnd, onDragOver: onRowDragOver, onDragLeave: onRowDragLeave, onDrop: onRowDrop, type: "button", title: item.composition.id, className: `__remotion-composition __remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, "data-compname": item.composition.id, children: [
-                            jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: colors_1.CURRENT_COLOR, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: !isDragging, readOnlyStudio: window.remotion_isReadOnlyStudio }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: !isDragging, composition: item.composition, readOnlyStudio: window.remotion_isReadOnlyStudio })
+                            jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: colors_1.CURRENT_COLOR, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.composition.id }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: !isDragging, readOnlyStudio: window.remotion_isReadOnlyStudio }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: !isDragging, composition: item.composition, readOnlyStudio: window.remotion_isReadOnlyStudio })
                         ] }) })
             ] }) }));
 };

package/dist/components/ConfigureLicenseModal.js

@@ -171,7 +171,7 @@ const LicenseSettings = () => {
     const displayedError = error !== null && error !== void 0 ? error : settingsError;
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { style: content, children: [
                 jsx_runtime_1.jsx(LicenseExplanation_1.LicenseExplanation, {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { "aria-label": "License type", role: "radiogroup", children: [
-                        jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'free', onClick: toggleFreeLicense, children: "I am eligible for the Free License" }), licenseType === 'free' ? (jsx_runtime_1.jsx("p", { style: freeLicenseMessage, children: "That's it! Enjoy Remotion." })) : null, jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'company', onClick: toggleCompanyLicense, children: "I need a Company License" }), licenseType === 'company' ? (jsx_runtime_1.jsxs("div", { style: companyLicenseContent, children: [
+                        jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'free', disabled: false, onClick: toggleFreeLicense, children: "I am eligible for the Free License" }), licenseType === 'free' ? (jsx_runtime_1.jsx("p", { style: freeLicenseMessage, children: "That's it! Enjoy Remotion." })) : null, jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'company', disabled: false, onClick: toggleCompanyLicense, children: "I need a Company License" }), licenseType === 'company' ? (jsx_runtime_1.jsxs("div", { style: companyLicenseContent, children: [
                                 jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsxs("a", { style: externalDescriptionLink, href: "https://remotion.pro/license", target: "_blank", rel: "noopener noreferrer", children: ["remotion.pro/license",
                                                 jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.BLUE, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
                                             ] }), ' ', "to obtain a license key. Then enter it here."] }), jsx_runtime_1.jsxs("label", { style: inputLabel, children: ["Public license key",

package/dist/components/CurrentAsset.js

@@ -11,13 +11,18 @@ const colors_1 = require("../helpers/colors");
 const format_media_duration_1 = require("../helpers/format-media-duration");
 const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const get_timeline_max_zoom_1 = require("../helpers/get-timeline-max-zoom");
 const open_in_remotion_convert_1 = require("../helpers/open-in-remotion-convert");
 const render_codec_label_1 = require("../helpers/render-codec-label");
 const use_image_metadata_1 = require("../helpers/use-image-metadata");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const folder_1 = require("../icons/folder");
 const remotion_convert_1 = require("../icons/remotion-convert");
+const separation_1 = require("../icons/separation");
+const transcription_1 = require("../icons/transcription");
 const trash_1 = require("../icons/trash");
+const modals_1 = require("../state/modals");
+const AssetAudioVolume_1 = require("./AssetAudioVolume");
 const InlineEditableTitle_1 = require("./InlineEditableTitle");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
 const common_1 = require("./InspectorPanel/common");
@@ -139,10 +144,13 @@ const getCurrentAssetMediaSections = (mediaMetadata) => {
 };
 exports.getCurrentAssetMediaSections = getCurrentAssetMediaSections;
 const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStudio }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
+    const { currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const volumeMetadata = (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === assetName ? currentAssetMetadata : null;
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const renameFile = (0, use_rename_static_file_1.useRenameStaticFile)({
         relativePath: assetName !== null && assetName !== void 0 ? assetName : '',
@@ -160,6 +168,32 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(src);
     const imageSrc = (0, exports.getCurrentAssetImageMetadataSource)(assetName);
     const imageMetadata = (0, use_image_metadata_1.useImageMetadata)(imageSrc);
+    const mutationsDisabled = browserStudioOperations === null &&
+        (readOnlyStudio || connectionStatus !== 'connected');
+    const fileName = (_a = assetName === null || assetName === void 0 ? void 0 : assetName.split('/').pop()) !== null && _a !== void 0 ? _a : '';
+    const fileType = assetName ? (0, get_preview_file_type_1.getPreviewFileType)(assetName) : null;
+    const onTranscribe = (0, react_1.useCallback)(() => {
+        if (src === null || mutationsDisabled) {
+            return;
+        }
+        setSelectedModal({
+            type: 'transcribe',
+            src,
+            displayName: fileName,
+            audioStreamIndex: null,
+            requestInit: null,
+        });
+    }, [fileName, mutationsDisabled, setSelectedModal, src]);
+    const onTrackMatting = (0, react_1.useCallback)(() => {
+        if (src === null || fileType !== 'video' || mutationsDisabled) {
+            return;
+        }
+        setSelectedModal({
+            type: 'video-matting',
+            src,
+            displayName: fileName,
+        });
+    }, [fileName, fileType, mutationsDisabled, setSelectedModal, src]);
     const canRename = onAssetClick === undefined &&
         (browserStudioOperations !== null ||
             (connectionStatus === 'connected' && !readOnlyStudio));
@@ -187,7 +221,6 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     if (!assetName) {
         return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT }));
     }
-    const fileName = (_a = assetName.split('/').pop()) !== null && _a !== void 0 ? _a : assetName;
     const fileDetails = [];
     if (imageMetadata !== null) {
         fileDetails.push({
@@ -210,14 +243,15 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
         readOnlyStudio ||
         connectionStatus !== 'connected';
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
-    const mutationsDisabled = browserStudioOperations === null &&
-        (readOnlyStudio || connectionStatus !== 'connected');
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT, padding: contentSized
                     ? `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px`
-                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) })) })) : null, jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Actions" }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
+                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsxs("div", { style: assetMetadataStyle, children: [mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))), src ? (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Average volume", children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: jsx_runtime_1.jsx(AssetAudioVolume_1.AssetAudioVolume, { src: (_d = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _d !== void 0 ? _d : null, waveformSampleRate: volumeMetadata
+                                        ? Math.ceil(volumeMetadata.fps *
+                                            get_timeline_max_zoom_1.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM)
+                                        : null }, (_e = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _e !== void 0 ? _e : src) }) })) : null] })) })) : null, jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Actions" }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, src ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTranscribe, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: quickActionIconStyle })), children: "Transcribe" })) : null, fileType === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTrackMatting, renderIcon: (color) => (jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: quickActionIconStyle })), children: "Separate foreground" })) : null, src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
                             jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
-                        ] })) : null, fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] })
+                        ] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] })
         ] }));
 };
 exports.AssetInfo = AssetInfo;

package/dist/components/EditorContexts.js

@@ -15,8 +15,10 @@ const ExpandedTracksProvider_1 = require("./ExpandedTracksProvider");
 const get_zod_if_possible_1 = require("./get-zod-if-possible");
 const MediaVolumeProvider_1 = require("./MediaVolumeProvider");
 const ModalsProvider_1 = require("./ModalsProvider");
+const CaptionQueueProcessorLoader_1 = require("./RenderQueue/CaptionQueueProcessorLoader");
 const ClientRenderQueueProcessor_1 = require("./RenderQueue/ClientRenderQueueProcessor");
 const context_1 = require("./RenderQueue/context");
+const VideoMattingQueueProcessorLoader_1 = require("./RenderQueue/VideoMattingQueueProcessorLoader");
 const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
 const SettingsContext_1 = require("./SettingsContext");
 const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
@@ -29,7 +31,7 @@ const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children }) => {
     return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsx(client_id_1.PreviewServerConnection, { children: jsx_runtime_1.jsxs(SettingsContext_1.SettingsProvider, { children: [
                         jsx_runtime_1.jsx(VisualControlsUndoSync_1.VisualControlsUndoSync, {}), jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
-                                jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowPixelGridProvider_1.ShowPixelGridProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(SnappingProvider_1.SnappingProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
+                                jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(CaptionQueueProcessorLoader_1.CaptionQueueProcessorLoader, {}), jsx_runtime_1.jsx(VideoMattingQueueProcessorLoader_1.VideoMattingQueueProcessorLoader, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowPixelGridProvider_1.ShowPixelGridProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(SnappingProvider_1.SnappingProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
                             ] })
                     ] }) }) }) }));
 };