@remotion/web-renderer 4.0.433 → 4.0.435

package/dist/drawing/filter.d.ts

@@ -0,0 +1,4 @@
+export declare const setFilter: ({ ctx, filter, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    filter: string;
+}) => () => void;

package/dist/esm/index.mjs

@@ -2892,6 +2892,20 @@ var drawOutline = ({
   ctx.setLineDash(originalLineDash);
 };
 
+// src/drawing/filter.ts
+var setFilter = ({
+  ctx,
+  filter
+}) => {
+  const previousFilter = ctx.filter;
+  if (filter && filter !== "none") {
+    ctx.filter = filter;
+  }
+  return () => {
+    ctx.filter = previousFilter;
+  };
+};
+
 // src/drawing/opacity.ts
 var setOpacity = ({
   ctx,
@@ -2970,6 +2984,10 @@ var drawElement = async ({
     ctx: context,
     opacity
   });
+  const finishFilter = setFilter({
+    ctx: context,
+    filter: computedStyle.filter
+  });
   drawBorderRadius({
     ctx: context,
     computedStyle,
@@ -3024,6 +3042,7 @@ var drawElement = async ({
   finishTransform();
   return {
     cleanupAfterChildren: () => {
+      finishFilter();
       finishOpacity();
       finishOverflowHidden();
     }
@@ -3626,7 +3645,8 @@ var drawText = ({
       webkitTextStrokeWidth,
       webkitTextStrokeColor,
       textShadow: textShadowValue,
-      paintOrder
+      paintOrder,
+      filter
     } = computedStyle;
     const isVertical = writingMode !== "horizontal-tb";
     if (isVertical) {
@@ -3637,6 +3657,10 @@ var drawText = ({
       return;
     }
     contextToDraw.save();
+    const finishFilter = setFilter({
+      ctx: contextToDraw,
+      filter
+    });
     const fontSizePx = parseFloat(fontSize);
     contextToDraw.font = `${fontStyle} ${fontWeight} ${fontSizePx}px ${fontFamily}`;
     contextToDraw.fillStyle = onlyBackgroundClipText ? "black" : webkitTextFillColor;
@@ -3691,6 +3715,7 @@ var drawText = ({
       }
     }
     span.textContent = originalText;
+    finishFilter();
     contextToDraw.restore();
   };
   return drawFn;
@@ -4063,6 +4088,7 @@ var createWebFsTarget = async () => {
 };
 
 // src/render-media-on-web.tsx
+var MAX_RECENT_FRAME_TIMINGS = 150;
 var internalRenderMediaOnWeb = async ({
   composition,
   inputProps,
@@ -4198,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)
@@ -4217,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");
@@ -4274,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) {
@@ -4302,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.433",
+	"version": "4.0.435",
 	"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.433",
-		"remotion": "4.0.433",
+		"@remotion/licensing": "4.0.435",
+		"remotion": "4.0.435",
 		"mediabunny": "1.37.0"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.433",
-		"@remotion/player": "4.0.433",
-		"@remotion/media": "4.0.433",
-		"@remotion/three": "4.0.433",
+		"@remotion/eslint-config-internal": "4.0.435",
+		"@remotion/player": "4.0.435",
+		"@remotion/media": "4.0.435",
+		"@remotion/three": "4.0.435",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",