@remotion/studio 4.0.407 → 4.0.409

package/dist/components/RenderQueue/RenderQueueItemStatus.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 RenderQueueItemStatus: React.FC<{
-    readonly job: RenderJob;
+    readonly job: AnyRenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueItemStatus.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const modals_1 = require("../../state/modals");
 const CircularProgress_1 = require("./CircularProgress");
+const context_1 = require("./context");
 const iconStyle = {
     height: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
     width: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
@@ -53,6 +54,7 @@ const invisibleStyle = {
 const RenderQueueItemStatus = ({ job }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [hovered, setHovered] = react_1.default.useState(false);
+    const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -67,7 +69,7 @@ const RenderQueueItemStatus = ({ job }) => {
         });
     }, [job.id, setSelectedModal]);
     if (job.status === 'failed') {
-        return ((0, jsx_runtime_1.jsx)("div", { 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 ((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" }) }) }));
     }
     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" }) }));
@@ -76,8 +78,18 @@ const RenderQueueItemStatus = ({ job }) => {
         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" }) }) }));
     }
     if (job.status === 'running') {
-        // Add a minimum progress to avoid the progress bar from disappearing
-        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, job.progress.value) }) }));
+        let progressValue;
+        if (isClientJob) {
+            const { renderedFrames, totalFrames } = job.progress;
+            progressValue = totalFrames > 0 ? renderedFrames / 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) }) }));
+    }
+    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" }) }));
     }
     throw new Error('Unknown job status');
 };

package/dist/components/RenderQueue/RenderQueueOutputName.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 RenderQueueOutputName: React.FC<{
-    readonly job: RenderJob;
+    readonly job: AnyRenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueOutputName.js

@@ -3,16 +3,30 @@ 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 style = (0, react_1.useMemo)(() => {
         return {
             ...item_style_1.renderQueueItemSubtitleStyle,
-            textDecoration: job.deletedOutputLocation ? 'line-through' : 'none',
+            textDecoration: deletedOutputLocation ? 'line-through' : 'none',
             color: item_style_1.renderQueueItemSubtitleStyle.color,
             cursor: 'inherit',
         };
-    }, [job.deletedOutputLocation]);
-    return ((0, jsx_runtime_1.jsx)("span", { style: style, title: job.deletedOutputLocation ? 'File was deleted' : job.outName, children: job.outName }));
+    }, [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 }));
 };
 exports.RenderQueueOutputName = RenderQueueOutputName;

package/dist/components/RenderQueue/RenderQueueProgressMessage.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 RenderQueueProgressMessage: React.FC<{
-    readonly job: RenderJob;
+    readonly job: AnyRenderJob;
 }>;

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 context_1 = require("./context");
 const item_style_1 = require("./item-style");
 const outputLocation = {
     ...item_style_1.renderQueueItemSubtitleStyle,
@@ -15,12 +16,16 @@ const RenderQueueProgressMessage = ({ job }) => {
     }
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
+    const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onClick = (0, react_1.useCallback)(() => {
         setSelectedModal({
             type: 'render-progress',
             jobId: job.id,
         });
-    }, [job, setSelectedModal]);
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: job.progress.message, children: job.progress.message }));
+    }, [job.id, setSelectedModal]);
+    const message = isClientJob
+        ? `Rendering frame ${job.progress.renderedFrames}/${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 }));
 };
 exports.RenderQueueProgressMessage = RenderQueueProgressMessage;

package/dist/components/RenderQueue/RenderQueueRemoveItem.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 RenderQueueRemoveItem: React.FC<{
-    readonly job: RenderJob;
+    readonly job: AnyRenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueRemoveItem.js

@@ -3,12 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueRemoveItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
+const context_1 = require("./context");
 const RenderQueueRemoveItem = ({ job }) => {
+    const isClientJob = (0, context_1.isClientRenderJob)(job);
+    const { removeClientJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
+        if (isClientJob) {
+            if (canvasContent &&
+                canvasContent.type === 'output-blob' &&
+                job.status === 'done' &&
+                canvasContent.getBlob === job.getBlob) {
+                setCanvasContent(null);
+            }
+            removeClientJob(job.id);
+            (0, NotificationCenter_1.showNotification)('Removed job', 2000);
+            return;
+        }
         (0, actions_1.removeRenderJob)(job)
             .then(() => {
             (0, NotificationCenter_1.showNotification)('Removed job', 2000);
@@ -16,7 +33,7 @@ const RenderQueueRemoveItem = ({ job }) => {
             .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not remove item: ${err.message}`, 2000);
         });
-    }, [job]);
+    }, [job, isClientJob, removeClientJob, canvasContent, setCanvasContent]);
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 16,

package/dist/components/RenderQueue/RenderQueueRepeat.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 RenderQueueRepeatItem: React.FC<{
-    readonly job: RenderJob;
+    readonly job: AnyRenderJob;
 }>;

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -8,18 +8,32 @@ const retry_payload_1 = require("../../helpers/retry-payload");
 const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
 const InlineAction_1 = require("../InlineAction");
+const context_1 = require("./context");
 const RenderQueueRepeatItem = ({ job }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
-        const retryPayload = (0, retry_payload_1.makeRetryPayload)(job);
-        setSelectedModal(retryPayload);
+        if (isClientJob) {
+            const retryPayload = (0, retry_payload_1.makeClientRetryPayload)(job);
+            setSelectedModal(retryPayload);
+        }
+        else {
+            const retryPayload = (0, retry_payload_1.makeRetryPayload)(job);
+            setSelectedModal(retryPayload);
+        }
         if (isMobileLayout) {
             setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
         }
-    }, [isMobileLayout, job, setSelectedModal, setSidebarCollapsedState]);
+    }, [
+        isMobileLayout,
+        job,
+        isClientJob,
+        setSelectedModal,
+        setSidebarCollapsedState,
+    ]);
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,

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

@@ -0,0 +1,21 @@
+import type { ComponentType } from 'react';
+import type { CalculateMetadataFunction } from 'remotion';
+import type { ClientStillRenderJob, ClientVideoRenderJob } from './client-side-render-types';
+export type CompositionRef = {
+    component: ComponentType<Record<string, unknown>>;
+    calculateMetadata: CalculateMetadataFunction<Record<string, unknown>> | null;
+    width: number;
+    height: number;
+    fps: number;
+    durationInFrames: number;
+    defaultProps: Record<string, unknown>;
+};
+export declare const registerCompositionForJob: (jobId: string, compositionRef: CompositionRef) => void;
+export declare const getCompositionForJob: (jobId: string) => CompositionRef | undefined;
+export declare const cleanupCompositionForJob: (jobId: string) => void;
+export declare const generateJobId: () => string;
+export declare const getAbortController: (jobId: string) => AbortController;
+export declare const deleteAbortController: (jobId: string) => void;
+export declare const cancelAbortController: (jobId: string) => void;
+export type AddClientStillJobParams = Omit<ClientStillRenderJob, 'id' | 'startedAt' | 'status'>;
+export type AddClientVideoJobParams = Omit<ClientVideoRenderJob, 'id' | 'startedAt' | 'status'>;

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cancelAbortController = exports.deleteAbortController = exports.getAbortController = exports.generateJobId = exports.cleanupCompositionForJob = exports.getCompositionForJob = exports.registerCompositionForJob = void 0;
+const compositionRegistry = new Map();
+const registerCompositionForJob = (jobId, compositionRef) => {
+    compositionRegistry.set(jobId, compositionRef);
+};
+exports.registerCompositionForJob = registerCompositionForJob;
+const getCompositionForJob = (jobId) => {
+    return compositionRegistry.get(jobId);
+};
+exports.getCompositionForJob = getCompositionForJob;
+const cleanupCompositionForJob = (jobId) => {
+    compositionRegistry.delete(jobId);
+};
+exports.cleanupCompositionForJob = cleanupCompositionForJob;
+const generateJobId = () => {
+    return `client-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+};
+exports.generateJobId = generateJobId;
+const clientJobAbortControllers = new Map();
+const getAbortController = (jobId) => {
+    let controller = clientJobAbortControllers.get(jobId);
+    if (!controller) {
+        controller = new AbortController();
+        clientJobAbortControllers.set(jobId, controller);
+    }
+    return controller;
+};
+exports.getAbortController = getAbortController;
+const deleteAbortController = (jobId) => {
+    clientJobAbortControllers.delete(jobId);
+};
+exports.deleteAbortController = deleteAbortController;
+const cancelAbortController = (jobId) => {
+    const controller = clientJobAbortControllers.get(jobId);
+    if (controller) {
+        controller.abort();
+    }
+};
+exports.cancelAbortController = cancelAbortController;

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

@@ -0,0 +1,64 @@
+import type { RenderStillOnWebImageFormat } 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: 'done';
+    getBlob: GetBlobCallback;
+    metadata: ClientRenderMetadata;
+} | {
+    status: 'cancelled';
+} | {
+    status: 'failed';
+    error: {
+        message: string;
+        stack: string | undefined;
+    };
+};
+type ClientRenderJobBase = {
+    id: string;
+    startedAt: number;
+    compositionId: string;
+    outName: string;
+    inputProps: Record<string, unknown>;
+    delayRenderTimeout: number;
+    mediaCacheSizeInBytes: number | null;
+    logLevel: LogLevel;
+    licenseKey: string | null;
+    scale: number;
+};
+export type ClientStillRenderJob = ClientRenderJobBase & {
+    type: 'client-still';
+    imageFormat: RenderStillOnWebImageFormat;
+    frame: number;
+} & ClientRenderJobDynamicStatus;
+export type ClientVideoRenderJob = ClientRenderJobBase & {
+    type: 'client-video';
+    container: string;
+    videoCodec: string;
+    audioCodec: string;
+    startFrame: number;
+    endFrame: number;
+    audioBitrate: string;
+    videoBitrate: string;
+    hardwareAcceleration: string;
+    keyframeIntervalInSeconds: number;
+    transparent: boolean;
+    muted: boolean;
+} & ClientRenderJobDynamicStatus;
+export type ClientRenderJob = ClientStillRenderJob | ClientVideoRenderJob;
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,12 +1,29 @@
 import type { 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';
 declare global {
     interface Window {
         remotion_initialRenderQueue: RenderJob[] | null;
     }
 }
+export type AnyRenderJob = RenderJob | ClientRenderJob;
+export declare const isClientRenderJob: (job: AnyRenderJob) => job is ClientRenderJob;
 type RenderQueueContextType = {
-    jobs: RenderJob[];
+    jobs: AnyRenderJob[];
+    serverJobs: RenderJob[];
+    clientJobs: ClientRenderJob[];
+    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;
+    markClientJobFailed: (jobId: string, error: Error) => void;
+    markClientJobCancelled: (jobId: string) => void;
+    removeClientJob: (jobId: string) => void;
+    cancelClientJob: (jobId: string) => void;
+    setProcessJobCallback: (callback: ((job: ClientRenderJob) => Promise<void>) | null) => void;
+    getAbortController: (jobId: string) => AbortController;
+    getCompositionForJob: (jobId: string) => CompositionRef | undefined;
 };
 export declare const RenderQueueContext: React.Context<RenderQueueContextType>;
 export declare const renderJobsRef: React.RefObject<{

package/dist/components/RenderQueue/context.js

@@ -33,28 +33,170 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderQueueContextProvider = exports.renderJobsRef = exports.RenderQueueContext = void 0;
+exports.RenderQueueContextProvider = exports.renderJobsRef = exports.RenderQueueContext = exports.isClientRenderJob = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const client_render_queue_1 = require("./client-render-queue");
+const isClientRenderJob = (job) => {
+    return job.type === 'client-still' || job.type === 'client-video';
+};
+exports.isClientRenderJob = isClientRenderJob;
+const noopString = () => '';
+const noop = () => undefined;
 exports.RenderQueueContext = react_1.default.createContext({
     jobs: [],
+    serverJobs: [],
+    clientJobs: [],
+    addClientStillJob: noopString,
+    addClientVideoJob: noopString,
+    updateClientJobProgress: noop,
+    markClientJobDone: noop,
+    markClientJobFailed: noop,
+    markClientJobCancelled: noop,
+    removeClientJob: noop,
+    cancelClientJob: noop,
+    setProcessJobCallback: noop,
+    getAbortController: () => new AbortController(),
+    getCompositionForJob: () => undefined,
 });
 exports.renderJobsRef = (0, react_1.createRef)();
 const RenderQueueContextProvider = ({ children }) => {
     var _a;
-    const [jobs, setJobs] = (0, react_1.useState)((_a = window.remotion_initialRenderQueue) !== null && _a !== void 0 ? _a : []);
-    const value = (0, react_1.useMemo)(() => {
-        return {
-            jobs,
+    const [serverJobs, setServerJobs] = (0, react_1.useState)((_a = window.remotion_initialRenderQueue) !== null && _a !== void 0 ? _a : []);
+    const [clientJobs, setClientJobs] = (0, react_1.useState)([]);
+    const [currentlyProcessing, setCurrentlyProcessing] = (0, react_1.useState)(null);
+    const processJobCallbackRef = (0, react_1.useRef)(null);
+    // Process next job when state changes
+    (0, react_1.useEffect)(() => {
+        if (currentlyProcessing) {
+            return;
+        }
+        const nextJob = clientJobs.find((job) => job.status === 'idle');
+        if (!nextJob || !processJobCallbackRef.current) {
+            return;
+        }
+        setCurrentlyProcessing(nextJob.id);
+        setClientJobs((prev) => prev.map((job) => job.id === nextJob.id
+            ? {
+                ...job,
+                status: 'running',
+                progress: { renderedFrames: 0, encodedFrames: 0, totalFrames: 0 },
+            }
+            : job));
+        processJobCallbackRef.current(nextJob);
+    }, [clientJobs, currentlyProcessing]);
+    const addClientStillJob = (0, react_1.useCallback)((params, compositionRef) => {
+        const id = (0, client_render_queue_1.generateJobId)();
+        (0, client_render_queue_1.registerCompositionForJob)(id, compositionRef);
+        const newJob = {
+            ...params,
+            id,
+            startedAt: Date.now(),
+            status: 'idle',
         };
-    }, [jobs]);
-    (0, react_1.useImperativeHandle)(exports.renderJobsRef, () => {
-        return {
-            updateRenderJobs: (newJobs) => {
-                setJobs(newJobs);
-            },
+        setClientJobs((prev) => [...prev, newJob]);
+        return id;
+    }, []);
+    const addClientVideoJob = (0, react_1.useCallback)((params, compositionRef) => {
+        const id = (0, client_render_queue_1.generateJobId)();
+        (0, client_render_queue_1.registerCompositionForJob)(id, compositionRef);
+        const newJob = {
+            ...params,
+            id,
+            startedAt: Date.now(),
+            status: 'idle',
         };
+        setClientJobs((prev) => [...prev, newJob]);
+        return id;
+    }, []);
+    const updateClientJobProgress = (0, react_1.useCallback)((jobId, progress) => {
+        setClientJobs((prev) => prev.map((job) => job.id === jobId
+            ? { ...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);
+        setClientJobs((prev) => prev.map((job) => job.id === jobId
+            ? { ...job, status: 'done', getBlob, metadata }
+            : job));
+        setCurrentlyProcessing(null);
+    }, []);
+    const markClientJobFailed = (0, react_1.useCallback)((jobId, error) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
+        (0, client_render_queue_1.cleanupCompositionForJob)(jobId);
+        setClientJobs((prev) => prev.map((job) => job.id === jobId
+            ? {
+                ...job,
+                status: 'failed',
+                error: { message: error.message, stack: error.stack },
+            }
+            : job));
+        setCurrentlyProcessing(null);
     }, []);
+    const markClientJobCancelled = (0, react_1.useCallback)((jobId) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
+        (0, client_render_queue_1.cleanupCompositionForJob)(jobId);
+        setClientJobs((prev) => prev.map((job) => job.id === jobId
+            ? {
+                ...job,
+                status: 'cancelled',
+            }
+            : job));
+        setCurrentlyProcessing(null);
+    }, []);
+    const removeClientJob = (0, react_1.useCallback)((jobId) => {
+        setClientJobs((prev) => {
+            const jobToRemove = prev.find((j) => j.id === jobId);
+            if ((jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'running') {
+                return prev;
+            }
+            (0, client_render_queue_1.deleteAbortController)(jobId);
+            (0, client_render_queue_1.cleanupCompositionForJob)(jobId);
+            return prev.filter((job) => job.id !== jobId);
+        });
+    }, []);
+    const cancelClientJob = (0, react_1.useCallback)((jobId) => {
+        (0, client_render_queue_1.cancelAbortController)(jobId);
+    }, []);
+    const setProcessJobCallback = (0, react_1.useCallback)((callback) => {
+        processJobCallbackRef.current = callback;
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.renderJobsRef, () => ({
+        updateRenderJobs: (newJobs) => {
+            setServerJobs(newJobs);
+        },
+    }), []);
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            jobs: [...serverJobs, ...clientJobs],
+            serverJobs,
+            clientJobs,
+            addClientStillJob,
+            addClientVideoJob,
+            updateClientJobProgress,
+            markClientJobDone,
+            markClientJobFailed,
+            markClientJobCancelled,
+            removeClientJob,
+            cancelClientJob,
+            setProcessJobCallback,
+            getAbortController: client_render_queue_1.getAbortController,
+            getCompositionForJob: client_render_queue_1.getCompositionForJob,
+        };
+    }, [
+        serverJobs,
+        clientJobs,
+        addClientStillJob,
+        addClientVideoJob,
+        updateClientJobProgress,
+        markClientJobDone,
+        markClientJobFailed,
+        markClientJobCancelled,
+        removeClientJob,
+        cancelClientJob,
+        setProcessJobCallback,
+    ]);
     return ((0, jsx_runtime_1.jsx)(exports.RenderQueueContext.Provider, { value: value, children: children }));
 };
 exports.RenderQueueContextProvider = RenderQueueContextProvider;

package/dist/components/RenderQueue/index.js

@@ -89,17 +89,31 @@ const RenderQueue = () => {
         previousJobCount.current = jobCount;
     }, [jobCount]);
     const selectedJob = (0, react_1.useMemo)(() => {
-        let selectedIndex = -1;
-        for (let i = 0; i < jobs.length; i++) {
-            const job = jobs[i];
-            if (canvasContent &&
-                canvasContent.type === 'output' &&
-                canvasContent.path === `/${job.outName}` &&
-                job.status === 'done') {
-                selectedIndex = i;
+        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}`) {
+                    return i;
+                }
             }
         }
-        return selectedIndex;
+        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 })] }));