@remotion/studio 4.0.136 → 4.0.138

package/.eslintrc

@@ -1,35 +1,35 @@
 {
-  "extends": "@jonny",
-  "rules": {
-    "no-console": "error",
-    "no-restricted-imports": [
-      "error",
-      {
-        "patterns": [
-          "@remotion/*/src",
-          "@remotion/*/src/*",
-          "@remotion/*/dist/*",
-          "remotion/src/*"
-        ]
-      }
-    ],
-    "@typescript-eslint/no-use-before-define": "off",
-    "@typescript-eslint/no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "zod",
-            "message": "Can only import zod as a type",
-            "allowTypeImports": true
-          },
-          {
-            "name": "@remotion/zod-types",
-            "message": "Can only import @remotion/zod-types as a type",
-            "allowTypeImports": true
-          }
-        ]
-      }
-    ]
-  }
+	"extends": "@jonny/eslint-config/react",
+	"rules": {
+		"no-console": "error",
+		"no-restricted-imports": [
+			"error",
+			{
+				"patterns": [
+					"@remotion/*/src",
+					"@remotion/*/src/*",
+					"@remotion/*/dist/*",
+					"remotion/src/*"
+				]
+			}
+		],
+		"@typescript-eslint/no-use-before-define": "off",
+		"@typescript-eslint/no-restricted-imports": [
+			"error",
+			{
+				"paths": [
+					{
+						"name": "zod",
+						"message": "Can only import zod as a type",
+						"allowTypeImports": true
+					},
+					{
+						"name": "@remotion/zod-types",
+						"message": "Can only import @remotion/zod-types as a type",
+						"allowTypeImports": true
+					}
+				]
+			}
+		]
+	}
 }

package/.turbo/turbo-build.log

@@ -1,5 +1,4 @@
 
-
-> @remotion/studio@4.0.135 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.137 build /Users/jonathanburger/remotion/packages/studio
 > tsc -d
 

package/dist/components/AssetSelectorItem.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { AssetStructure } from '../helpers/create-folder-tree';
 export declare const AssetFolderTree: React.FC<{
-    item: AssetStructure;
-    name: string | null;
-    parentFolder: string | null;
-    level: number;
-    tabIndex: number;
-    toggleFolder: (folderName: string, parentName: string | null) => void;
-    dropLocation: string | null;
-    setDropLocation: React.Dispatch<React.SetStateAction<string | null>>;
+    readonly item: AssetStructure;
+    readonly name: string | null;
+    readonly parentFolder: string | null;
+    readonly level: number;
+    readonly tabIndex: number;
+    readonly toggleFolder: (folderName: string, parentName: string | null) => void;
+    readonly dropLocation: string | null;
+    readonly setDropLocation: React.Dispatch<React.SetStateAction<string | null>>;
 }>;

package/dist/components/AssetSelectorItem.js

@@ -41,9 +41,9 @@ const file_1 = require("../icons/file");
 const folder_1 = require("../icons/folder");
 const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
-const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
+const layout_1 = require("./layout");
 const ASSET_ITEM_HEIGHT = 32;
 const iconStyle = {
     width: 18,
@@ -165,7 +165,13 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
         if (isMobileLayout) {
             setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
         }
-    }, [item.name, parentFolder, setCanvasContent]);
+    }, [
+        isMobileLayout,
+        item.name,
+        parentFolder,
+        setCanvasContent,
+        setSidebarCollapsedState,
+    ]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...itemStyle,

package/dist/components/Canvas.js

@@ -18,9 +18,9 @@ const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
-const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
 const ResetZoomButton_1 = require("./ResetZoomButton");
+const layout_1 = require("./layout");
 const container = {
     flex: 1,
     display: 'flex',

package/dist/components/CanvasOrLoading.js

@@ -9,12 +9,12 @@ const colors_1 = require("../helpers/colors");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const Canvas_1 = require("./Canvas");
 const FramePersistor_1 = require("./FramePersistor");
-const layout_1 = require("./layout");
 const styles_1 = require("./Menu/styles");
 const Spinner_1 = require("./Spinner");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const ZoomPersistor_1 = require("./ZoomPersistor");
+const layout_1 = require("./layout");
 const container = {
     color: 'white',
     flex: 1,

package/dist/components/CheckerboardProvider.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const CheckerboardProvider: React.FC<{
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }>;

package/dist/components/CompositionSelectorItem.js

@@ -10,9 +10,9 @@ const still_1 = require("../icons/still");
 const video_1 = require("../icons/video");
 const modals_1 = require("../state/modals");
 const ContextMenu_1 = require("./ContextMenu");
-const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
+const layout_1 = require("./layout");
 const COMPOSITION_ITEM_HEIGHT = 32;
 const itemStyle = {
     paddingRight: 10,

package/dist/components/ContextMenu.js

@@ -87,7 +87,7 @@ const ContextMenu = ({ children, values }) => {
                     right: canOpenOnLeft ? size.windowSize.width - opened.left : 0,
                 }),
         };
-    }, [opened.type, size, isMobileLayout, spaceToTop, spaceToBottom]);
+    }, [opened, size, isMobileLayout, spaceToTop, spaceToBottom]);
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);

package/dist/components/CopyButton.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const copy_text_1 = require("../helpers/copy-text");
 const Button_1 = require("./Button");
-const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const layout_1 = require("./layout");
 const iconStyle = {
     width: 16,
     height: 16,

package/dist/components/Editor.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const BUFFER_STATE_DELAY_IN_MILLISECONDS: number;
 export declare const Editor: React.FC<{
-    Root: React.FC;
-    readOnlyStudio: boolean;
+    readonly Root: React.FC;
+    readonly readOnlyStudio: boolean;
 }>;

package/dist/components/Editor.js

@@ -48,7 +48,7 @@ const DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
 exports.BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === 'undefined'
     ? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS
     : Number(process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS);
-const Editor = ({ Root, readOnlyStudio, }) => {
+const Editor = ({ Root, readOnlyStudio }) => {
     const drawRef = (0, react_1.useRef)(null);
     const size = player_1.PlayerInternals.useElementSize(drawRef, {
         triggerOnWindowResize: false,

package/dist/components/EditorContent.d.ts

@@ -1,9 +1,9 @@
 import type { Size } from '@remotion/player';
 import React from 'react';
 export declare const EditorContent: React.FC<{
-    readOnlyStudio: boolean;
-    onMounted: () => void;
-    drawRef: React.RefObject<HTMLDivElement>;
-    size: Size | null;
-    bufferStateDelayInMilliseconds: number;
+    readonly readOnlyStudio: boolean;
+    readonly onMounted: () => void;
+    readonly drawRef: React.RefObject<HTMLDivElement>;
+    readonly size: Size | null;
+    readonly bufferStateDelayInMilliseconds: number;
 }>;

package/dist/components/EditorContent.js

@@ -24,6 +24,6 @@ const EditorContent = ({ readOnlyStudio, onMounted, size, drawRef, bufferStateDe
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     // Preventing multiple renders so the update check doesn't get rendered twice and needs to be aborted
     const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== 'composition';
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), onlyTopPanel ? ((0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { size: size, drawRef: drawRef, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, onMounted: onMounted, readOnlyStudio: readOnlyStudio })) : ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { size: size, drawRef: drawRef, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), onlyTopPanel ? ((0, jsx_runtime_1.jsx)("div", { style: SplitterContainer_1.containerColumn, children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { size: size, drawRef: drawRef, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) })) : ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { size: size, drawRef: drawRef, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/FilePreview.js

@@ -4,8 +4,8 @@ exports.FilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const JSONViewer_1 = require("./JSONViewer");
-const layout_1 = require("./layout");
 const TextViewer_1 = require("./TextViewer");
+const layout_1 = require("./layout");
 const msgStyle = {
     fontSize: 13,
     color: 'white',

package/dist/components/Menu/MenuSubItem.js

@@ -14,10 +14,10 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const caret_1 = require("../../icons/caret");
 const z_index_1 = require("../../state/z-index");
 const layout_1 = require("../layout");
+const SubMenu_1 = require("./SubMenu");
 const is_menu_item_1 = require("./is-menu-item");
 const portals_1 = require("./portals");
 const styles_1 = require("./styles");
-const SubMenu_1 = require("./SubMenu");
 const container = {
     paddingTop: 8,
     paddingBottom: 8,
@@ -106,7 +106,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             });
         }
     }, [selected]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onPointerUp: onPointerUp, role: "button", className: is_menu_item_1.MENU_ITEM_CLASSNAME, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: leftSpace, children: leftItem }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: labelStyle, ...{ title: typeof label === 'string' ? label : undefined }, children: label }), ' ', (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : null, keyHint && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsx)("span", { style: keyHintCss, children: keyHint })) : null, portalStyle && subMenu
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onPointerUp: onPointerUp, role: "button", className: is_menu_item_1.MENU_ITEM_CLASSNAME, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: leftSpace, children: leftItem }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: labelStyle, title: typeof label === 'string' ? label : undefined, children: label }), ' ', (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : null, keyHint && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsx)("span", { style: keyHintCss, children: keyHint })) : null, portalStyle && subMenu
                     ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(SubMenu_1.SubMenuComponent, { onQuitFullMenu: onQuitMenu, subMenu: subMenu, onQuitSubMenu: onQuitSubmenu, portalStyle: portalStyle, subMenuActivated: subMenuActivated }), (0, portals_1.getPortal)(currentZIndex))
                     : null] }) }));
 };

package/dist/components/MenuBuildIndicator.js

@@ -4,9 +4,9 @@ exports.MenuBuildIndicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
-const layout_1 = require("./layout");
 const OpenEditorButton_1 = require("./OpenEditorButton");
 const Spinner_1 = require("./Spinner");
+const layout_1 = require("./layout");
 const cwd = {
     fontSize: 13,
     opacity: 0.8,

package/dist/components/MenuToolbar.js

@@ -6,11 +6,11 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const use_menu_structure_1 = require("../helpers/use-menu-structure");
-const layout_1 = require("./layout");
 const MenuItem_1 = require("./Menu/MenuItem");
 const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
 const SidebarCollapserControls_1 = require("./SidebarCollapserControls");
 const UpdateCheck_1 = require("./UpdateCheck");
+const layout_1 = require("./layout");
 const row = {
     alignItems: 'center',
     flexDirection: 'row',

package/dist/components/ModalHeader.js

@@ -4,8 +4,8 @@ exports.NewCompHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const modals_1 = require("../state/modals");
-const layout_1 = require("./layout");
 const CancelButton_1 = require("./NewComposition/CancelButton");
+const layout_1 = require("./layout");
 const container = {
     display: 'flex',
     flexDirection: 'row',

package/dist/components/Modals.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const Modals: React.FC<{
-    readOnlyStudio: boolean;
+    readonly readOnlyStudio: boolean;
 }>;

package/dist/components/Modals.js

@@ -19,7 +19,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, 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 })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, 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 })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

package/dist/components/NewComposition/CodemodFooter.js

@@ -8,9 +8,9 @@ const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
 const Button_1 = require("../Button");
-const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
+const layout_1 = require("../layout");
 const DiffPreview_1 = require("./DiffPreview");
 const buttonStyle = {
     backgroundColor: colors_1.BLUE,

package/dist/components/NewComposition/ComboBox.js

@@ -13,10 +13,10 @@ const mobile_layout_1 = require("../../helpers/mobile-layout");
 const noop_1 = require("../../helpers/noop");
 const caret_1 = require("../../icons/caret");
 const z_index_1 = require("../../state/z-index");
-const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const portals_1 = require("../Menu/portals");
 const styles_1 = require("../Menu/styles");
+const layout_1 = require("../layout");
 const MenuContent_1 = require("./MenuContent");
 const container = {
     padding: '8px 10px',

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

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const DeleteComposition: React.FC<{
-    compositionId: string;
+    readonly compositionId: string;
 }>;

package/dist/components/NewComposition/DeleteComposition.js

@@ -26,7 +26,10 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
             idToDelete: compositionId,
         };
     }, [compositionId]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: 'Delete composition' }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: ["Do you want to delete the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: unresolved.durationInFrames === 1 ? `<Still>` : '<Composition>' }), ' ', "with ID ", '"', unresolved.id, '"', "?", (0, jsx_runtime_1.jsx)("br", {}), "The associated ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "component" }), " will remain in your code."] }), (0, jsx_runtime_1.jsx)("div", { style: { ...content, borderTop: '1px solid black' }, children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', succeessNotifcation: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, valid: true }) })] })] }));
+    const onSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: 'Delete composition' }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: ["Do you want to delete the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: unresolved.durationInFrames === 1 ? `<Still>` : '<Composition>' }), ' ', "with ID ", '"', unresolved.id, '"', "?", (0, jsx_runtime_1.jsx)("br", {}), "The associated ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "component" }), " will remain in your code."] }), (0, jsx_runtime_1.jsx)("div", { style: { ...content, borderTop: '1px solid black' }, children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', succeessNotifcation: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, valid: true }) })] })] }));
 };
 const DeleteComposition = ({ compositionId }) => {
     return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: compositionId, children: (0, jsx_runtime_1.jsx)(DeleteCompositionLoaded, { compositionId: compositionId }) }) }));

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

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const DuplicateComposition: React.FC<{
-    compositionId: string;
+    readonly compositionId: string;
 }>;

package/dist/components/NewComposition/DuplicateComposition.js

@@ -5,10 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
-const layout_1 = require("../layout");
 const ModalHeader_1 = require("../ModalHeader");
-const layout_2 = require("../RenderModal/layout");
 const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
+const layout_1 = require("../RenderModal/layout");
+const layout_2 = require("../layout");
 const CodemodFooter_1 = require("./CodemodFooter");
 const ComboBox_1 = require("./ComboBox");
 const DismissableModal_1 = require("./DismissableModal");
@@ -166,10 +166,13 @@ const DuplicateCompositionLoaded = () => {
         size.width,
         type,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Duplicate ${resolved.result.id}` }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: [initialCompType === 'composition' ? (
+    const onSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Duplicate ${resolved.result.id}` }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: [initialCompType === 'composition' ? (
                             // We allow converting from a composition to a still, but
                             // not the other way around
-                            (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "ID" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] }) })] }), hadDimensionsDefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.rightRow, children: [(0, 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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.rightRow, children: [(0, 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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })] })) : null] })] })] })) : null, type === 'composition' && hadDurationDefined ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "FPS" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, 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 }) })] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: { ...content, borderTop: '1px solid black' }, children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', succeessNotifcation: `Duplicated ${unresolved.id}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, valid: valid }) })] })] }));
+                            (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "ID" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] }) })] }), hadDimensionsDefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, 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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, 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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })] })) : null] })] })] })) : null, type === 'composition' && hadDurationDefined ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "FPS" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, 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 }) })] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: { ...content, borderTop: '1px solid black' }, children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', succeessNotifcation: `Duplicated ${unresolved.id}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, valid: valid }) })] })] }));
 };
 const DuplicateComposition = ({ compositionId }) => {
     return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: compositionId, children: (0, jsx_runtime_1.jsx)(DuplicateCompositionLoaded, {}) }) }));

package/dist/components/NewComposition/MenuContent.js

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const mobile_layout_1 = require("../../helpers/mobile-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-const is_menu_item_1 = require("../Menu/is-menu-item");
 const MenuDivider_1 = require("../Menu/MenuDivider");
 const MenuSubItem_1 = require("../Menu/MenuSubItem");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const styles_1 = require("../Menu/styles");
 const BORDER_SIZE = 1;
 const container = {

package/dist/components/NewComposition/NewCompDuration.js

@@ -4,8 +4,8 @@ exports.NewCompDuration = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
-const layout_1 = require("../layout");
-const layout_2 = require("../RenderModal/layout");
+const layout_1 = require("../RenderModal/layout");
+const layout_2 = require("../layout");
 const InputDragger_1 = require("./InputDragger");
 const ValidationMessage_1 = require("./ValidationMessage");
 const NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
@@ -16,8 +16,8 @@ const NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
         setDurationInFrames(newVal);
     }, [setDurationInFrames]);
     const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.rightRow, children: [(0, 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", 
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, 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", 
                         // Hitting Promise.all() limit in Chrome
-                        max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })] })) : null] })] }));
+                        max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })] })) : null] })] }));
 };
 exports.NewCompDuration = NewCompDuration;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const RenameComposition: React.FC<{
-    compositionId: string;
+    readonly compositionId: string;
 }>;

package/dist/components/NewComposition/RenameComposition.js

@@ -5,10 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
-const layout_1 = require("../layout");
 const ModalHeader_1 = require("../ModalHeader");
-const layout_2 = require("../RenderModal/layout");
 const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
+const layout_1 = require("../RenderModal/layout");
+const layout_2 = require("../layout");
 const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
 const RemInput_1 = require("./RemInput");
@@ -44,7 +44,10 @@ const RenameCompositionLoaded = () => {
             newId,
         };
     }, [newId, resolved.result.id]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Rename ${resolved.result.id}` }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsx)("div", { style: content, children: (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "ID" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { ...content, borderTop: '1px solid black' }, children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', succeessNotifcation: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, valid: valid }) })] })] }));
+    const onSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Rename ${resolved.result.id}` }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsx)("div", { style: content, children: (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "ID" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_2.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { ...content, borderTop: '1px solid black' }, children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', succeessNotifcation: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, valid: valid }) })] })] }));
 };
 const RenameComposition = ({ compositionId }) => {
     return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: compositionId, children: (0, jsx_runtime_1.jsx)(RenameCompositionLoaded, {}) }) }));

package/dist/components/Notifications/ServerDisconnected.js

@@ -40,7 +40,7 @@ const ServerDisconnected = () => {
     const { previewServerState: ctx } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const fav = document.getElementById('__remotion_favicon');
     if (ctx.type !== 'disconnected') {
-        fav.setAttribute('href', '/remotion.png');
+        fav.setAttribute('href', '/favicon.ico');
         return null;
     }
     if (pageIsGoingToReload) {

package/dist/components/PlayPause.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const PlayPause: React.FC<{
-    playbackRate: number;
-    loop: boolean;
-    bufferStateDelayInMilliseconds: number;
+    readonly playbackRate: number;
+    readonly loop: boolean;
+    readonly bufferStateDelayInMilliseconds: number;
 }>;

package/dist/components/PlayPause.js

@@ -235,7 +235,7 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
             }
             stopped = true;
         };
-    }, [emitter]);
+    }, [bufferStateDelayInMilliseconds, emitter]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: (0, jsx_runtime_1.jsx)(jump_to_start_1.JumpToStart, { style: backStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? (showBufferIndicator ? ((0, jsx_runtime_1.jsx)(player_1.PlayerInternals.BufferingIndicator, { type: "studio" })) : ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: iconButton }))) : ((0, jsx_runtime_1.jsx)(play_1.Play, { style: iconButton })) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: (0, jsx_runtime_1.jsx)(step_forward_1.StepForward, { style: forwardBackStyle }) })] }));
 };
 exports.PlayPause = PlayPause;

package/dist/components/PreviewToolbar.js

@@ -11,17 +11,17 @@ const loop_1 = require("../state/loop");
 const CheckboardToggle_1 = require("./CheckboardToggle");
 const FpsCounter_1 = require("./FpsCounter");
 const FullscreenToggle_1 = require("./FullscreenToggle");
-const layout_1 = require("./layout");
 const LoopToggle_1 = require("./LoopToggle");
 const MuteToggle_1 = require("./MuteToggle");
+const PlayPause_1 = require("./PlayPause");
 const PlaybackKeyboardShortcutsManager_1 = require("./PlaybackKeyboardShortcutsManager");
 const PlaybackRatePersistor_1 = require("./PlaybackRatePersistor");
 const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
-const PlayPause_1 = require("./PlayPause");
 const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+const layout_1 = require("./layout");
 const container = {
     display: 'flex',
     justifyContent: 'center',

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -12,14 +12,14 @@ const modals_1 = require("../../state/modals");
 const CompositionSelector_1 = require("../CompositionSelector");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const KeyboardShortcutsExplainer_1 = require("../KeyboardShortcutsExplainer");
-const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const RemInput_1 = require("../NewComposition/RemInput");
-const algolia_search_1 = require("./algolia-search");
+const layout_1 = require("../layout");
 const AlgoliaCredit_1 = require("./AlgoliaCredit");
-const fuzzy_search_1 = require("./fuzzy-search");
 const NoResults_1 = require("./NoResults");
 const QuickSwitcherResult_1 = require("./QuickSwitcherResult");
+const algolia_search_1 = require("./algolia-search");
+const fuzzy_search_1 = require("./fuzzy-search");
 const input = {
     width: '100%',
 };