@remotion/studio 4.0.518 → 4.0.520

package/dist/components/LicenseExplanation.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LicenseExplanation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const description = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    margin: 0,
+};
+const descriptionLink = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: '21px',
+};
+const licenseExplanation = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+};
+const licenseExplanationRow = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+};
+const people = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, 9px)',
+    gap: 3,
+    flexShrink: 0,
+};
+const person = {
+    display: 'block',
+    height: 24,
+    overflow: 'visible',
+    width: 9,
+};
+const PersonIcon = ({ handsUp, opacity }) => {
+    return (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", opacity: opacity, style: person, viewBox: "0 0 192 512", xmlns: "http://www.w3.org/2000/svg", children: [
+            jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M128 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM32 64A64 64 0 1 1 160 64 64 64 0 1 1 32 64zm0 128l0 128 128 0 0-128-128 0zM0 160l192 0 0 192-32 0 0 160-32 0 0-160-64 0 0 160-32 0 0-160-32 0 0-192z" }), handsUp ? (jsx_runtime_1.jsx("path", { d: "M10.667 192 0 -32 M181.333 192 192 -32", fill: "none", stroke: colors_1.LIGHT_TEXT, strokeWidth: "32" })) : null] }));
+};
+const LicenseExplanation = () => {
+    return (jsx_runtime_1.jsxs("div", { style: licenseExplanation, children: [
+            jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: people, children: [
+                            jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 })
+                        ] }), jsx_runtime_1.jsx("p", { style: description, children: "Remotion is free to use if you are an individual or company of 3 or less." })
+                ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: people, children: [
+                            jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 })
+                        ] }), jsx_runtime_1.jsxs("p", { style: description, children: ["If used in an organization with 4+ people, you need a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "Company License" }),
+                            "."] })
+                ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: people, children: [
+                            jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 })
+                        ] }), jsx_runtime_1.jsx("p", { style: description, children: "The total headcount matters, not the amount of people using Remotion." })
+                ] })
+        ] }));
+};
+exports.LicenseExplanation = LicenseExplanation;

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

@@ -33,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);
@@ -108,6 +107,6 @@ const Modals = ({ readOnlyStudio }) => {
                     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 === '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/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 canvas_1 = require("@remotion/canvas");
 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 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, canvas_1.sortItemsByCommitOrder)(folders, (folder) => folder.order);
+        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/PlayPause.js

@@ -79,19 +79,8 @@ const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, mu
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
-    const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, isPlaying, } = player_1.PlayerInternals.usePlayerMethods();
-    const [playing, setPlaying] = (0, react_1.useState)(isPlaying);
-    (0, react_1.useEffect)(() => {
-        const onPlay = () => setPlaying(true);
-        const onPause = () => setPlaying(false);
-        setPlaying(isPlaying());
-        emitter.addEventListener('play', onPlay);
-        emitter.addEventListener('pause', onPause);
-        return () => {
-            emitter.removeEventListener('play', onPlay);
-            emitter.removeEventListener('pause', onPause);
-        };
-    }, [emitter, isPlaying]);
+    const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayerMethods();
+    const playing = remotion_1.Internals.usePlaying();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     (0, react_1.useEffect)(() => {
         if (isStill) {

package/dist/components/PreviewToolbar.js

@@ -98,7 +98,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                         !showCompositionControls ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) })
                         ] }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", narrow: isMobileLayout }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout ? null : jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", narrow: isMobileLayout }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
         ] }));
 };

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -11,7 +11,7 @@ const ellipsis_1 = require("../../icons/ellipsis");
 const modals_1 = require("../../state/modals");
 const InlineDropdown_1 = require("../InlineDropdown");
 const quickSwitcherArea = {
-    padding: '4px 8px',
+    padding: '4px 4px 4px 8px',
     borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
     display: 'flex',
     alignItems: 'center',
@@ -28,6 +28,7 @@ const quickSwitcherTrigger = {
     border: 'none',
     flex: 1,
     appearance: 'none',
+    userSelect: 'none',
     ...(0, hoverable_1.hoverableStyle)({
         idleBackground: colors_1.WHITE_ALPHA_06,
         hoverBackground: colors_1.WHITE_ALPHA_06,