@remotion/studio 4.0.517 → 4.0.519

package/dist/components/MenuToolbar.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const can_show_updates_1 = require("../helpers/can-show-updates");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
@@ -48,6 +49,11 @@ const MenuToolbar = ({ readOnlyStudio }) => {
     const canUndoAndRedo = !readOnlyStudio ||
         (previewServerState.type === 'connected' &&
             browserStudioOperations !== null);
+    const showUpdates = (0, can_show_updates_1.canShowUpdates)({
+        connectionStatus: previewServerState.type,
+        isBrowserStudio: browserStudioOperations !== null,
+        readOnlyStudio,
+    });
     const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const fixedWidthRight = (0, react_1.useMemo)(() => {
         return {
@@ -132,7 +138,7 @@ const MenuToolbar = ({ readOnlyStudio }) => {
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, title: searchTooltip })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), jsx_runtime_1.jsx("div", { style: menuItems, children: structure.map((s) => {
                             return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-                        }) }), readOnlyStudio || browserStudioOperations ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
+                        }) }), showUpdates ? jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {}) : null] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
                 ] })
         ] }));
 };

package/dist/components/Modals.js

@@ -11,8 +11,10 @@ const client_id_1 = require("../helpers/client-id");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
+const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
+const ElementInstallConfirmation_1 = require("./ElementInstallConfirmation");
 const ElementLibraryModal_1 = require("./ElementLibraryModal");
 const FixComputedValueModal_1 = require("./FixComputedValueModal");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
@@ -23,6 +25,7 @@ const NewFolder_1 = require("./NewComposition/NewFolder");
 const RenameComposition_1 = require("./NewComposition/RenameComposition");
 const RenameFolder_1 = require("./NewComposition/RenameFolder");
 const RenameStaticFile_1 = require("./NewComposition/RenameStaticFile");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const OverrideInputProps_1 = require("./OverrideInputProps");
 const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
@@ -30,7 +33,6 @@ const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
 const SettingsModal_1 = require("./SettingsModal");
 const SvgImportDialog_1 = require("./SvgImportDialog");
-const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
     var _a;
     const modalContextType = (0, react_1.useContext)(modals_1.SelectedModalContext);
@@ -38,6 +40,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const canRender = previewServerState.type === 'connected';
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     (0, react_1.useEffect)(() => {
         if (isBrowserStudio) {
             return;
@@ -53,12 +56,57 @@ const Modals = ({ readOnlyStudio }) => {
             });
         });
     }, [isBrowserStudio, setSelectedModal, subscribeToEvent]);
+    (0, react_1.useEffect)(() => {
+        if (isBrowserStudio) {
+            return;
+        }
+        return subscribeToEvent('element-library-add-request', (event) => {
+            if (event.type !== 'element-library-add-request') {
+                return;
+            }
+            (async () => {
+                const confirmed = await confirm({
+                    title: 'Add Element catalog',
+                    message: (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementLibraryAddConfirmation, { displayName: event.displayName, origin: event.origin, url: event.url })),
+                    confirmLabel: 'Add catalog',
+                    cancelLabel: 'Cancel',
+                });
+                if (!confirmed) {
+                    return;
+                }
+                if (previewServerState.type !== 'connected') {
+                    (0, NotificationCenter_1.showNotification)('Could not add catalog: Studio disconnected', 4000);
+                    return;
+                }
+                try {
+                    const result = await (0, call_api_1.callApi)('/api/update-config', {
+                        clientId: previewServerState.clientId,
+                        updates: [
+                            {
+                                setter: 'addElementLibrary',
+                                type: 'set',
+                                value: event.displayName === null
+                                    ? { url: event.url }
+                                    : { url: event.url, displayName: event.displayName },
+                            },
+                        ],
+                    });
+                    if (!result.success) {
+                        (0, NotificationCenter_1.showNotification)(`Could not add catalog: ${result.reason}`, 4000);
+                    }
+                }
+                catch (error) {
+                    (0, NotificationCenter_1.showNotification)(`Could not add catalog: ${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' &&
                 (!isBrowserStudio ||
                     modalContextType.initialTab === 'packages' ||
                     modalContextType.initialTab === 'shortcuts') ? (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 === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), 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 === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), 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 === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), 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 === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), 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/NewComposition/InputDragger.js

@@ -62,6 +62,26 @@ const compactInputDraggerContainerStyle = {
     ...exports.inputDraggerContainerStyle,
     ...compactInputDraggerStyle,
 };
+let activateInputDraggerOnNextFocus = false;
+const clearInputDraggerActivationRequest = () => {
+    // Let the receiving dragger's React onFocus handler consume the request first.
+    setTimeout(() => {
+        activateInputDraggerOnNextFocus = false;
+    }, 0);
+    document.removeEventListener('focusin', clearInputDraggerActivationRequest, true);
+};
+const requestInputDraggerActivationOnNextFocus = () => {
+    activateInputDraggerOnNextFocus = true;
+    document.addEventListener('focusin', clearInputDraggerActivationRequest, true);
+};
+const consumeInputDraggerActivationRequest = () => {
+    if (!activateInputDraggerOnNextFocus) {
+        return false;
+    }
+    activateInputDraggerOnNextFocus = false;
+    document.removeEventListener('focusin', clearInputDraggerActivationRequest, true);
+    return true;
+};
 const isInt = (num) => {
     return num % 1 === 0;
 };
@@ -328,10 +348,13 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         ...formatterStyle,
     }), [dragging, formatterStyle, small]);
     const onFocus = (0, react_1.useCallback)(() => {
-        if (!small || pointerDownRef.current) {
+        if (pointerDownRef.current) {
             return;
         }
-        setInputFallback(true);
+        const wasActivatedByInputDragger = consumeInputDraggerActivationRequest();
+        if (small || wasActivatedByInputDragger) {
+            setInputFallback(true);
+        }
     }, [small]);
     const onClick = (0, react_1.useCallback)((e) => {
         if (!(0, input_dragger_click_lock_1.getClickLock)()) {
@@ -392,6 +415,10 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     }, [_max, _min, onEscape, onValueChangeEnd, validationStep]);
     const onInputKeyDown = (0, react_1.useCallback)((e) => {
         var _a;
+        if (e.key === 'Tab') {
+            requestInputDraggerActivationOnNextFocus();
+            return;
+        }
         if (e.key === 'Enter') {
             (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.blur();
             return;

package/dist/components/NewComposition/NewCompDuration.js

@@ -19,7 +19,7 @@ const NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
     const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Duration in frames" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
-                        jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
+                        jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": "Duration in frames", type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
                             // Hitting Promise.all() limit in Chrome
                             max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? (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: compDurationErrMessage, type: "error" })

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

@@ -1,5 +1,28 @@
+import type { Dispatch, RefObject, SetStateAction } from 'react';
 import React from 'react';
 import type { CanvasCaptureImport } from '../../state/modals';
+export type NewCompositionFormValues = {
+    readonly durationInFrames: number;
+    readonly folder: {
+        readonly folderName: string | null;
+        readonly parentName: string | null;
+        readonly stack: string | null;
+    };
+    readonly fps: number;
+    readonly id: string;
+    readonly size: {
+        readonly height: number;
+        readonly width: number;
+    };
+};
+export declare const NewCompositionFields: React.FC<{
+    readonly heightValidationMessage: string | null;
+    readonly inputRef: RefObject<HTMLInputElement | null>;
+    readonly nameValidationMessage: string | null;
+    readonly setValues: Dispatch<SetStateAction<NewCompositionFormValues>>;
+    readonly values: NewCompositionFormValues;
+    readonly widthValidationMessage: string | null;
+}>;
 export declare const NewComposition: React.FC<{
     readonly folderName: string | null;
     readonly parentName: string | null;

package/dist/components/NewComposition/NewComposition.js

@@ -1,18 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewComposition = void 0;
+exports.NewComposition = exports.NewCompositionFields = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../../api/get-static-files");
 const write_static_file_1 = require("../../api/write-static-file");
+const colors_1 = require("../../helpers/colors");
+const get_folder_id_1 = require("../../helpers/get-folder-id");
 const install_required_package_1 = require("../../helpers/install-required-package");
+const sort_by_nonce_history_1 = require("../../helpers/sort-by-nonce-history");
 const use_create_composition_1 = require("../../helpers/use-create-composition");
+const Checkmark_1 = require("../../icons/Checkmark");
+const folder_1 = require("../../icons/folder");
+const folders_1 = require("../../state/folders");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
 const layout_2 = require("../RenderModal/layout");
 const CodemodFooter_1 = require("./CodemodFooter");
+const ComboBox_1 = require("./ComboBox");
 const DismissableModal_1 = require("./DismissableModal");
 const get_new_composition_defaults_1 = require("./get-new-composition-defaults");
 const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
@@ -27,9 +34,198 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
-const folderPathStyle = {
-    fontSize: 14,
+const folderSelectStyle = {
+    boxSizing: 'border-box',
+    width: 250,
 };
+const folderIconStyle = {
+    flexShrink: 0,
+    height: 16,
+    width: 16,
+};
+const folderLabelStyle = {
+    alignItems: 'center',
+    color: 'inherit',
+    display: 'flex',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'normal',
+    minWidth: 0,
+};
+const folderLabelTextStyle = {
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'normal',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const FolderDropdownLabel = ({ folderPath, 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' })
+        ] }));
+};
+const rootFolderId = 'new-composition-root-folder';
+const folderSelectIdPrefix = 'new-composition-folder-';
+const NewCompositionFields = ({ heightValidationMessage, inputRef, nameValidationMessage, setValues, values, widthValidationMessage, }) => {
+    const { folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { compositionSortOrder } = (0, react_1.useContext)(folders_1.FolderContext);
+    const selectedFolderId = values.folder.folderName
+        ? `${folderSelectIdPrefix}${(0, get_folder_id_1.getFolderId)({
+            folderName: values.folder.folderName,
+            parentName: values.folder.parentName,
+        })}`
+        : rootFolderId;
+    const folderValues = (0, react_1.useMemo)(() => {
+        const foldersInTreeOrder = [];
+        const sortedFolders = compositionSortOrder === 'alphabetical'
+            ? folders
+                .slice()
+                .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
+            : (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(folders);
+        const appendFolders = (parent) => {
+            sortedFolders
+                .filter((folder) => folder.parent === parent)
+                .forEach((folder) => {
+                foldersInTreeOrder.push(folder);
+                appendFolders((0, get_folder_id_1.getFolderId)({ folderName: folder.name, parentName: folder.parent }));
+            });
+        };
+        appendFolders(null);
+        return [
+            {
+                id: rootFolderId,
+                keyHint: null,
+                label: jsx_runtime_1.jsx(FolderDropdownLabel, { folderPath: null, indentation: 0 }),
+                leftItem: values.folder.folderName === null ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                onClick: () => {
+                    setValues((current) => ({
+                        ...current,
+                        folder: {
+                            folderName: null,
+                            parentName: null,
+                            stack: null,
+                        },
+                    }));
+                },
+                quickSwitcherLabel: 'None',
+                subMenu: null,
+                type: 'item',
+                value: rootFolderId,
+            },
+            ...(folders.length === 0
+                ? []
+                : [
+                    {
+                        id: 'new-composition-root-folder-divider',
+                        type: 'divider',
+                    },
+                ]),
+            ...foldersInTreeOrder.map((folder) => {
+                var _a;
+                var _b;
+                const folderPath = (0, get_folder_id_1.getFolderId)({
+                    folderName: folder.name,
+                    parentName: folder.parent,
+                });
+                const indentation = (_b = (_a = folder.parent) === null || _a === void 0 ? void 0 : _a.split('/').length) !== null && _b !== void 0 ? _b : 0;
+                const id = `${folderSelectIdPrefix}${folderPath}`;
+                return {
+                    id,
+                    keyHint: null,
+                    label: (jsx_runtime_1.jsx(FolderDropdownLabel, { folderPath: folderPath, indentation: indentation })),
+                    leftItem: selectedFolderId === id ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                    onClick: () => {
+                        setValues((current) => ({
+                            ...current,
+                            folder: {
+                                folderName: folder.name,
+                                parentName: folder.parent,
+                                stack: folder.stack,
+                            },
+                        }));
+                    },
+                    quickSwitcherLabel: folderPath,
+                    subMenu: null,
+                    type: 'item',
+                    value: id,
+                    disabled: folder.stack === null,
+                };
+            }),
+        ];
+    }, [
+        compositionSortOrder,
+        folders,
+        selectedFolderId,
+        setValues,
+        values.folder.folderName,
+    ]);
+    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
+        setValues((current) => ({
+            ...current,
+            size: { height: current.size.height, width: Number(newValue) },
+        }));
+    }, [setValues]);
+    const onWidthDirectlyChanged = (0, react_1.useCallback)((newWidth) => {
+        setValues((current) => ({
+            ...current,
+            size: { height: current.size.height, width: newWidth },
+        }));
+    }, [setValues]);
+    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
+        setValues((current) => ({
+            ...current,
+            size: { height: Number(newValue), width: current.size.width },
+        }));
+    }, [setValues]);
+    const onHeightDirectlyChanged = (0, react_1.useCallback)((newHeight) => {
+        setValues((current) => ({
+            ...current,
+            size: { height: newHeight, width: current.size.width },
+        }));
+    }, [setValues]);
+    const onNameChange = (0, react_1.useCallback)((event) => {
+        setValues((current) => ({ ...current, id: event.target.value }));
+    }, [setValues]);
+    const onTextFpsChange = (0, react_1.useCallback)((newFps) => {
+        setValues((current) => ({ ...current, fps: Number(newFps) }));
+    }, [setValues]);
+    const onFpsChange = (0, react_1.useCallback)((newFps) => {
+        setValues((current) => ({ ...current, fps: newFps }));
+    }, [setValues]);
+    const setDurationInFrames = (0, react_1.useCallback)((update) => {
+        setValues((current) => ({
+            ...current,
+            durationInFrames: typeof update === 'function'
+                ? update(current.durationInFrames)
+                : update,
+        }));
+    }, [setValues]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: folderValues, selectedId: selectedFolderId, style: folderSelectStyle, title: "Folder" }) })
+                ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), 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: values.id, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), nameValidationMessage ? (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: nameValidationMessage, type: "error" })
+                                    ] })) : null] }) })
+                ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Width" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
+                                jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": "Width", type: "number", value: values.size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (width) => `${width}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), widthValidationMessage ? (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: widthValidationMessage, type: "error" })
+                                    ] })) : null] }) })
+                ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Height" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
+                                jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": "Height", type: "number", value: values.size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (height) => `${height}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), heightValidationMessage ? (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: heightValidationMessage, type: "error" })
+                                    ] })) : null] }) })
+                ] }), jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: values.durationInFrames, setDurationInFrames: setDurationInFrames }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": "FPS", type: "number", value: values.fps, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
+                ] })
+        ] }));
+};
+exports.NewCompositionFields = NewCompositionFields;
 const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack }) => {
     var _a;
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -39,7 +235,16 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
         ? resolvedComposition.result
         : null;
     const initialDimensions = (0, get_new_composition_defaults_1.getNewCompositionDefaults)(initialComposition, (_a = canvasCapture === null || canvasCapture === void 0 ? void 0 : canvasCapture.durationInSeconds) !== null && _a !== void 0 ? _a : null);
-    const [newId, setName] = (0, react_1.useState)(() => (0, use_create_composition_1.getUniqueCompositionName)(compositions));
+    const [values, setValues] = (0, react_1.useState)(() => ({
+        durationInFrames: initialDimensions.durationInFrames,
+        folder: { folderName, parentName, stack },
+        fps: initialDimensions.fps,
+        id: (0, use_create_composition_1.getUniqueCompositionName)(compositions),
+        size: {
+            height: initialDimensions.height,
+            width: initialDimensions.width,
+        },
+    }));
     const inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const input = inputRef.current;
@@ -47,61 +252,14 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
             return;
         input.select();
     }, []);
-    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(initialDimensions.fps);
-    const [size, setSize] = (0, react_1.useState)(() => ({
-        width: initialDimensions.width,
-        height: initialDimensions.height,
-    }));
-    const [durationInFrames, setDurationInFrames] = (0, react_1.useState)(initialDimensions.durationInFrames);
-    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
-        setSize((s) => {
-            return {
-                height: s.height,
-                width: Number(newValue),
-            };
-        });
-    }, []);
-    const onWidthDirectlyChanged = (0, react_1.useCallback)((newWidth) => {
-        setSize((s) => {
-            return {
-                height: s.height,
-                width: newWidth,
-            };
-        });
-    }, []);
-    const onHeightDirectlyChanged = (0, react_1.useCallback)((newHeight) => {
-        setSize((s) => {
-            return {
-                width: s.width,
-                height: newHeight,
-            };
-        });
-    }, []);
-    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
-        setSize((s) => {
-            return {
-                width: s.width,
-                height: Number(newValue),
-            };
-        });
-    }, []);
-    const onNameChange = (0, react_1.useCallback)((e) => {
-        setName(e.target.value);
-    }, []);
-    const onTextFpsChange = (0, react_1.useCallback)((newFps) => {
-        setFrameRate(Number(newFps));
-    }, []);
-    const onFpsChange = (0, react_1.useCallback)((newFps) => {
-        setFrameRate(newFps);
-    }, []);
-    const { codemod, createComposition, heightValidationMessage: compHeightErrMessage, nameValidationMessage: compNameErrMessage, valid, widthValidationMessage: compWidthErrMessage, } = (0, use_create_composition_1.useCreateComposition)({
+    const { codemod, createComposition, heightValidationMessage, nameValidationMessage, valid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
         compositions,
-        durationInFrames,
-        folderName,
-        newId,
-        parentName,
-        selectedFrameRate,
-        size,
+        durationInFrames: values.durationInFrames,
+        folderName: values.folder.folderName,
+        newId: values.id,
+        parentName: values.folder.parentName,
+        selectedFrameRate: values.fps,
+        size: values.size,
         canvasCapture: canvasCapture === null
             ? null
             : {
@@ -134,30 +292,9 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
-    const folderPath = [parentName, folderName].filter(Boolean).join('/');
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: canvasCapture === null ? 'New composition' : 'Import Canvas Capture' }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
-                    jsx_runtime_1.jsxs("div", { style: content, children: [folderPath ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("span", { style: folderPathStyle, children: folderPath }) })
-                                ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), 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: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (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: compNameErrMessage, type: "error" })
-                                                    ] })) : null] }) })
-                                ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Width" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
-                                                jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? (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: compWidthErrMessage, type: "error" })
-                                                    ] })) : null] }) })
-                                ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Height" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
-                                                jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? (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: compHeightErrMessage, type: "error" })
-                                                    ] })) : null] }) })
-                                ] }), jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
-                                ] })
-                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
+                    jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsx(exports.NewCompositionFields, { heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: nameValidationMessage, setValues: setValues, values: values, widthValidationMessage: widthValidationMessage }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: values.folder.stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
                                 signal,
                                 symbolicatedStack,
                             }), applyCodemodForPreview: null, fallbackToRootFile: true }) })

package/dist/components/{UpdateModal/OpenIssueButton.js → OpenIssueButton.js}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OpenIssueButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
+const colors_1 = require("../helpers/colors");
 const svgStyle = {
     width: '11px',
     height: '11px',

package/dist/components/PlaybackRateSelector.js

@@ -10,9 +10,6 @@ const Checkmark_1 = require("../icons/Checkmark");
 const playback_rate_1 = require("../icons/playback-rate");
 const playbackrate_1 = require("../state/playbackrate");
 const TimelineCombobox_1 = require("./TimelineCombobox");
-const commonPlaybackRates = [
-    -4, -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 1.5, 2, 4,
-];
 const getPlaybackRateLabel = (playbackRate) => {
     return `${playbackRate}x`;
 };
@@ -23,7 +20,7 @@ const usePlaybackRateMenuItems = ({ playbackRate, setPlaybackRate, }) => {
             type: 'divider',
             id: 'divider',
         };
-        const values = commonPlaybackRates.map((newPlaybackRate) => {
+        const values = playbackrate_1.commonPlaybackRates.map((newPlaybackRate) => {
             return {
                 id: String(newPlaybackRate),
                 label: getPlaybackRateLabel(newPlaybackRate),
@@ -41,7 +38,7 @@ const usePlaybackRateMenuItems = ({ playbackRate, setPlaybackRate, }) => {
                 quickSwitcherLabel: null,
             };
         });
-        const middle = Math.floor(commonPlaybackRates.length / 2);
+        const middle = Math.floor(playbackrate_1.commonPlaybackRates.length / 2);
         return [...values.slice(0, middle), divider, ...values.slice(middle)];
     }, [playbackRate, setPlaybackRate]);
     return {

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { ComboboxValue } from '../NewComposition/ComboBox';
 import type { QuickSwitcherMode } from './NoResults';
 export declare const ExplorerQuickSwitcherTrigger: React.FC<{
     readonly mode: QuickSwitcherMode;
     readonly showShortcut: boolean;
     readonly tabIndex: number;
+    readonly getActions: () => ComboboxValue[];
 }>;