@remotion/studio 4.0.517 → 4.0.519

package/dist/state/folders.js

@@ -4,6 +4,29 @@ exports.FolderContextProvider = exports.FolderContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
+const compositionSortOrderKey = 'remotion.compositionSortOrder';
+const loadCompositionSortOrder = () => {
+    if (typeof window === 'undefined') {
+        return 'registration';
+    }
+    try {
+        return window.localStorage.getItem(compositionSortOrderKey) ===
+            'alphabetical'
+            ? 'alphabetical'
+            : 'registration';
+    }
+    catch (_a) {
+        return 'registration';
+    }
+};
+const persistCompositionSortOrder = (sortOrder) => {
+    try {
+        window.localStorage.setItem(compositionSortOrderKey, sortOrder);
+    }
+    catch (_a) {
+        // Ignore quota errors or disabled storage.
+    }
+};
 exports.FolderContext = (0, react_1.createContext)({
     compositionFoldersExpanded: {},
     setCompositionFoldersExpanded: () => {
@@ -13,18 +36,34 @@ exports.FolderContext = (0, react_1.createContext)({
     setAssetFoldersExpanded: () => {
         throw new Error('default state');
     },
+    compositionSortOrder: 'registration',
+    setCompositionSortOrder: () => {
+        throw new Error('default state');
+    },
 });
 const FolderContextProvider = ({ children }) => {
     const [compositionFoldersExpanded, setCompositionFoldersExpanded] = (0, react_1.useState)(() => (0, persist_open_folders_1.loadExpandedFolders)('compositions'));
     const [assetFoldersExpanded, setAssetFoldersExpanded] = (0, react_1.useState)(() => (0, persist_open_folders_1.loadExpandedFolders)('assets'));
+    const [compositionSortOrder, setCompositionSortOrderState] = (0, react_1.useState)(loadCompositionSortOrder);
+    const setCompositionSortOrder = (0, react_1.useCallback)((sortOrder) => {
+        persistCompositionSortOrder(sortOrder);
+        setCompositionSortOrderState(sortOrder);
+    }, []);
     const value = (0, react_1.useMemo)(() => {
         return {
             compositionFoldersExpanded,
             setCompositionFoldersExpanded,
             assetFoldersExpanded,
             setAssetFoldersExpanded,
+            compositionSortOrder,
+            setCompositionSortOrder,
         };
-    }, [assetFoldersExpanded, compositionFoldersExpanded]);
+    }, [
+        assetFoldersExpanded,
+        compositionFoldersExpanded,
+        compositionSortOrder,
+        setCompositionSortOrder,
+    ]);
     return (jsx_runtime_1.jsx(exports.FolderContext.Provider, { value: value, children: children }));
 };
 exports.FolderContextProvider = FolderContextProvider;

package/dist/state/modals.d.ts

@@ -8,7 +8,6 @@ import type { StaticFile } from '../api/get-static-files';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
-import type { Bug, UpdateInfo } from '../components/UpdateCheck';
 export type WebRenderModalState = {
     type: 'web-render';
     initialFrame: number;
@@ -154,15 +153,11 @@ export type ModalState = {
     type: 'input-props-override';
 } | {
     type: 'settings';
-    initialTab: 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'license';
+    initialTab: 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'skills' | 'updates' | 'license';
     initialPublicLicenseKey: string | null;
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;
-} | {
-    type: 'update';
-    info: UpdateInfo;
-    knownBugs: Bug[];
 } | {
     type: 'fix-computed-value';
     prop: string;

package/dist/state/playbackrate.d.ts

@@ -1,2 +1,3 @@
+export declare const commonPlaybackRates: number[];
 export declare const persistPlaybackRate: (option: number) => void;
 export declare const loadPlaybackRate: () => number;

package/dist/state/playbackrate.js

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadPlaybackRate = exports.persistPlaybackRate = void 0;
+exports.loadPlaybackRate = exports.persistPlaybackRate = exports.commonPlaybackRates = void 0;
 const key = 'remotion.playbackrate';
+exports.commonPlaybackRates = [
+    -4, -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 1.5, 2, 4,
+];
 const persistPlaybackRate = (option) => {
     localStorage.setItem(key, String(option));
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.517",
+	"version": "4.0.519",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,19 +25,20 @@
 	},
 	"dependencies": {
 		"@tanstack/react-virtual": "3.14.9",
-		"@remotion/canvas": "4.0.517",
-		"@remotion/studio-protocol": "4.0.517",
+		"@remotion/canvas": "4.0.519",
+		"@remotion/studio-protocol": "4.0.519",
+		"@remotion/studio-codemods": "4.0.519",
 		"semver": "7.5.3",
-		"remotion": "4.0.517",
-		"@remotion/captions": "4.0.517",
-		"@remotion/media": "4.0.517",
-		"@remotion/player": "4.0.517",
-		"@remotion/media-utils": "4.0.517",
-		"@remotion/renderer": "4.0.517",
-		"@remotion/web-renderer": "4.0.517",
-		"@remotion/studio-shared": "4.0.517",
-		"@remotion/timeline-utils": "4.0.517",
-		"@remotion/zod-types": "4.0.517",
+		"remotion": "4.0.519",
+		"@remotion/captions": "4.0.519",
+		"@remotion/media": "4.0.519",
+		"@remotion/player": "4.0.519",
+		"@remotion/media-utils": "4.0.519",
+		"@remotion/renderer": "4.0.519",
+		"@remotion/web-renderer": "4.0.519",
+		"@remotion/studio-shared": "4.0.519",
+		"@remotion/timeline-utils": "4.0.519",
+		"@remotion/zod-types": "4.0.519",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.55.1",
 		"memfs": "3.4.3",
@@ -45,10 +46,12 @@
 		"zod": "4.4.3"
 	},
 	"devDependencies": {
+		"@happy-dom/global-registrator": "14.5.1",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
+		"@testing-library/react": "16.1.0",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.517",
+		"@remotion/eslint-config-internal": "4.0.519",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/UpdateModal/UpdateModal.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { Bug, UpdateInfo } from '../UpdateCheck';
-export declare const UpdateModal: React.FC<{
-    readonly info: UpdateInfo;
-    readonly knownBugs: Bug[];
-}>;

package/dist/components/UpdateModal/UpdateModal.js

@@ -1,104 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UpdateModal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const copy_text_1 = require("../../helpers/copy-text");
-const clipboard_1 = require("../../icons/clipboard");
-const InlineAction_1 = require("../InlineAction");
-const KnownBugs_1 = require("../KnownBugs");
-const ModalHeader_1 = require("../ModalHeader");
-const DismissableModal_1 = require("../NewComposition/DismissableModal");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const container = {
-    padding: '0 16px 8px',
-};
-const panelStyle = {
-    borderRadius: 6,
-    overflow: 'hidden',
-};
-const text = {
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    fontSize: 14,
-    lineHeight: 1.5,
-};
-const title = {
-    paddingTop: 12,
-    paddingBottom: 8,
-    ...text,
-};
-const commandField = {
-    alignItems: 'center',
-    background: colors_1.SELECTED_BACKGROUND,
-    borderRadius: 6,
-    boxSizing: 'border-box',
-    display: 'flex',
-    marginBottom: 10,
-    marginTop: 10,
-    padding: '8px 8px 8px 10px',
-    width: '100%',
-};
-const code = {
-    color: colors_1.WHITE,
-    flex: 1,
-    fontFamily: 'monospace',
-    fontSize: 14,
-    lineHeight: 1.5,
-    margin: 0,
-    minWidth: 0,
-    overflowX: 'auto',
-    whiteSpace: 'pre',
-};
-const copyIcon = {
-    flexShrink: 0,
-    height: 12,
-    width: 12,
-};
-const link = {
-    ...text,
-    fontWeight: 'bold',
-    color: colors_1.BLUE,
-    textDecoration: 'none',
-};
-const commands = {
-    npm: 'npx remotion upgrade',
-    yarn: 'yarn remotion upgrade',
-    pnpm: 'pnpm exec remotion upgrade',
-    bun: 'bun remotion upgrade',
-    unknown: 'npx remotion upgrade',
-};
-const skillsUpdateCommand = 'npx remotion skills update';
-const remotionUpgradeSkill = '/remotion-upgrade';
-const UpdateModal = ({ info, knownBugs }) => {
-    const hasKnownBugs = (0, react_1.useMemo)(() => {
-        return knownBugs && (knownBugs === null || knownBugs === void 0 ? void 0 : knownBugs.length) > 0;
-    }, [knownBugs]);
-    const updateAction = info.remotionUpgradeSkillAvailable
-        ? remotionUpgradeSkill
-        : info.updateAvailable
-            ? commands[info.packageManager]
-            : skillsUpdateCommand;
-    const updateActionType = info.remotionUpgradeSkillAvailable
-        ? 'skill'
-        : 'command';
-    const onClick = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(updateAction).catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
-        });
-    }, [updateAction]);
-    const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
-    }, []);
-    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Update available" }), jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["To upgrade, run the following ", updateActionType, ":"] })
-                        ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: title, children: ["A new update for Remotion is available! Run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: title, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                            jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, title: "Copy command" })
-                        ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, info.skillsUpdateAvailable
-                                ? ' and update your project Remotion Agent Skills.'
-                                : '.'] })) : null, info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Read the", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })) : null] })
-        ] }));
-};
-exports.UpdateModal = UpdateModal;