@bendyline/squisq-video-react 2.3.1 → 2.3.3

package/dist/{chunk-CRXJOZSH.js → chunk-FX5CHFGY.js}

@@ -1,6 +1,6 @@
 import {
   useVideoExport
-} from "./chunk-U3RSDWQL.js";
+} from "./chunk-UXTYD6U5.js";
 
 // src/VideoExportModal.tsx
 import { useState, useCallback, useId, useRef } from "react";

package/dist/{chunk-YTEDBL6F.js → chunk-I5PNMCSZ.js}

@@ -27,6 +27,8 @@ var CAPTURE_VIDEO_READINESS_POLL_MS = 16;
 var CAPTURE_VIDEO_END_PROBE_TIME = 1e101;
 var SCHEDULED_MEDIA_SELECTOR = ".doc-player__media-clips";
 var SCHEDULED_VIDEO_SELECTOR = `${SCHEDULED_MEDIA_SELECTOR} video[data-clip-id]`;
+var CAPTION_OVERLAY_SELECTOR = ".caption-overlay, .social-caption-overlay";
+var COVER_BLOCK_SELECTOR = ".doc-player__block--cover";
 async function waitForImageDecode(image) {
   const src = image.currentSrc || image.src;
   if (!src) return;
@@ -144,6 +146,7 @@ async function primeIndeterminateCaptureVideos(captureRoot, primedVideos = /* @_
         return;
       }
       if (Number.isFinite(video.duration)) {
+        video.dataset.captureSequential = "true";
         primedVideos.add(video);
         return;
       }
@@ -581,7 +584,7 @@ function scheduledVideoIsVisual(video) {
 function scheduledVideoPresentation(video) {
   return video.closest(SCHEDULED_MEDIA_SELECTOR)?.dataset.presentation;
 }
-function planScheduledVideoComposite(captureRoot) {
+function planScheduledVideoComposite(captureRoot, options = {}) {
   const activeVideos = Array.from(
     captureRoot.querySelectorAll(SCHEDULED_VIDEO_SELECTOR)
   ).filter(scheduledVideoIsVisual);
@@ -592,21 +595,60 @@ function planScheduledVideoComposite(captureRoot) {
     const presentation = scheduledVideoPresentation(video);
     if (presentation === "background") underlays.push(video);
     else if (presentation === "picture-in-picture") overlays.push(video);
-    else return null;
+    else if (presentation === "full-frame" && options.includeFullFrameOverlays) {
+      overlays.push(video);
+    } else return null;
   }
   return { underlays, overlays };
 }
-function clearScheduledUnderlayBackdrops(clonedRoot) {
-  const groups = clonedRoot.querySelectorAll(
-    `${SCHEDULED_MEDIA_SELECTOR}[data-presentation="background"]`
-  );
-  for (const group of Array.from(groups)) {
-    for (let element = group.parentElement; element; element = element === clonedRoot ? null : element.parentElement) {
+function resolveScheduledVideoCompositePlan(captureRoot, options = {}) {
+  const plan = planScheduledVideoComposite(captureRoot, options);
+  if (!plan) return null;
+  if (captureRoot.querySelector(COVER_BLOCK_SELECTOR)) {
+    return { underlays: [], overlays: [] };
+  }
+  return plan;
+}
+function clearAncestorBackdropsFor(clonedRoot, targets) {
+  for (const target of targets) {
+    for (let element = target.parentElement; element; element = element === clonedRoot ? null : element.parentElement) {
       element.style.backgroundColor = "transparent";
       element.style.backgroundImage = "none";
     }
   }
 }
+function clearScheduledUnderlayBackdrops(clonedRoot) {
+  clearAncestorBackdropsFor(
+    clonedRoot,
+    Array.from(
+      clonedRoot.querySelectorAll(
+        `${SCHEDULED_MEDIA_SELECTOR}[data-presentation="background"]`
+      )
+    )
+  );
+}
+function getCaptureCaptionOverlays(captureRoot) {
+  return Array.from(captureRoot.querySelectorAll(CAPTION_OVERLAY_SELECTOR));
+}
+function clearCaptionOverlayBackdrops(clonedRoot) {
+  clearAncestorBackdropsFor(clonedRoot, getCaptureCaptionOverlays(clonedRoot));
+}
+function shouldIgnoreCaptureCaptionSibling(element, captureRoot, captionOverlays) {
+  if (shouldIgnoreCaptureSibling(element, captureRoot)) return true;
+  if (element === captureRoot || element.contains(captureRoot)) return false;
+  if (!captureRoot.contains(element)) return false;
+  return !captionOverlays.some(
+    (overlay) => overlay === element || overlay.contains(element) || element.contains(overlay)
+  );
+}
+function getCaptionLayerStateKey(captionOverlays, ownerDocument, width, height) {
+  return JSON.stringify({
+    markup: captionOverlays.map((overlay) => overlay.outerHTML),
+    fontStatus: ownerDocument.fonts?.status ?? "unsupported",
+    width,
+    height
+  });
+}
 function cssPixelValue(value) {
   const parsed = Number.parseFloat(value);
   return Number.isFinite(parsed) ? parsed : 0;
@@ -773,6 +815,9 @@ function useFrameCapture() {
   const captureSvgRasterCacheRef = useRef(createCaptureSvgRasterCache());
   const primedCaptureVideosRef = useRef(/* @__PURE__ */ new WeakSet());
   const dimensionsRef = useRef({ width: 1920, height: 1080 });
+  const captionLayerCanvasRef = useRef(null);
+  const captionLayerKeyRef = useRef(null);
+  const captionLayerHasContentRef = useRef(false);
   const init = useCallback(
     async (doc, renderOptions, captionMode) => {
       if (rootRef.current || containerRef.current || mediaProviderRef.current || captureCanvasRef.current || captureBaseCanvasRef.current) {
@@ -782,6 +827,7 @@ function useFrameCapture() {
         const oldOwnsMediaProvider = ownsMediaProviderRef.current;
         const oldCaptureCanvas = captureCanvasRef.current;
         const oldCaptureBaseCanvas = captureBaseCanvasRef.current;
+        const oldCaptionLayerCanvas = captionLayerCanvasRef.current;
         rootRef.current = null;
         containerRef.current = null;
         renderAPIRef.current = null;
@@ -789,6 +835,9 @@ function useFrameCapture() {
         ownsMediaProviderRef.current = false;
         captureCanvasRef.current = null;
         captureBaseCanvasRef.current = null;
+        captionLayerCanvasRef.current = null;
+        captionLayerKeyRef.current = null;
+        captionLayerHasContentRef.current = false;
         lastVisualStateKeyRef.current = null;
         hasCapturedFrameRef.current = false;
         decodedImagesRef.current = /* @__PURE__ */ new WeakSet();
@@ -809,6 +858,10 @@ function useFrameCapture() {
               oldCaptureBaseCanvas.width = 0;
               oldCaptureBaseCanvas.height = 0;
             }
+            if (oldCaptionLayerCanvas) {
+              oldCaptionLayerCanvas.width = 0;
+              oldCaptionLayerCanvas.height = 0;
+            }
             resolve();
           }, 0);
         });
@@ -829,6 +882,8 @@ function useFrameCapture() {
       captureBaseCanvas.style.width = `${width}px`;
       captureBaseCanvas.style.height = `${height}px`;
       captureBaseCanvasRef.current = captureBaseCanvas;
+      captionLayerKeyRef.current = null;
+      captionLayerHasContentRef.current = false;
       lastVisualStateKeyRef.current = null;
       hasCapturedFrameRef.current = false;
       decodedImagesRef.current = /* @__PURE__ */ new WeakSet();
@@ -956,7 +1011,9 @@ function useFrameCapture() {
         );
       }
       await waitForCaptureAssets(root, decodedImagesRef.current);
-      const compositePlan = planScheduledVideoComposite(root);
+      const compositePlan = resolveScheduledVideoCompositePlan(root, {
+        includeFullFrameOverlays: true
+      });
       const hasUnderlays = compositePlan !== null && compositePlan.underlays.length > 0;
       const rasterMode = compositePlan ? hasUnderlays ? "base-underlay" : "base" : "full";
       const visualStateKey = options.reuseIfUnchanged ? `${rasterMode}:${getFrameVisualStateKey(root, time, {
@@ -990,6 +1047,7 @@ function useFrameCapture() {
               if (compositePlan) {
                 if (hasUnderlays) clearScheduledUnderlayBackdrops(clonedRoot);
                 clonedRoot.querySelectorAll(SCHEDULED_MEDIA_SELECTOR).forEach((element) => element.remove());
+                clonedRoot.querySelectorAll(CAPTION_OVERLAY_SELECTOR).forEach((element) => element.remove());
               }
               transientCloneCanvases.push(...prepareScheduledVideoClones(root, clonedRoot));
               await rasterizeCaptureSvgClones(
@@ -1021,6 +1079,64 @@ function useFrameCapture() {
         drawScheduledVideosOnto(captureCanvas, root, compositePlan.underlays);
         outputContext.drawImage(captureBaseCanvas, 0, 0);
         drawScheduledVideosOnto(captureCanvas, root, compositePlan.overlays);
+        const captionOverlays = getCaptureCaptionOverlays(root);
+        if (captionOverlays.length > 0) {
+          const hasCaptionText = captionOverlays.some(
+            (overlay) => (overlay.textContent ?? "").trim().length > 0
+          );
+          const captionKey = getCaptionLayerStateKey(
+            captionOverlays,
+            root.ownerDocument,
+            width,
+            height
+          );
+          if (captionLayerKeyRef.current !== captionKey) {
+            if (hasCaptionText) {
+              let captionCanvas = captionLayerCanvasRef.current;
+              if (!captionCanvas) {
+                captionCanvas = document.createElement("canvas");
+                captionLayerCanvasRef.current = captionCanvas;
+              }
+              if (captionCanvas.width !== width || captionCanvas.height !== height) {
+                captionCanvas.width = width;
+                captionCanvas.height = height;
+              }
+              const captionContext = captionCanvas.getContext("2d");
+              if (!captionContext) {
+                throw new Error("Could not create the caption layer canvas context");
+              }
+              captionContext.setTransform(1, 0, 0, 1, 0, 0);
+              captionContext.clearRect(0, 0, width, height);
+              await html2canvas(root, {
+                canvas: captionCanvas,
+                width,
+                height,
+                scale: 1,
+                useCORS: true,
+                allowTaint: true,
+                backgroundColor: null,
+                logging: false,
+                onclone: (_clonedDocument, clonedRoot) => {
+                  clearCaptionOverlayBackdrops(clonedRoot);
+                },
+                ignoreElements: (element) => shouldIgnoreCaptureCaptionSibling(element, root, captionOverlays)
+              });
+            }
+            captionLayerKeyRef.current = captionKey;
+            captionLayerHasContentRef.current = hasCaptionText;
+          }
+          if (captionLayerHasContentRef.current && captionLayerCanvasRef.current) {
+            const overlayOpacity = Number.parseFloat(
+              root.ownerDocument.defaultView?.getComputedStyle(captionOverlays[0]).opacity ?? "1"
+            );
+            if (!Number.isFinite(overlayOpacity) || overlayOpacity > 0) {
+              outputContext.save();
+              outputContext.globalAlpha = Number.isFinite(overlayOpacity) ? overlayOpacity : 1;
+              outputContext.drawImage(captionLayerCanvasRef.current, 0, 0);
+              outputContext.restore();
+            }
+          }
+        }
       }
       return captureCanvas;
     },
@@ -1055,6 +1171,13 @@ function useFrameCapture() {
       captureBaseCanvasRef.current.height = 0;
       captureBaseCanvasRef.current = null;
     }
+    if (captionLayerCanvasRef.current) {
+      captionLayerCanvasRef.current.width = 0;
+      captionLayerCanvasRef.current.height = 0;
+      captionLayerCanvasRef.current = null;
+    }
+    captionLayerKeyRef.current = null;
+    captionLayerHasContentRef.current = false;
     lastVisualStateKeyRef.current = null;
     hasCapturedFrameRef.current = false;
     decodedImagesRef.current = /* @__PURE__ */ new WeakSet();

package/dist/{chunk-U3RSDWQL.js → chunk-UXTYD6U5.js}

@@ -1,6 +1,6 @@
 import {
   useFrameCapture
-} from "./chunk-YTEDBL6F.js";
+} from "./chunk-I5PNMCSZ.js";
 import {
   EXPORT_AUDIO_CHANNELS,
   EXPORT_AUDIO_SAMPLE_RATE,

package/dist/{chunk-NTRCMTCF.js → chunk-YZN7URUB.js}

@@ -1,6 +1,6 @@
 import {
   useFrameCapture
-} from "./chunk-YTEDBL6F.js";
+} from "./chunk-I5PNMCSZ.js";
 
 // src/CoverImageExportModal.tsx
 import { useCallback, useId, useRef, useState } from "react";

package/dist/components/index.js

@@ -1,14 +1,14 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "../chunk-CRXJOZSH.js";
+} from "../chunk-FX5CHFGY.js";
 import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "../chunk-NTRCMTCF.js";
-import "../chunk-U3RSDWQL.js";
-import "../chunk-YTEDBL6F.js";
+} from "../chunk-YZN7URUB.js";
+import "../chunk-UXTYD6U5.js";
+import "../chunk-I5PNMCSZ.js";
 import "../chunk-32QCPFXE.js";
 import "../chunk-5MFQMJ5Z.js";
 export {

package/dist/cover-image/index.js

@@ -2,8 +2,8 @@ import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "../chunk-NTRCMTCF.js";
-import "../chunk-YTEDBL6F.js";
+} from "../chunk-YZN7URUB.js";
+import "../chunk-I5PNMCSZ.js";
 export {
   CoverImageExportModal,
   coverImageFilename,

package/dist/hooks/index.js

@@ -3,10 +3,10 @@ import {
   resolveVideoCoverFramePlan,
   resolveVideoExportCover,
   useVideoExport
-} from "../chunk-U3RSDWQL.js";
+} from "../chunk-UXTYD6U5.js";
 import {
   useFrameCapture
-} from "../chunk-YTEDBL6F.js";
+} from "../chunk-I5PNMCSZ.js";
 import "../chunk-32QCPFXE.js";
 import "../chunk-5MFQMJ5Z.js";
 export {

package/dist/index.js

@@ -1,21 +1,21 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "./chunk-CRXJOZSH.js";
+} from "./chunk-FX5CHFGY.js";
 import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "./chunk-NTRCMTCF.js";
+} from "./chunk-YZN7URUB.js";
 import {
   DEFAULT_VIDEO_COVER_PRE_ROLL_SECONDS,
   resolveVideoCoverFramePlan,
   resolveVideoExportCover,
   useVideoExport
-} from "./chunk-U3RSDWQL.js";
+} from "./chunk-UXTYD6U5.js";
 import {
   useFrameCapture
-} from "./chunk-YTEDBL6F.js";
+} from "./chunk-I5PNMCSZ.js";
 import {
   createEncoder,
   supportsWebCodecs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-video-react",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "description": "React components for browser-based MP4 and animated-GIF export of Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -69,9 +69,9 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.6.0",
-    "@bendyline/squisq-video": "2.2.10",
-    "@bendyline/squisq-react": "2.6.0",
+    "@bendyline/squisq": "2.7.1",
+    "@bendyline/squisq-video": "2.2.12",
+    "@bendyline/squisq-react": "2.7.1",
     "@ffmpeg/core": "0.12.9",
     "@ffmpeg/ffmpeg": "0.12.15",
     "@ffmpeg/util": "0.12.2",