@remotion/studio 4.0.521 → 4.0.523

package/dist/components/OptionalPackageModal.js

@@ -0,0 +1,155 @@
+"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.OptionalPackageModal = exports.useOptionalPackageInstalled = exports.installOptionalPackage = exports.markOptionalPackageInstalled = exports.isOptionalPackageInstalled = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const install_package_1 = require("../api/install-package");
+const colors_1 = require("../helpers/colors");
+const optional_package_dependencies_1 = require("../helpers/optional-package-dependencies");
+const modals_1 = require("../state/modals");
+const Button_1 = require("./Button");
+const layout_1 = require("./layout");
+const ModalButton_1 = require("./ModalButton");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalFooter_1 = require("./ModalFooter");
+const ModalHeader_1 = require("./ModalHeader");
+const Spinner_1 = require("./Spinner");
+const panelStyle = {
+    width: 'min(520px, calc(100vw - 40px))',
+};
+const contentStyle = {
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    padding: 16,
+};
+const codeStyle = {
+    color: 'inherit',
+    fontFamily: 'monospace',
+    fontSize: 'inherit',
+};
+const statusStyle = {
+    alignItems: 'center',
+    color: colors_1.LIGHT_TEXT,
+    display: 'flex',
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    gap: 10,
+    lineHeight: 1.5,
+};
+const errorStyle = {
+    color: colors_1.WARNING_COLOR,
+    marginTop: 12,
+    whiteSpace: 'pre-wrap',
+};
+const cancelStyle = { minWidth: 90 };
+const isOptionalPackageInstalled = (packageName) => {
+    var _a;
+    var _b;
+    return (_b = (_a = window.remotion_installedPackages) === null || _a === void 0 ? void 0 : _a.includes(packageName)) !== null && _b !== void 0 ? _b : false;
+};
+exports.isOptionalPackageInstalled = isOptionalPackageInstalled;
+const OPTIONAL_PACKAGE_INSTALLED_EVENT = 'remotion-optional-package-installed';
+const markOptionalPackageInstalled = (packageName) => {
+    var _a;
+    window.remotion_installedPackages = Array.from(new Set([...((_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : []), packageName]));
+    window.dispatchEvent(new CustomEvent(OPTIONAL_PACKAGE_INSTALLED_EVENT, {
+        detail: packageName,
+    }));
+};
+exports.markOptionalPackageInstalled = markOptionalPackageInstalled;
+const installOptionalPackage = async (packageName) => {
+    const dependencies = (0, optional_package_dependencies_1.withRequiredAuxiliaryPackages)([
+        { name: packageName, version: null },
+    ]);
+    await (0, install_package_1.installPackages)(dependencies);
+    for (const dependency of dependencies) {
+        (0, exports.markOptionalPackageInstalled)(dependency.name);
+    }
+};
+exports.installOptionalPackage = installOptionalPackage;
+const useOptionalPackageInstalled = (packageName) => {
+    const [installed, setInstalled] = (0, react_1.useState)(() => (0, exports.isOptionalPackageInstalled)(packageName));
+    (0, react_1.useEffect)(() => {
+        const onInstalled = (event) => {
+            if (event.detail === packageName) {
+                setInstalled(true);
+            }
+        };
+        window.addEventListener(OPTIONAL_PACKAGE_INSTALLED_EVENT, onInstalled);
+        return () => window.removeEventListener(OPTIONAL_PACKAGE_INSTALLED_EVENT, onInstalled);
+    }, [packageName]);
+    return installed;
+};
+exports.useOptionalPackageInstalled = useOptionalPackageInstalled;
+const OptionalPackageModal = ({ ariaLabel, children, packageName, title }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const installed = (0, exports.useOptionalPackageInstalled)(packageName);
+    const [installState, setInstallState] = (0, react_1.useState)({
+        type: 'idle',
+    });
+    const busy = installState.type === 'installing';
+    const packageNames = (0, optional_package_dependencies_1.withRequiredAuxiliaryPackages)([
+        { name: packageName, version: null },
+    ]).map((dependency) => dependency.name);
+    const packagesLabel = packageNames.join(' and ');
+    const dismiss = (0, react_1.useCallback)(() => {
+        if (!busy) {
+            setSelectedModal(null);
+        }
+    }, [busy, setSelectedModal]);
+    const install = (0, react_1.useCallback)(async () => {
+        setInstallState({ type: 'installing' });
+        try {
+            await (0, exports.installOptionalPackage)(packageName);
+        }
+        catch (error) {
+            setInstallState({ type: 'error', error: error });
+        }
+    }, [packageName]);
+    if (installed) {
+        return children;
+    }
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { ariaLabel: ariaLabel, onEscape: dismiss, onOutsideClick: dismiss, panelStyle: panelStyle, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: title, onClose: dismiss }), jsx_runtime_1.jsx("div", { style: contentStyle, children: busy ? (jsx_runtime_1.jsxs("div", { style: statusStyle, children: [
+                        jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 18 }), `Installing ${packagesLabel}…`] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["This requires installing", ' ', packageNames.map((name, index) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [index > 0 ? ' and ' : null, jsx_runtime_1.jsx("code", { style: codeStyle, children: name })
+                            ] }, name))), ". Continue?", installState.type === 'error' ? (jsx_runtime_1.jsx("div", { style: errorStyle, children: installState.error.message })) : null] })) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                        jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { disabled: busy, onClick: dismiss, style: cancelStyle, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(ModalButton_1.ModalButton, { disabled: busy, onClick: install, autoFocus: true, children: installState.type === 'error' ? 'Retry' : 'Continue' })
+                    ] }) })
+        ] }));
+};
+exports.OptionalPackageModal = OptionalPackageModal;

package/dist/components/PlayPause.js

@@ -147,36 +147,32 @@ const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, mu
         });
         const space = keybindings.registerKeybinding({
             event: 'keydown',
-            key: ' ',
+            action: 'playPause',
             callback: onSpace,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const enter = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'enter',
+            action: 'pauseAndReturnToPlaybackStart',
             callback: onEnter,
-            commandCtrlKey: false,
             preventDefault: false,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const a = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'a',
+            action: 'jumpToBeginning',
             callback: jumpToStart,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const e = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'e',
+            action: 'jumpToEnd',
             callback: jumpToEnd,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,

package/dist/components/PlaybackKeyboardShortcutsManager.js

@@ -46,27 +46,24 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
     (0, react_1.useEffect)(() => {
         const jKey = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'j',
+            action: 'reversePlayback',
             callback: onJKey,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const kKey = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'k',
+            action: 'pausePlayback',
             callback: onKKey,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const lKey = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'l',
+            action: 'playForward',
             callback: onLKey,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,

package/dist/components/PreviewToolbarOverflowButton.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("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 Checkmark_1 = require("../icons/Checkmark");
 const ellipsis_1 = require("../icons/ellipsis");
 const checkerboard_1 = require("../state/checkerboard");
@@ -21,6 +22,8 @@ const clickButton = (id) => {
 };
 const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLoop, showCanvasViewControls, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
     const keyboardShortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
+    const fullscreenShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('enterFullscreen');
+    const checkerboardShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleCheckerboard');
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
@@ -93,7 +96,9 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 label: 'Transparency as checkerboard',
                 value: 'checkerboard',
                 onClick: () => setCheckerboard((current) => !current),
-                keyHint: keyboardShortcutsDisabled ? null : 'T',
+                keyHint: keyboardShortcutsDisabled || checkerboardShortcut === ''
+                    ? null
+                    : checkerboardShortcut,
                 leftItem: checkerboard ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,
@@ -145,7 +150,9 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 label: 'Fullscreen',
                 value: 'fullscreen',
                 onClick: () => clickButton('fullscreen-toggle'),
-                keyHint: keyboardShortcutsDisabled ? null : 'F',
+                keyHint: keyboardShortcutsDisabled || fullscreenShortcut === ''
+                    ? null
+                    : fullscreenShortcut,
                 leftItem: null,
                 subMenu: null,
                 quickSwitcherLabel: null,
@@ -153,6 +160,8 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
         }
         return items;
     }, [
+        checkerboardShortcut,
+        fullscreenShortcut,
         previewSizeItems,
         playbackRateItems,
         selectedPlaybackRate,

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExplorerQuickSwitcherTrigger = 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 colors_1 = require("../../helpers/colors");
 const hoverable_1 = require("../../helpers/hoverable");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../../helpers/use-keyboard-shortcut-label");
 const ellipsis_1 = require("../../icons/ellipsis");
 const modals_1 = require("../../state/modals");
 const InlineDropdown_1 = require("../InlineDropdown");
@@ -60,8 +60,11 @@ const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex, getActions
         return jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { svgProps: ellipsisSvgProps, fill: color });
     }, []);
     const moreActionsTitle = mode === 'assets' ? 'More asset actions' : 'More composition actions';
+    const quickSwitcherShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('quickSwitcher');
     return (jsx_runtime_1.jsxs("div", { style: quickSwitcherArea, children: [
-            jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, children: ["Search...", showShortcut && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] })) : null] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: moreActionsTitle, renderAction: renderMoreActions, getItems: getActions, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
+            jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, children: ["Search...", showShortcut &&
+                        !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() &&
+                        quickSwitcherShortcut !== '' ? (jsx_runtime_1.jsx("span", { style: shortcutLabel, children: quickSwitcherShortcut })) : null] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: moreActionsTitle, renderAction: renderMoreActions, getItems: getActions, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
         ] }));
 };
 exports.ExplorerQuickSwitcherTrigger = ExplorerQuickSwitcherTrigger;

package/dist/components/RadioButton.d.ts

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

package/dist/components/RadioButton.js

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

package/dist/components/RenderButton.js

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

package/dist/components/RenderModal/CliCopyButton.js

@@ -4,20 +4,15 @@ exports.CliCopyButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const clipboard_1 = require("../../icons/clipboard");
+const copy_text_1 = require("../../helpers/copy-text");
+const use_copy_feedback_1 = require("../../helpers/use-copy-feedback");
+const copy_1 = require("../../icons/copy");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const svgStyle = {
     width: 16,
     height: 16,
     verticalAlign: 'sub',
 };
-const copiedStyle = {
-    fontSize: '14px',
-    minHeight: '30px',
-    minWidth: '30px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-};
 const buttonStyle = {
     width: '30px',
     height: '30px',
@@ -28,33 +23,24 @@ const buttonStyle = {
     justifyContent: 'center',
 };
 const CliCopyButton = ({ valueToCopy, }) => {
-    const [copied, setCopied] = (0, react_1.useState)(false);
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const fillColor = (0, react_1.useMemo)(() => {
         return hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     }, [hovered]);
-    const clipboardIcon = jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: fillColor, style: svgStyle });
-    const checkSvg = (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: svgStyle, children: jsx_runtime_1.jsx("path", { fill: fillColor, d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }) }));
+    const copyIcon = (jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, color: fillColor, style: svgStyle }));
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    (0, react_1.useEffect)(() => {
-        if (!copied) {
-            return;
-        }
-        const handleClear = () => {
-            setCopied(false);
-            setHovered(false);
-        };
-        const to = setTimeout(() => handleClear(), 2000);
-        return () => clearTimeout(to);
-    }, [copied]);
-    return copied ? (jsx_runtime_1.jsx("span", { style: copiedStyle, children: checkSvg })) : (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: () => {
-            navigator.clipboard.writeText(valueToCopy);
-            setCopied(true);
-        }, children: clipboardIcon }));
+    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: () => {
+            (0, copy_text_1.copyText)(valueToCopy)
+                .then(markCopied)
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+            });
+        }, children: copyIcon }));
 };
 exports.CliCopyButton = CliCopyButton;

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

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

package/dist/components/RenderModal/NumberSetting.js

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

package/dist/components/RenderModal/RenderModalBasic.js

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

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

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

package/dist/components/RenderModal/RenderModalOutputName.js

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

package/dist/components/RenderModal/SeparateAudioOption.js

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

package/dist/components/RenderModal/WebRenderModalBasic.js

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

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

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