@remotion/studio 4.0.527 → 4.0.528

package/dist/components/InspectorSequenceSection.d.ts

@@ -14,6 +14,7 @@ export declare const InspectorSequenceSection: React.FC<{
     readonly validatedLocation: CodePosition;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly renderTransformControls: () => React.ReactNode;
 }>;
 export {};

package/dist/components/InspectorSequenceSection.js

@@ -200,7 +200,7 @@ const hasSequenceControls = (sequence) => {
     return sequence.controls !== null;
 };
 exports.hasSequenceControls = hasSequenceControls;
-const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
+const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation, nodePathInfo, keyframeDisplayOffset, keyframePlaybackRate, renderTransformControls, }) => {
     var _a;
     var _b;
     const { tree, propStatuses, runtimeValues } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
@@ -209,7 +209,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         includeTextContent: true,
         includeSourceControls: true,
     });
-    const { inspectorRevealRequest, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { inspectorRevealRequest, selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const selectedEffect = selectedItems.length === 1 &&
         (selectedItems[0].type === 'sequence-effect' ||
             selectedItems[0].type === 'sequence-effect-prop')
@@ -521,14 +521,16 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             type: 'add-effect',
             clientId: previewServerState.clientId,
             fileName: validatedLocation.source,
-            nodePath: nodePathInfo.sequenceSubscriptionKey,
+            nodePathInfo,
+            selectItems,
         });
     }, [
         canAddEffect,
-        nodePathInfo.sequenceSubscriptionKey,
+        nodePathInfo,
         previewServerState,
         setAdditionalSectionExpanded,
         setSelectedModal,
+        selectItems,
         validatedLocation.source,
     ]);
     const onConvertBorderRadius = (0, react_1.useCallback)(() => {
@@ -575,7 +577,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
                 : 'Show 3D transform controls', hoveredColor: show3DTransformControls ? colors_1.BLUE : undefined, unhoveredColor: show3DTransformControls ? colors_1.BLUE : colors_1.LIGHT_TEXT, renderAction: (color) => (jsx_runtime_1.jsx(cube_1.CubeIcon, { color: color, style: transform3DToggleIcon })) }));
     const effectsHeader = (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) }), expanded: effectsExpanded, label: "Effects", onToggle: hasEffects ? () => toggleAdditionalSection('effects') : null }));
     const renderRow = ({ node, depth }) => {
-        return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
+        return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };
     const renderControlGroupHeader = (group) => {
         const expanded = isControlGroupExpanded(group);

package/dist/components/KeyboardShortcutsSettings.js

@@ -125,7 +125,7 @@ const key = {
 };
 const chordButton = {
     alignItems: 'center',
-    background: 'transparent',
+    background: colors_1.TRANSPARENT,
     border: 0,
     cursor: 'pointer',
     display: 'flex',

package/dist/components/Menu/styles.d.ts

@@ -3,8 +3,8 @@ export declare const MENU_VERTICAL_PADDING = 4;
 export declare const SUBMENU_LEFT_INSET = -8;
 export declare const MAX_MENU_WIDTH = 400;
 export declare const MAX_MOBILE_MENU_WIDTH = 300;
-export declare const SHADOW_TOWARDS_BOTTOM = "0 2px 8px rgba(0, 0, 0, 0.5)";
-export declare const SHADOW_TOWARDS_TOP = "0 -2px 8px rgba(0, 0, 0, 0.5)";
+export declare const SHADOW_TOWARDS_BOTTOM = "0 2px 8px var(--remotion-studio-black-alpha-50)";
+export declare const SHADOW_TOWARDS_TOP = "0 -2px 8px var(--remotion-studio-black-alpha-50)";
 export declare const menuContainerTowardsBottom: React.CSSProperties;
 export declare const menuContainerTowardsTop: React.CSSProperties;
 export declare const fullScreenOverlay: React.CSSProperties;

package/dist/components/Modals.js

@@ -33,6 +33,7 @@ const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher")
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
 const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
+const QueueJobErrorModal_1 = require("./RenderQueue/QueueJobErrorModal");
 const SettingsModal_1 = require("./SettingsModal");
 const SvgImportDialog_1 = require("./SvgImportDialog");
 const TranscriptionModalWithOptionalWhisper_1 = require("./Transcription/TranscriptionModalWithOptionalWhisper");
@@ -70,16 +71,16 @@ const Modals = ({ readOnlyStudio }) => {
             }
             (async () => {
                 const confirmed = await confirm({
-                    title: 'Add Element catalog',
+                    title: 'Add Element Library',
                     message: (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementLibraryAddConfirmation, { displayName: event.displayName, origin: event.origin, url: event.url })),
-                    confirmLabel: 'Add catalog',
+                    confirmLabel: 'Add Element Library',
                     cancelLabel: 'Cancel',
                 });
                 if (!confirmed) {
                     return;
                 }
                 if (previewServerState.type !== 'connected') {
-                    (0, NotificationCenter_1.showNotification)('Could not add catalog: Studio disconnected', 4000);
+                    (0, NotificationCenter_1.showNotification)('Could not add Element Library: Studio disconnected', 4000);
                     return;
                 }
                 try {
@@ -96,17 +97,17 @@ const Modals = ({ readOnlyStudio }) => {
                         ],
                     });
                     if (!result.success) {
-                        (0, NotificationCenter_1.showNotification)(`Could not add catalog: ${result.reason}`, 4000);
+                        (0, NotificationCenter_1.showNotification)(`Could not add Element Library: ${result.reason}`, 4000);
                     }
                 }
                 catch (error) {
-                    (0, NotificationCenter_1.showNotification)(`Could not add catalog: ${error.message}`, 4000);
+                    (0, NotificationCenter_1.showNotification)(`Could not add Element Library: ${error.message}`, 4000);
                 }
             })();
         });
     }, [confirm, isBrowserStudio, previewServerState, subscribeToEvent]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'settings' ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'generate-with-agent' ? (jsx_runtime_1.jsx(GenerateWithAgentModal_1.GenerateWithAgentModal, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'asset-selection' ? (jsx_runtime_1.jsx(AssetSelectorModal_1.AssetSelectorModal, { readOnlyStudio: readOnlyStudio, state: modalContextType })) : null, modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'queue-job-error' ? (jsx_runtime_1.jsx(QueueJobErrorModal_1.QueueJobErrorModal, { title: modalContextType.title, error: modalContextType.error })) : null, modalContextType && modalContextType.type === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'generate-with-agent' ? (jsx_runtime_1.jsx(GenerateWithAgentModal_1.GenerateWithAgentModal, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'asset-selection' ? (jsx_runtime_1.jsx(AssetSelectorModal_1.AssetSelectorModal, { readOnlyStudio: readOnlyStudio, state: modalContextType })) : null, modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/ModelManager.js

@@ -7,7 +7,9 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const check_circle_filled_1 = require("../icons/check-circle-filled");
 const cloud_download_1 = require("../icons/cloud-download");
+const models_1 = require("../icons/models");
 const trash_1 = require("../icons/trash");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineAction_1 = require("./InlineAction");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
@@ -40,15 +42,14 @@ const descriptionStyle = {
 const list = { marginTop: 14 };
 const modelRow = {
     alignItems: 'center',
-    borderBottom: colors_1.BORDER_WHITE_ALPHA_12,
     display: 'flex',
     gap: 10,
     minHeight: 38,
-    padding: '0 10px',
 };
-const lastModelRow = {
-    ...modelRow,
-    borderBottom: 'none',
+const modelIcon = {
+    flexShrink: 0,
+    height: 16,
+    width: 16,
 };
 const statusIcon = {
     flexShrink: 0,
@@ -56,7 +57,7 @@ const statusIcon = {
     width: 14,
 };
 const modelName = {
-    color: colors_1.WHITE,
+    color: colors_1.LIGHT_TEXT,
     flex: 1,
     fontFamily: 'monospace',
     fontSize: 13,
@@ -175,7 +176,7 @@ const ModelManager = ({ ariaLabel, availableModels, description, indent, isModel
         return jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: actionIcon });
     }, []);
     const actionInProgress = actionState.type === 'downloading' || actionState.type === 'removing';
-    return (jsx_runtime_1.jsx("div", { style: visible ? modelPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsxs("div", { style: indent ? container : flushContainer, children: [description === null ? null : (jsx_runtime_1.jsx("p", { style: descriptionStyle, children: description })), cacheCheckError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: cacheCheckError, type: "error" })) : null, jsx_runtime_1.jsx("div", { style: description === null ? undefined : list, role: "list", "aria-label": ariaLabel, children: availableModels.map((model, index) => {
+    return (jsx_runtime_1.jsx("div", { style: visible ? modelPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsxs("div", { style: indent ? container : flushContainer, children: [description === null ? null : (jsx_runtime_1.jsx("p", { style: descriptionStyle, children: description })), cacheCheckError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: cacheCheckError, type: "error" })) : null, jsx_runtime_1.jsx("div", { style: description === null ? undefined : list, role: "list", "aria-label": ariaLabel, children: availableModels.map((model) => {
                         var _a;
                         const cached = (_a = cachedModels === null || cachedModels === void 0 ? void 0 : cachedModels.has(model.name)) !== null && _a !== void 0 ? _a : false;
                         const processingThisModel = actionState.type !== 'idle' &&
@@ -192,8 +193,8 @@ const ModelManager = ({ ariaLabel, availableModels, description, indent, isModel
                             : actionState.type === 'error' && actionState.model === model.name
                                 ? actionState.message
                                 : (0, studio_shared_1.formatBytes)(model.webGpuDownloadSize);
-                        return (jsx_runtime_1.jsxs("div", { role: "listitem", style: index === availableModels.length - 1 ? lastModelRow : modelRow, children: [
-                                jsx_runtime_1.jsx("span", { style: modelName, children: model.name }), jsx_runtime_1.jsx("span", { style: status, title: modelStatus, children: modelStatus }), cached ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisModel ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : cached ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: actionInProgress, onClick: () => remove(model.name), renderAction: renderRemoveIcon, title: `Remove ${model.name}`, variant: null })) : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: cachedModels === null || actionInProgress, onClick: () => downloadModel(model.name), renderAction: renderDownloadIcon, title: `Download ${model.name}`, variant: null }))] }, model.name));
+                        return (jsx_runtime_1.jsxs("div", { role: "listitem", style: modelRow, children: [
+                                jsx_runtime_1.jsx(models_1.ModelsIcon, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: modelIcon }), jsx_runtime_1.jsx("span", { style: modelName, children: model.name }), jsx_runtime_1.jsx("span", { style: status, title: modelStatus, children: modelStatus }), cached ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisModel ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : cached ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Uninstall", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Remove ${model.name}`, title: "", disabled: actionInProgress, onClick: () => remove(model.name), renderAction: renderRemoveIcon, variant: null }) })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Install", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Download ${model.name}`, title: "", disabled: cachedModels === null || actionInProgress, onClick: () => downloadModel(model.name), renderAction: renderDownloadIcon, variant: null }) }))] }, model.name));
                     }) })
             ] }) }));
 };

package/dist/components/NewComposition/CancelButton.js

@@ -3,16 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CancelButton = exports.CancelIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
 const z_index_1 = require("../../state/z-index");
 const style = {
     appearance: 'none',
     border: 'none',
-    backgroundColor: colors_1.TRANSPARENT,
-    color: colors_1.WHITE,
-    cursor: 'pointer',
+    borderRadius: 4,
+    cursor: 'default',
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.WHITE_ALPHA_06,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
 };
 const CancelIcon = (props) => {
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M507.3 155.3C513.5 149.1 513.5 138.9 507.3 132.7C501.1 126.5 490.9 126.5 484.7 132.7L320 297.4L155.3 132.7C149.1 126.5 138.9 126.5 132.7 132.7C126.5 138.9 126.5 149.1 132.7 155.3L297.4 320L132.7 484.7C126.5 490.9 126.5 501.1 132.7 507.3C138.9 513.5 149.1 513.5 155.3 507.3L320 342.6L484.7 507.3C490.9 513.5 501.1 513.5 507.3 507.3C513.5 501.1 513.5 490.9 507.3 484.7L342.6 320L507.3 155.3z" }) }));
@@ -20,6 +26,6 @@ const CancelIcon = (props) => {
 exports.CancelIcon = CancelIcon;
 const CancelButton = ({ onPress, ...props }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx(exports.CancelIcon, { ...props }) }));
+    return (jsx_runtime_1.jsx("button", { "aria-label": "Close dialog", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx(exports.CancelIcon, { ...props }) }));
 };
 exports.CancelButton = CancelButton;

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

@@ -22,11 +22,12 @@ export declare const isInputDraggerValueAlignedToStep: ({ min, step, value, }: {
     readonly step: string | number | undefined;
     readonly value: number;
 }) => boolean;
-export declare const validateInputDraggerValue: ({ max, min, step, value, }: {
+export declare const validateInputDraggerValue: ({ max, min, step, value, integerOnly, }: {
     readonly max: string | number | undefined;
     readonly min: string | number | undefined;
     readonly step: string | number | undefined;
     readonly value: string;
+    readonly integerOnly?: boolean | undefined;
 }) => InputDraggerValidationResult;
 export declare const deriveInputDraggerArrowValue: ({ direction, max, min, step, value, }: {
     readonly direction: -1 | 1;
@@ -67,6 +68,7 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly rightAlign: boolean;
     readonly small?: boolean | undefined;
     readonly allowStepMismatch?: boolean | undefined;
+    readonly integerOnly?: boolean | undefined;
     readonly snapToStep?: boolean | undefined;
     readonly dragDecimalPlaces?: number | undefined;
     readonly dragSensitivity?: number | undefined;

package/dist/components/NewComposition/InputDragger.js

@@ -236,7 +236,7 @@ const isInputDraggerValueAlignedToStep = ({ min, step, value, }) => {
     return Math.abs(stepsFromBase - Math.round(stepsFromBase)) <= tolerance;
 };
 exports.isInputDraggerValueAlignedToStep = isInputDraggerValueAlignedToStep;
-const validateInputDraggerValue = ({ max, min, step, value, }) => {
+const validateInputDraggerValue = ({ max, min, step, value, integerOnly = false, }) => {
     const parsed = (0, exports.parseInputDraggerNumber)(value);
     if (parsed === null) {
         return {
@@ -258,6 +258,12 @@ const validateInputDraggerValue = ({ max, min, step, value, }) => {
             message: `Value must be less than or equal to ${numericMax}.`,
         };
     }
+    if (integerOnly && !Number.isInteger(parsed)) {
+        return {
+            valid: false,
+            message: 'Value must be an integer.',
+        };
+    }
     if (!(0, exports.isInputDraggerValueAlignedToStep)({ min, step, value: parsed })) {
         return {
             valid: false,
@@ -324,7 +330,7 @@ const deriveInputDraggerValueDiff = ({ dragSensitivity, step, xDistance, }) => {
     return (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step * dragSensitivity, 0, 0, 0, step * dragSensitivity]);
 };
 exports.deriveInputDraggerValueDiff = deriveInputDraggerValueDiff;
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), formatterStyle, formatterSubtitle, formatterSubtitleStyle, buttonStyle, style: inputStyle, status, rightAlign, small, allowStepMismatch = false, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), formatterStyle, formatterSubtitle, formatterSubtitleStyle, buttonStyle, style: inputStyle, status, rightAlign, small, allowStepMismatch = false, integerOnly = false, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
@@ -336,9 +342,9 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             step: _step,
         });
     }, [_min, _step, snapToStep]);
-    const validationStep = allowStepMismatch ? 'any' : deriveStep;
+    const validationStep = allowStepMismatch || integerOnly ? 'any' : deriveStep;
     const span = (0, react_1.useMemo)(() => ({
-        color: dragging ? 'var(--remotion-cli-internals-blue-hovered)' : colors_1.BLUE,
+        color: dragging ? colors_1.BLUE_HOVERED : colors_1.BLUE,
         cursor: 'ew-resize',
         userSelect: 'none',
         WebkitUserSelect: 'none',
@@ -380,6 +386,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         e.target.setCustomValidity('');
         const parsed = (0, exports.parseInputDraggerNumber)(e.target.value);
         if (parsed !== null &&
+            (!integerOnly || Number.isInteger(parsed)) &&
             (0, exports.isInputDraggerValueInRange)({
                 max: _max,
                 min: _min,
@@ -387,7 +394,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             })) {
             onValueChange(parsed, 'input');
         }
-    }, [_max, _min, onValueChange]);
+    }, [_max, _min, integerOnly, onValueChange]);
     const onBlur = (0, react_1.useCallback)(() => {
         if (!fallbackRef.current) {
             return;
@@ -402,6 +409,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             min: _min,
             step: validationStep,
             value: newValue,
+            integerOnly,
         });
         if (validation.valid) {
             fallbackRef.current.setCustomValidity('');
@@ -412,7 +420,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             fallbackRef.current.setCustomValidity(validation.message);
             fallbackRef.current.reportValidity();
         }
-    }, [_max, _min, onEscape, onValueChangeEnd, validationStep]);
+    }, [_max, _min, integerOnly, onEscape, onValueChangeEnd, validationStep]);
     const onInputKeyDown = (0, react_1.useCallback)((e) => {
         var _a;
         if (e.key === 'Tab') {
@@ -432,17 +440,22 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             min: _min,
             value,
         });
-        const nextValue = (0, exports.deriveInputDraggerArrowValue)({
+        const steppedValue = (0, exports.deriveInputDraggerArrowValue)({
             direction: e.key === 'ArrowUp' ? 1 : -1,
             max: _max,
             min: _min,
             step: deriveStep,
             value: currentValue,
         });
+        const nextValue = integerOnly ? Math.round(steppedValue) : steppedValue;
+        if (integerOnly &&
+            !(0, exports.isInputDraggerValueInRange)({ max: _max, min: _min, value: nextValue })) {
+            return;
+        }
         e.currentTarget.value = String(nextValue);
         e.currentTarget.setCustomValidity('');
         onValueChange(nextValue, 'input');
-    }, [_max, _min, deriveStep, onValueChange, value]);
+    }, [_max, _min, deriveStep, integerOnly, onValueChange, value]);
     const roundToStep = (val, stepSize) => {
         const factor = 1 / stepSize;
         return Math.ceil(val * factor) / factor;
@@ -478,11 +491,16 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                 xDistance,
             });
             const newValue = Math.min(max, Math.max(min, dragStartValue + diff));
-            const nextValue = snapToStep
+            const steppedValue = snapToStep
                 ? roundToStep(newValue, step)
                 : dragDecimalPlaces === undefined
                     ? newValue
                     : roundToDecimalPlaces(newValue, dragDecimalPlaces);
+            const nextValue = integerOnly ? Math.round(steppedValue) : steppedValue;
+            if (integerOnly &&
+                !(0, exports.isInputDraggerValueInRange)({ max: _max, min: _min, value: nextValue })) {
+                return;
+            }
             lastDragValue = nextValue;
             onValueChange(nextValue, 'drag');
         };
@@ -508,6 +526,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         _min,
         _max,
         value,
+        integerOnly,
         onValueChange,
         onValueChangeEnd,
         snapToStep,

package/dist/components/NewComposition/NewComposition.js

@@ -28,6 +28,7 @@ const NewCompDuration_1 = require("./NewCompDuration");
 const RemInput_1 = require("./RemInput");
 const SlugPreview_1 = require("./SlugPreview");
 const ValidationMessage_1 = require("./ValidationMessage");
+const { sortItemsByCommitOrder } = canvas_1.CanvasInternals;
 const content = {
     padding: 12,
     paddingRight: 12,
@@ -62,9 +63,9 @@ const folderLabelTextStyle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
-const FolderDropdownLabel = ({ folderPath, indentation }) => {
+const FolderDropdownLabel = ({ folderName, indentation }) => {
     return (jsx_runtime_1.jsxs("div", { style: folderLabelStyle, children: [
-            jsx_runtime_1.jsx(layout_1.Spacing, { x: indentation * 1.5 }), folderPath === null ? (jsx_runtime_1.jsx("div", { style: folderIconStyle })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.LIGHT_TEXT, style: folderIconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: folderLabelTextStyle, children: folderPath !== null && folderPath !== void 0 ? folderPath : 'None' })
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: indentation * 1.5 }), folderName === null ? (jsx_runtime_1.jsx("div", { style: folderIconStyle })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.LIGHT_TEXT, style: folderIconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: folderLabelTextStyle, children: folderName !== null && folderName !== void 0 ? folderName : 'None' })
         ] }));
 };
 const rootFolderId = 'new-composition-root-folder';
@@ -84,7 +85,7 @@ const NewCompositionFields = ({ compositionId, heightValidationMessage, inputRef
             ? folders
                 .slice()
                 .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
-            : (0, canvas_1.sortItemsByCommitOrder)(folders, (folder) => folder.order);
+            : sortItemsByCommitOrder(folders, (folder) => folder.order);
         const appendFolders = (parent) => {
             sortedFolders
                 .filter((folder) => folder.parent === parent)
@@ -98,7 +99,7 @@ const NewCompositionFields = ({ compositionId, heightValidationMessage, inputRef
             {
                 id: rootFolderId,
                 keyHint: null,
-                label: jsx_runtime_1.jsx(FolderDropdownLabel, { folderPath: null, indentation: 0 }),
+                label: jsx_runtime_1.jsx(FolderDropdownLabel, { folderName: null, indentation: 0 }),
                 leftItem: values.folder.folderName === null ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 onClick: () => {
                     setValues((current) => ({
@@ -135,7 +136,7 @@ const NewCompositionFields = ({ compositionId, heightValidationMessage, inputRef
                 return {
                     id,
                     keyHint: null,
-                    label: (jsx_runtime_1.jsx(FolderDropdownLabel, { folderPath: folderPath, indentation: indentation })),
+                    label: (jsx_runtime_1.jsx(FolderDropdownLabel, { folderName: folder.name, indentation: indentation })),
                     leftItem: selectedFolderId === id ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                     onClick: () => {
                         setValues((current) => ({
@@ -147,7 +148,7 @@ const NewCompositionFields = ({ compositionId, heightValidationMessage, inputRef
                             },
                         }));
                     },
-                    quickSwitcherLabel: folderPath,
+                    quickSwitcherLabel: folder.name,
                     subMenu: null,
                     type: 'item',
                     value: id,

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

@@ -13,6 +13,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: "error" | "ok" | "warning";
     isFocused: boolean;
     isHovered: boolean;
-}) => "#f1c40f" | "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
+}) => "var(--remotion-studio-black-alpha-60)" | "var(--remotion-studio-fail-color)" | "var(--remotion-studio-warning-color)" | "var(--remotion-studio-white-alpha-05)" | "var(--remotion-studio-white-alpha-15)";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/NewComposition/menu-typeahead.js

@@ -8,7 +8,7 @@ const getLabelToMatch = (value) => {
     if (typeof value.label === 'string') {
         return value.label;
     }
-    return null;
+    return value.quickSwitcherLabel;
 };
 const findTypeaheadMenuItem = ({ query, values, }) => {
     const normalizedQuery = query.trim().toLowerCase();

package/dist/components/Preview.js

@@ -48,8 +48,9 @@ const containerStyle = (options) => {
     return {
         transform: `scale(${options.scale})`,
         // Keep the scaled composition on its own layer so the checkerboard does
-        // not bleed through its edges at fractional preview scales.
-        willChange: 'transform',
+        // not bleed through its edges at fractional preview scales. Using
+        // 'transform' caches the rasterization scale and blurs content after zooming.
+        willChange: 'opacity',
         marginLeft: options.xCorrection,
         marginTop: options.yCorrection,
         width: options.width,

package/dist/components/RenderModal/SchemaEditor/create-zod-values.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createZodValues = void 0;
-const colors_1 = require("../../../helpers/colors");
 const zod_schema_type_1 = require("./zod-schema-type");
 const createZodValues = (schema, zodRuntime, zodTypes) => {
     var _a;
@@ -14,7 +13,7 @@ const createZodValues = (schema, zodRuntime, zodTypes) => {
     const description = (0, zod_schema_type_1.getZodSchemaDescription)(schema);
     if (zodTypes) {
         if (description === zodTypes.ZodZypesInternals.REMOTION_COLOR_BRAND) {
-            return colors_1.WHITE_FULL_HEX;
+            return '#ffffff';
         }
         if (description === zodTypes.ZodZypesInternals.REMOTION_TEXTAREA_BRAND) {
             return '';

package/dist/components/RenderModal/WebRenderModalPicture.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebRenderModalPicture = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
 const Checkbox_1 = require("../Checkbox");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const layout_1 = require("./layout");
@@ -23,7 +22,7 @@ const WebRenderModalPicture = ({ renderMode, videoBitrate, setVideoBitrate, keyf
                     jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Quality" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: qualityOptions, selectedId: videoBitrate, title: "Quality" }) })
                         ] }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Keyframe Interval", formatter: (v) => `${v}s`, min: 1, max: 300, step: 1, value: keyframeIntervalInSeconds, onValueChanged: setKeyframeIntervalInSeconds }), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Transparent" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: transparent, onChange: onTransparentChanged, name: colors_1.TRANSPARENT }) })
+                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Transparent" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: transparent, onChange: onTransparentChanged, name: "transparent" }) })
                         ] })
                 ] }))] }));
 };

package/dist/components/RenderQueue/CaptionQueueItem.js

@@ -12,6 +12,10 @@ const use_select_asset_1 = require("../use-select-asset");
 const CircularProgress_1 = require("./CircularProgress");
 const context_1 = require("./context");
 const item_style_1 = require("./item-style");
+const QueueJobError_1 = require("./QueueJobError");
+const RenderQueueCancelledMessage_1 = require("./RenderQueueCancelledMessage");
+const RenderQueueItemCancelButton_1 = require("./RenderQueueItemCancelButton");
+const RenderQueueRepeat_1 = require("./RenderQueueRepeat");
 const SuccessIcon_1 = require("./SuccessIcon");
 const container = {
     padding: 12,
@@ -53,13 +57,13 @@ const removeIcon = {
     color: colors_1.CURRENT_COLOR,
 };
 const CaptionJobStatus = ({ job }) => {
-    if (job.status === 'running') {
+    if (job.status === 'running' || job.status === 'saving') {
         return (jsx_runtime_1.jsx("div", { style: statusIcon, role: "progressbar", "aria-label": "Caption job progress", "aria-valuetext": job.progress.message, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(job.progress.value * 100), children: jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: Math.max(0.07, job.progress.value) }) }));
     }
     if (job.status === 'done') {
         return jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {});
     }
-    if (job.status === 'failed') {
+    if (job.status === 'failed' || job.status === 'cancelled') {
         return (jsx_runtime_1.jsx("svg", { style: statusIcon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.FAIL_COLOR, d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z" }) }));
     }
     return (jsx_runtime_1.jsx("svg", { style: statusIcon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
@@ -117,9 +121,12 @@ const CaptionQueueItem = ({ job, selected }) => {
         if (job.status === 'idle') {
             return 'Queued for transcription';
         }
-        if (job.status === 'running') {
+        if (job.status === 'running' || job.status === 'saving') {
             return job.progress.message;
         }
+        if (job.status === 'cancelled') {
+            return 'Cancelled';
+        }
         if (job.status === 'failed') {
             return job.error.message;
         }
@@ -127,7 +134,9 @@ const CaptionQueueItem = ({ job, selected }) => {
     }, [job]);
     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(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 }) }))] }));
+                    jsx_runtime_1.jsx("div", { style: title, children: job.displayName }), jsx_runtime_1.jsx("div", { style: subtitleContainer, children: job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : job.status === 'failed' ? (jsx_runtime_1.jsx(QueueJobError_1.QueueJobError, { error: job.error, modalTitle: "Transcription failed" })) : (jsx_runtime_1.jsx("span", { style: subtitle, title: message, children: message })) })
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), job.status === 'done' ||
+                job.status === 'failed' ||
+                job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : job.status === 'saving' ? 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;