@remotion/studio 4.0.523 → 4.0.525

package/dist/components/NewComposition/RenameFolder.js

@@ -4,7 +4,6 @@ exports.RenameFolder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const colors_1 = require("../../helpers/colors");
 const get_folder_id_1 = require("../../helpers/get-folder-id");
 const slugify_name_1 = require("../../helpers/slugify-name");
 const validate_folder_rename_1 = require("../../helpers/validate-folder-rename");
@@ -17,6 +16,7 @@ const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
 const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
+const SlugPreview_1 = require("./SlugPreview");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
     padding: 12,
@@ -64,9 +64,7 @@ const RenameFolder = ({ folderName, parentName, stack }) => {
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${folderId}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                 jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Name" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
-                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), slug && slug !== newName ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsxs("div", { "aria-live": "polite", style: { fontSize: 12, color: colors_1.LIGHT_TEXT }, children: ["Will be renamed to ", slug] })
-                                                ] })) : null, folderNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), jsx_runtime_1.jsx(SlugPreview_1.SlugPreview, { action: "rename", currentName: folderName, input: newName, slug: slug }), folderNameErrMessage ? (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-start", message: folderNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
                             ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming folder...', errorNotification: 'Could not rename folder', genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
@@ -74,6 +72,7 @@ const RenameFolder = ({ folderName, parentName, stack }) => {
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
+                                undoRedoNavigation: null,
                             }), applyCodemodForPreview: null }) })
                 ] })
         ] }));

package/dist/components/NewComposition/SlugPreview.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const SlugPreview: React.FC<{
+    readonly action: 'create' | 'rename';
+    readonly currentName: string | null;
+    readonly input: string;
+    readonly slug: string;
+}>;

package/dist/components/NewComposition/SlugPreview.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlugPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const layout_1 = require("../layout");
+const SlugPreview = ({ action, currentName, input, slug }) => {
+    if (!slug ||
+        slug === input ||
+        slug === input.trim() ||
+        slug === currentName) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsxs("div", { "aria-live": "polite", style: { fontSize: 12, color: colors_1.LIGHT_TEXT }, children: ["Will be ", action === 'create' ? 'created as' : 'renamed to', " ", slug] })
+        ] }));
+};
+exports.SlugPreview = SlugPreview;

package/dist/components/NewComposition/duplicate-composition-api.d.ts

@@ -1,5 +1,5 @@
-import type { DuplicateCompositionResponse, SymbolicatedStackFrame } from '@remotion/studio-shared';
-export declare const duplicateComposition: ({ codemod, dryRun, signal, symbolicatedStack, }: {
+import type { DuplicateCompositionResponse, SymbolicatedStackFrame, UndoRedoNavigation } from '@remotion/studio-shared';
+export declare const duplicateComposition: ({ codemod, dryRun, signal, symbolicatedStack, undoRedoNavigation, }: {
     codemod: {
         type: "duplicate-composition";
         idToDuplicate: string;
@@ -13,4 +13,5 @@ export declare const duplicateComposition: ({ codemod, dryRun, signal, symbolica
     dryRun: boolean;
     signal: AbortSignal;
     symbolicatedStack: SymbolicatedStackFrame | null;
+    undoRedoNavigation: UndoRedoNavigation | null;
 }) => Promise<DuplicateCompositionResponse>;

package/dist/components/NewComposition/duplicate-composition-api.js

@@ -3,14 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.duplicateComposition = void 0;
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const actions_1 = require("../RenderQueue/actions");
-const duplicateComposition = ({ codemod, dryRun, signal, symbolicatedStack, }) => {
+const duplicateComposition = ({ codemod, dryRun, signal, symbolicatedStack, undoRedoNavigation, }) => {
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     if (browserStudioOperations === null) {
-        return (0, actions_1.applyCodemod)({ codemod, dryRun, signal, symbolicatedStack }).then((result) => (result.success ? result : { ...result, stack: '' }));
+        return (0, actions_1.applyCodemod)({
+            codemod,
+            dryRun,
+            signal,
+            symbolicatedStack,
+            undoRedoNavigation,
+        }).then((result) => (result.success ? result : { ...result, stack: '' }));
     }
     return browserStudioOperations.duplicateComposition({
         codemod,
         dryRun,
+        undoRedoNavigation,
     });
 };
 exports.duplicateComposition = duplicateComposition;

package/dist/components/Notifications/NotificationCenter.d.ts

@@ -4,5 +4,6 @@ type CreatedNotification = {
     replaceContent: (newContent: React.ReactNode, durationInMs: number | null) => void;
 };
 export declare const showNotification: (content: React.ReactNode, durationInMs: number | null) => CreatedNotification;
+export declare const showCannotAddSequenceDropNotification: () => void;
 export declare const NotificationCenter: React.FC;
 export {};

package/dist/components/Notifications/NotificationCenter.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotificationCenter = exports.showNotification = void 0;
+exports.NotificationCenter = exports.showCannotAddSequenceDropNotification = exports.showNotification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
@@ -32,6 +32,27 @@ const showNotification = (content, durationInMs) => {
     });
 };
 exports.showNotification = showNotification;
+const CANNOT_ADD_SEQUENCE_DROP_NOTIFICATION = 'Cannot insert this item: This composition component cannot accept a new <Sequence>.';
+const CANNOT_ADD_SEQUENCE_NOTIFICATION_DURATION = 3000;
+let cannotAddSequenceNotification = null;
+let cannotAddSequenceDismissTimeout = null;
+const showCannotAddSequenceDropNotification = () => {
+    if (cannotAddSequenceNotification === null) {
+        cannotAddSequenceNotification = (0, exports.showNotification)(CANNOT_ADD_SEQUENCE_DROP_NOTIFICATION, null);
+    }
+    else {
+        cannotAddSequenceNotification.replaceContent(CANNOT_ADD_SEQUENCE_DROP_NOTIFICATION, null);
+    }
+    if (cannotAddSequenceDismissTimeout !== null) {
+        clearTimeout(cannotAddSequenceDismissTimeout);
+    }
+    cannotAddSequenceDismissTimeout = setTimeout(() => {
+        cannotAddSequenceNotification === null || cannotAddSequenceNotification === void 0 ? void 0 : cannotAddSequenceNotification.dismiss();
+        cannotAddSequenceNotification = null;
+        cannotAddSequenceDismissTimeout = null;
+    }, CANNOT_ADD_SEQUENCE_NOTIFICATION_DURATION);
+};
+exports.showCannotAddSequenceDropNotification = showCannotAddSequenceDropNotification;
 const NotificationCenter = () => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
     const { currentZIndex } = (0, z_index_1.useZIndex)();

package/dist/components/OutlineToggle.js

@@ -4,25 +4,32 @@ exports.OutlineToggle = void 0;
 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 editor_outlines_1 = require("../state/editor-outlines");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
+const buttonStyle = { width: 26 };
 const OutlineToggle = () => {
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const onClick = (0, react_1.useCallback)(() => {
         setEditorShowOutlines((current) => !current);
     }, [setEditorShowOutlines]);
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleOutlines');
+    const ariaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleOutlines');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => {
-            const iconColor = editorShowOutlines ? colors_1.BLUE : color;
-            return (jsx_runtime_1.jsxs("svg", { style: { width: 17, height: 17 }, viewBox: "0 0 512 512", fill: "none", "aria-hidden": "true", focusable: "false", children: [
-                    jsx_runtime_1.jsx("path", { d: "M64 64H448V448H64V64Z", stroke: iconColor, strokeWidth: "36" }), [
-                        [16, 16],
-                        [400, 16],
-                        [16, 400],
-                        [400, 400],
-                    ].map(([x, y]) => (jsx_runtime_1.jsx("rect", { x: x, y: y, width: "96", height: "96", rx: "24", fill: colors_1.BACKGROUND_HEX, stroke: iconColor, strokeWidth: "32" }, `${x}-${y}`)))] }));
-        } }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Outlines", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": editorShowOutlines, onClick: onClick, style: buttonStyle, children: (color) => {
+                const iconColor = editorShowOutlines ? colors_1.BLUE : color;
+                return (jsx_runtime_1.jsxs("svg", { style: { width: 17, height: 17 }, viewBox: "0 0 512 512", fill: "none", "aria-hidden": "true", focusable: "false", children: [
+                        jsx_runtime_1.jsx("path", { d: "M64 64H448V448H64V64Z", stroke: iconColor, strokeWidth: "36" }), [
+                            [16, 16],
+                            [400, 16],
+                            [16, 400],
+                            [400, 400],
+                        ].map(([x, y]) => (jsx_runtime_1.jsx("rect", { x: x, y: y, width: "96", height: "96", rx: "24", fill: colors_1.BACKGROUND_HEX, stroke: iconColor, strokeWidth: "32" }, `${x}-${y}`)))] }));
+            } }) }));
 };
 exports.OutlineToggle = OutlineToggle;

package/dist/components/PlayPause.js

@@ -40,12 +40,14 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const jump_to_start_1 = require("../icons/jump-to-start");
 const pause_1 = require("../icons/pause");
 const play_1 = require("../icons/play");
 const step_back_1 = require("../icons/step-back");
 const step_forward_1 = require("../icons/step-forward");
 const in_out_1 = require("../state/in-out");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
@@ -82,6 +84,10 @@ const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, mu
     const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayerMethods();
     const playing = remotion_1.Internals.usePlaying();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
+    const jumpToBeginningShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('jumpToBeginning');
+    const jumpToBeginningAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('jumpToBeginning');
+    const playPauseShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('playPause');
+    const playPauseAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('playPause');
     (0, react_1.useEffect)(() => {
         if (isStill) {
             pause();
@@ -229,6 +235,6 @@ const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, mu
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(PlaybackManager, { loop: loop, playbackRate: playbackRate, muted: muted, inFrame: inFrame, outFrame: outFrame, getCurrentFrame: getCurrentFrame }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }))] }));
+            jsx_runtime_1.jsx(PlaybackManager, { loop: loop, playbackRate: playbackRate, muted: muted, inFrame: inFrame, outFrame: outFrame, getCurrentFrame: getCurrentFrame }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Go to beginning", shortcut: jumpToBeginningShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go to beginning", "aria-keyshortcuts": jumpToBeginningAriaShortcut || undefined, title: "", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Previous frame", shortcut: "\u2190", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go back 1 frame", "aria-keyshortcuts": "ArrowLeft", title: "", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) }) })), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: playing ? 'Pause' : 'Play', shortcut: playPauseShortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', "aria-keyshortcuts": playPauseAriaShortcut || undefined, title: "", onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Next frame", shortcut: "\u2192", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go forward 1 frame", "aria-keyshortcuts": "ArrowRight", title: "", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }) }))] }));
 };
 exports.PlayPause = react_1.default.memo(PlayPauseInner);

package/dist/components/PlaybackKeyboardShortcutsManager.d.ts

@@ -1,4 +1,6 @@
 import type React from 'react';
 export declare const PlaybackKeyboardShortcutsManager: React.FC<{
     readonly setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;
+    readonly setMuted: React.Dispatch<React.SetStateAction<boolean>>;
+    readonly setLoop: React.Dispatch<React.SetStateAction<boolean>>;
 }>;

package/dist/components/PlaybackKeyboardShortcutsManager.js

@@ -3,9 +3,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlaybackKeyboardShortcutsManager = void 0;
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
-const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
+const LoopToggle_1 = require("./LoopToggle");
+const MuteToggle_1 = require("./MuteToggle");
+const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate, setMuted, setLoop }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
+    (0, react_1.useEffect)(() => {
+        if (!isVideoComposition) {
+            return;
+        }
+        const mute = keybindings.registerKeybinding({
+            event: 'keydown',
+            action: 'toggleMute',
+            callback: (event) => {
+                if (!event.repeat)
+                    (0, MuteToggle_1.toggleMute)(setMuted);
+            },
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const loop = keybindings.registerKeybinding({
+            event: 'keydown',
+            action: 'toggleLoop',
+            callback: (event) => {
+                if (!event.repeat)
+                    (0, LoopToggle_1.toggleLoop)(setLoop);
+            },
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            mute.unregister();
+            loop.unregister();
+        };
+    }, [isVideoComposition, keybindings, setLoop, setMuted]);
     const { play, pause, isPlaying } = player_1.PlayerInternals.usePlayerMethods();
     const onJKey = (0, react_1.useCallback)(() => {
         const wasPlaying = isPlaying();

package/dist/components/PlaybackRateSelector.js

@@ -13,7 +13,7 @@ const TimelineCombobox_1 = require("./TimelineCombobox");
 const getPlaybackRateLabel = (playbackRate) => {
     return `${playbackRate}x`;
 };
-const accessibilityLabel = 'Change the playback rate';
+const accessibilityLabel = 'Playback rate';
 const usePlaybackRateMenuItems = ({ playbackRate, setPlaybackRate, }) => {
     const items = (0, react_1.useMemo)(() => {
         const divider = {
@@ -57,6 +57,6 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate, }) => {
     if (isStill || canvasContent === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, labelWidth: 30, selectedId: selectedId, values: items, renderLeftItem: (color) => (jsx_runtime_1.jsx(playback_rate_1.PlaybackRateIcon, { color: color, playbackRate: playbackRate })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, tooltipDelay: 800, labelWidth: 30, selectedId: selectedId, values: items, renderLeftItem: (color) => (jsx_runtime_1.jsx(playback_rate_1.PlaybackRateIcon, { color: color, playbackRate: playbackRate })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/components/Preview.js

@@ -47,9 +47,6 @@ const PIXEL_GRID_MIN_SCALE = 4;
 const containerStyle = (options) => {
     return {
         transform: `scale(${options.scale})`,
-        // Avoid the background bleeding through opaque compositions at fractional
-        // scales due to Chromium compositing the child and background together.
-        willChange: 'transform',
         marginLeft: options.xCorrection,
         marginTop: options.yCorrection,
         width: options.width,

package/dist/components/PreviewToolbar.js

@@ -91,15 +91,12 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                         ] })) : null, isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCanvasViewControls: showCanvasViewControls, showCompositionControls: showCompositionControls, playbackRate: playbackRate, setPlaybackRate: setPlaybackRate, loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                         ] })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) })) : null] }), jsx_runtime_1.jsx(layout_1.Flex, {}), isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx("div", { style: centeredPlayButton, children: playPause })) : null, isVideoComposition && !isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.75 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
-                ] })) : null, showCanvasViewControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), isMobileLayout || !showCompositionControls ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showCompositionControls ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }) : null, jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RulersAndGuidesToggle_1.RulersAndGuidesToggle, { showGuides: showCompositionControls }) })
-                        ] })), readOnlyStudio ||
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
+                ] })) : null, showCanvasViewControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout || !showCompositionControls ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RulersAndGuidesToggle_1.RulersAndGuidesToggle, { showGuides: showCompositionControls }) })), readOnlyStudio ||
                         isMobileLayout ||
-                        !showCompositionControls ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) })
-                        ] }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
+                        !showCompositionControls ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout ? null : jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", narrow: isMobileLayout }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
-                ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
+                ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate, setMuted: setPlayerMuted, setLoop: setLoop }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
         ] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/components/PreviewToolbarOverflowButton.js

@@ -12,6 +12,7 @@ const checkerboard_1 = require("../state/checkerboard");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_outlines_1 = require("../state/editor-outlines");
 const editor_rulers_1 = require("../state/editor-rulers");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineDropdown_1 = require("./InlineDropdown");
 const LoopToggle_1 = require("./LoopToggle");
 const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
@@ -23,6 +24,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 loopShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleLoop');
+    const outlinesShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleOutlines');
     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);
@@ -83,7 +86,9 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 label: 'Loop',
                 value: 'loop',
                 onClick: () => (0, LoopToggle_1.toggleLoop)(setLoop),
-                keyHint: null,
+                keyHint: keyboardShortcutsDisabled || loopShortcut === ''
+                    ? null
+                    : loopShortcut,
                 leftItem: loop ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,
@@ -111,7 +116,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 label: 'Outlines',
                 value: 'outlines',
                 onClick: () => setEditorShowOutlines((current) => !current),
-                keyHint: null,
+                keyHint: keyboardShortcutsDisabled ? null : outlinesShortcut || null,
                 leftItem: editorShowOutlines ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,
@@ -162,6 +167,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
     }, [
         checkerboardShortcut,
         fullscreenShortcut,
+        loopShortcut,
         previewSizeItems,
         playbackRateItems,
         selectedPlaybackRate,
@@ -175,6 +181,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
         checkerboard,
         editorShowGuides,
         editorShowOutlines,
+        outlinesShortcut,
         editorShowRulers,
         setCheckerboard,
         setEditorShowGuides,
@@ -187,6 +194,6 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
     if (values.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "View options", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE_ALPHA_80 }) }));
 };
 exports.PreviewToolbarOverflowButton = PreviewToolbarOverflowButton;

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -195,7 +195,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
             return [
                 {
                     id: 'select-file',
-                    title: 'Select file...',
+                    title: 'Import file...',
                     type: 'select-file',
                     onSelected: () => {
                         assetSelection.onSelectFile();

package/dist/components/RenderButton.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
@@ -47,7 +48,9 @@ const caret_1 = require("../icons/caret");
 const render_1 = require("../icons/render");
 const in_out_1 = require("../state/in-out");
 const modals_1 = require("../state/modals");
+const call_api_1 = require("./call-api");
 const layout_1 = require("./layout");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const SegmentedButton_1 = require("./SegmentedButton");
 const segmentedButtonStyle = {
     height: 28,
@@ -215,7 +218,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
             renderDefaults: defaults,
         });
     }, [video, setSelectedModal, props, inFrame, outFrame, getCurrentFrame]);
-    const openClientRenderModal = (0, react_1.useCallback)(() => {
+    const openClientRenderModal = (0, react_1.useCallback)(async () => {
         var _a;
         if (!video) {
             return null;
@@ -224,6 +227,28 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         if (!defaults) {
             throw new TypeError('Expected defaults');
         }
+        if (!readOnlyStudio && !isBrowserStudio) {
+            let onReconciliation = null;
+            const nextReconciliation = new Promise((resolve) => {
+                onReconciliation = resolve;
+                window.addEventListener(studio_shared_1.REACT_REFRESH_FINISHED_EVENT, onReconciliation, { once: true });
+            });
+            try {
+                const { didInvalidate } = await (0, call_api_1.callApi)('/api/invalidate-bundle', {});
+                if (didInvalidate) {
+                    await nextReconciliation;
+                }
+            }
+            catch (error) {
+                (0, NotificationCenter_1.showNotification)(`Could not prepare client-side render: ${error.message}`, 4000);
+                return null;
+            }
+            finally {
+                if (onReconciliation) {
+                    window.removeEventListener(studio_shared_1.REACT_REFRESH_FINISHED_EVENT, onReconciliation);
+                }
+            }
+        }
         setSelectedModal({
             type: 'web-render',
             compositionId: video.id,
@@ -249,7 +274,16 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
             initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas,
             initialPageResponsiveness: 'medium',
         });
-    }, [video, setSelectedModal, props, inFrame, outFrame, getCurrentFrame]);
+    }, [
+        video,
+        readOnlyStudio,
+        isBrowserStudio,
+        setSelectedModal,
+        props,
+        inFrame,
+        outFrame,
+        getCurrentFrame,
+    ]);
     const onClick = (0, react_1.useCallback)(() => {
         if (renderType === 'render-command') {
             openServerRenderModal(true);
@@ -361,7 +395,8 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                 style: controlSize === 'compact'
                     ? compactMainSegmentStyle
                     : defaultMainSegmentStyle,
-                title: tooltip,
+                title: showRenderLabel ? tooltip : null,
+                tooltipLabel: showRenderLabel ? null : renderLabel,
                 type: 'action',
             },
             {
@@ -378,6 +413,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                     ? compactDropdownSegmentStyle
                     : defaultDropdownSegmentStyle,
                 title: 'Select render type',
+                tooltipLabel: null,
                 type: 'menu',
                 values: dropdownValues,
             },
@@ -396,7 +432,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: tooltip })
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: showRenderLabel ? tooltip : null })
         ] }));
 };
 exports.RenderButton = react_1.default.memo(RenderButtonInner);

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, { 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.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name', 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/RenderModal/render-modals.js

@@ -33,9 +33,12 @@ exports.horizontalLayout = {
 };
 exports.leftSidebar = {
     flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'column',
     padding: 6,
 };
 exports.horizontalTab = {
+    flex: 'none',
     width: 150,
     display: 'flex',
     flexDirection: 'row',

package/dist/components/RenderQueue/CaptionQueueItem.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 url_state_1 = require("../../helpers/url-state");
+const ActionTooltip_1 = require("../ActionTooltip");
 const InlineAction_1 = require("../InlineAction");
 const layout_1 = require("../layout");
 const use_select_asset_1 = require("../use-select-asset");
@@ -124,6 +125,6 @@ const CaptionQueueItem = ({ job, selected }) => {
     return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, style: containerStyle, align: "center", onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, className: selected ? item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME : undefined, children: [
             jsx_runtime_1.jsx(CaptionJobStatus, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [
                     jsx_runtime_1.jsx("div", { style: title, children: job.displayName }), jsx_runtime_1.jsx("div", { style: subtitleContainer, children: jsx_runtime_1.jsx("span", { style: subtitle, title: message, children: message }) })
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), job.status === 'running' ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderRemoveAction, onClick: onRemove, title: "Remove", variant: null }))] }));
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), job.status === 'running' ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Clear", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderRemoveAction, onClick: onRemove, "aria-label": "Clear", variant: null }) }))] }));
 };
 exports.CaptionQueueItem = CaptionQueueItem;

package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -7,6 +7,7 @@ const colors_1 = require("../../helpers/colors");
 const get_asset_metadata_1 = require("../../helpers/get-asset-metadata");
 const use_copy_feedback_1 = require("../../helpers/use-copy-feedback");
 const copy_1 = require("../../icons/copy");
+const ActionTooltip_1 = require("../ActionTooltip");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const revealIconStyle = {
@@ -56,6 +57,6 @@ const RenderQueueCopyToClipboard = ({ job }) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
         }
     }, [job.outName, markCopied]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Copy", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Copy to clipboard", variant: null, renderAction: renderCopyAction, onClick: onClick }) }));
 };
 exports.RenderQueueCopyToClipboard = RenderQueueCopyToClipboard;

package/dist/components/RenderQueue/RenderQueueDownloadItem.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 download_blob_1 = require("../../helpers/download-blob");
+const ActionTooltip_1 = require("../ActionTooltip");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const RenderQueueDownloadItem = ({ job }) => {
@@ -31,6 +32,6 @@ const RenderQueueDownloadItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" }) }));
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, renderAction: renderAction, onClick: onClick, title: "Download" }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Download", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Download", variant: null, renderAction: renderAction, onClick: onClick }) }));
 };
 exports.RenderQueueDownloadItem = RenderQueueDownloadItem;

package/dist/components/RenderQueue/RenderQueueItemCancelButton.js

@@ -4,6 +4,7 @@ exports.RenderQueueCancelButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const ActionTooltip_1 = require("../ActionTooltip");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
@@ -30,6 +31,6 @@ const RenderQueueCancelButton = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" }) }));
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Cancel", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Cancel render", renderAction: renderAction, onClick: onClick, variant: null }) }));
 };
 exports.RenderQueueCancelButton = RenderQueueCancelButton;