@remotion/studio 4.0.422 → 4.0.424

package/dist/components/RenderQueue/RenderQueueItemStatus.js

@@ -69,27 +69,30 @@ const RenderQueueItemStatus = ({ job }) => {
         });
     }, [job.id, setSelectedModal]);
     if (job.status === 'failed') {
-        return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: invisibleStyle, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.FAIL_COLOR, d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z" }) }) }));
+        return (jsx_runtime_1.jsx("button", { type: "button", style: invisibleStyle, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.FAIL_COLOR, d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z" }) }) }));
     }
     if (job.status === 'idle') {
-        return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
+        return (jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
     }
     if (job.status === 'done') {
-        return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: invisibleStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: hovered ? 'white' : colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }) }));
+        return (jsx_runtime_1.jsx("button", { type: "button", style: invisibleStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: hovered ? 'white' : colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }) }));
     }
     if (job.status === 'running') {
         let progressValue;
         if (isClientJob) {
-            const { renderedFrames, totalFrames } = job.progress;
-            progressValue = totalFrames > 0 ? renderedFrames / totalFrames : 0;
+            const { encodedFrames, totalFrames } = job.progress;
+            progressValue = totalFrames > 0 ? encodedFrames / totalFrames : 0;
         }
         else {
             progressValue = job.progress.value;
         }
-        return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: invisibleStyle, onClick: onClick, children: (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: Math.max(0.07, progressValue) }) }));
+        return (jsx_runtime_1.jsx("button", { type: "button", style: invisibleStyle, onClick: onClick, children: jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: Math.max(0.07, progressValue) }) }));
+    }
+    if (job.status === 'saving') {
+        return (jsx_runtime_1.jsx("button", { type: "button", style: invisibleStyle, onClick: onClick, children: jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: 0.95 }) }));
     }
     if (job.status === 'cancelled') {
-        return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.FAIL_COLOR, d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z" }) }));
+        return (jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.FAIL_COLOR, d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z" }) }));
     }
     throw new Error('Unknown job status');
 };

package/dist/components/RenderQueue/RenderQueueOpenInFolder.d.ts

@@ -1,5 +1,5 @@
-import type { RenderJob } from '@remotion/studio-shared';
 import React from 'react';
+import type { AnyRenderJob } from './context';
 export declare const RenderQueueOpenInFinderItem: React.FC<{
-    readonly job: RenderJob;
+    readonly job: AnyRenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueOpenInFolder.js

@@ -21,8 +21,8 @@ const RenderQueueOpenInFinderItem = ({ job }) => {
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {
-        return (0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIconSolid, { style: icon, color: color });
+        return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: icon, color: color });
     }, [icon]);
-    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.RenderQueueOpenInFinderItem = RenderQueueOpenInFinderItem;

package/dist/components/RenderQueue/RenderQueueOutputName.js

@@ -3,13 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueOutputName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const context_1 = require("./context");
 const item_style_1 = require("./item-style");
 const RenderQueueOutputName = ({ job }) => {
-    const isClientJob = (0, context_1.isClientRenderJob)(job);
-    const deletedOutputLocation = isClientJob
-        ? false
-        : job.deletedOutputLocation;
+    const deletedOutputLocation = 'deletedOutputLocation' in job && job.deletedOutputLocation;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...item_style_1.renderQueueItemSubtitleStyle,
@@ -19,14 +15,11 @@ const RenderQueueOutputName = ({ job }) => {
         };
     }, [deletedOutputLocation]);
     const getTitle = () => {
-        if (isClientJob) {
-            return `Downloaded as ${job.outName}`;
-        }
         if (deletedOutputLocation) {
             return 'File was deleted';
         }
         return job.outName;
     };
-    return ((0, jsx_runtime_1.jsx)("span", { style: style, title: getTitle(), children: job.outName }));
+    return (jsx_runtime_1.jsx("span", { style: style, title: getTitle(), children: job.outName }));
 };
 exports.RenderQueueOutputName = RenderQueueOutputName;

package/dist/components/RenderQueue/RenderQueueProgressMessage.js

@@ -24,8 +24,10 @@ const RenderQueueProgressMessage = ({ job }) => {
         });
     }, [job.id, setSelectedModal]);
     const message = isClientJob
-        ? `Rendering frame ${job.progress.renderedFrames}/${job.progress.totalFrames}`
+        ? job.progress.totalFrames === 0
+            ? 'Getting composition'
+            : `Encoding frame ${job.progress.encodedFrames}/${job.progress.totalFrames}`
         : job.progress.message;
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: message, children: message }));
+    return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: message, children: message }));
 };
 exports.RenderQueueProgressMessage = RenderQueueProgressMessage;

package/dist/components/RenderQueue/RenderQueueRemoveItem.js

@@ -4,6 +4,7 @@ exports.RenderQueueRemoveItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const save_render_output_1 = require("../../api/save-render-output");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
@@ -17,12 +18,13 @@ const RenderQueueRemoveItem = ({ job }) => {
         e.stopPropagation();
         if (isClientJob) {
             if (canvasContent &&
-                canvasContent.type === 'output-blob' &&
+                canvasContent.type === 'output' &&
                 job.status === 'done' &&
-                canvasContent.getBlob === job.getBlob) {
+                canvasContent.path === `/${job.outName}`) {
                 setCanvasContent(null);
             }
             removeClientJob(job.id);
+            (0, save_render_output_1.unregisterClientRender)(job.id).catch(() => { });
             (0, NotificationCenter_1.showNotification)('Removed job', 2000);
             return;
         }
@@ -41,8 +43,8 @@ const RenderQueueRemoveItem = ({ job }) => {
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }));
+        return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }));
     }, [icon]);
-    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.RenderQueueRemoveItem = RenderQueueRemoveItem;

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -41,8 +41,8 @@ const RenderQueueRepeatItem = ({ job }) => {
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z" }) }));
+        return (jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z" }) }));
     }, [icon]);
-    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, renderAction: renderAction });
+    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, renderAction: renderAction });
 };
 exports.RenderQueueRepeatItem = RenderQueueRepeatItem;

package/dist/components/RenderQueue/RenderQueueSavingMessage.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RenderQueueSavingMessage: React.FC;

package/dist/components/RenderQueue/RenderQueueSavingMessage.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueSavingMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const item_style_1 = require("./item-style");
+const savingStyle = {
+    ...item_style_1.renderQueueItemSubtitleStyle,
+    cursor: 'default',
+};
+const RenderQueueSavingMessage = () => {
+    return jsx_runtime_1.jsx("span", { style: savingStyle, children: "Saving to out/..." });
+};
+exports.RenderQueueSavingMessage = RenderQueueSavingMessage;

package/dist/components/RenderQueue/SuccessIcon.js

@@ -9,6 +9,6 @@ const iconStyle = {
     width: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
 };
 const SuccessIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }));
+    return (jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }));
 };
 exports.SuccessIcon = SuccessIcon;

package/dist/components/RenderQueue/actions.d.ts

@@ -1,16 +1,13 @@
-import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
-import type { HardwareAccelerationOption } from '@remotion/renderer/client';
-import type { CanUpdateDefaultPropsResponse, EnumPath, RecastCodemod, RenderJob, RequiredChromiumOptions, VisualControlChange } from '@remotion/studio-shared';
-import type { _InternalTypes } from 'remotion';
+import type { CanUpdateDefaultPropsResponse, EnumPath, RecastCodemod, RenderJob, VisualControlChange } from '@remotion/studio-shared';
 export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, }: {
     compositionId: string;
     outName: string;
-    imageFormat: StillImageFormat;
+    imageFormat: "jpeg" | "pdf" | "png" | "webp";
     jpegQuality: number;
     frame: number;
     scale: number;
-    logLevel: LogLevel;
-    chromiumOptions: RequiredChromiumOptions;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    chromiumOptions: Required<import("@remotion/renderer").ChromiumOptions>;
     delayRenderTimeout: number;
     envVariables: Record<string, string>;
     inputProps: Record<string, unknown>;
@@ -19,19 +16,19 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     multiProcessOnLinux: boolean;
     beepOnFinish: boolean;
     metadata: Record<string, string> | null;
-    chromeMode: ChromeMode;
+    chromeMode: "chrome-for-testing" | "headless-shell";
     mediaCacheSizeInBytes: number | null;
 }) => Promise<undefined>;
 export declare const addSequenceRenderJob: ({ compositionId, outName, imageFormat, startFrame, endFrame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, concurrency, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, jpegQuality, disallowParallelEncoding, multiProcessOnLinux, beepOnFinish, repro, metadata, chromeMode, mediaCacheSizeInBytes, }: {
     compositionId: string;
     outName: string;
-    imageFormat: VideoImageFormat;
+    imageFormat: "jpeg" | "none" | "png";
     jpegQuality: number;
     startFrame: number;
     endFrame: number;
     scale: number;
-    logLevel: LogLevel;
-    chromiumOptions: RequiredChromiumOptions;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    chromiumOptions: Required<import("@remotion/renderer").ChromiumOptions>;
     concurrency: number;
     delayRenderTimeout: number;
     envVariables: Record<string, string>;
@@ -43,39 +40,39 @@ export declare const addSequenceRenderJob: ({ compositionId, outName, imageForma
     beepOnFinish: boolean;
     repro: boolean;
     metadata: Record<string, string> | null;
-    chromeMode: ChromeMode;
+    chromeMode: "chrome-for-testing" | "headless-shell";
     mediaCacheSizeInBytes: number | null;
 }) => Promise<undefined>;
 export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, metadata, hardwareAcceleration, chromeMode, mediaCacheSizeInBytes, }: {
     compositionId: string;
     outName: string;
-    imageFormat: VideoImageFormat;
+    imageFormat: "jpeg" | "none" | "png";
     jpegQuality: number | null;
     scale: number;
-    logLevel: LogLevel;
-    codec: Codec;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    codec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
     concurrency: number;
     crf: number | null;
     startFrame: number;
     endFrame: number;
     muted: boolean;
     enforceAudioTrack: boolean;
-    proResProfile: _InternalTypes["ProResProfile"] | null;
-    x264Preset: X264Preset | null;
-    pixelFormat: PixelFormat;
+    proResProfile: "4444" | "4444-xq" | "hq" | "light" | "proxy" | "standard" | null;
+    x264Preset: "fast" | "faster" | "medium" | "placebo" | "slow" | "slower" | "superfast" | "ultrafast" | "veryfast" | "veryslow" | null;
+    pixelFormat: "yuv420p" | "yuv420p10le" | "yuv422p" | "yuv422p10le" | "yuv444p" | "yuv444p10le" | "yuva420p" | "yuva444p10le";
     audioBitrate: string | null;
     videoBitrate: string | null;
     everyNthFrame: number;
     numberOfGifLoops: number | null;
     delayRenderTimeout: number;
-    audioCodec: AudioCodec;
+    audioCodec: "aac" | "mp3" | "opus" | "pcm-16";
     disallowParallelEncoding: boolean;
-    chromiumOptions: RequiredChromiumOptions;
+    chromiumOptions: Required<import("@remotion/renderer").ChromiumOptions>;
     envVariables: Record<string, string>;
     inputProps: Record<string, unknown>;
     offthreadVideoCacheSizeInBytes: number | null;
     offthreadVideoThreads: number | null;
-    colorSpace: ColorSpace;
+    colorSpace: "bt2020-ncl" | "bt601" | "bt709" | "default";
     multiProcessOnLinux: boolean;
     encodingMaxRate: string | null;
     encodingBufferSize: string | null;
@@ -84,8 +81,8 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     forSeamlessAacConcatenation: boolean;
     separateAudioTo: string | null;
     metadata: Record<string, string> | null;
-    hardwareAcceleration: HardwareAccelerationOption;
-    chromeMode: ChromeMode;
+    hardwareAcceleration: "disable" | "if-possible" | "required";
+    chromeMode: "chrome-for-testing" | "headless-shell";
     mediaCacheSizeInBytes: number | null;
 }) => Promise<undefined>;
 export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
@@ -102,7 +99,7 @@ export declare const openInFileExplorer: ({ directory }: {
 export declare const applyCodemod: ({ codemod, dryRun, signal, }: {
     codemod: RecastCodemod;
     dryRun: boolean;
-    signal: AbortController["signal"];
+    signal: AbortSignal;
 }) => Promise<import("@remotion/studio-shared").ApplyCodemodResponse>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("@remotion/studio-shared").CancelRenderResponse>;

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

@@ -1,25 +1,22 @@
+import type { CompletedClientRender } from '@remotion/studio-shared';
 import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type { LogLevel } from 'remotion';
 export type ClientRenderJobProgress = {
-    renderedFrames: number;
     encodedFrames: number;
     totalFrames: number;
 };
 export type GetBlobCallback = () => Promise<Blob>;
-export type ClientRenderMetadata = {
-    width: number;
-    height: number;
-    sizeInBytes: number;
-};
 type ClientRenderJobDynamicStatus = {
     status: 'idle';
 } | {
     status: 'running';
     progress: ClientRenderJobProgress;
+} | {
+    status: 'saving';
 } | {
     status: 'done';
-    getBlob: GetBlobCallback;
-    metadata: ClientRenderMetadata;
+    getBlob?: GetBlobCallback;
+    metadata: CompletedClientRender['metadata'];
 } | {
     status: 'cancelled';
 } | {
@@ -60,5 +57,10 @@ export type ClientVideoRenderJob = ClientRenderJobBase & {
     transparent: boolean;
     muted: boolean;
 } & ClientRenderJobDynamicStatus;
-export type ClientRenderJob = ClientStillRenderJob | ClientVideoRenderJob;
+export type RestoredClientRenderJob = CompletedClientRender & {
+    status: 'done';
+    getBlob?: GetBlobCallback;
+};
+export type ClientRenderJob = ClientStillRenderJob | ClientVideoRenderJob | RestoredClientRenderJob;
+export declare const isRestoredClientJob: (job: ClientRenderJob) => job is RestoredClientRenderJob;
 export {};

package/dist/components/RenderQueue/client-side-render-types.js

@@ -1,2 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRestoredClientJob = void 0;
+const isRestoredClientJob = (job) => {
+    return !('inputProps' in job);
+};
+exports.isRestoredClientJob = isRestoredClientJob;

package/dist/components/RenderQueue/context.d.ts

@@ -1,10 +1,11 @@
-import type { RenderJob } from '@remotion/studio-shared';
+import type { CompletedClientRender, RenderJob } from '@remotion/studio-shared';
 import React from 'react';
 import { type AddClientStillJobParams, type AddClientVideoJobParams, type CompositionRef } from './client-render-queue';
-import type { ClientRenderJob, ClientRenderJobProgress, ClientRenderMetadata, GetBlobCallback } from './client-side-render-types';
+import type { ClientRenderJob, ClientRenderJobProgress, GetBlobCallback } from './client-side-render-types';
 declare global {
     interface Window {
         remotion_initialRenderQueue: RenderJob[] | null;
+        remotion_initialClientRenders: CompletedClientRender[] | null;
     }
 }
 export type AnyRenderJob = RenderJob | ClientRenderJob;
@@ -16,7 +17,8 @@ type RenderQueueContextType = {
     addClientStillJob: (params: AddClientStillJobParams, compositionRef: CompositionRef) => string;
     addClientVideoJob: (params: AddClientVideoJobParams, compositionRef: CompositionRef) => string;
     updateClientJobProgress: (jobId: string, progress: ClientRenderJobProgress) => void;
-    markClientJobDone: (jobId: string, getBlob: GetBlobCallback, metadata: ClientRenderMetadata) => void;
+    markClientJobSaving: (jobId: string) => void;
+    markClientJobDone: (jobId: string, metadata: CompletedClientRender['metadata'], getBlob?: GetBlobCallback) => void;
     markClientJobFailed: (jobId: string, error: Error) => void;
     markClientJobCancelled: (jobId: string) => void;
     removeClientJob: (jobId: string) => void;
@@ -28,6 +30,7 @@ type RenderQueueContextType = {
 export declare const RenderQueueContext: React.Context<RenderQueueContextType>;
 export declare const renderJobsRef: React.RefObject<{
     updateRenderJobs: (jobs: RenderJob[]) => void;
+    updateClientRenders: (renders: CompletedClientRender[]) => void;
 } | null>;
 export declare const RenderQueueContextProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/components/RenderQueue/context.js

@@ -37,6 +37,11 @@ exports.RenderQueueContextProvider = exports.renderJobsRef = exports.RenderQueue
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const client_render_queue_1 = require("./client-render-queue");
+const restorePersistedClientRenders = () => {
+    var _a;
+    const persisted = (_a = window.remotion_initialClientRenders) !== null && _a !== void 0 ? _a : [];
+    return persisted.map((r) => ({ ...r, status: 'done' }));
+};
 const isClientRenderJob = (job) => {
     return job.type === 'client-still' || job.type === 'client-video';
 };
@@ -50,6 +55,7 @@ exports.RenderQueueContext = react_1.default.createContext({
     addClientStillJob: noopString,
     addClientVideoJob: noopString,
     updateClientJobProgress: noop,
+    markClientJobSaving: noop,
     markClientJobDone: noop,
     markClientJobFailed: noop,
     markClientJobCancelled: noop,
@@ -63,7 +69,7 @@ exports.renderJobsRef = (0, react_1.createRef)();
 const RenderQueueContextProvider = ({ children }) => {
     var _a;
     const [serverJobs, setServerJobs] = (0, react_1.useState)((_a = window.remotion_initialRenderQueue) !== null && _a !== void 0 ? _a : []);
-    const [clientJobs, setClientJobs] = (0, react_1.useState)([]);
+    const [clientJobs, setClientJobs] = (0, react_1.useState)(restorePersistedClientRenders);
     const [currentlyProcessing, setCurrentlyProcessing] = (0, react_1.useState)(null);
     const processJobCallbackRef = (0, react_1.useRef)(null);
     // Process next job when state changes
@@ -80,7 +86,7 @@ const RenderQueueContextProvider = ({ children }) => {
             ? {
                 ...job,
                 status: 'running',
-                progress: { renderedFrames: 0, encodedFrames: 0, totalFrames: 0 },
+                progress: { encodedFrames: 0, totalFrames: 0 },
             }
             : job));
         processJobCallbackRef.current(nextJob);
@@ -114,12 +120,15 @@ const RenderQueueContextProvider = ({ children }) => {
             ? { ...job, status: 'running', progress }
             : job));
     }, []);
-    const markClientJobDone = (0, react_1.useCallback)((jobId, getBlob, metadata) => {
-        (0, client_render_queue_1.deleteAbortController)(jobId);
-        (0, client_render_queue_1.cleanupCompositionForJob)(jobId);
+    const markClientJobSaving = (0, react_1.useCallback)((jobId) => {
         setClientJobs((prev) => prev.map((job) => job.id === jobId
-            ? { ...job, status: 'done', getBlob, metadata }
+            ? { ...job, status: 'saving' }
             : job));
+    }, []);
+    const markClientJobDone = (0, react_1.useCallback)((jobId, metadata, getBlob) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
+        (0, client_render_queue_1.cleanupCompositionForJob)(jobId);
+        setClientJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: 'done', metadata, getBlob } : job));
         setCurrentlyProcessing(null);
     }, []);
     const markClientJobFailed = (0, react_1.useCallback)((jobId, error) => {
@@ -166,15 +175,36 @@ const RenderQueueContextProvider = ({ children }) => {
         updateRenderJobs: (newJobs) => {
             setServerJobs(newJobs);
         },
+        updateClientRenders: (renders) => {
+            setClientJobs((prev) => {
+                const existingIds = new Set(prev.map((j) => j.id));
+                const updatedPrev = prev.map((job) => {
+                    const updated = renders.find((r) => r.id === job.id);
+                    if (updated && job.status === 'done') {
+                        return {
+                            ...job,
+                            deletedOutputLocation: updated.deletedOutputLocation,
+                            metadata: updated.metadata,
+                        };
+                    }
+                    return job;
+                });
+                const newJobs = renders
+                    .filter((r) => !existingIds.has(r.id))
+                    .map((r) => ({ ...r, status: 'done' }));
+                return [...updatedPrev, ...newJobs];
+            });
+        },
     }), []);
     const value = (0, react_1.useMemo)(() => {
         return {
-            jobs: [...serverJobs, ...clientJobs],
+            jobs: [...serverJobs, ...clientJobs].sort((a, b) => a.startedAt - b.startedAt),
             serverJobs,
             clientJobs,
             addClientStillJob,
             addClientVideoJob,
             updateClientJobProgress,
+            markClientJobSaving,
             markClientJobDone,
             markClientJobFailed,
             markClientJobCancelled,
@@ -190,6 +220,7 @@ const RenderQueueContextProvider = ({ children }) => {
         addClientStillJob,
         addClientVideoJob,
         updateClientJobProgress,
+        markClientJobSaving,
         markClientJobDone,
         markClientJobFailed,
         markClientJobCancelled,
@@ -197,6 +228,6 @@ const RenderQueueContextProvider = ({ children }) => {
         cancelClientJob,
         setProcessJobCallback,
     ]);
-    return ((0, jsx_runtime_1.jsx)(exports.RenderQueueContext.Provider, { value: value, children: children }));
+    return (jsx_runtime_1.jsx(exports.RenderQueueContext.Provider, { value: value, children: children }));
 };
 exports.RenderQueueContextProvider = RenderQueueContextProvider;

package/dist/components/RenderQueue/index.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const show_browser_rendering_1 = require("../../helpers/show-browser-rendering");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const layout_1 = require("../layout");
 const RenderQueueItem_1 = require("./RenderQueueItem");
@@ -92,37 +93,28 @@ const RenderQueue = () => {
         if (!canvasContent) {
             return -1;
         }
-        if (canvasContent.type === 'output-blob') {
-            for (let i = 0; i < jobs.length; i++) {
-                const job = jobs[i];
-                if ((0, context_1.isClientRenderJob)(job) && job.status === 'done') {
-                    if (canvasContent.getBlob === job.getBlob) {
-                        return i;
-                    }
-                }
-            }
-            return -1;
-        }
         if (canvasContent.type === 'output') {
             for (let i = 0; i < jobs.length; i++) {
                 const job = jobs[i];
-                if (!(0, context_1.isClientRenderJob)(job) &&
-                    job.status === 'done' &&
-                    canvasContent.path === `/${job.outName}`) {
+                if (job.status === 'done' && canvasContent.path === `/${job.outName}`) {
                     return i;
                 }
             }
         }
         return -1;
     }, [canvasContent, jobs]);
-    if (connectionStatus === 'disconnected') {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The studio server has disconnected." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+    if (connectionStatus === 'disconnected' && !show_browser_rendering_1.SHOW_BROWSER_RENDERING) {
+        return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
+                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "The studio server has disconnected." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
+            ] }));
     }
     if (jobCount === 0) {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "No renders in the queue." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+        return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
+                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "No renders in the queue." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
+            ] }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { ref: divRef, style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: jobs.map((j, index) => {
-            return ((0, jsx_runtime_1.jsx)("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: (0, jsx_runtime_1.jsx)(RenderQueueItem_1.RenderQueueItem, { selected: selectedJob === index, job: j }) }, j.id));
+    return (jsx_runtime_1.jsx("div", { ref: divRef, style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: jobs.map((j, index) => {
+            return (jsx_runtime_1.jsx("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: jsx_runtime_1.jsx(RenderQueueItem_1.RenderQueueItem, { selected: selectedJob === index, job: j }) }, j.id));
         }) }));
 };
 exports.RenderQueue = RenderQueue;

package/dist/components/RendersTab.js

@@ -46,6 +46,8 @@ const RendersTab = ({ selected, onClick }) => {
             borderColor: colors_1.LIGHT_TEXT,
         };
     }, [failedJobs]);
-    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: isActuallySelected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
+    return (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: isActuallySelected, onClick: onClick, children: jsx_runtime_1.jsxs("div", { style: row, children: ["Renders", jobCount > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx("div", { style: badgeStyle, children: jobCount })
+                    ] })) : null] }) }));
 };
 exports.RendersTab = RendersTab;

package/dist/components/ResetZoomButton.js

@@ -4,6 +4,6 @@ exports.ResetZoomButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("./Button");
 const ResetZoomButton = ({ onClick }) => {
-    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, children: "Reset zoom" });
+    return jsx_runtime_1.jsx(Button_1.Button, { onClick: onClick, children: "Reset zoom" });
 };
 exports.ResetZoomButton = ResetZoomButton;

package/dist/components/RunningCalculateMetadata.js

@@ -21,6 +21,10 @@ const container = {
     padding: 20,
 };
 const RunningCalculateMetadata = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 24, duration: 1 }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: exports.loaderLabel, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), "..."] })] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx(Spinner_1.Spinner, { size: 24, duration: 1 }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsxs("div", { style: exports.loaderLabel, children: ["Running ",
+                    jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }),
+                    "..."] })
+        ] }));
 };
 exports.RunningCalculateMetadata = RunningCalculateMetadata;

package/dist/components/SegmentedControl.js

@@ -40,8 +40,8 @@ const SegmentedControl = ({ items, needsWrapping }) => {
             ...container,
         };
     }, [needsWrapping]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: controlStyle, children: items.map((i) => {
-            return ((0, jsx_runtime_1.jsx)(Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
+    return (jsx_runtime_1.jsx("div", { style: controlStyle, children: items.map((i) => {
+            return (jsx_runtime_1.jsx(Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
         }) }));
 };
 exports.SegmentedControl = SegmentedControl;
@@ -61,5 +61,5 @@ const Item = ({ selected, onClick, children }) => {
             color: selected ? 'white' : hovered ? 'white' : colors_1.LIGHT_TEXT,
         };
     }, [hovered, selected]);
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
+    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
 };

package/dist/components/SetTimelineInOutProvider.js

@@ -15,6 +15,6 @@ const SetTimelineInOutProvider = ({ children }) => {
     (0, react_1.useEffect)(() => {
         (0, marks_1.persistMarks)(inAndOutFrames);
     }, [inAndOutFrames]);
-    return ((0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: inAndOutFrames, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: children }) }));
+    return (jsx_runtime_1.jsx(in_out_1.TimelineInOutContext.Provider, { value: inAndOutFrames, children: jsx_runtime_1.jsx(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: children }) }));
 };
 exports.SetTimelineInOutProvider = SetTimelineInOutProvider;

package/dist/components/ShowGuidesProvider.js

@@ -38,6 +38,6 @@ const ShowGuidesProvider = ({ children }) => {
         selectedGuideId,
         hoveredGuideId,
     ]);
-    return ((0, jsx_runtime_1.jsx)(editor_guides_1.EditorShowGuidesContext.Provider, { value: editorShowGuidesCtx, children: children }));
+    return (jsx_runtime_1.jsx(editor_guides_1.EditorShowGuidesContext.Provider, { value: editorShowGuidesCtx, children: children }));
 };
 exports.ShowGuidesProvider = ShowGuidesProvider;