@bendyline/squisq-video-react 2.2.9 → 2.2.11

package/dist/{chunk-NX34XGLL.js → chunk-F2XUI32B.js}

@@ -10,7 +10,7 @@ import {
   supportsWebCodecs,
   supportsWebCodecsAac,
   supportsWebCodecsH264
-} from "./chunk-2XACUF6E.js";
+} from "./chunk-KJ5RKG67.js";
 
 // src/hooks/useFrameCapture.ts
 import { createElement } from "react";
@@ -36,6 +36,11 @@ var MIME_MAP = {
 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;
+var CAPTURE_SVG_SELECTOR = "svg.block-svg";
+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]`;
 async function waitForImageDecode(image) {
   const src = image.currentSrc || image.src;
   if (!src) return;
@@ -82,14 +87,111 @@ async function waitForCaptureAssets(captureRoot, decodedImages = /* @__PURE__ */
     })
   );
 }
+function waitForCaptureVideoState(video, description, isReady, update) {
+  if (isReady()) return Promise.resolve();
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    const events = ["loadedmetadata", "durationchange", "loadeddata", "canplay", "seeked"];
+    const cleanup = () => {
+      clearTimeout(timeout);
+      clearInterval(poll);
+      events.forEach((eventName) => video.removeEventListener(eventName, check));
+      video.removeEventListener("error", fail);
+    };
+    const finish = () => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      resolve();
+    };
+    const fail = () => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      reject(
+        new Error(
+          `Video did not become ready while ${description} within 15s: ${video.currentSrc || video.src}`
+        )
+      );
+    };
+    function check() {
+      if (isReady()) finish();
+    }
+    const timeout = setTimeout(fail, CAPTURE_ASSET_TIMEOUT_MS);
+    const poll = setInterval(check, CAPTURE_VIDEO_READINESS_POLL_MS);
+    events.forEach((eventName) => video.addEventListener(eventName, check));
+    video.addEventListener("error", fail, { once: true });
+    try {
+      update?.();
+      queueMicrotask(check);
+    } catch (error) {
+      settled = true;
+      cleanup();
+      reject(error);
+    }
+  });
+}
+async function primeIndeterminateCaptureVideos(captureRoot, primedVideos = /* @__PURE__ */ new WeakSet()) {
+  const videos = Array.from(captureRoot.querySelectorAll("video")).filter(
+    (video) => !primedVideos.has(video)
+  );
+  let primedCount = 0;
+  await Promise.all(
+    videos.map(async (video) => {
+      const source = video.currentSrc || video.src;
+      if (!source) {
+        primedVideos.add(video);
+        return;
+      }
+      await waitForCaptureVideoState(
+        video,
+        "loading capture metadata",
+        () => video.readyState >= HTMLMediaElement.HAVE_METADATA
+      );
+      if (video.videoWidth <= 0 && video.videoHeight <= 0) {
+        primedVideos.add(video);
+        return;
+      }
+      if (Number.isFinite(video.duration)) {
+        primedVideos.add(video);
+        return;
+      }
+      const restoreTime = Number.isFinite(video.currentTime) ? Math.max(0, video.currentTime) : 0;
+      video.pause();
+      await waitForCaptureVideoState(
+        video,
+        "indexing an indeterminate-duration capture source",
+        () => Number.isFinite(video.duration) && video.duration > 0 && !video.seeking && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA,
+        () => {
+          video.currentTime = CAPTURE_VIDEO_END_PROBE_TIME;
+        }
+      );
+      const reachableRestoreTime = Math.min(restoreTime, video.duration);
+      await waitForCaptureVideoState(
+        video,
+        "restoring the capture source after indexing",
+        () => !video.seeking && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && Math.abs(video.currentTime - reachableRestoreTime) <= 0.01,
+        () => {
+          video.currentTime = reachableRestoreTime;
+        }
+      );
+      video.dataset.captureSequential = "true";
+      primedVideos.add(video);
+      primedCount += 1;
+    })
+  );
+  return primedCount;
+}
 function createInlineProvider(images) {
   const blobUrls = /* @__PURE__ */ new Map();
   const mimeTypes = /* @__PURE__ */ new Map();
+  const sizes = /* @__PURE__ */ new Map();
   for (const [path, buffer] of images) {
     const ext = path.split(".").pop()?.toLowerCase() ?? "";
     const mime = MIME_MAP[ext] ?? "application/octet-stream";
     blobUrls.set(path, URL.createObjectURL(new Blob([buffer], { type: mime })));
     mimeTypes.set(path, mime);
+    sizes.set(path, buffer.byteLength);
   }
   return {
     async resolveUrl(relativePath) {
@@ -99,7 +201,7 @@ function createInlineProvider(images) {
       return [...blobUrls.keys()].map((name) => ({
         name,
         mimeType: mimeTypes.get(name) ?? "application/octet-stream",
-        size: images.get(name)?.byteLength ?? 0
+        size: sizes.get(name) ?? 0
       }));
     },
     async addMedia() {
@@ -111,6 +213,7 @@ function createInlineProvider(images) {
     dispose() {
       blobUrls.forEach((url) => URL.revokeObjectURL(url));
       blobUrls.clear();
+      sizes.clear();
     }
   };
 }
@@ -201,6 +304,7 @@ function prepareScheduledVideoClones(originalRoot, clonedRoot) {
       return canvas ? [{ video, canvas }] : [];
     });
   });
+  const preparedCanvases = pairs.map(({ canvas }) => canvas);
   pairs.forEach(({ video, canvas }) => {
     canvas.className = video.className;
     canvas.style.cssText = video.style.cssText;
@@ -225,13 +329,11 @@ function prepareScheduledVideoClones(originalRoot, clonedRoot) {
         destinationHeight,
         objectFit
       );
-      const stagingCanvas = canvas.ownerDocument.createElement("canvas");
-      stagingCanvas.width = destinationWidth;
-      stagingCanvas.height = destinationHeight;
-      const stagingContext = stagingCanvas.getContext("2d");
       const context = canvas.getContext("2d");
-      if (!stagingContext || !context) return;
-      stagingContext.drawImage(
+      if (!context) return;
+      canvas.width = destinationWidth;
+      canvas.height = destinationHeight;
+      context.drawImage(
         video,
         frame.sx,
         frame.sy,
@@ -242,9 +344,6 @@ function prepareScheduledVideoClones(originalRoot, clonedRoot) {
         frame.dw,
         frame.dh
       );
-      canvas.width = destinationWidth;
-      canvas.height = destinationHeight;
-      context.drawImage(stagingCanvas, 0, 0);
       const foreignObject = canvas.closest("foreignObject");
       const svg = canvas.closest("svg");
       if (foreignObject && svg) {
@@ -275,8 +374,334 @@ function prepareScheduledVideoClones(originalRoot, clonedRoot) {
     } catch {
     }
   });
+  return preparedCanvases;
+}
+function createCaptureSvgRasterCache() {
+  return /* @__PURE__ */ new Map();
+}
+function releaseCaptureSvgRasterEntry(entry) {
+  entry.canvas.width = 0;
+  entry.canvas.height = 0;
+}
+function releaseCaptureSvgRasterCache(cache) {
+  cache.forEach(releaseCaptureSvgRasterEntry);
+  cache.clear();
+}
+function parseAbsoluteSvgLength(value) {
+  if (!value) return 0;
+  const match = /^\s*(\d+(?:\.\d+)?|\.\d+)(?:px)?\s*$/i.exec(value);
+  return match ? Number.parseFloat(match[1]) : 0;
+}
+function svgViewBoxSize(svg) {
+  const values = (svg.getAttribute("viewBox") ?? "").trim().split(/[\s,]+/).map(Number);
+  if (values.length === 4 && values.every(Number.isFinite)) {
+    return { width: Math.max(0, values[2]), height: Math.max(0, values[3]) };
+  }
+  return { width: 0, height: 0 };
+}
+function captureSvgRasterSize(clonedSvg, originalSvg) {
+  const clonedRect = clonedSvg.getBoundingClientRect();
+  const originalRect = originalSvg?.getBoundingClientRect();
+  const clonedViewBox = svgViewBoxSize(clonedSvg);
+  const originalViewBox = originalSvg ? svgViewBoxSize(originalSvg) : { width: 0, height: 0 };
+  const width = clonedRect.width || originalRect?.width || parseAbsoluteSvgLength(clonedSvg.getAttribute("width")) || (originalSvg ? parseAbsoluteSvgLength(originalSvg.getAttribute("width")) : 0) || clonedViewBox.width || originalViewBox.width;
+  const height = clonedRect.height || originalRect?.height || parseAbsoluteSvgLength(clonedSvg.getAttribute("height")) || (originalSvg ? parseAbsoluteSvgLength(originalSvg.getAttribute("height")) : 0) || clonedViewBox.height || originalViewBox.height;
+  return {
+    width: Math.max(1, Math.round(width)),
+    height: Math.max(1, Math.round(height))
+  };
+}
+function copyCaptureSvgPresentation(svg, canvas) {
+  for (const attribute of Array.from(svg.attributes)) {
+    if (attribute.name === "id" || attribute.name === "class" || attribute.name === "style" || attribute.name.startsWith("data-") || attribute.name.startsWith("aria-")) {
+      canvas.setAttribute(attribute.name, attribute.value);
+    }
+  }
+  canvas.dataset.svgCaptureClone = "true";
+}
+function captureImageMimeType(source, blob) {
+  if (blob.type) return blob.type;
+  const path = source.split(/[?#]/, 1)[0];
+  const ext = path.split(".").pop()?.toLowerCase() ?? "";
+  return MIME_MAP[ext] ?? "application/octet-stream";
+}
+function blobToDataUrl(blob, source) {
+  const typedBlob = blob.type ? blob : blob.slice(0, blob.size, captureImageMimeType(source, blob));
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener(
+      "load",
+      () => {
+        if (typeof reader.result === "string") resolve(reader.result);
+        else reject(new Error(`Image could not be embedded for SVG capture: ${source}`));
+      },
+      { once: true }
+    );
+    reader.addEventListener(
+      "error",
+      () => reject(reader.error ?? new Error(`Image could not be read for SVG capture: ${source}`)),
+      { once: true }
+    );
+    reader.readAsDataURL(typedBlob);
+  });
+}
+function resolveCaptureImageDataUrl(source, cache) {
+  const cached = cache.get(source);
+  if (cached) return cached;
+  const pending = fetch(source).then(async (response) => {
+    if (!response.ok) {
+      throw new Error(`Image could not be loaded for SVG capture: ${source}`);
+    }
+    return blobToDataUrl(await response.blob(), source);
+  });
+  cache.set(source, pending);
+  return pending;
+}
+function captureImageReference(element) {
+  if (element.localName === "img") {
+    const source2 = element.getAttribute("src") ?? "";
+    return source2 ? {
+      source: source2,
+      replace: (dataUrl) => element.setAttribute("src", dataUrl)
+    } : null;
+  }
+  const xlinkNamespace = "http://www.w3.org/1999/xlink";
+  const source = element.getAttribute("href") ?? element.getAttributeNS(xlinkNamespace, "href") ?? "";
+  return source ? {
+    source,
+    replace: (dataUrl) => {
+      if (element.hasAttribute("href")) element.setAttribute("href", dataUrl);
+      if (element.hasAttributeNS(xlinkNamespace, "href")) {
+        element.setAttributeNS(xlinkNamespace, "href", dataUrl);
+      }
+    }
+  } : null;
+}
+async function embedCaptureSvgImages(svg, cache) {
+  const references = Array.from(svg.querySelectorAll("image, img")).map(captureImageReference).filter((reference) => reference !== null);
+  for (const reference of references) {
+    if (/^data:/i.test(reference.source) || reference.source.startsWith("#")) continue;
+    const dataUrl = await resolveCaptureImageDataUrl(reference.source, cache);
+    reference.replace(dataUrl);
+  }
+}
+function captureSvgRasterCacheKey(svg, index) {
+  const blockId = svg.dataset.blockId;
+  return blockId ? `block:${blockId}` : `index:${index}`;
+}
+async function rasterizeCaptureSvgClones(originalRoot, clonedRoot, transientCanvases = [], imageDataUrls = /* @__PURE__ */ new Map(), rasterCache) {
+  const cache = rasterCache ?? createCaptureSvgRasterCache();
+  const ownsRasterCache = rasterCache === void 0;
+  const originalSvgs = Array.from(
+    originalRoot.querySelectorAll(CAPTURE_SVG_SELECTOR)
+  );
+  const clonedSvgs = Array.from(clonedRoot.querySelectorAll(CAPTURE_SVG_SELECTOR));
+  const activeCacheKeys = /* @__PURE__ */ new Set();
+  try {
+    for (const [index, svg] of clonedSvgs.entries()) {
+      const originalSvg = originalSvgs[index];
+      const { width, height } = captureSvgRasterSize(svg, originalSvg);
+      const cacheKey = captureSvgRasterCacheKey(originalSvg ?? svg, index);
+      activeCacheKeys.add(cacheKey);
+      svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+      svg.setAttribute("width", String(width));
+      svg.setAttribute("height", String(height));
+      let bitmap = null;
+      let replacement = null;
+      let image = null;
+      let rasterCanvas = null;
+      try {
+        await embedCaptureSvgImages(svg, imageDataUrls);
+        const serializedSvg = new XMLSerializer().serializeToString(svg);
+        let entry = cache.get(cacheKey);
+        if (!entry || entry.serializedSvg !== serializedSvg || entry.width !== width || entry.height !== height) {
+          const containsForeignObject = svg.querySelector("foreignObject") !== null;
+          image = svg.ownerDocument.createElement("img");
+          image.decoding = "sync";
+          image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serializedSvg)}`;
+          await waitForImageDecode(image);
+          if (!containsForeignObject && typeof createImageBitmap === "function") {
+            try {
+              bitmap = await createImageBitmap(image);
+            } catch {
+              bitmap = null;
+            }
+          }
+          rasterCanvas = entry?.canvas ?? originalRoot.ownerDocument.createElement("canvas");
+          if (rasterCanvas.width !== width || rasterCanvas.height !== height) {
+            rasterCanvas.width = width;
+            rasterCanvas.height = height;
+          }
+          const rasterContext = rasterCanvas.getContext("2d");
+          if (!rasterContext) {
+            throw new Error("Could not create the cached SVG raster canvas context");
+          }
+          rasterContext.clearRect(0, 0, width, height);
+          rasterContext.drawImage(bitmap ?? image, 0, 0, width, height);
+          entry = { serializedSvg, width, height, canvas: rasterCanvas };
+          cache.set(cacheKey, entry);
+        }
+        replacement = svg.ownerDocument.createElement("canvas");
+        replacement.width = width;
+        replacement.height = height;
+        copyCaptureSvgPresentation(svg, replacement);
+        const context = replacement.getContext("2d");
+        if (!context) {
+          throw new Error("Could not create the SVG capture canvas context");
+        }
+        context.drawImage(entry.canvas, 0, 0, width, height);
+        svg.replaceWith(replacement);
+        transientCanvases.push(replacement);
+      } catch (error) {
+        if (replacement && !replacement.isConnected) {
+          replacement.width = 0;
+          replacement.height = 0;
+        }
+        if (rasterCanvas && cache.get(cacheKey)?.canvas !== rasterCanvas) {
+          rasterCanvas.width = 0;
+          rasterCanvas.height = 0;
+        }
+        const detail = error instanceof Error ? error.message : String(error);
+        throw new Error(`Could not rasterize a full-slide SVG for frame capture: ${detail}`);
+      } finally {
+        bitmap?.close();
+        image?.removeAttribute("src");
+      }
+    }
+    for (const [cacheKey, entry] of cache) {
+      if (activeCacheKeys.has(cacheKey)) continue;
+      releaseCaptureSvgRasterEntry(entry);
+      cache.delete(cacheKey);
+    }
+    return transientCanvases;
+  } finally {
+    if (ownsRasterCache) releaseCaptureSvgRasterCache(cache);
+  }
+}
+function releaseCaptureCloneCanvases(canvases) {
+  canvases.forEach((canvas) => {
+    canvas.width = 0;
+    canvas.height = 0;
+  });
+}
+function scheduledVideoIsVisual(video) {
+  return video.videoWidth > 0 && video.videoHeight > 0 && video.dataset.active === "true";
+}
+function scheduledVideoPresentation(video) {
+  return video.closest(SCHEDULED_MEDIA_SELECTOR)?.dataset.presentation;
+}
+function canCompositeScheduledPipVideos(captureRoot) {
+  const activeVisualVideos = Array.from(
+    captureRoot.querySelectorAll(SCHEDULED_VIDEO_SELECTOR)
+  ).filter(scheduledVideoIsVisual);
+  return activeVisualVideos.length > 0 && activeVisualVideos.every((video) => scheduledVideoPresentation(video) === "picture-in-picture");
+}
+function cssPixelValue(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function cssRadius(value, width, height) {
+  if (value.trim().endsWith("%")) {
+    return cssPixelValue(value) / 100 * Math.min(width, height);
+  }
+  return cssPixelValue(value);
+}
+function applyFirstBoxShadow(context, boxShadow, scaleX, scaleY) {
+  if (!boxShadow || boxShadow === "none") return;
+  const color = boxShadow.match(/rgba?\([^)]*\)|#[0-9a-f]{3,8}\b/i)?.[0];
+  if (!color) return;
+  const lengths = Array.from(
+    boxShadow.replace(color, "").matchAll(/(-?\d+(?:\.\d+)?)px/g),
+    (match) => Number.parseFloat(match[1])
+  );
+  context.shadowColor = color;
+  context.shadowOffsetX = (lengths[0] ?? 0) * scaleX;
+  context.shadowOffsetY = (lengths[1] ?? 0) * scaleY;
+  context.shadowBlur = (lengths[2] ?? 0) * Math.max(scaleX, scaleY);
+}
+function addRoundedRect(context, x, y, width, height, radius) {
+  context.beginPath();
+  if (typeof context.roundRect === "function") {
+    context.roundRect(x, y, width, height, Math.max(0, radius));
+  } else {
+    context.rect(x, y, width, height);
+  }
 }
-function getFrameVisualStateKey(captureRoot, timelineTime) {
+function compositeScheduledPipVideos(captureRoot, destination) {
+  const context = destination.getContext("2d");
+  if (!context) throw new Error("Could not create the PiP compositor canvas context");
+  const rootRect = captureRoot.getBoundingClientRect();
+  if (rootRect.width <= 0 || rootRect.height <= 0) return 0;
+  const scaleX = destination.width / rootRect.width;
+  const scaleY = destination.height / rootRect.height;
+  const videos = Array.from(
+    captureRoot.querySelectorAll(SCHEDULED_VIDEO_SELECTOR)
+  ).filter(
+    (video) => scheduledVideoIsVisual(video) && scheduledVideoPresentation(video) === "picture-in-picture"
+  );
+  for (const video of videos) {
+    const rect = video.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) continue;
+    const style = video.ownerDocument.defaultView?.getComputedStyle(video);
+    if (!style || style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse") {
+      continue;
+    }
+    const opacity = Number.parseFloat(style.opacity || "1");
+    if (opacity <= 0) continue;
+    const borderLeft = cssPixelValue(style.borderLeftWidth);
+    const borderRight = cssPixelValue(style.borderRightWidth);
+    const borderTop = cssPixelValue(style.borderTopWidth);
+    const borderBottom = cssPixelValue(style.borderBottomWidth);
+    const contentWidth = Math.max(1, rect.width - borderLeft - borderRight);
+    const contentHeight = Math.max(1, rect.height - borderTop - borderBottom);
+    const outerX = (rect.left - rootRect.left) * scaleX;
+    const outerY = (rect.top - rootRect.top) * scaleY;
+    const outerWidth = rect.width * scaleX;
+    const outerHeight = rect.height * scaleY;
+    const innerX = outerX + borderLeft * scaleX;
+    const innerY = outerY + borderTop * scaleY;
+    const innerWidth = contentWidth * scaleX;
+    const innerHeight = contentHeight * scaleY;
+    const outerRadius = cssRadius(style.borderTopLeftRadius, rect.width, rect.height) * Math.max(scaleX, scaleY);
+    const innerRadius = Math.max(
+      0,
+      outerRadius - Math.max(borderLeft * scaleX, borderTop * scaleY)
+    );
+    const source = videoFrameRect(
+      video.videoWidth,
+      video.videoHeight,
+      contentWidth,
+      contentHeight,
+      style.objectFit || "fill"
+    );
+    context.save();
+    context.globalAlpha = Number.isFinite(opacity) ? opacity : 1;
+    applyFirstBoxShadow(context, style.boxShadow, scaleX, scaleY);
+    addRoundedRect(context, outerX, outerY, outerWidth, outerHeight, outerRadius);
+    context.fillStyle = style.borderTopStyle === "none" || borderTop <= 0 ? "rgba(0, 0, 0, 0.001)" : style.borderTopColor;
+    context.fill();
+    context.shadowColor = "rgba(0, 0, 0, 0)";
+    context.shadowBlur = 0;
+    context.shadowOffsetX = 0;
+    context.shadowOffsetY = 0;
+    addRoundedRect(context, innerX, innerY, innerWidth, innerHeight, innerRadius);
+    context.clip();
+    context.drawImage(
+      video,
+      source.sx,
+      source.sy,
+      source.sw,
+      source.sh,
+      innerX,
+      innerY,
+      innerWidth,
+      innerHeight
+    );
+    context.restore();
+  }
+  return videos.length;
+}
+function getFrameVisualStateKey(captureRoot, timelineTime, options = {}) {
   const markup = captureRoot.innerHTML;
   let needsTimelineKey = false;
   const animationStates = [];
@@ -307,7 +732,9 @@ function getFrameVisualStateKey(captureRoot, timelineTime) {
     return `${src}:${image.complete}:${image.naturalWidth}x${image.naturalHeight}`;
   });
   if (POTENTIALLY_ANIMATED_IMAGE_URL.test(markup)) needsTimelineKey = true;
-  const videoStates = Array.from(captureRoot.querySelectorAll("video")).map(
+  const videoStates = Array.from(captureRoot.querySelectorAll("video")).filter(
+    (video) => video.videoWidth > 0 && video.videoHeight > 0 && (!options.ignoreScheduledVideoFrames || !video.closest(SCHEDULED_MEDIA_SELECTOR))
+  ).map(
     (video) => `${video.currentSrc || video.src}:${finiteMediaTime(video.currentTime)}:${video.readyState}:${video.videoWidth}x${video.videoHeight}`
   );
   if (captureRoot.querySelector(
@@ -331,25 +758,35 @@ function useFrameCapture() {
   const renderAPIRef = useRef(null);
   const mediaProviderRef = useRef(null);
   const captureCanvasRef = useRef(null);
+  const captureBaseCanvasRef = useRef(null);
   const lastVisualStateKeyRef = useRef(null);
   const hasCapturedFrameRef = useRef(false);
   const decodedImagesRef = useRef(/* @__PURE__ */ new WeakSet());
+  const captureImageDataUrlsRef = useRef(/* @__PURE__ */ new Map());
+  const captureSvgRasterCacheRef = useRef(createCaptureSvgRasterCache());
+  const primedCaptureVideosRef = useRef(/* @__PURE__ */ new WeakSet());
   const dimensionsRef = useRef({ width: 1920, height: 1080 });
   const init = useCallback(
     async (doc, renderOptions, captionMode) => {
-      if (rootRef.current || containerRef.current || mediaProviderRef.current || captureCanvasRef.current) {
+      if (rootRef.current || containerRef.current || mediaProviderRef.current || captureCanvasRef.current || captureBaseCanvasRef.current) {
         const oldRoot = rootRef.current;
         const oldContainer = containerRef.current;
         const oldMediaProvider = mediaProviderRef.current;
         const oldCaptureCanvas = captureCanvasRef.current;
+        const oldCaptureBaseCanvas = captureBaseCanvasRef.current;
         rootRef.current = null;
         containerRef.current = null;
         renderAPIRef.current = null;
         mediaProviderRef.current = null;
         captureCanvasRef.current = null;
+        captureBaseCanvasRef.current = null;
         lastVisualStateKeyRef.current = null;
         hasCapturedFrameRef.current = false;
         decodedImagesRef.current = /* @__PURE__ */ new WeakSet();
+        captureImageDataUrlsRef.current.clear();
+        releaseCaptureSvgRasterCache(captureSvgRasterCacheRef.current);
+        captureSvgRasterCacheRef.current = createCaptureSvgRasterCache();
+        primedCaptureVideosRef.current = /* @__PURE__ */ new WeakSet();
         await new Promise((resolve) => {
           setTimeout(() => {
             if (oldRoot) oldRoot.unmount();
@@ -359,6 +796,10 @@ function useFrameCapture() {
               oldCaptureCanvas.width = 0;
               oldCaptureCanvas.height = 0;
             }
+            if (oldCaptureBaseCanvas) {
+              oldCaptureBaseCanvas.width = 0;
+              oldCaptureBaseCanvas.height = 0;
+            }
             resolve();
           }, 0);
         });
@@ -373,9 +814,19 @@ function useFrameCapture() {
       captureCanvas.style.width = `${width}px`;
       captureCanvas.style.height = `${height}px`;
       captureCanvasRef.current = captureCanvas;
+      const captureBaseCanvas = document.createElement("canvas");
+      captureBaseCanvas.width = width;
+      captureBaseCanvas.height = height;
+      captureBaseCanvas.style.width = `${width}px`;
+      captureBaseCanvas.style.height = `${height}px`;
+      captureBaseCanvasRef.current = captureBaseCanvas;
       lastVisualStateKeyRef.current = null;
       hasCapturedFrameRef.current = false;
       decodedImagesRef.current = /* @__PURE__ */ new WeakSet();
+      captureImageDataUrlsRef.current.clear();
+      releaseCaptureSvgRasterCache(captureSvgRasterCacheRef.current);
+      captureSvgRasterCacheRef.current = createCaptureSvgRasterCache();
+      primedCaptureVideosRef.current = /* @__PURE__ */ new WeakSet();
       const container = document.createElement("div");
       container.style.cssText = `position:fixed;left:0;top:0;width:${width}px;height:${height}px;opacity:0;pointer-events:none;z-index:-1;overflow:hidden;`;
       document.body.appendChild(container);
@@ -442,6 +893,7 @@ function useFrameCapture() {
               throw new Error("Capture root element not found after player initialization.");
             }
             await waitForCaptureAssets(captureRoot, decodedImagesRef.current);
+            await primeIndeterminateCaptureVideos(captureRoot, primedCaptureVideosRef.current);
             clearTimeout(timeout);
             resolve(api.getDuration());
           } catch (assetError) {
@@ -465,50 +917,84 @@ function useFrameCapture() {
       const container = containerRef.current;
       const api = renderAPIRef.current;
       const captureCanvas = captureCanvasRef.current;
-      if (!container || !api || !captureCanvas) {
+      const captureBaseCanvas = captureBaseCanvasRef.current;
+      if (!container || !api || !captureCanvas || !captureBaseCanvas) {
         throw new Error("Frame capture not initialized \u2014 call init() first");
       }
       const { width, height } = dimensionsRef.current;
       await api.seekTo(time);
+      const root = container.querySelector("#squisq-capture-root");
+      if (!root) {
+        throw new Error("Capture root element not found");
+      }
+      if (await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current)) {
+        await api.seekTo(time);
+      }
       const renderedTime = api.getRenderedTime();
       if (Math.abs(renderedTime - time) > RENDER_TIME_EPSILON_SECONDS) {
         throw new Error(
           `Player committed ${renderedTime.toFixed(6)}s while capture requested ${time.toFixed(6)}s.`
         );
       }
-      const root = container.querySelector("#squisq-capture-root");
-      if (!root) {
-        throw new Error("Capture root element not found");
-      }
       await waitForCaptureAssets(root, decodedImagesRef.current);
-      const visualStateKey = options.reuseIfUnchanged ? getFrameVisualStateKey(root, time) : null;
-      if (visualStateKey !== null && hasCapturedFrameRef.current && lastVisualStateKeyRef.current === visualStateKey) {
-        return captureCanvas;
-      }
-      const captureContext = captureCanvas.getContext("2d");
+      const compositePip = canCompositeScheduledPipVideos(root);
+      const visualStateKey = options.reuseIfUnchanged ? `${compositePip ? "base" : "full"}:${getFrameVisualStateKey(root, time, {
+        ignoreScheduledVideoFrames: compositePip
+      })}` : null;
+      const shouldRasterize = visualStateKey === null || !hasCapturedFrameRef.current || lastVisualStateKeyRef.current !== visualStateKey;
+      if (!shouldRasterize && !compositePip) return captureCanvas;
+      const rasterCanvas = compositePip ? captureBaseCanvas : captureCanvas;
+      const captureContext = rasterCanvas.getContext("2d");
       if (!captureContext) throw new Error("Could not create the frame capture canvas context");
-      captureContext.setTransform(1, 0, 0, 1, 0, 0);
-      captureContext.clearRect(0, 0, width, height);
-      const canvas = await html2canvas(root, {
-        canvas: captureCanvas,
-        width,
-        height,
-        scale: 1,
-        useCORS: true,
-        allowTaint: true,
-        backgroundColor: "#000000",
-        logging: false,
-        onclone: (_clonedDocument, clonedRoot) => {
-          prepareScheduledVideoClones(root, clonedRoot);
-        },
-        // html2canvas starts cloning at documentElement. Do not clone the rest
-        // of the editor/site UI on every frame; only the capture root, its
-        // ancestors, descendants, and document styles can affect this render.
-        ignoreElements: (element) => shouldIgnoreCaptureSibling(element, root)
-      });
-      hasCapturedFrameRef.current = true;
-      lastVisualStateKeyRef.current = visualStateKey;
-      return canvas;
+      if (shouldRasterize) {
+        captureContext.setTransform(1, 0, 0, 1, 0, 0);
+        captureContext.clearRect(0, 0, width, height);
+      }
+      const transientCloneCanvases = [];
+      if (shouldRasterize) {
+        try {
+          await html2canvas(root, {
+            canvas: rasterCanvas,
+            width,
+            height,
+            scale: 1,
+            useCORS: true,
+            allowTaint: true,
+            backgroundColor: "#000000",
+            logging: false,
+            onclone: async (_clonedDocument, clonedRoot) => {
+              if (compositePip) {
+                clonedRoot.querySelectorAll(SCHEDULED_MEDIA_SELECTOR).forEach((element) => element.remove());
+              }
+              transientCloneCanvases.push(...prepareScheduledVideoClones(root, clonedRoot));
+              await rasterizeCaptureSvgClones(
+                root,
+                clonedRoot,
+                transientCloneCanvases,
+                captureImageDataUrlsRef.current,
+                captureSvgRasterCacheRef.current
+              );
+            },
+            // html2canvas starts cloning at documentElement. Do not clone the rest
+            // of the editor/site UI on every frame; only the capture root, its
+            // ancestors, descendants, and document styles can affect this render.
+            ignoreElements: (element) => shouldIgnoreCaptureSibling(element, root)
+          });
+        } finally {
+          releaseCaptureCloneCanvases(transientCloneCanvases);
+        }
+        hasCapturedFrameRef.current = true;
+        lastVisualStateKeyRef.current = visualStateKey;
+      }
+      if (compositePip) {
+        const outputContext = captureCanvas.getContext("2d");
+        if (!outputContext) throw new Error("Could not create the frame output canvas context");
+        outputContext.setTransform(1, 0, 0, 1, 0, 0);
+        outputContext.clearRect(0, 0, width, height);
+        outputContext.drawImage(captureBaseCanvas, 0, 0);
+        compositeScheduledPipVideos(root, captureCanvas);
+      }
+      return captureCanvas;
     },
     []
   );
@@ -535,9 +1021,18 @@ function useFrameCapture() {
       captureCanvasRef.current.height = 0;
       captureCanvasRef.current = null;
     }
+    if (captureBaseCanvasRef.current) {
+      captureBaseCanvasRef.current.width = 0;
+      captureBaseCanvasRef.current.height = 0;
+      captureBaseCanvasRef.current = null;
+    }
     lastVisualStateKeyRef.current = null;
     hasCapturedFrameRef.current = false;
     decodedImagesRef.current = /* @__PURE__ */ new WeakSet();
+    captureImageDataUrlsRef.current.clear();
+    releaseCaptureSvgRasterCache(captureSvgRasterCacheRef.current);
+    captureSvgRasterCacheRef.current = createCaptureSvgRasterCache();
+    primedCaptureVideosRef.current = /* @__PURE__ */ new WeakSet();
     renderAPIRef.current = null;
   }, []);
   return useMemo(
@@ -828,13 +1323,41 @@ function calculateRollingFramesPerSecond(frameBoundaryTimes) {
 function releaseEncoderFrame(frame) {
   if ("close" in frame) frame.close();
 }
-function settleWithin(operation, timeoutMs, timeoutMessage, onLateResult) {
+function settleWithin(operation, timeoutMs, timeoutMessage, onLateResult, activityDocument) {
   return new Promise((resolve, reject) => {
     let settled = false;
-    const timeout = globalThis.setTimeout(() => {
+    let timeout = null;
+    const isInactive = () => activityDocument !== void 0 && activityDocument.visibilityState !== "visible";
+    const clearDeadline = () => {
+      if (timeout === null) return;
+      globalThis.clearTimeout(timeout);
+      timeout = null;
+    };
+    const cleanup = () => {
+      clearDeadline();
+      activityDocument?.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+    const fail = () => {
+      timeout = null;
+      if (settled || isInactive()) return;
       settled = true;
+      cleanup();
       reject(new Error(timeoutMessage));
-    }, timeoutMs);
+    };
+    const armDeadline = () => {
+      clearDeadline();
+      if (settled || isInactive()) return;
+      timeout = globalThis.setTimeout(fail, timeoutMs);
+    };
+    function handleVisibilityChange() {
+      if (activityDocument?.visibilityState !== "visible") {
+        clearDeadline();
+        return;
+      }
+      armDeadline();
+    }
+    activityDocument?.addEventListener("visibilitychange", handleVisibilityChange);
+    armDeadline();
     void operation.then(
       (value) => {
         if (settled) {
@@ -842,13 +1365,13 @@ function settleWithin(operation, timeoutMs, timeoutMessage, onLateResult) {
           return;
         }
         settled = true;
-        globalThis.clearTimeout(timeout);
+        cleanup();
         resolve(value);
       },
       (caught) => {
         if (settled) return;
         settled = true;
-        globalThis.clearTimeout(timeout);
+        cleanup();
         reject(caught);
       }
     );
@@ -939,6 +1462,7 @@ function useVideoExport(options = {}) {
   const [outputFormat, setOutputFormat] = useState("mp4");
   const [backend, setBackend] = useState(null);
   const [downloadUrl, setDownloadUrl] = useState(null);
+  const [outputBlob, setOutputBlob] = useState(null);
   const [fileSize, setFileSize] = useState(0);
   const [audioIncluded, setAudioIncluded] = useState(false);
   const [audioSkippedReason, setAudioSkippedReason] = useState(null);
@@ -988,6 +1512,7 @@ function useVideoExport(options = {}) {
     setOutputFormat("mp4");
     setBackend(null);
     setDownloadUrl(null);
+    setOutputBlob(null);
     setFileSize(0);
     setAudioIncluded(false);
     setAudioSkippedReason(null);
@@ -1019,6 +1544,7 @@ function useVideoExport(options = {}) {
         downloadUrlRef.current = null;
       }
       setDownloadUrl(null);
+      setOutputBlob(null);
       setFileSize(0);
       setAudioIncluded(false);
       setAudioSkippedReason(null);
@@ -1069,8 +1595,10 @@ function useVideoExport(options = {}) {
           setElapsed(Math.floor((performance.now() - startTimeRef.current) / 1e3));
         }, 1e3);
         let images = config.images;
+        let ownsLoadedImages = false;
         if (!images && config.mediaProvider) {
           images = /* @__PURE__ */ new Map();
+          ownsLoadedImages = true;
           const entries = await config.mediaProvider.listMedia();
           const references = collectDocumentMediaReferences(doc);
           const neededEntries = entries.filter(
@@ -1122,7 +1650,9 @@ function useVideoExport(options = {}) {
         const canUseWebCodecs = webCodecsAvailable && await settleWithin(
           supportsWebCodecsH264({ width, height, fps, quality }),
           ENCODER_PROBE_TIMEOUT_MS,
-          "The browser did not finish checking WebCodecs support."
+          "The browser did not finish checking WebCodecs support.",
+          void 0,
+          document
         ).catch(() => false);
         const audioBitrate = (QUALITY_PRESETS[quality] ?? QUALITY_PRESETS.normal).audioBitrate;
         const timeline = effectiveOutputFormat === "mp4" && audioPolicy !== "omit" ? computeAudioTimeline(doc, coverFrameCount / fps) : [];
@@ -1148,29 +1678,33 @@ function useVideoExport(options = {}) {
               mediaProvider: config.mediaProvider,
               resourcePolicy: config.resourcePolicy
             });
-            const missingSources = [...new Set(timeline.map((clip) => clip.src))].filter(
-              (src) => !buffers.has(src)
-            );
-            if (missingSources.length > 0) {
-              audioReasonLocal = `Audio files could not be loaded: ${missingSources.join(", ")}`;
-              if (audioPolicy === "require") throw new Error(audioReasonLocal);
-            }
-            if (buffers.size === 0) {
-              audioReasonLocal ?? (audioReasonLocal = "Audio files for this document could not be loaded.");
-            } else {
-              const totalAudioDur = timeline.reduce(
-                (max, c) => Math.max(max, c.startSec + c.durationSec),
-                exportDuration
-              );
-              renderedAudio = await renderAudioTimeline(
-                timeline,
-                buffers,
-                totalAudioDur,
-                EXPORT_AUDIO_SAMPLE_RATE
+            try {
+              const missingSources = [...new Set(timeline.map((clip) => clip.src))].filter(
+                (src) => !buffers.has(src)
               );
-              if (!renderedAudio) {
-                audioReasonLocal = "No included video source contained a decodable audio track.";
+              if (missingSources.length > 0) {
+                audioReasonLocal = `Audio files could not be loaded: ${missingSources.join(", ")}`;
+                if (audioPolicy === "require") throw new Error(audioReasonLocal);
+              }
+              if (buffers.size === 0) {
+                audioReasonLocal ?? (audioReasonLocal = "Audio files for this document could not be loaded.");
+              } else {
+                const totalAudioDur = timeline.reduce(
+                  (max, c) => Math.max(max, c.startSec + c.durationSec),
+                  exportDuration
+                );
+                renderedAudio = await renderAudioTimeline(
+                  timeline,
+                  buffers,
+                  totalAudioDur,
+                  EXPORT_AUDIO_SAMPLE_RATE
+                );
+                if (!renderedAudio) {
+                  audioReasonLocal = "No included video source contained a decodable audio track.";
+                }
               }
+            } finally {
+              buffers.clear();
             }
           } catch (audioErr) {
             renderedAudio = null;
@@ -1213,7 +1747,9 @@ function useVideoExport(options = {}) {
           const selectedBackend = await settleWithin(
             workerEncoder.ready,
             ENCODER_START_TIMEOUT_MS,
-            "The browser export engine did not start within 60 seconds."
+            "The browser export engine did not start within 60 seconds.",
+            void 0,
+            document
           );
           setBackend(selectedBackend);
         } else {
@@ -1221,6 +1757,25 @@ function useVideoExport(options = {}) {
             "WebCodecs H.264 is unavailable in this browser and the ffmpeg.wasm fallback requires SharedArrayBuffer (Cross-Origin-Isolation headers)."
           );
         }
+        if (useInlineAudio && renderedAudio && encoder.addAudioChunk) {
+          setPhase("Encoding audio\u2026");
+          try {
+            await encodeAacTrack(
+              renderedAudio,
+              { addAudioChunk: encoder.addAudioChunk.bind(encoder) },
+              audioBitrate
+            );
+            audioIncludedLocal = true;
+          } catch (audioErr) {
+            audioIncludedLocal = false;
+            audioReasonLocal = `Audio encoding failed: ${audioErr instanceof Error ? audioErr.message : String(audioErr)}`;
+            if (audioPolicy === "require") throw new Error(audioReasonLocal);
+          } finally {
+            renderedAudio = null;
+          }
+        }
+        if (ownsLoadedImages) images?.clear();
+        images = void 0;
         if (cancelledRef.current) return;
         setProgress(CAPTURE_PROGRESS_START);
         setPhase(`Capturing frame 1/${totalFrames}`);
@@ -1241,7 +1796,8 @@ function useVideoExport(options = {}) {
             captureOperation,
             FRAME_CAPTURE_TIMEOUT_MS,
             `Frame capture stopped responding at frame ${i + 1}/${totalFrames}.`,
-            releaseEncoderFrame
+            releaseEncoderFrame,
+            document
           );
           if (cancelledRef.current) {
             releaseEncoderFrame(frame);
@@ -1260,7 +1816,9 @@ function useVideoExport(options = {}) {
           await settleWithin(
             encoder.encodeFrame(frame, i),
             FRAME_ENCODE_TIMEOUT_MS,
-            `Video encoding stopped responding at frame ${i + 1}/${totalFrames}.`
+            `Video encoding stopped responding at frame ${i + 1}/${totalFrames}.`,
+            void 0,
+            document
           );
           const completedFrames = i + 1;
           const completedAt = performance.now();
@@ -1282,31 +1840,15 @@ function useVideoExport(options = {}) {
           setElapsed(Math.floor((performance.now() - startTimeRef.current) / 1e3));
         }
         if (cancelledRef.current) return;
-        if (useInlineAudio && renderedAudio && encoder.addAudioChunk) {
-          setState("encoding");
-          setPhase("Encoding audio\u2026");
-          try {
-            await encodeAacTrack(
-              renderedAudio,
-              { addAudioChunk: encoder.addAudioChunk.bind(encoder) },
-              audioBitrate
-            );
-            audioIncludedLocal = true;
-          } catch (audioErr) {
-            audioIncludedLocal = false;
-            audioReasonLocal = `Audio encoding failed: ${audioErr instanceof Error ? audioErr.message : String(audioErr)}`;
-            if (audioPolicy === "require") throw new Error(audioReasonLocal);
-          }
-        }
         setState("encoding");
         setPhase(effectiveOutputFormat === "gif" ? "Finalizing GIF frames\u2026" : "Finalizing video\u2026");
         setProgress(95);
-        let outputBytes = await encoder.finalize();
+        let outputBytes = effectiveOutputFormat === "mp4" && !useFfmpegAudio && encoder.finalizeBlob ? await encoder.finalizeBlob() : await encoder.finalize();
         encoderRef.current = null;
         if (cancelledRef.current) return;
         if (effectiveOutputFormat === "gif") {
           setPhase("Generating GIF palette\u2026");
-          const videoOnly = outputBytes instanceof Uint8Array ? outputBytes : new Uint8Array(outputBytes);
+          const videoOnly = outputBytes instanceof Blob ? new Uint8Array(await outputBytes.arrayBuffer()) : outputBytes instanceof Uint8Array ? outputBytes : new Uint8Array(outputBytes);
           const gifAbort = new AbortController();
           gifAbortRef.current = gifAbort;
           try {
@@ -1323,7 +1865,7 @@ function useVideoExport(options = {}) {
           setPhase("Muxing audio\u2026");
           try {
             const wav = audioBufferToWav(renderedAudio);
-            const videoOnly = outputBytes instanceof Uint8Array ? outputBytes : new Uint8Array(outputBytes);
+            const videoOnly = outputBytes instanceof Blob ? new Uint8Array(await outputBytes.arrayBuffer()) : outputBytes instanceof Uint8Array ? outputBytes : new Uint8Array(outputBytes);
             outputBytes = await muxAudioWithFfmpegWasm(
               videoOnly,
               wav,
@@ -1338,13 +1880,18 @@ function useVideoExport(options = {}) {
           }
         }
         if (cancelledRef.current) return;
-        const finalBytes = outputBytes instanceof Uint8Array ? outputBytes.slice() : new Uint8Array(outputBytes);
         const mimeType = effectiveOutputFormat === "gif" ? "image/gif" : "video/mp4";
-        const blob = new Blob([finalBytes], { type: mimeType });
+        const blob = outputBytes instanceof Blob ? outputBytes : new Blob(
+          [
+            outputBytes instanceof Uint8Array ? outputBytes.slice() : new Uint8Array(outputBytes)
+          ],
+          { type: mimeType }
+        );
         const url = URL.createObjectURL(blob);
         downloadUrlRef.current = url;
         setDownloadUrl(url);
-        setFileSize(finalBytes.byteLength);
+        setOutputBlob(blob);
+        setFileSize(blob.size);
         setAudioIncluded(audioIncludedLocal);
         setAudioSkippedReason(
           effectiveOutputFormat === "gif" || audioIncludedLocal ? null : audioReasonLocal
@@ -1383,6 +1930,7 @@ function useVideoExport(options = {}) {
     outputFormat,
     backend,
     downloadUrl,
+    outputBlob,
     fileSize,
     audioIncluded,
     audioSkippedReason,