@remotion/web-renderer 4.0.434 → 4.0.436

package/dist/esm/index.mjs

@@ -4088,6 +4088,7 @@ var createWebFsTarget = async () => {
 };
 
 // src/render-media-on-web.tsx
+var MAX_RECENT_FRAME_TIMINGS = 150;
 var internalRenderMediaOnWeb = async ({
   composition,
   inputProps,
@@ -4223,6 +4224,10 @@ var internalRenderMediaOnWeb = async ({
         }) : null, 0);
         const totalFrames = realFrameRange[1] - realFrameRange[0] + 1;
         const durationInSeconds = totalFrames / resolved.fps;
+        const renderStart = Date.now();
+        let doneIn = null;
+        let renderEstimatedTime = 0;
+        const recentFrameTimings = [];
         if (videoSampleSource) {
           outputWithCleanup.output.addVideoTrack(videoSampleSource.videoSampleSource, {
             maximumPacketCount: Math.ceil(totalFrames * 1.33)
@@ -4242,10 +4247,21 @@ var internalRenderMediaOnWeb = async ({
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
+        let timeOfLastFrame = Date.now();
         const progress = {
           renderedFrames: 0,
           encodedFrames: 0
         };
+        const getProgressPayload = () => {
+          const overallProgress = Math.round((70 * progress.renderedFrames + 30 * progress.encodedFrames) / totalFrames) / 100;
+          return {
+            renderedFrames: progress.renderedFrames,
+            encodedFrames: progress.encodedFrames,
+            doneIn,
+            renderEstimatedTime,
+            progress: overallProgress
+          };
+        };
         for (let frame = realFrameRange[0];frame <= realFrameRange[1]; frame++) {
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
@@ -4299,8 +4315,19 @@ var internalRenderMediaOnWeb = async ({
               });
             }
           }
+          const now = Date.now();
+          const timeToRenderInMilliseconds = now - timeOfLastFrame;
+          timeOfLastFrame = now;
           progress.renderedFrames++;
-          throttledOnProgress?.({ ...progress });
+          recentFrameTimings.push(timeToRenderInMilliseconds);
+          if (recentFrameTimings.length > MAX_RECENT_FRAME_TIMINGS) {
+            recentFrameTimings.shift();
+          }
+          const recentTimingsSum = recentFrameTimings.reduce((sum, time) => sum + time, 0);
+          const newAverage = recentTimingsSum / recentFrameTimings.length;
+          const remainingFrames = totalFrames - progress.renderedFrames;
+          renderEstimatedTime = Math.round(remainingFrames * newAverage);
+          throttledOnProgress?.(getProgressPayload());
           const audioCombineStart = performance.now();
           const assets = collectAssets.current.collectAssets();
           if (onArtifact) {
@@ -4327,12 +4354,15 @@ var internalRenderMediaOnWeb = async ({
           await Promise.all(encodingPromises);
           internalState.addAddSampleTime(performance.now() - addSampleStart);
           progress.encodedFrames++;
-          throttledOnProgress?.({ ...progress });
+          if (progress.encodedFrames === totalFrames) {
+            doneIn = Date.now() - renderStart;
+          }
+          throttledOnProgress?.(getProgressPayload());
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
         }
-        onProgress?.({ ...progress });
+        onProgress?.(getProgressPayload());
         videoSampleSource?.videoSampleSource.close();
         audioSampleSource?.audioSampleSource.close();
         await outputWithCleanup.output.finalize();

package/dist/render-media-on-web.d.ts

@@ -22,8 +22,19 @@ type MandatoryRenderMediaOnWebOptions<Schema extends $ZodObject, Props extends R
     composition: CompositionCalculateMetadataOrExplicit<Schema, Props>;
 };
 export type RenderMediaOnWebProgress = {
+    /**
+     * @deprecated Kept for backward compatibility. Use `progress` for overall
+     * status updates.
+     */
     renderedFrames: number;
     encodedFrames: number;
+    /**
+     * The total time in milliseconds from render start until all frames were
+     * encoded, or `null` while encoding is still in progress.
+     */
+    doneIn: number | null;
+    renderEstimatedTime: number;
+    progress: number;
 };
 export type RenderMediaOnWebResult = {
     getBlob: () => Promise<Blob>;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.434",
+	"version": "4.0.436",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -22,16 +22,16 @@
 		"@mediabunny/mp3-encoder": "1.37.0",
 		"@mediabunny/aac-encoder": "1.37.0",
 		"@mediabunny/flac-encoder": "1.37.0",
-		"@remotion/licensing": "4.0.434",
-		"remotion": "4.0.434",
+		"@remotion/licensing": "4.0.436",
+		"remotion": "4.0.436",
 		"mediabunny": "1.37.0"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.434",
-		"@remotion/player": "4.0.434",
-		"@remotion/media": "4.0.434",
-		"@remotion/three": "4.0.434",
+		"@remotion/eslint-config-internal": "4.0.436",
+		"@remotion/player": "4.0.436",
+		"@remotion/media": "4.0.436",
+		"@remotion/three": "4.0.436",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",