@remotion/transitions 4.0.496 → 4.0.497

package/dist/esm/index.mjs

@@ -85,7 +85,7 @@ import {
   Internals,
   useDelayRender
 } from "remotion";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
   children,
   onElementImage,
@@ -101,6 +101,7 @@ var HtmlInCanvasPresentation = ({
     throw new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
   }
   const canvasRef = useRef(null);
+  const outputCanvasRef = useRef(null);
   const canvasSubtreeStyle = useMemo2(() => {
     return {
       width: "100%",
@@ -112,7 +113,21 @@ var HtmlInCanvasPresentation = ({
       bottom: 0
     };
   }, []);
-  const [offscreenCanvas] = useState(() => new OffscreenCanvas(1, 1));
+  const outputCanvasStyle = useMemo2(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: "none"
+    };
+  }, []);
+  const captureCanvasRef = useRef(null);
+  const captureContextRef = useRef(null);
+  const [shaderCanvas] = useState(() => new OffscreenCanvas(1, 1));
   const passedPropsRef = useRef(passedProps);
   passedPropsRef.current = passedProps;
   const memoizedEffects = Internals.useMemoizedEffects({
@@ -121,33 +136,58 @@ var HtmlInCanvasPresentation = ({
   });
   const effectsRef = useRef(memoizedEffects);
   effectsRef.current = memoizedEffects;
-  const [instance] = useState(() => shader(offscreenCanvas));
+  const [instance] = useState(() => shader(shaderCanvas));
   useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return () => {
+        instance.cleanup();
+      };
+    }
+    const captureCanvas = canvas.transferControlToOffscreen();
+    const captureContext = captureCanvas.getContext("2d");
+    if (!captureContext) {
+      throw new Error("Failed to create capture canvas context");
+    }
+    captureCanvasRef.current = captureCanvas;
+    captureContextRef.current = captureContext;
     return () => {
       instance.cleanup();
+      captureCanvasRef.current = null;
+      captureContextRef.current = null;
     };
-  }, [offscreenCanvas, instance]);
+  }, [instance]);
   const chainState = Internals.useEffectChainState();
   const { delayRender, continueRender } = useDelayRender();
   const draw = useCallback(async (prevImage, nextImage, progress) => {
-    if (!canvasRef.current) {
+    const outputCanvas = outputCanvasRef.current;
+    if (!outputCanvas) {
       throw new Error("Canvas not found");
     }
     const handle = delayRender("onPaint");
+    const clearOutput = () => {
+      const context = outputCanvas.getContext("2d");
+      if (!context) {
+        throw new Error("Failed to create output canvas context");
+      }
+      context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
+    };
     if (!prevImage && !nextImage) {
-      continueRender(handle);
       instance.clear();
+      clearOutput();
+      continueRender(handle);
       return;
     }
     const width = prevImage?.width ?? nextImage?.width ?? 0;
     const height = prevImage?.height ?? nextImage?.height ?? 0;
     if (width === 0 || height === 0) {
-      continueRender(handle);
       instance.clear();
+      clearOutput();
+      continueRender(handle);
       return;
     }
-    offscreenCanvas.width = width;
-    offscreenCanvas.height = height;
+    shaderCanvas.width = width;
+    shaderCanvas.height = height;
     instance.draw({
       prevImage,
       nextImage,
@@ -158,14 +198,14 @@ var HtmlInCanvasPresentation = ({
     });
     await Internals.runEffectChain({
       state: chainState.get(width, height),
-      source: offscreenCanvas,
+      source: shaderCanvas,
       effects: effectsRef.current ?? [],
       width,
       height,
-      output: canvasRef.current
+      output: outputCanvas
     });
     continueRender(handle);
-  }, [chainState, instance, offscreenCanvas, continueRender, delayRender]);
+  }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
   const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
   useLayoutEffect(() => {
     if (passThrough) {
@@ -178,11 +218,19 @@ var HtmlInCanvasPresentation = ({
     canvas.layoutSubtree = true;
     const onPaint = () => {
       const firstChild = canvas.firstChild;
-      if (!firstChild) {
+      const captureCanvas = captureCanvasRef.current;
+      const captureContext = captureContextRef.current;
+      if (!firstChild || !captureCanvas || !captureContext) {
         return;
       }
       const elementImage = canvas.captureElementImage(firstChild);
-      onElementImage(elementImage, draw);
+      try {
+        captureContext.reset();
+        captureContext.drawElementImage(elementImage, 0, 0);
+      } finally {
+        elementImage.close();
+      }
+      onElementImage(captureCanvas, draw);
     };
     canvas.addEventListener("paint", onPaint);
     return () => {
@@ -216,20 +264,39 @@ var HtmlInCanvasPresentation = ({
       return;
     }
     const observer = new ResizeObserver(([entry]) => {
-      canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
-      canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+      const outputCanvas = outputCanvasRef.current;
+      const captureCanvas = captureCanvasRef.current;
+      if (!outputCanvas || !captureCanvas) {
+        return;
+      }
+      const width = entry.devicePixelContentBoxSize[0].inlineSize;
+      const height = entry.devicePixelContentBoxSize[0].blockSize;
+      captureCanvas.width = width;
+      captureCanvas.height = height;
+      outputCanvas.width = width;
+      outputCanvas.height = height;
+      canvas.requestPaint?.();
     });
     observer.observe(canvas, { box: "device-pixel-content-box" });
+    return () => {
+      observer.disconnect();
+    };
   }, [passThrough]);
   if (passThrough) {
     return children;
   }
-  return /* @__PURE__ */ jsx2(AbsoluteFill2, {
-    children: /* @__PURE__ */ jsx2("canvas", {
-      ref: canvasRef,
-      style: canvasSubtreeStyle,
-      children
-    })
+  return /* @__PURE__ */ jsxs(AbsoluteFill2, {
+    children: [
+      /* @__PURE__ */ jsx2("canvas", {
+        ref: canvasRef,
+        style: canvasSubtreeStyle,
+        children
+      }),
+      /* @__PURE__ */ jsx2("canvas", {
+        ref: outputCanvasRef,
+        style: outputCanvasStyle
+      })
+    ]
   });
 };
 var makeHtmlInCanvasPresentation = (shader) => {
@@ -251,6 +318,11 @@ var makeHtmlInCanvasPresentation = (shader) => {
   };
 };
 
+// src/presentations/upload-element-image.ts
+var uploadElementImage = (gl, elementImage) => {
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elementImage);
+};
+
 // src/presentations/cross-zoom.tsx
 var DEFAULT_STRENGTH = 0.4;
 var VERTEX_SHADER = `#version 300 es
@@ -429,13 +501,13 @@ var crossZoomShader = (canvas) => {
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, prevTex);
     if (prevImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+      uploadElementImage(gl, prevImage);
     }
     gl.uniform1i(uPrev, 0);
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, nextTex);
     if (nextImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+      uploadElementImage(gl, nextImage);
     }
     gl.uniform1i(uNext, 1);
     gl.uniform1f(uTime, effectiveTime);
@@ -597,13 +669,13 @@ var dreamyZoomShader = (canvas) => {
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, prevTex);
     if (prevImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+      uploadElementImage(gl, prevImage);
     }
     gl.uniform1i(uPrev, 0);
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, nextTex);
     if (nextImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+      uploadElementImage(gl, nextImage);
     }
     gl.uniform1i(uNext, 1);
     gl.uniform1f(uTime, effectiveTime);
@@ -864,13 +936,13 @@ var filmBurnShader = (canvas) => {
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, prevTex);
     if (prevImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+      uploadElementImage(gl, prevImage);
     }
     gl.uniform1i(uPrev, 0);
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, nextTex);
     if (nextImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+      uploadElementImage(gl, nextImage);
     }
     gl.uniform1i(uNext, 1);
     gl.uniform1f(uTime, effectiveTime);
@@ -1029,13 +1101,13 @@ var linearBlurShader = (canvas) => {
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, prevTex);
     if (prevImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+      uploadElementImage(gl, prevImage);
     }
     gl.uniform1i(uPrev, 0);
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, nextTex);
     if (nextImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+      uploadElementImage(gl, nextImage);
     }
     gl.uniform1i(uNext, 1);
     gl.uniform1f(uTime, effectiveTime);
@@ -1153,7 +1225,7 @@ import { NoReactInternals } from "remotion/no-react";
 var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 
 // src/TransitionSeries.tsx
-import { jsx as jsx4, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
 var { SequenceWithoutSchema } = Internals2;
 var TransitionSeriesTransitionInner = ({
   stack = null,
@@ -1197,6 +1269,7 @@ var transitionSeriesSequenceSchema = {
   hidden: Internals2.sequenceSchema.hidden,
   showInTimeline: Internals2.sequenceSchema.showInTimeline,
   freeze: Internals2.freezeField,
+  trimBefore: Internals2.sequenceSchema.trimBefore,
   layout: Internals2.sequenceSchema.layout
 };
 var SeriesSequenceInner = ({
@@ -1377,7 +1450,7 @@ var TransitionSeriesChildren = ({
           _remotionInternalRender: (transitionProps) => {
             const transitionDuration = transitionProps.timing.getDurationInFrames({ fps });
             const transitionFrom = startFrame + transitionOffsets - transitionDuration;
-            return /* @__PURE__ */ jsxs(Fragment, {
+            return /* @__PURE__ */ jsxs2(Fragment, {
               children: [
                 transitionDuration > 0 ? /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
                   from: transitionFrom,
@@ -1460,7 +1533,7 @@ var TransitionSeriesChildren = ({
             }
           }
           const renderSequenceAndRest = (sequence) => {
-            return /* @__PURE__ */ jsxs(Fragment, {
+            return /* @__PURE__ */ jsxs2(Fragment, {
               children: [
                 sequence,
                 renderNext({

package/dist/esm/linear-blur.mjs

@@ -7,7 +7,7 @@ import {
   Internals,
   useDelayRender
 } from "remotion";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
   children,
   onElementImage,
@@ -23,6 +23,7 @@ var HtmlInCanvasPresentation = ({
     throw new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
   }
   const canvasRef = useRef(null);
+  const outputCanvasRef = useRef(null);
   const canvasSubtreeStyle = useMemo(() => {
     return {
       width: "100%",
@@ -34,7 +35,21 @@ var HtmlInCanvasPresentation = ({
       bottom: 0
     };
   }, []);
-  const [offscreenCanvas] = useState(() => new OffscreenCanvas(1, 1));
+  const outputCanvasStyle = useMemo(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: "none"
+    };
+  }, []);
+  const captureCanvasRef = useRef(null);
+  const captureContextRef = useRef(null);
+  const [shaderCanvas] = useState(() => new OffscreenCanvas(1, 1));
   const passedPropsRef = useRef(passedProps);
   passedPropsRef.current = passedProps;
   const memoizedEffects = Internals.useMemoizedEffects({
@@ -43,33 +58,58 @@ var HtmlInCanvasPresentation = ({
   });
   const effectsRef = useRef(memoizedEffects);
   effectsRef.current = memoizedEffects;
-  const [instance] = useState(() => shader(offscreenCanvas));
+  const [instance] = useState(() => shader(shaderCanvas));
   useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return () => {
+        instance.cleanup();
+      };
+    }
+    const captureCanvas = canvas.transferControlToOffscreen();
+    const captureContext = captureCanvas.getContext("2d");
+    if (!captureContext) {
+      throw new Error("Failed to create capture canvas context");
+    }
+    captureCanvasRef.current = captureCanvas;
+    captureContextRef.current = captureContext;
     return () => {
       instance.cleanup();
+      captureCanvasRef.current = null;
+      captureContextRef.current = null;
     };
-  }, [offscreenCanvas, instance]);
+  }, [instance]);
   const chainState = Internals.useEffectChainState();
   const { delayRender, continueRender } = useDelayRender();
   const draw = useCallback(async (prevImage, nextImage, progress) => {
-    if (!canvasRef.current) {
+    const outputCanvas = outputCanvasRef.current;
+    if (!outputCanvas) {
       throw new Error("Canvas not found");
     }
     const handle = delayRender("onPaint");
+    const clearOutput = () => {
+      const context = outputCanvas.getContext("2d");
+      if (!context) {
+        throw new Error("Failed to create output canvas context");
+      }
+      context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
+    };
     if (!prevImage && !nextImage) {
-      continueRender(handle);
       instance.clear();
+      clearOutput();
+      continueRender(handle);
       return;
     }
     const width = prevImage?.width ?? nextImage?.width ?? 0;
     const height = prevImage?.height ?? nextImage?.height ?? 0;
     if (width === 0 || height === 0) {
-      continueRender(handle);
       instance.clear();
+      clearOutput();
+      continueRender(handle);
       return;
     }
-    offscreenCanvas.width = width;
-    offscreenCanvas.height = height;
+    shaderCanvas.width = width;
+    shaderCanvas.height = height;
     instance.draw({
       prevImage,
       nextImage,
@@ -80,14 +120,14 @@ var HtmlInCanvasPresentation = ({
     });
     await Internals.runEffectChain({
       state: chainState.get(width, height),
-      source: offscreenCanvas,
+      source: shaderCanvas,
       effects: effectsRef.current ?? [],
       width,
       height,
-      output: canvasRef.current
+      output: outputCanvas
     });
     continueRender(handle);
-  }, [chainState, instance, offscreenCanvas, continueRender, delayRender]);
+  }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
   const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
   useLayoutEffect(() => {
     if (passThrough) {
@@ -100,11 +140,19 @@ var HtmlInCanvasPresentation = ({
     canvas.layoutSubtree = true;
     const onPaint = () => {
       const firstChild = canvas.firstChild;
-      if (!firstChild) {
+      const captureCanvas = captureCanvasRef.current;
+      const captureContext = captureContextRef.current;
+      if (!firstChild || !captureCanvas || !captureContext) {
         return;
       }
       const elementImage = canvas.captureElementImage(firstChild);
-      onElementImage(elementImage, draw);
+      try {
+        captureContext.reset();
+        captureContext.drawElementImage(elementImage, 0, 0);
+      } finally {
+        elementImage.close();
+      }
+      onElementImage(captureCanvas, draw);
     };
     canvas.addEventListener("paint", onPaint);
     return () => {
@@ -138,20 +186,39 @@ var HtmlInCanvasPresentation = ({
       return;
     }
     const observer = new ResizeObserver(([entry]) => {
-      canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
-      canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+      const outputCanvas = outputCanvasRef.current;
+      const captureCanvas = captureCanvasRef.current;
+      if (!outputCanvas || !captureCanvas) {
+        return;
+      }
+      const width = entry.devicePixelContentBoxSize[0].inlineSize;
+      const height = entry.devicePixelContentBoxSize[0].blockSize;
+      captureCanvas.width = width;
+      captureCanvas.height = height;
+      outputCanvas.width = width;
+      outputCanvas.height = height;
+      canvas.requestPaint?.();
     });
     observer.observe(canvas, { box: "device-pixel-content-box" });
+    return () => {
+      observer.disconnect();
+    };
   }, [passThrough]);
   if (passThrough) {
     return children;
   }
-  return /* @__PURE__ */ jsx(AbsoluteFill, {
-    children: /* @__PURE__ */ jsx("canvas", {
-      ref: canvasRef,
-      style: canvasSubtreeStyle,
-      children
-    })
+  return /* @__PURE__ */ jsxs(AbsoluteFill, {
+    children: [
+      /* @__PURE__ */ jsx("canvas", {
+        ref: canvasRef,
+        style: canvasSubtreeStyle,
+        children
+      }),
+      /* @__PURE__ */ jsx("canvas", {
+        ref: outputCanvasRef,
+        style: outputCanvasStyle
+      })
+    ]
   });
 };
 var makeHtmlInCanvasPresentation = (shader) => {
@@ -173,6 +240,11 @@ var makeHtmlInCanvasPresentation = (shader) => {
   };
 };
 
+// src/presentations/upload-element-image.ts
+var uploadElementImage = (gl, elementImage) => {
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elementImage);
+};
+
 // src/presentations/linear-blur.tsx
 var VERTEX_SHADER = `#version 300 es
 in vec2 a_pos;
@@ -317,13 +389,13 @@ var linearBlurShader = (canvas) => {
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, prevTex);
     if (prevImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+      uploadElementImage(gl, prevImage);
     }
     gl.uniform1i(uPrev, 0);
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, nextTex);
     if (nextImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+      uploadElementImage(gl, nextImage);
     }
     gl.uniform1i(uNext, 1);
     gl.uniform1f(uTime, effectiveTime);