@bendyline/squisq-video-react 2.3.2 → 2.3.4

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

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

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

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

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

@@ -19,6 +19,7 @@ var MIME_MAP = {
   mp4: "video/mp4",
   webm: "video/webm"
 };
+var VISUAL_UPDATE_FALLBACK_MS = 100;
 var CAPTURE_ASSET_TIMEOUT_MS = 15e3;
 var RENDER_TIME_EPSILON_SECONDS = 1e-6;
 var POTENTIALLY_ANIMATED_IMAGE_URL = /(?:^data:image\/(?:gif|webp|avif)[;,]|\.(?:gif|webp|avif)(?:[?#]|$))/i;
@@ -27,6 +28,33 @@ 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";
+function waitForVisualUpdate(frameCount = 1) {
+  return new Promise((resolve) => {
+    let settled = false;
+    let animationFrame = null;
+    const finish = () => {
+      if (settled) return;
+      settled = true;
+      window.clearTimeout(fallback);
+      if (animationFrame !== null) window.cancelAnimationFrame(animationFrame);
+      resolve();
+    };
+    const fallback = window.setTimeout(
+      finish,
+      document.visibilityState === "visible" ? VISUAL_UPDATE_FALLBACK_MS : 0
+    );
+    if (document.visibilityState !== "visible") return;
+    const waitForFrame = (remaining) => {
+      animationFrame = window.requestAnimationFrame(() => {
+        if (remaining <= 1) finish();
+        else waitForFrame(remaining - 1);
+      });
+    };
+    waitForFrame(Math.max(1, frameCount));
+  });
+}
 async function waitForImageDecode(image) {
   const src = image.currentSrc || image.src;
   if (!src) return;
@@ -144,6 +172,7 @@ async function primeIndeterminateCaptureVideos(captureRoot, primedVideos = /* @_
         return;
       }
       if (Number.isFinite(video.duration)) {
+        video.dataset.captureSequential = "true";
         primedVideos.add(video);
         return;
       }
@@ -208,6 +237,50 @@ function createInlineProvider(images) {
     }
   };
 }
+function createCaptureMediaResolutionTracker(provider) {
+  const pending = /* @__PURE__ */ new Set();
+  let resolutionGeneration = 0;
+  let observedGeneration = 0;
+  const trackedProvider = {
+    resolveUrl(relativePath) {
+      resolutionGeneration += 1;
+      const resolution = provider.resolveUrl(relativePath);
+      const completion = resolution.then(
+        () => {
+          pending.delete(completion);
+        },
+        () => {
+          pending.delete(completion);
+        }
+      );
+      pending.add(completion);
+      return resolution;
+    },
+    listMedia: () => provider.listMedia(),
+    addMedia: (name, data, mimeType) => provider.addMedia(name, data, mimeType),
+    removeMedia: (relativePath) => provider.removeMedia(relativePath),
+    // The frame-capture hook retains ownership of inline providers and callers
+    // retain ownership of supplied providers. Context consumers must never
+    // dispose the wrapper and accidentally revoke the caller's live URLs.
+    dispose: () => void 0
+  };
+  return {
+    provider: trackedProvider,
+    async waitForSettled() {
+      while (pending.size > 0) {
+        await Promise.all([...pending]);
+      }
+      const changed = resolutionGeneration !== observedGeneration;
+      observedGeneration = resolutionGeneration;
+      return changed;
+    }
+  };
+}
+async function waitForCaptureMediaResolutions(tracker) {
+  while (await tracker?.waitForSettled()) {
+    await waitForVisualUpdate();
+  }
+}
 function shouldIgnoreCaptureSibling(element, captureRoot) {
   const { head } = captureRoot.ownerDocument;
   const isInDocumentHead = element === head || head.contains(element);
@@ -581,7 +654,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 +665,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;
@@ -763,6 +875,7 @@ function useFrameCapture() {
   const rootRef = useRef(null);
   const renderAPIRef = useRef(null);
   const mediaProviderRef = useRef(null);
+  const mediaResolutionTrackerRef = useRef(null);
   const ownsMediaProviderRef = useRef(false);
   const captureCanvasRef = useRef(null);
   const captureBaseCanvasRef = useRef(null);
@@ -773,6 +886,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,13 +898,18 @@ 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;
         mediaProviderRef.current = null;
+        mediaResolutionTrackerRef.current = null;
         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 +930,10 @@ function useFrameCapture() {
               oldCaptureBaseCanvas.width = 0;
               oldCaptureBaseCanvas.height = 0;
             }
+            if (oldCaptionLayerCanvas) {
+              oldCaptionLayerCanvas.width = 0;
+              oldCaptionLayerCanvas.height = 0;
+            }
             resolve();
           }, 0);
         });
@@ -829,6 +954,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();
@@ -846,6 +973,8 @@ function useFrameCapture() {
       container.appendChild(renderRoot);
       const mediaProvider = renderOptions.images ? createInlineProvider(renderOptions.images) : renderOptions.mediaProvider ?? null;
       mediaProviderRef.current = mediaProvider;
+      const mediaResolutionTracker = mediaProvider ? createCaptureMediaResolutionTracker(mediaProvider) : null;
+      mediaResolutionTrackerRef.current = mediaResolutionTracker;
       ownsMediaProviderRef.current = !!renderOptions.images;
       const root = createRoot(renderRoot);
       rootRef.current = root;
@@ -880,7 +1009,13 @@ function useFrameCapture() {
       });
       await new Promise((resolve) => setTimeout(resolve, 0));
       if (mediaProvider) {
-        root.render(createElement(MediaContext.Provider, { value: mediaProvider }, playerElement));
+        root.render(
+          createElement(
+            MediaContext.Provider,
+            { value: mediaResolutionTracker.provider },
+            playerElement
+          )
+        );
       } else {
         root.render(playerElement);
       }
@@ -903,6 +1038,7 @@ function useFrameCapture() {
             if (!(captureRoot instanceof HTMLElement)) {
               throw new Error("Capture root element not found after player initialization.");
             }
+            await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current);
             await waitForCaptureAssets(captureRoot, decodedImagesRef.current);
             await primeIndeterminateCaptureVideos(captureRoot, primedCaptureVideosRef.current);
             clearTimeout(timeout);
@@ -955,8 +1091,11 @@ function useFrameCapture() {
           `Player committed ${renderedTime.toFixed(6)}s while capture requested ${time.toFixed(6)}s.`
         );
       }
+      await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current);
       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 +1129,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 +1161,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;
     },
@@ -1044,6 +1242,7 @@ function useFrameCapture() {
     }
     if (ownsMediaProviderRef.current) mediaProviderRef.current?.dispose();
     mediaProviderRef.current = null;
+    mediaResolutionTrackerRef.current = null;
     ownsMediaProviderRef.current = false;
     if (captureCanvasRef.current) {
       captureCanvasRef.current.width = 0;
@@ -1055,6 +1254,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-NTRCMTCF.js → chunk-ZMDTR472.js}

@@ -1,6 +1,6 @@
 import {
   useFrameCapture
-} from "./chunk-YTEDBL6F.js";
+} from "./chunk-UYJ7G34U.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-J2O4TPEO.js";
 import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "../chunk-NTRCMTCF.js";
-import "../chunk-U3RSDWQL.js";
-import "../chunk-YTEDBL6F.js";
+} from "../chunk-ZMDTR472.js";
+import "../chunk-DIWB5BH4.js";
+import "../chunk-UYJ7G34U.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-ZMDTR472.js";
+import "../chunk-UYJ7G34U.js";
 export {
   CoverImageExportModal,
   coverImageFilename,

package/dist/hooks/index.js

@@ -3,10 +3,10 @@ import {
   resolveVideoCoverFramePlan,
   resolveVideoExportCover,
   useVideoExport
-} from "../chunk-U3RSDWQL.js";
+} from "../chunk-DIWB5BH4.js";
 import {
   useFrameCapture
-} from "../chunk-YTEDBL6F.js";
+} from "../chunk-UYJ7G34U.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-J2O4TPEO.js";
 import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "./chunk-NTRCMTCF.js";
+} from "./chunk-ZMDTR472.js";
 import {
   DEFAULT_VIDEO_COVER_PRE_ROLL_SECONDS,
   resolveVideoCoverFramePlan,
   resolveVideoExportCover,
   useVideoExport
-} from "./chunk-U3RSDWQL.js";
+} from "./chunk-DIWB5BH4.js";
 import {
   useFrameCapture
-} from "./chunk-YTEDBL6F.js";
+} from "./chunk-UYJ7G34U.js";
 import {
   createEncoder,
   supportsWebCodecs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-video-react",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "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.7.0",
-    "@bendyline/squisq-video": "2.2.11",
-    "@bendyline/squisq-react": "2.7.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",