@remotion/web-renderer 4.0.386 → 4.0.387

package/dist/create-scaffold.js

@@ -17,6 +17,10 @@ export async function createScaffold({ width, height, delayRenderTimeoutInMillis
     div.style.width = `${width}px`;
     div.style.height = `${height}px`;
     div.style.zIndex = '-9999';
+    div.style.top = '0';
+    div.style.visibility = 'hidden';
+    div.style.left = '0';
+    div.style.pointerEvents = 'none';
     document.body.appendChild(div);
     const { promise, resolve, reject } = withResolvers();
     // TODO: This might not work in React 18
@@ -34,7 +38,7 @@ export async function createScaffold({ width, height, delayRenderTimeoutInMillis
     const timeUpdater = createRef();
     const collectAssets = createRef();
     flushSync(() => {
-        root.render(_jsx(Internals.MaxMediaCacheSizeContext.Provider, { value: mediaCacheSizeInBytes, children: _jsx(Internals.RemotionEnvironmentContext, { value: {
+        root.render(_jsx(Internals.MaxMediaCacheSizeContext.Provider, { value: mediaCacheSizeInBytes, children: _jsx(Internals.RemotionEnvironmentContext.Provider, { value: {
                     isStudio: false,
                     isRendering: true,
                     isPlayer: false,
@@ -75,7 +79,7 @@ export async function createScaffold({ width, height, delayRenderTimeoutInMillis
                                 defaultProResProfile: null,
                             },
                             folders: [],
-                        }, children: _jsx(Internals.RenderAssetManagerProvider, { collectAssets: collectAssets, children: _jsx(UpdateTime, { audioEnabled: audioEnabled, videoEnabled: videoEnabled, logLevel: logLevel, compId: id, initialFrame: initialFrame, timeUpdater: timeUpdater, children: _jsx(Internals.CanUseRemotionHooks, { value: true, children: _jsx(Component, { ...resolvedProps }) }) }) }) }) }) }) }));
+                        }, children: _jsx(Internals.RenderAssetManagerProvider, { collectAssets: collectAssets, children: _jsx(UpdateTime, { audioEnabled: audioEnabled, videoEnabled: videoEnabled, logLevel: logLevel, compId: id, initialFrame: initialFrame, timeUpdater: timeUpdater, children: _jsx(Internals.CanUseRemotionHooks.Provider, { value: true, children: _jsx(Component, { ...resolvedProps }) }) }) }) }) }) }) }));
     });
     resolve();
     await promise;

package/dist/drawing/text/draw-text.d.ts

@@ -0,0 +1 @@
+export declare const drawTextToCanvas: (parentElement: HTMLElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

package/dist/drawing/text/draw-text.js

@@ -0,0 +1,57 @@
+import { withResolvers } from '../../with-resolvers';
+export const drawTextToCanvas = async (parentElement, context) => {
+    const clientRect = parentElement.getBoundingClientRect();
+    const computedStyle = getComputedStyle(parentElement);
+    const clonedNode = parentElement.cloneNode(true);
+    for (let i = 0; i < computedStyle.length; i++) {
+        const propertyName = computedStyle[i];
+        const value = computedStyle.getPropertyValue(propertyName);
+        if (propertyName === 'margin-top' ||
+            propertyName === 'margin-bottom' ||
+            propertyName === 'margin-left' ||
+            propertyName === 'margin-right' ||
+            propertyName === 'margin') {
+            // @ts-expect-error - propertyName is a valid CSS property
+            clonedNode.style[propertyName] = '0px';
+            continue;
+        }
+        // @ts-expect-error - propertyName is a valid CSS property
+        clonedNode.style[propertyName] = value;
+    }
+    // Create an SVG that contains the cloned node via a foreignObject
+    const svgNS = 'http://www.w3.org/2000/svg';
+    const svg = document.createElementNS(svgNS, 'svg');
+    svg.setAttribute('width', `${clientRect.width}`);
+    svg.setAttribute('height', `${clientRect.height}`);
+    const foreignObject = document.createElementNS(svgNS, 'foreignObject');
+    foreignObject.setAttribute('x', '0');
+    foreignObject.setAttribute('y', '0');
+    foreignObject.setAttribute('width', `${clientRect.width}`);
+    foreignObject.setAttribute('height', `${clientRect.height}`);
+    // The cloned node must be in XHTML namespace to render properly
+    const xhtmlNS = 'http://www.w3.org/1999/xhtml';
+    const wrappedDiv = document.createElementNS(xhtmlNS, 'div');
+    wrappedDiv.style.width = `${clientRect.width}px`;
+    wrappedDiv.style.height = `${clientRect.height}px`;
+    wrappedDiv.appendChild(clonedNode);
+    foreignObject.appendChild(wrappedDiv);
+    svg.appendChild(foreignObject);
+    // Convert SVG to data URL
+    const serializer = new XMLSerializer();
+    const svgString = serializer.serializeToString(svg);
+    const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+    const { promise, resolve, reject } = withResolvers();
+    // Create image and draw when loaded
+    const img = new window.Image();
+    img.onload = function () {
+        resolve(img);
+    };
+    img.onerror = function (err) {
+        // We may want to add robust error handling here
+        reject(err);
+    };
+    img.src = svgDataUrl;
+    await promise;
+    console.log(clientRect);
+    context.drawImage(img, clientRect.left, clientRect.top, clientRect.width, clientRect.height);
+};

package/dist/esm/index.mjs

@@ -8465,6 +8465,10 @@ async function createScaffold({
   div.style.width = `${width}px`;
   div.style.height = `${height}px`;
   div.style.zIndex = "-9999";
+  div.style.top = "0";
+  div.style.visibility = "hidden";
+  div.style.left = "0";
+  div.style.pointerEvents = "none";
   document.body.appendChild(div);
   const { promise, resolve, reject } = withResolvers();
   const root = ReactDOM.createRoot(div, {
@@ -8483,7 +8487,7 @@ async function createScaffold({
   flushSync2(() => {
     root.render(/* @__PURE__ */ jsx2(Internals2.MaxMediaCacheSizeContext.Provider, {
       value: mediaCacheSizeInBytes,
-      children: /* @__PURE__ */ jsx2(Internals2.RemotionEnvironmentContext, {
+      children: /* @__PURE__ */ jsx2(Internals2.RemotionEnvironmentContext.Provider, {
         value: {
           isStudio: false,
           isRendering: true,
@@ -8538,7 +8542,7 @@ async function createScaffold({
                 compId: id,
                 initialFrame,
                 timeUpdater,
-                children: /* @__PURE__ */ jsx2(Internals2.CanUseRemotionHooks, {
+                children: /* @__PURE__ */ jsx2(Internals2.CanUseRemotionHooks.Provider, {
                   value: true,
                   children: /* @__PURE__ */ jsx2(Component, {
                     ...resolvedProps

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.386",
+	"version": "4.0.387",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
@@ -16,19 +16,19 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"remotion": "4.0.386",
+		"remotion": "4.0.387",
 		"mediabunny": "1.25.8"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.386",
-		"@remotion/player": "4.0.386",
-		"@remotion/media": "4.0.386",
+		"@remotion/eslint-config-internal": "4.0.387",
+		"@remotion/player": "4.0.387",
+		"@remotion/media": "4.0.387",
 		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",
 		"playwright": "1.55.1",
 		"eslint": "9.19.0",
-		"react": "19.2.1",
-		"react-dom": "19.2.1",
+		"react": "19.2.3",
+		"react-dom": "19.2.3",
 		"vitest": "4.0.9",
 		"vitest-browser-react": "^2.0.2",
 		"zod": "3.22.3"