@remotion/studio 4.0.208 → 4.0.209

package/dist/helpers/colors.d.ts

@@ -12,6 +12,7 @@ export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";
 export declare const INPUT_BORDER_COLOR_HOVERED = "rgba(255, 255, 255, 0.05)";
 export declare const TIMELINE_BACKGROUND = "#111";
 export declare const FAIL_COLOR = "#ff3232";
+export declare const TEXT_COLOR = "#fff";
 export declare const WARNING_COLOR = "#f1c40f";
 export declare const BLUE = "#0b84f3";
 export declare const BLUE_DISABLED = "#284f73";

package/dist/helpers/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = exports.TIMELINE_TRACK_SEPARATOR = exports.LINE_COLOR = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = exports.LIGHT_TRANSPARENT = exports.BLUE_DISABLED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.RULER_COLOR = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND__TRANSPARENT = exports.BACKGROUND = void 0;
+exports.getBackgroundFromHoverState = exports.TIMELINE_TRACK_SEPARATOR = exports.LINE_COLOR = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = exports.LIGHT_TRANSPARENT = exports.BLUE_DISABLED = exports.BLUE = exports.WARNING_COLOR = exports.TEXT_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.RULER_COLOR = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND__TRANSPARENT = exports.BACKGROUND = void 0;
 exports.BACKGROUND = 'rgb(31,36,40)';
 exports.BACKGROUND__TRANSPARENT = 'rgba(31,36,40, 0)';
 exports.INPUT_BACKGROUND = '#2f363d';
@@ -16,6 +16,7 @@ exports.INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
 exports.INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
 exports.TIMELINE_BACKGROUND = '#111';
 exports.FAIL_COLOR = '#ff3232';
+exports.TEXT_COLOR = '#fff';
 exports.WARNING_COLOR = '#f1c40f';
 exports.BLUE = '#0b84f3';
 exports.BLUE_DISABLED = '#284f73';

package/dist/helpers/use-menu-structure.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const restart_studio_1 = require("../api/restart-studio");
 const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
 const SizeSelector_1 = require("../components/SizeSelector");
 const TimeValue_1 = require("../components/TimeValue");
@@ -118,6 +119,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, SizeSelector_1.getUniqueSizes)(size);
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
+    const { remotion_packageManager } = window;
     const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const structure = (0, react_1.useMemo)(() => {
         let struct = [
@@ -182,6 +184,24 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         subMenu: null,
                         quickSwitcherLabel: 'Help: Acknowledgements',
                     },
+                    {
+                        type: 'divider',
+                        id: 'timeline-divider-1',
+                    },
+                    {
+                        id: 'restart-studio',
+                        value: 'restart-studio',
+                        label: 'Restart Studio Server',
+                        onClick: () => {
+                            closeMenu();
+                            (0, restart_studio_1.restartStudio)();
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Restart Studio Server',
+                    },
                 ],
                 quickSwitcherLabel: null,
             },
@@ -516,13 +536,13 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         : null,
                 ].filter(remotion_1.Internals.truthy),
             },
-            'EyeDropper' in window
-                ? {
-                    id: 'tools',
-                    label: 'Tools',
-                    leaveLeftPadding: false,
-                    items: [
-                        {
+            {
+                id: 'tools',
+                label: 'Tools',
+                leaveLeftPadding: false,
+                items: [
+                    'EyeDropper' in window
+                        ? {
                             id: 'color-picker',
                             value: 'color-picker',
                             label: 'Color Picker',
@@ -535,25 +555,51 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             subMenu: null,
                             type: 'item',
                             quickSwitcherLabel: 'Show Color Picker',
+                        }
+                        : null,
+                    {
+                        id: 'spring-editor',
+                        value: 'spring-editor',
+                        label: 'spring() Editor',
+                        onClick: () => {
+                            closeMenu();
+                            window.open('https://springs.remotion.dev', '_blank');
                         },
+                        leftItem: null,
+                        keyHint: null,
+                        subMenu: null,
+                        type: 'item',
+                        quickSwitcherLabel: 'Open spring() Editor',
+                    },
+                ].filter(remotion_1.Internals.truthy),
+                quickSwitcherLabel: null,
+            },
+            readOnlyStudio || remotion_packageManager === 'unknown'
+                ? null
+                : {
+                    id: 'install',
+                    label: 'Packages',
+                    leaveLeftPadding: false,
+                    items: [
                         {
-                            id: 'spring-editor',
-                            value: 'spring-editor',
-                            label: 'spring() Editor',
+                            id: 'install-packages',
+                            value: 'install-packages',
+                            label: 'Install...',
                             onClick: () => {
                                 closeMenu();
-                                window.open('https://springs.remotion.dev', '_blank');
+                                setSelectedModal({
+                                    type: 'install-packages',
+                                    packageManager: remotion_packageManager,
+                                });
                             },
-                            leftItem: null,
+                            type: 'item',
                             keyHint: null,
+                            leftItem: null,
                             subMenu: null,
-                            type: 'item',
-                            quickSwitcherLabel: 'Open spring() Editor',
+                            quickSwitcherLabel: `Install packages`,
                         },
                     ],
-                    quickSwitcherLabel: null,
-                }
-                : null,
+                },
             {
                 id: 'help',
                 label: 'Help',
@@ -728,6 +774,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         }
         return struct;
     }, [
+        remotion_packageManager,
         readOnlyStudio,
         mobileLayout,
         sizes,

package/dist/state/modals.d.ts

@@ -1,4 +1,5 @@
 import type { AudioCodec, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
+import type { PackageManager } from '@remotion/studio-shared';
 import type React from 'react';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
@@ -64,6 +65,9 @@ export type ModalState = {
     type: 'update';
     info: UpdateInfo;
     knownBugs: Bug[];
+} | {
+    type: 'install-packages';
+    packageManager: PackageManager;
 } | {
     type: 'quick-switcher';
     mode: QuickSwitcherMode;

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.208",
+  "version": "4.0.209",
   "description": "APIs for interacting with the Remotion Studio",
   "main": "dist",
   "sideEffects": false,
@@ -18,18 +18,18 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "remotion": "4.0.208",
-    "@remotion/media-utils": "4.0.208",
-    "@remotion/studio-shared": "4.0.208",
-    "@remotion/renderer": "4.0.208",
-    "@remotion/player": "4.0.208"
+    "remotion": "4.0.209",
+    "@remotion/player": "4.0.209",
+    "@remotion/media-utils": "4.0.209",
+    "@remotion/renderer": "4.0.209",
+    "@remotion/studio-shared": "4.0.209"
   },
   "devDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "@types/semver": "^7.3.4",
     "zod": "3.22.3",
-    "@remotion/zod-types": "4.0.208"
+    "@remotion/zod-types": "4.0.209"
   },
   "publishConfig": {
     "access": "public"
@@ -50,6 +50,7 @@
       "require": "./dist/internals.js"
     }
   },
+  "homepage": "https://www.remotion.dev/docs/studio/api",
   "scripts": {
     "lint": "eslint src --ext ts,tsx",
     "build": "bun --env-file=../.env.bundle bundle.ts",