@remotion/studio 4.0.422 → 4.0.423

package/dist/api/save-render-output.d.ts

@@ -0,0 +1,7 @@
+import type { CompletedClientRender } from '@remotion/studio-shared';
+export declare const saveOutputFile: ({ blob, filePath, }: {
+    blob: Blob;
+    filePath: string;
+}) => Promise<void>;
+export declare const registerClientRender: (render: CompletedClientRender) => Promise<void>;
+export declare const unregisterClientRender: (id: string) => Promise<void>;

package/dist/api/save-render-output.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unregisterClientRender = exports.registerClientRender = exports.saveOutputFile = void 0;
+const throwIfNotOk = async (response) => {
+    if (!response.ok) {
+        try {
+            const jsonResponse = await response.json();
+            throw new Error(jsonResponse.error);
+        }
+        catch (parseError) {
+            if (parseError instanceof Error && parseError.message) {
+                throw parseError;
+            }
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+    }
+};
+const saveOutputFile = async ({ blob, filePath, }) => {
+    const url = new URL('/api/upload-output', window.location.origin);
+    url.search = new URLSearchParams({ filePath }).toString();
+    const response = await fetch(url, {
+        method: 'POST',
+        body: blob,
+    });
+    await throwIfNotOk(response);
+};
+exports.saveOutputFile = saveOutputFile;
+const registerClientRender = async (render) => {
+    const response = await fetch('/api/register-client-render', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(render),
+    });
+    await throwIfNotOk(response);
+};
+exports.registerClientRender = registerClientRender;
+const unregisterClientRender = async (id) => {
+    const response = await fetch('/api/unregister-client-render', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id }),
+    });
+    await throwIfNotOk(response);
+};
+exports.unregisterClientRender = unregisterClientRender;

package/dist/components/RenderModal/ClientRenderProgress.js

@@ -50,6 +50,9 @@ const ClientRenderProgress = ({ job }) => {
     if (job.status === 'done') {
         return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsx)(DoneStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 })] }));
     }
+    if (job.status === 'saving') {
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: "Saving to out/..." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 })] }));
+    }
     const { renderedFrames, encodedFrames, totalFrames } = job.progress;
     return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsx)(RenderingProgress, { renderedFrames: renderedFrames, totalFrames: totalFrames }), job.type === 'client-video' && ((0, jsx_runtime_1.jsx)(EncodingProgress, { encodedFrames: encodedFrames, totalFrames: totalFrames })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 })] }));
 };

package/dist/components/RenderModal/RenderStatusModal.js

@@ -11,6 +11,7 @@ const ModalContainer_1 = require("../ModalContainer");
 const ModalHeader_1 = require("../ModalHeader");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
+const client_side_render_types_1 = require("../RenderQueue/client-side-render-types");
 const context_1 = require("../RenderQueue/context");
 const layout_1 = require("../layout");
 const ClientRenderProgress_1 = require("./ClientRenderProgress");
@@ -51,6 +52,9 @@ const RenderStatusModal = ({ jobId, }) => {
     }, [setSelectedModal]);
     const onRetry = (0, react_1.useCallback)(() => {
         if (isClientJob) {
+            if ((0, client_side_render_types_1.isRestoredClientJob)(job)) {
+                return;
+            }
             const retryPayload = (0, retry_payload_1.makeClientRetryPayload)(job);
             setSelectedModal(retryPayload);
         }

package/dist/components/RenderModal/ServerRenderModal.js

@@ -103,7 +103,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
                     : initialStillImageFormat,
             type: 'asset',
             compositionDefaultOutName: resolvedComposition.defaultOutName,
-            clientSideRender: false,
+            outputLocation: renderDefaults.outputLocation,
         });
     });
     const [videoCodecForAudioTab, setVideoCodecForAudioTab] = (0, react_1.useState)(() => initialVideoCodecForAudioTab);

package/dist/components/RenderModal/WebRenderModal.js

@@ -148,10 +148,11 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         return Math.max(0, Math.min(finalEndFrame, startFrame));
     }, [finalEndFrame, startFrame]);
     const [initialOutNameState] = (0, react_1.useState)(() => {
+        var _a, _b;
         if (initialDefaultOutName) {
             return initialDefaultOutName;
         }
-        return (0, studio_shared_1.getDefaultOutLocation)({
+        const defaultOut = (0, studio_shared_1.getDefaultOutLocation)({
             compositionName: resolvedComposition.id,
             defaultExtension: renderMode === 'still'
                 ? imageFormat
@@ -160,8 +161,12 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                     : imageFormat,
             type: 'asset',
             compositionDefaultOutName: resolvedComposition.defaultOutName,
-            clientSideRender: true,
+            outputLocation: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.outputLocation) !== null && _b !== void 0 ? _b : null,
         });
+        if (window.remotion_isReadOnlyStudio) {
+            return defaultOut.replace(/^out\//, '');
+        }
+        return defaultOut;
     });
     const [outName, setOutName] = (0, react_1.useState)(() => initialOutNameState);
     const setStillFormat = (0, react_1.useCallback)((format) => {

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -101,6 +101,6 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
             value: c,
         }));
     }, [encodableVideoCodecs, effectiveVideoCodec, setCodec, codecLabels]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] }), resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Container" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, title: "Codec" }) })] }), (0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })] })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: "Download name" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Log Level ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] }), resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Container" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, title: "Codec" }) })] }), (0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })] })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name' }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Log Level ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })] })] }));
 };
 exports.WebRenderModalBasic = WebRenderModalBasic;

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

@@ -1 +1,2 @@
+export declare const downloadBlob: (blob: Blob, filename: string) => void;
 export declare const ClientRenderQueueProcessor: React.FC;

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClientRenderQueueProcessor = void 0;
+exports.ClientRenderQueueProcessor = exports.downloadBlob = void 0;
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
+const save_render_output_1 = require("../../api/save-render-output");
 const context_1 = require("./context");
 const downloadBlob = (blob, filename) => {
     const url = URL.createObjectURL(blob);
@@ -15,8 +16,9 @@ const downloadBlob = (blob, filename) => {
     a.click();
     URL.revokeObjectURL(url);
 };
+exports.downloadBlob = downloadBlob;
 const ClientRenderQueueProcessor = () => {
-    const { getAbortController, getCompositionForJob, updateClientJobProgress, markClientJobDone, markClientJobFailed, markClientJobCancelled, setProcessJobCallback, } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { getAbortController, getCompositionForJob, updateClientJobProgress, markClientJobSaving, markClientJobDone, markClientJobFailed, markClientJobCancelled, setProcessJobCallback, } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const processStillJob = (0, react_1.useCallback)(async (job, signal) => {
         var _a, _b;
         const compositionRef = getCompositionForJob(job.id);
@@ -114,13 +116,40 @@ const ClientRenderQueueProcessor = () => {
                 throw new Error(`Unknown job type`);
             }
             const blob = await result.getBlob();
-            downloadBlob(blob, job.outName);
             const metadata = {
                 width: result.width,
                 height: result.height,
                 sizeInBytes: blob.size,
             };
-            markClientJobDone(job.id, result.getBlob, metadata);
+            markClientJobSaving(job.id);
+            const getBlob = () => Promise.resolve(blob);
+            const downloadAndFinish = () => {
+                (0, exports.downloadBlob)(blob, job.outName);
+                markClientJobDone(job.id, metadata, getBlob);
+            };
+            if (window.remotion_isReadOnlyStudio) {
+                downloadAndFinish();
+            }
+            else {
+                try {
+                    await (0, save_render_output_1.saveOutputFile)({ blob, filePath: job.outName });
+                    await (0, save_render_output_1.registerClientRender)({
+                        id: job.id,
+                        type: job.type,
+                        compositionId: job.compositionId,
+                        outName: job.outName,
+                        startedAt: job.startedAt,
+                        deletedOutputLocation: false,
+                        metadata,
+                    });
+                    markClientJobDone(job.id, metadata);
+                }
+                catch (err) {
+                    // eslint-disable-next-line no-console
+                    console.error('Failed to save render output, falling back to browser download.', err);
+                    downloadAndFinish();
+                }
+            }
         }
         catch (err) {
             if (abortController.signal.aborted) {
@@ -135,6 +164,7 @@ const ClientRenderQueueProcessor = () => {
         processStillJob,
         processVideoJob,
         updateClientJobProgress,
+        markClientJobSaving,
         markClientJobDone,
         markClientJobFailed,
         markClientJobCancelled,

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ClientRenderJob } from './client-side-render-types';
+export declare const RenderQueueDownloadItem: React.FC<{
+    readonly job: ClientRenderJob;
+}>;

package/dist/components/RenderQueue/RenderQueueDownloadItem.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueDownloadItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InlineAction_1 = require("../InlineAction");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const ClientRenderQueueProcessor_1 = require("./ClientRenderQueueProcessor");
+const RenderQueueDownloadItem = ({ job }) => {
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (job.status !== 'done' || !job.getBlob) {
+            return;
+        }
+        job
+            .getBlob()
+            .then((blob) => {
+            (0, ClientRenderQueueProcessor_1.downloadBlob)(blob, job.outName);
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not download file: ${err.message}`, 2000);
+        });
+    }, [job]);
+    const icon = (0, react_1.useMemo)(() => {
+        return {
+            height: 12,
+            color: 'currentColor',
+        };
+    }, []);
+    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 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" }) }));
+    }, [icon]);
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, title: "Download" }));
+};
+exports.RenderQueueDownloadItem = RenderQueueDownloadItem;

package/dist/components/RenderQueue/RenderQueueItem.js

@@ -7,9 +7,11 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const url_state_1 = require("../../helpers/url-state");
 const layout_1 = require("../layout");
+const client_side_render_types_1 = require("./client-side-render-types");
 const context_1 = require("./context");
 const RenderQueueCancelledMessage_1 = require("./RenderQueueCancelledMessage");
 const RenderQueueCopyToClipboard_1 = require("./RenderQueueCopyToClipboard");
+const RenderQueueDownloadItem_1 = require("./RenderQueueDownloadItem");
 const RenderQueueError_1 = require("./RenderQueueError");
 const RenderQueueItemCancelButton_1 = require("./RenderQueueItemCancelButton");
 const RenderQueueItemStatus_1 = require("./RenderQueueItemStatus");
@@ -18,6 +20,7 @@ const RenderQueueOutputName_1 = require("./RenderQueueOutputName");
 const RenderQueueProgressMessage_1 = require("./RenderQueueProgressMessage");
 const RenderQueueRemoveItem_1 = require("./RenderQueueRemoveItem");
 const RenderQueueRepeat_1 = require("./RenderQueueRepeat");
+const RenderQueueSavingMessage_1 = require("./RenderQueueSavingMessage");
 const container = {
     padding: 12,
     display: 'flex',
@@ -69,24 +72,41 @@ const RenderQueueItem = ({ job, selected }) => {
         (_a = document
             .querySelector(`.${SELECTED_CLASSNAME}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
     }, []);
+    const clientBlobInfo = (0, react_1.useMemo)(() => {
+        if (!isClientJob || job.status !== 'done' || !job.getBlob) {
+            return null;
+        }
+        return {
+            getBlob: job.getBlob,
+            width: job.metadata.width,
+            height: job.metadata.height,
+            sizeInBytes: job.metadata.sizeInBytes,
+        };
+    }, [isClientJob, job]);
     const onClick = (0, react_1.useCallback)(() => {
         if (job.status !== 'done') {
             return;
         }
-        if (isClientJob) {
-            const clientJob = job;
-            setCanvasContent({
-                type: 'output-blob',
-                displayName: job.outName,
-                getBlob: clientJob.getBlob,
-                width: clientJob.metadata.width,
-                height: clientJob.metadata.height,
-                sizeInBytes: clientJob.metadata.sizeInBytes,
-            });
+        // Cannot show folders
+        if (!isClientJob && job.type === 'sequence') {
             return;
         }
-        // Cannot show folders
-        if (job.type === 'sequence') {
+        if (clientBlobInfo) {
+            setCanvasContent((c) => {
+                const isAlreadySelected = c && c.type === 'output-blob' && c.displayName === job.outName;
+                if (isAlreadySelected && !selected) {
+                    scrollCurrentIntoView();
+                    return c;
+                }
+                return {
+                    type: 'output-blob',
+                    displayName: job.outName,
+                    getBlob: clientBlobInfo.getBlob,
+                    width: clientBlobInfo.width,
+                    height: clientBlobInfo.height,
+                    sizeInBytes: clientBlobInfo.sizeInBytes,
+                };
+            });
             return;
         }
         setCanvasContent((c) => {
@@ -98,14 +118,26 @@ const RenderQueueItem = ({ job, selected }) => {
             return { type: 'output', path: `/${job.outName}` };
         });
         (0, url_state_1.pushUrl)(`/outputs/${job.outName}`);
-    }, [job, isClientJob, scrollCurrentIntoView, selected, setCanvasContent]);
+    }, [
+        job,
+        isClientJob,
+        clientBlobInfo,
+        scrollCurrentIntoView,
+        selected,
+        setCanvasContent,
+    ]);
     (0, react_1.useEffect)(() => {
         if (selected) {
             scrollCurrentIntoView();
         }
     }, [scrollCurrentIntoView, selected]);
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, className: selected ? SELECTED_CLASSNAME : undefined, children: [(0, jsx_runtime_1.jsx)(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: right, children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: job.compositionId }), (0, jsx_runtime_1.jsx)("div", { style: subtitle, children: job.status === 'done' ? ((0, jsx_runtime_1.jsx)(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : job.status === 'cancelled' ? ((0, jsx_runtime_1.jsx)(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : null })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), !isClientJob && (0, RenderQueueCopyToClipboard_1.supportsCopyingToClipboard)(job) ? ((0, jsx_runtime_1.jsx)(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, job.status === 'done' ||
-                job.status === 'failed' ||
-                job.status === 'cancelled' ? ((0, jsx_runtime_1.jsx)(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : ((0, jsx_runtime_1.jsx)(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' && !isClientJob ? ((0, jsx_runtime_1.jsx)(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job })) : null] }));
+    const canCopyToClipboard = job.status === 'done' &&
+        !isClientJob &&
+        (0, RenderQueueCopyToClipboard_1.supportsCopyingToClipboard)(job);
+    const canRepeat = (job.status === 'done' ||
+        job.status === 'failed' ||
+        job.status === 'cancelled') &&
+        !((0, context_1.isClientRenderJob)(job) && (0, client_side_render_types_1.isRestoredClientJob)(job));
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, className: selected ? SELECTED_CLASSNAME : undefined, children: [(0, jsx_runtime_1.jsx)(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: right, children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: job.compositionId }), (0, jsx_runtime_1.jsx)("div", { style: subtitle, children: job.status === 'done' ? ((0, jsx_runtime_1.jsx)(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : job.status === 'saving' ? ((0, jsx_runtime_1.jsx)(RenderQueueSavingMessage_1.RenderQueueSavingMessage, {})) : job.status === 'cancelled' ? ((0, jsx_runtime_1.jsx)(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : null })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), canCopyToClipboard ? ((0, jsx_runtime_1.jsx)(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, canRepeat ? (0, jsx_runtime_1.jsx)(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }) : null, job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : ((0, jsx_runtime_1.jsx)(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (clientBlobInfo ? ((0, jsx_runtime_1.jsx)(RenderQueueDownloadItem_1.RenderQueueDownloadItem, { job: job })) : ((0, jsx_runtime_1.jsx)(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }))) : null] }));
 };
 exports.RenderQueueItem = RenderQueueItem;

package/dist/components/RenderQueue/RenderQueueItemStatus.js

@@ -88,6 +88,9 @@ const RenderQueueItemStatus = ({ job }) => {
         }
         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) }) }));
     }
+    if (job.status === 'saving') {
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: invisibleStyle, onClick: onClick, children: (0, 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" }) }));
     }

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/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,9 +15,6 @@ const RenderQueueOutputName = ({ job }) => {
         };
     }, [deletedOutputLocation]);
     const getTitle = () => {
-        if (isClientJob) {
-            return `Downloaded as ${job.outName}`;
-        }
         if (deletedOutputLocation) {
             return 'File was deleted';
         }

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;
         }

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 (0, jsx_runtime_1.jsx)("span", { style: savingStyle, children: "Saving to out/..." });
+};
+exports.RenderQueueSavingMessage = RenderQueueSavingMessage;

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

@@ -1,3 +1,4 @@
+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 = {
@@ -6,20 +7,17 @@ export type ClientRenderJobProgress = {
     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 +58,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
@@ -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,