@remotion/web-renderer 4.0.396 → 4.0.397

package/dist/get-biggest-bounding-client-rect.js

@@ -1,3 +1,4 @@
+import { parseBoxShadow } from './drawing/draw-box-shadow';
 import { parseOutlineOffset, parseOutlineWidth } from './drawing/draw-outline';
 import { skipToNextNonDescendant } from './walk-tree';
 export const getBiggestBoundingClientRect = (element) => {
@@ -11,10 +12,24 @@ export const getBiggestBoundingClientRect = (element) => {
         const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
         const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
         const rect = treeWalker.currentNode.getBoundingClientRect();
-        mostLeft = Math.min(mostLeft, rect.left - outlineOffset - outlineWidth);
-        mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth);
-        mostRight = Math.max(mostRight, rect.right + outlineOffset + outlineWidth);
-        mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth);
+        // Calculate box shadow extensions
+        const shadows = parseBoxShadow(computedStyle.boxShadow);
+        let shadowLeft = 0;
+        let shadowRight = 0;
+        let shadowTop = 0;
+        let shadowBottom = 0;
+        for (const shadow of shadows) {
+            if (!shadow.inset) {
+                shadowLeft = Math.max(shadowLeft, Math.abs(Math.min(shadow.offsetX, 0)) + shadow.blurRadius);
+                shadowRight = Math.max(shadowRight, Math.max(shadow.offsetX, 0) + shadow.blurRadius);
+                shadowTop = Math.max(shadowTop, Math.abs(Math.min(shadow.offsetY, 0)) + shadow.blurRadius);
+                shadowBottom = Math.max(shadowBottom, Math.max(shadow.offsetY, 0) + shadow.blurRadius);
+            }
+        }
+        mostLeft = Math.min(mostLeft, rect.left - outlineOffset - outlineWidth - shadowLeft);
+        mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth - shadowTop);
+        mostRight = Math.max(mostRight, rect.right + outlineOffset + outlineWidth + shadowRight);
+        mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth + shadowBottom);
         if (computedStyle.overflow === 'hidden') {
             if (!skipToNextNonDescendant(treeWalker)) {
                 break;

package/dist/internal-state.d.ts

@@ -1,7 +1,7 @@
 export declare const makeInternalState: () => {
     getDrawn3dPixels: () => number;
-    getDrawn3dTextures: () => number;
-    add3DTransform: ({ canvasWidth, canvasHeight, }: {
+    getPrecomposedTiles: () => number;
+    addPrecompose: ({ canvasWidth, canvasHeight, }: {
         canvasWidth: number;
         canvasHeight: number;
     }) => void;

package/dist/internal-state.js

@@ -1,12 +1,12 @@
 export const makeInternalState = () => {
-    let drawn3dPixels = 0;
-    let drawn3dTextures = 0;
+    let drawnPrecomposedPixels = 0;
+    let precomposedTextures = 0;
     return {
-        getDrawn3dPixels: () => drawn3dPixels,
-        getDrawn3dTextures: () => drawn3dTextures,
-        add3DTransform: ({ canvasWidth, canvasHeight, }) => {
-            drawn3dPixels += canvasWidth * canvasHeight;
-            drawn3dTextures++;
+        getDrawn3dPixels: () => drawnPrecomposedPixels,
+        getPrecomposedTiles: () => precomposedTextures,
+        addPrecompose: ({ canvasWidth, canvasHeight, }) => {
+            drawnPrecomposedPixels += canvasWidth * canvasHeight;
+            precomposedTextures++;
         },
     };
 };

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

@@ -47,6 +47,7 @@ type OptionalRenderMediaOnWebOptions<Schema extends AnyZodObject> = {
     onFrame: OnFrameCallback | null;
     outputTarget: WebRendererOutputTarget | null;
     licenseKey: string | undefined;
+    muted: boolean;
 };
 export type RenderMediaOnWebOptions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = MandatoryRenderMediaOnWebOptions<Schema, Props> & Partial<OptionalRenderMediaOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>;
 export declare const renderMediaOnWeb: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(options: RenderMediaOnWebOptions<Schema, Props>) => Promise<RenderMediaOnWebResult>;

package/dist/render-media-on-web.js

@@ -21,7 +21,7 @@ import { cleanupStaleOpfsFiles, createWebFsTarget } from './web-fs-target';
 // TODO: Metadata
 // TODO: Validating inputs
 // TODO: Apply defaultCodec
-const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTimeoutInMilliseconds, logLevel, mediaCacheSizeInBytes, schema, codec, container, signal, onProgress, hardwareAcceleration, keyframeIntervalInSeconds, videoBitrate, frameRange, transparent, onArtifact, onFrame, outputTarget: userDesiredOutputTarget, licenseKey, }) => {
+const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTimeoutInMilliseconds, logLevel, mediaCacheSizeInBytes, schema, codec, container, signal, onProgress, hardwareAcceleration, keyframeIntervalInSeconds, videoBitrate, frameRange, transparent, onArtifact, onFrame, outputTarget: userDesiredOutputTarget, licenseKey, muted, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const outputTarget = userDesiredOutputTarget === null
         ? (await canUseWebFsWriter())
@@ -64,7 +64,7 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
         logLevel,
         mediaCacheSizeInBytes,
         schema: schema !== null && schema !== void 0 ? schema : null,
-        audioEnabled: true,
+        audioEnabled: !muted,
         videoEnabled: true,
         initialFrame: 0,
         defaultCodec: resolved.defaultCodec,
@@ -118,15 +118,18 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
         });
         output.addVideoTrack(videoSampleSource);
         // TODO: Should be able to customize
-        const defaultAudioEncodingConfig = await getDefaultAudioEncodingConfig();
-        if (!defaultAudioEncodingConfig) {
-            return Promise.reject(new Error('No default audio encoding config found'));
+        let audioSampleSource = null;
+        if (!muted) {
+            const defaultAudioEncodingConfig = await getDefaultAudioEncodingConfig();
+            if (!defaultAudioEncodingConfig) {
+                return Promise.reject(new Error('No default audio encoding config found'));
+            }
+            audioSampleSource = new AudioSampleSource(defaultAudioEncodingConfig);
+            cleanupFns.push(() => {
+                audioSampleSource === null || audioSampleSource === void 0 ? void 0 : audioSampleSource.close();
+            });
+            output.addAudioTrack(audioSampleSource);
         }
-        const audioSampleSource = new AudioSampleSource(defaultAudioEncodingConfig);
-        cleanupFns.push(() => {
-            audioSampleSource.close();
-        });
-        output.addAudioTrack(audioSampleSource);
         await output.start();
         if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
             throw new Error('renderMediaOnWeb() was cancelled');
@@ -172,7 +175,9 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
             if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
                 throw new Error('renderMediaOnWeb() was cancelled');
             }
-            const audio = onlyInlineAudio({ assets, fps: resolved.fps, frame });
+            const audio = muted
+                ? null
+                : onlyInlineAudio({ assets, fps: resolved.fps, frame });
             const timestamp = Math.round(((frame - realFrameRange[0]) / resolved.fps) * 1000000);
             const videoFrame = new VideoFrame(imageData, {
                 timestamp,
@@ -196,7 +201,9 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
             }
             await Promise.all([
                 addVideoSampleAndCloseFrame(frameToEncode, videoSampleSource),
-                audio ? addAudioSample(audio, audioSampleSource) : Promise.resolve(),
+                audio && audioSampleSource
+                    ? addAudioSample(audio, audioSampleSource)
+                    : Promise.resolve(),
             ]);
             progress.encodedFrames++;
             throttledOnProgress === null || throttledOnProgress === void 0 ? void 0 : throttledOnProgress({ ...progress });
@@ -207,7 +214,7 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
         // Call progress one final time to ensure final state is reported
         onProgress === null || onProgress === void 0 ? void 0 : onProgress({ ...progress });
         videoSampleSource.close();
-        audioSampleSource.close();
+        audioSampleSource === null || audioSampleSource === void 0 ? void 0 : audioSampleSource.close();
         await output.finalize();
         const mimeType = getMimeType(container);
         if (webFsTarget) {
@@ -258,7 +265,7 @@ export const renderMediaOnWeb = (options) => {
     onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref
         .catch(() => Promise.resolve())
         .then(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         return internalRenderMediaOnWeb({
             ...options,
             delayRenderTimeoutInMilliseconds: (_a = options.delayRenderTimeoutInMilliseconds) !== null && _a !== void 0 ? _a : 30000,
@@ -278,6 +285,7 @@ export const renderMediaOnWeb = (options) => {
             onFrame: (_p = options.onFrame) !== null && _p !== void 0 ? _p : null,
             outputTarget: (_q = options.outputTarget) !== null && _q !== void 0 ? _q : null,
             licenseKey: (_r = options.licenseKey) !== null && _r !== void 0 ? _r : undefined,
+            muted: (_s = options.muted) !== null && _s !== void 0 ? _s : false,
         });
     });
     return onlyOneRenderAtATimeQueue.ref;

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.396",
+	"version": "4.0.397",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
@@ -16,14 +16,14 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@remotion/licensing": "4.0.396",
-		"remotion": "4.0.396",
+		"@remotion/licensing": "4.0.397",
+		"remotion": "4.0.397",
 		"mediabunny": "1.27.2"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.396",
-		"@remotion/player": "4.0.396",
-		"@remotion/media": "4.0.396",
+		"@remotion/eslint-config-internal": "4.0.397",
+		"@remotion/player": "4.0.397",
+		"@remotion/media": "4.0.397",
 		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",
 		"playwright": "1.55.1",