@remotion/studio 4.0.434 → 4.0.436

package/dist/components/CompositionSelector.js

@@ -4,10 +4,13 @@ exports.CompositionSelector = exports.getKeysToExpand = exports.useCompositionNa
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const sort_by_nonce_history_1 = require("../helpers/sort-by-nonce-history");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const CurrentComposition_1 = require("./CurrentComposition");
@@ -56,6 +59,29 @@ const container = {
     overflow: 'hidden',
     backgroundColor: colors_1.BACKGROUND,
 };
+const QUICK_SWITCHER_TRIGGER_HEIGHT = 38;
+const quickSwitcherArea = {
+    padding: '4px 12px',
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+};
+const quickSwitcherTrigger = {
+    backgroundColor: 'rgba(255, 255, 255, 0.06)',
+    borderRadius: 5,
+    padding: '4px 10px',
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    border: 'none',
+    width: '100%',
+    appearance: 'none',
+};
+const shortcutLabel = {
+    fontSize: 11,
+    opacity: 0.6,
+};
 const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
     initial.push((0, persist_open_folders_1.openFolderKey)({
         folderName: initialFolderName,
@@ -71,6 +97,7 @@ exports.getKeysToExpand = getKeysToExpand;
 const CompositionSelector = () => {
     const { compositions, canvasContent, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { foldersExpanded } = (0, react_1.useContext)(persist_open_folders_1.ExpandedFoldersContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const sortedCompositions = (0, react_1.useMemo)(() => {
@@ -84,7 +111,7 @@ const CompositionSelector = () => {
     }, [sortedCompositions, sortedFolders, foldersExpanded]);
     const list = (0, react_1.useMemo)(() => {
         return {
-            height: `calc(100% - ${CurrentComposition_1.CURRENT_COMPOSITION_HEIGHT}px)`,
+            height: `calc(100% - ${CurrentComposition_1.CURRENT_COMPOSITION_HEIGHT}px - ${QUICK_SWITCHER_TRIGGER_HEIGHT}px)`,
             overflowY: 'auto',
         };
     }, []);
@@ -92,8 +119,15 @@ const CompositionSelector = () => {
         var _a;
         (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.toggleFolder(folderName, parentName);
     }, []);
+    const openQuickSwitcher = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode: 'compositions',
+            invocationTimestamp: Date.now(),
+        });
+    }, [setSelectedModal]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(CurrentComposition_1.CurrentComposition, {}), jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
+            jsx_runtime_1.jsx(CurrentComposition_1.CurrentComposition, {}), jsx_runtime_1.jsx("div", { style: quickSwitcherArea, children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] }))] }) }), jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
                     return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
                             ? canvasContent.compositionId
                             : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));

package/dist/components/CompositionSelectorItem.js

@@ -31,6 +31,7 @@ const itemStyle = {
     textAlign: 'left',
     backgroundColor: colors_1.BACKGROUND,
     height: COMPOSITION_ITEM_HEIGHT,
+    userSelect: 'none',
 };
 const labelStyle = {
     textAlign: 'left',

package/dist/components/CurrentComposition.d.ts

@@ -1,2 +1,2 @@
-export declare const CURRENT_COMPOSITION_HEIGHT = 80;
+export declare const CURRENT_COMPOSITION_HEIGHT = 64;
 export declare const CurrentComposition: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/CurrentComposition.js

@@ -6,12 +6,11 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const is_composition_still_1 = require("../helpers/is-composition-still");
 const render_frame_1 = require("../state/render-frame");
-exports.CURRENT_COMPOSITION_HEIGHT = 80;
+exports.CURRENT_COMPOSITION_HEIGHT = 64;
 const container = {
     height: exports.CURRENT_COMPOSITION_HEIGHT,
     display: 'block',
-    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
-    padding: 12,
+    padding: '6px 12px',
     color: 'white',
     backgroundColor: colors_1.BACKGROUND,
 };

package/dist/components/RenderModal/ClientRenderProgress.js

@@ -6,6 +6,7 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
 const CircularProgress_1 = require("../RenderQueue/CircularProgress");
+const client_render_progress_1 = require("../RenderQueue/client-render-progress");
 const SuccessIcon_1 = require("../RenderQueue/SuccessIcon");
 const progressItem = {
     padding: 10,
@@ -24,13 +25,16 @@ const right = {
     textAlign: 'right',
     flex: 1,
 };
-const EncodingProgress = ({ encodedFrames, totalFrames }) => {
-    const done = encodedFrames === totalFrames;
-    const progress = totalFrames > 0 ? encodedFrames / totalFrames : 0;
-    return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [done ? jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {}) : jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: progress }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: done
-                    ? `Encoded ${totalFrames} frames`
-                    : `Encoding ${encodedFrames} / ${totalFrames} frames` })
-        ] }));
+const ProgressStatus = ({ encodedFrames, totalFrames, doneIn, renderEstimatedTime, progress }) => {
+    const done = doneIn !== null;
+    const message = (0, client_render_progress_1.getClientRenderProgressMessage)({
+        encodedFrames,
+        totalFrames,
+        doneIn,
+        renderEstimatedTime,
+        progress,
+    });
+    return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [done ? jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {}) : jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: progress }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: message }), doneIn !== null ? jsx_runtime_1.jsxs("div", { style: right, children: [doneIn, "ms"] }) : null] }));
 };
 const DoneStatus = ({ job }) => {
     return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [
@@ -53,9 +57,9 @@ const ClientRenderProgress = ({ job }) => {
                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx("div", { style: label, children: "Saving to out/..." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 })
             ] }));
     }
-    const { encodedFrames, totalFrames } = job.progress;
+    const { encodedFrames, totalFrames, doneIn, renderEstimatedTime, progress } = job.progress;
     return (jsx_runtime_1.jsxs("div", { children: [
-            jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), job.type === 'client-video' && (jsx_runtime_1.jsx(EncodingProgress, { encodedFrames: encodedFrames, totalFrames: totalFrames })), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 })
+            jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), job.type === 'client-video' && (jsx_runtime_1.jsx(ProgressStatus, { encodedFrames: encodedFrames, totalFrames: totalFrames, doneIn: doneIn, renderEstimatedTime: renderEstimatedTime, progress: progress })), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 })
         ] }));
 };
 exports.ClientRenderProgress = ClientRenderProgress;

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -90,6 +90,9 @@ const ClientRenderQueueProcessor = () => {
                 onProgress(job.id, {
                     encodedFrames: progress.encodedFrames,
                     totalFrames,
+                    doneIn: progress.doneIn,
+                    renderEstimatedTime: progress.renderEstimatedTime,
+                    progress: progress.progress,
                 });
             },
             outputTarget: 'web-fs',

package/dist/components/RenderQueue/RenderQueueItemStatus.js

@@ -80,8 +80,7 @@ const 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;

package/dist/components/RenderQueue/RenderQueueProgressMessage.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const modals_1 = require("../../state/modals");
 const z_index_1 = require("../../state/z-index");
+const client_render_progress_1 = require("./client-render-progress");
 const context_1 = require("./context");
 const item_style_1 = require("./item-style");
 const outputLocation = {
@@ -24,9 +25,7 @@ const RenderQueueProgressMessage = ({ job }) => {
         });
     }, [job.id, setSelectedModal]);
     const message = isClientJob
-        ? job.progress.totalFrames === 0
-            ? 'Getting composition'
-            : `Encoding frame ${job.progress.encodedFrames}/${job.progress.totalFrames}`
+        ? (0, client_render_progress_1.getClientRenderProgressMessage)(job.progress)
         : job.progress.message;
     return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: message, children: message }));
 };

package/dist/components/RenderQueue/client-render-progress.d.ts

@@ -0,0 +1,3 @@
+import type { ClientRenderJobProgress } from './client-side-render-types';
+export declare const formatEtaString: (timeRemainingInMilliseconds: number) => string;
+export declare const getClientRenderProgressMessage: (progress: ClientRenderJobProgress) => string;

package/dist/components/RenderQueue/client-render-progress.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClientRenderProgressMessage = exports.formatEtaString = void 0;
+const 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(' ');
+};
+exports.formatEtaString = formatEtaString;
+const 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: ${(0, exports.formatEtaString)(progress.renderEstimatedTime)}`;
+        return `Rendering ${progress.encodedFrames}/${progress.totalFrames}${etaString}`;
+    }
+    return `Encoded ${progress.encodedFrames}/${progress.totalFrames}`;
+};
+exports.getClientRenderProgressMessage = getClientRenderProgressMessage;

package/dist/components/RenderQueue/client-side-render-types.d.ts

@@ -4,6 +4,9 @@ import type { LogLevel } from 'remotion';
 export type ClientRenderJobProgress = {
     encodedFrames: number;
     totalFrames: number;
+    doneIn: number | null;
+    renderEstimatedTime: number;
+    progress: number;
 };
 export type GetBlobCallback = () => Promise<Blob>;
 type ClientRenderJobDynamicStatus = {

package/dist/components/RenderQueue/context.js

@@ -86,7 +86,13 @@ const RenderQueueContextProvider = ({ children }) => {
             ? {
                 ...job,
                 status: 'running',
-                progress: { encodedFrames: 0, totalFrames: 0 },
+                progress: {
+                    encodedFrames: 0,
+                    totalFrames: 0,
+                    doneIn: null,
+                    renderEstimatedTime: 0,
+                    progress: 0,
+                },
             }
             : job));
         processJobCallbackRef.current(nextJob);