@remotion/studio 4.0.434 → 4.0.436

package/dist/esm/previewEntry.mjs

@@ -3787,6 +3787,15 @@ var sortItemsByNonceHistory = (items) => {
   return result;
 };
 
+// src/state/modals.ts
+import { createContext as createContext9 } from "react";
+var ModalsContext = createContext9({
+  selectedModal: null,
+  setSelectedModal: () => {
+    return;
+  }
+});
+
 // src/components/CompositionSelectorItem.tsx
 import { useCallback as useCallback23, useContext as useContext8, useMemo as useMemo26, useState as useState20 } from "react";
 
@@ -3850,15 +3859,6 @@ var FilmIcon = ({ color, ...props }) => {
   });
 };
 
-// src/state/modals.ts
-import { createContext as createContext9 } from "react";
-var ModalsContext = createContext9({
-  selectedModal: null,
-  setSelectedModal: () => {
-    return;
-  }
-});
-
 // src/components/CompositionContextButton.tsx
 import { useCallback as useCallback20, useContext as useContext6, useMemo as useMemo23 } from "react";
 
@@ -3977,7 +3977,13 @@ var RenderQueueContextProvider = ({ children }) => {
     setClientJobs((prev) => prev.map((job) => job.id === nextJob.id ? {
       ...job,
       status: "running",
-      progress: { encodedFrames: 0, totalFrames: 0 }
+      progress: {
+        encodedFrames: 0,
+        totalFrames: 0,
+        doneIn: null,
+        renderEstimatedTime: 0,
+        progress: 0
+      }
     } : job));
     processJobCallbackRef.current(nextJob);
   }, [clientJobs, currentlyProcessing]);
@@ -5197,7 +5203,8 @@ var itemStyle = {
   width: "100%",
   textAlign: "left",
   backgroundColor: BACKGROUND,
-  height: COMPOSITION_ITEM_HEIGHT
+  height: COMPOSITION_ITEM_HEIGHT,
+  userSelect: "none"
 };
 var labelStyle2 = {
   textAlign: "left",
@@ -5449,12 +5456,11 @@ var renderFrame = (frame2, fps) => {
 
 // src/components/CurrentComposition.tsx
 import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
-var CURRENT_COMPOSITION_HEIGHT = 80;
+var CURRENT_COMPOSITION_HEIGHT = 64;
 var container11 = {
   height: CURRENT_COMPOSITION_HEIGHT,
   display: "block",
-  borderBottom: `1px solid ${BORDER_COLOR}`,
-  padding: 12,
+  padding: "6px 12px",
   color: "white",
   backgroundColor: BACKGROUND
 };
@@ -5556,6 +5562,29 @@ var container12 = {
   overflow: "hidden",
   backgroundColor: BACKGROUND
 };
+var QUICK_SWITCHER_TRIGGER_HEIGHT = 38;
+var quickSwitcherArea = {
+  padding: "4px 12px",
+  borderBottom: `1px solid ${BORDER_COLOR}`
+};
+var quickSwitcherTrigger = {
+  backgroundColor: "rgba(255, 255, 255, 0.06)",
+  borderRadius: 5,
+  padding: "4px 10px",
+  color: LIGHT_TEXT,
+  fontSize: 12,
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  border: "none",
+  width: "100%",
+  appearance: "none"
+};
+var shortcutLabel = {
+  fontSize: 11,
+  opacity: 0.6
+};
 var getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
   initial.push(openFolderKey({
     folderName: initialFolderName,
@@ -5570,6 +5599,7 @@ var getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
 var CompositionSelector = () => {
   const { compositions, canvasContent, folders } = useContext9(Internals9.CompositionManager);
   const { foldersExpanded } = useContext9(ExpandedFoldersContext);
+  const { setSelectedModal } = useContext9(ModalsContext);
   const { tabIndex } = useZIndex();
   const selectComposition = useSelectComposition();
   const sortedCompositions = useMemo27(() => {
@@ -5583,17 +5613,43 @@ var CompositionSelector = () => {
   }, [sortedCompositions, sortedFolders, foldersExpanded]);
   const list = useMemo27(() => {
     return {
-      height: `calc(100% - ${CURRENT_COMPOSITION_HEIGHT}px)`,
+      height: `calc(100% - ${CURRENT_COMPOSITION_HEIGHT}px - ${QUICK_SWITCHER_TRIGGER_HEIGHT}px)`,
       overflowY: "auto"
     };
   }, []);
   const toggleFolder = useCallback24((folderName, parentName) => {
     Internals9.compositionSelectorRef.current?.toggleFolder(folderName, parentName);
   }, []);
+  const openQuickSwitcher = useCallback24(() => {
+    setSelectedModal({
+      type: "quick-switcher",
+      mode: "compositions",
+      invocationTimestamp: Date.now()
+    });
+  }, [setSelectedModal]);
   return /* @__PURE__ */ jsxs23("div", {
     style: container12,
     children: [
       /* @__PURE__ */ jsx54(CurrentComposition, {}),
+      /* @__PURE__ */ jsx54("div", {
+        style: quickSwitcherArea,
+        children: /* @__PURE__ */ jsxs23("button", {
+          type: "button",
+          style: quickSwitcherTrigger,
+          onClick: openQuickSwitcher,
+          tabIndex,
+          children: [
+            "Search...",
+            areKeyboardShortcutsDisabled() ? null : /* @__PURE__ */ jsxs23("span", {
+              style: shortcutLabel,
+              children: [
+                cmdOrCtrlCharacter,
+                "+K"
+              ]
+            })
+          ]
+        })
+      }),
       /* @__PURE__ */ jsx54("div", {
         className: "__remotion-vertical-scrollbar",
         style: list,
@@ -17294,7 +17350,10 @@ var ClientRenderQueueProcessor = () => {
       onProgress: (progress) => {
         onProgress(job.id, {
           encodedFrames: progress.encodedFrames,
-          totalFrames
+          totalFrames,
+          doneIn: progress.doneIn,
+          renderEstimatedTime: progress.renderEstimatedTime,
+          progress: progress.progress
         });
       },
       outputTarget: "web-fs",
@@ -17585,8 +17644,7 @@ var RenderQueueItemStatus = ({ job }) => {
   if (job.status === "running") {
     let progressValue;
     if (isClientJob) {
-      const { encodedFrames, totalFrames } = job.progress;
-      progressValue = totalFrames > 0 ? encodedFrames / totalFrames : 0;
+      progressValue = job.progress.progress;
     } else {
       progressValue = job.progress.value;
     }
@@ -17678,6 +17736,34 @@ var RenderQueueOutputName = ({ job }) => {
 
 // src/components/RenderQueue/RenderQueueProgressMessage.tsx
 import { useCallback as useCallback78, useContext as useContext43 } from "react";
+
+// src/components/RenderQueue/client-render-progress.ts
+var formatEtaString = (timeRemainingInMilliseconds) => {
+  const remainingTime = timeRemainingInMilliseconds / 1000;
+  const remainingTimeHours = Math.floor(remainingTime / 3600);
+  const remainingTimeMinutes = Math.floor(remainingTime % 3600 / 60);
+  const remainingTimeSeconds = Math.floor(remainingTime % 60);
+  return [
+    remainingTimeHours ? `${remainingTimeHours}h` : null,
+    remainingTimeMinutes ? `${remainingTimeMinutes}m` : null,
+    `${remainingTimeSeconds}s`
+  ].filter((value) => Boolean(value)).join(" ");
+};
+var getClientRenderProgressMessage = (progress) => {
+  if (progress.totalFrames === 0) {
+    return "Getting composition";
+  }
+  if (progress.doneIn !== null) {
+    return `Encoded ${progress.totalFrames}/${progress.totalFrames}`;
+  }
+  if (progress.renderEstimatedTime > 0) {
+    const etaString = `, time remaining: ${formatEtaString(progress.renderEstimatedTime)}`;
+    return `Rendering ${progress.encodedFrames}/${progress.totalFrames}${etaString}`;
+  }
+  return `Encoded ${progress.encodedFrames}/${progress.totalFrames}`;
+};
+
+// src/components/RenderQueue/RenderQueueProgressMessage.tsx
 import { jsx as jsx156 } from "react/jsx-runtime";
 var outputLocation2 = {
   ...renderQueueItemSubtitleStyle
@@ -17695,7 +17781,7 @@ var RenderQueueProgressMessage = ({ job }) => {
       jobId: job.id
     });
   }, [job.id, setSelectedModal]);
-  const message = isClientJob ? job.progress.totalFrames === 0 ? "Getting composition" : `Encoding frame ${job.progress.encodedFrames}/${job.progress.totalFrames}` : job.progress.message;
+  const message = isClientJob ? getClientRenderProgressMessage(job.progress) : job.progress.message;
   return /* @__PURE__ */ jsx156("button", {
     onClick,
     type: "button",
@@ -27547,9 +27633,15 @@ var right3 = {
   textAlign: "right",
   flex: 1
 };
-var EncodingProgress = ({ encodedFrames, totalFrames }) => {
-  const done = encodedFrames === totalFrames;
-  const progress = totalFrames > 0 ? encodedFrames / totalFrames : 0;
+var ProgressStatus = ({ encodedFrames, totalFrames, doneIn, renderEstimatedTime, progress }) => {
+  const done = doneIn !== null;
+  const message = getClientRenderProgressMessage({
+    encodedFrames,
+    totalFrames,
+    doneIn,
+    renderEstimatedTime,
+    progress
+  });
   return /* @__PURE__ */ jsxs121("div", {
     style: progressItem,
     children: [
@@ -27561,8 +27653,15 @@ var EncodingProgress = ({ encodedFrames, totalFrames }) => {
       }),
       /* @__PURE__ */ jsx240("div", {
         style: label11,
-        children: done ? `Encoded ${totalFrames} frames` : `Encoding ${encodedFrames} / ${totalFrames} frames`
-      })
+        children: message
+      }),
+      doneIn !== null ? /* @__PURE__ */ jsxs121("div", {
+        style: right3,
+        children: [
+          doneIn,
+          "ms"
+        ]
+      }) : null
     ]
   });
 };
@@ -27620,15 +27719,18 @@ var ClientRenderProgress = ({ job }) => {
       ]
     });
   }
-  const { encodedFrames, totalFrames } = job.progress;
+  const { encodedFrames, totalFrames, doneIn, renderEstimatedTime, progress } = job.progress;
   return /* @__PURE__ */ jsxs121("div", {
     children: [
       /* @__PURE__ */ jsx240(Spacing, {
         y: 0.5
       }),
-      job.type === "client-video" && /* @__PURE__ */ jsx240(EncodingProgress, {
+      job.type === "client-video" && /* @__PURE__ */ jsx240(ProgressStatus, {
         encodedFrames,
-        totalFrames
+        totalFrames,
+        doneIn,
+        renderEstimatedTime,
+        progress
       }),
       /* @__PURE__ */ jsx240(Spacing, {
         y: 1
@@ -28049,7 +28151,7 @@ var addTrueBooleanFlagsIfChanged = (flags, mappings) => {
   }
 };
 var getNpmRemotionCommandPrefix = (version) => {
-  return version.trim() === "" ? "npx --yes --location=global -p @remotion/cli remotion" : `npx --yes --location=global -p @remotion/cli@${version} remotion`;
+  return version.trim() === "" ? "bunx --yes --location=global -p @remotion/cli remotion" : `bunx --yes --location=global -p @remotion/cli@${version} remotion`;
 };
 var normalizeServeUrlForRenderCommand = ({
   locationHref,

package/dist/esm/renderEntry.mjs

@@ -208,7 +208,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-t3wtt582.js").then(({ StudioInternals }) => {
+    import("./chunk-x88z6n54.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/make-render-command.js

@@ -38,8 +38,8 @@ const addTrueBooleanFlagsIfChanged = (flags, mappings) => {
 };
 const getNpmRemotionCommandPrefix = (version) => {
     return version.trim() === ''
-        ? 'npx --yes --location=global -p @remotion/cli remotion'
-        : `npx --yes --location=global -p @remotion/cli@${version} remotion`;
+        ? 'bunx --yes --location=global -p @remotion/cli remotion'
+        : `bunx --yes --location=global -p @remotion/cli@${version} remotion`;
 };
 exports.getNpmRemotionCommandPrefix = getNpmRemotionCommandPrefix;
 const normalizeServeUrlForRenderCommand = ({ locationHref, compositionId, }) => {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.434",
+	"version": "4.0.436",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,13 +26,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.434",
-		"@remotion/player": "4.0.434",
-		"@remotion/media-utils": "4.0.434",
-		"@remotion/renderer": "4.0.434",
-		"@remotion/web-renderer": "4.0.434",
-		"@remotion/studio-shared": "4.0.434",
-		"@remotion/zod-types": "4.0.434",
+		"remotion": "4.0.436",
+		"@remotion/player": "4.0.436",
+		"@remotion/media-utils": "4.0.436",
+		"@remotion/renderer": "4.0.436",
+		"@remotion/web-renderer": "4.0.436",
+		"@remotion/studio-shared": "4.0.436",
+		"@remotion/zod-types": "4.0.436",
 		"mediabunny": "1.37.0",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.434",
+		"@remotion/eslint-config-internal": "4.0.436",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},