@bendyline/squisq-video-react 2.2.10 → 2.3.0

package/dist/chunk-YTEDBL6F.js

@@ -0,0 +1,1075 @@
+// src/hooks/useFrameCapture.ts
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { useRef, useCallback, useMemo } from "react";
+import { DocPlayer, MediaContext } from "@bendyline/squisq-react";
+import html2canvas from "html2canvas";
+var MIME_MAP = {
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  webp: "image/webp",
+  svg: "image/svg+xml",
+  bmp: "image/bmp",
+  avif: "image/avif",
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  mp4: "video/mp4",
+  webm: "video/webm"
+};
+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;
+  const decoded = typeof image.decode === "function" ? image.decode() : new Promise((resolve, reject) => {
+    if (image.complete) {
+      if (image.naturalWidth > 0) resolve();
+      else reject(new Error(`Image could not be decoded: ${src}`));
+      return;
+    }
+    image.addEventListener("load", () => resolve(), { once: true });
+    image.addEventListener(
+      "error",
+      () => reject(new Error(`Image could not be loaded: ${src}`)),
+      {
+        once: true
+      }
+    );
+  });
+  let timeout;
+  try {
+    await Promise.race([
+      decoded,
+      new Promise((_resolve, reject) => {
+        timeout = setTimeout(
+          () => reject(new Error(`Image did not become ready within 15s: ${src}`)),
+          CAPTURE_ASSET_TIMEOUT_MS
+        );
+      })
+    ]);
+  } finally {
+    if (timeout !== void 0) clearTimeout(timeout);
+  }
+}
+async function waitForCaptureAssets(captureRoot, decodedImages = /* @__PURE__ */ new WeakSet()) {
+  const fonts = captureRoot.ownerDocument.fonts;
+  if (fonts) await fonts.ready;
+  const pendingImages = Array.from(captureRoot.querySelectorAll("img")).filter(
+    (image) => !decodedImages.has(image)
+  );
+  await Promise.all(
+    pendingImages.map(async (image) => {
+      await waitForImageDecode(image);
+      decodedImages.add(image);
+    })
+  );
+}
+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);
+    }
+  });
+}
+function captureVideoNeedsPriming(video, primedVideos) {
+  if (video.readyState >= HTMLMediaElement.HAVE_METADATA && video.videoWidth <= 0 && video.videoHeight <= 0) {
+    return false;
+  }
+  return !primedVideos.has(video) || !Number.isFinite(video.duration);
+}
+async function primeIndeterminateCaptureVideos(captureRoot, primedVideos = /* @__PURE__ */ new WeakSet()) {
+  const videos = Array.from(captureRoot.querySelectorAll("video")).filter(
+    (video) => captureVideoNeedsPriming(video, primedVideos)
+  );
+  let primedCount = 0;
+  await Promise.all(
+    videos.map(async (video) => {
+      const source = video.currentSrc || video.src;
+      if (!source) {
+        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) {
+      return blobUrls.get(relativePath) ?? relativePath;
+    },
+    async listMedia() {
+      return [...blobUrls.keys()].map((name) => ({
+        name,
+        mimeType: mimeTypes.get(name) ?? "application/octet-stream",
+        size: sizes.get(name) ?? 0
+      }));
+    },
+    async addMedia() {
+      throw new Error("Read-only");
+    },
+    async removeMedia() {
+      throw new Error("Read-only");
+    },
+    dispose() {
+      blobUrls.forEach((url) => URL.revokeObjectURL(url));
+      blobUrls.clear();
+      sizes.clear();
+    }
+  };
+}
+function shouldIgnoreCaptureSibling(element, captureRoot) {
+  const { head } = captureRoot.ownerDocument;
+  const isInDocumentHead = element === head || head.contains(element);
+  const isInCaptureBranch = element === captureRoot || element.contains(captureRoot) || captureRoot.contains(element);
+  return !isInDocumentHead && !isInCaptureBranch;
+}
+function finiteMediaTime(value) {
+  return Number.isFinite(value) ? value.toFixed(6) : "unknown";
+}
+function coverSourceRect(sourceWidth, sourceHeight, destinationWidth, destinationHeight) {
+  const sourceRatio = sourceWidth / sourceHeight;
+  const destinationRatio = destinationWidth / destinationHeight;
+  if (sourceRatio > destinationRatio) {
+    const sw = sourceHeight * destinationRatio;
+    return { sx: (sourceWidth - sw) / 2, sy: 0, sw, sh: sourceHeight };
+  }
+  const sh = sourceWidth / destinationRatio;
+  return { sx: 0, sy: (sourceHeight - sh) / 2, sw: sourceWidth, sh };
+}
+function videoFrameRect(sourceWidth, sourceHeight, destinationWidth, destinationHeight, objectFit) {
+  if (objectFit === "cover") {
+    return {
+      ...coverSourceRect(sourceWidth, sourceHeight, destinationWidth, destinationHeight),
+      dx: 0,
+      dy: 0,
+      dw: destinationWidth,
+      dh: destinationHeight
+    };
+  }
+  if (objectFit === "contain" || objectFit === "scale-down") {
+    const containScale = Math.min(destinationWidth / sourceWidth, destinationHeight / sourceHeight);
+    const scale = objectFit === "scale-down" ? Math.min(1, containScale) : containScale;
+    const dw = sourceWidth * scale;
+    const dh = sourceHeight * scale;
+    return {
+      sx: 0,
+      sy: 0,
+      sw: sourceWidth,
+      sh: sourceHeight,
+      dx: (destinationWidth - dw) / 2,
+      dy: (destinationHeight - dh) / 2,
+      dw,
+      dh
+    };
+  }
+  if (objectFit === "none") {
+    return {
+      sx: 0,
+      sy: 0,
+      sw: sourceWidth,
+      sh: sourceHeight,
+      dx: (destinationWidth - sourceWidth) / 2,
+      dy: (destinationHeight - sourceHeight) / 2,
+      dw: sourceWidth,
+      dh: sourceHeight
+    };
+  }
+  return {
+    sx: 0,
+    sy: 0,
+    sw: sourceWidth,
+    sh: sourceHeight,
+    dx: 0,
+    dy: 0,
+    dw: destinationWidth,
+    dh: destinationHeight
+  };
+}
+function prepareScheduledVideoClones(originalRoot, clonedRoot) {
+  const captureFamilies = [
+    {
+      original: ".doc-player__media-clips video[data-clip-id]",
+      clone: ".doc-player__media-clips canvas"
+    },
+    {
+      original: ".block-layer--video video[data-clip-start]",
+      clone: ".block-layer--video canvas"
+    }
+  ];
+  const pairs = captureFamilies.flatMap(({ original, clone }) => {
+    const videos = Array.from(originalRoot.querySelectorAll(original));
+    const canvases = Array.from(clonedRoot.querySelectorAll(clone));
+    return videos.flatMap((video, index) => {
+      const canvas = canvases[index];
+      return canvas ? [{ video, canvas }] : [];
+    });
+  });
+  const preparedCanvases = pairs.map(({ canvas }) => canvas);
+  pairs.forEach(({ video, canvas }) => {
+    canvas.className = video.className;
+    canvas.style.cssText = video.style.cssText;
+    for (const attribute of Array.from(video.attributes)) {
+      if (attribute.name.startsWith("data-")) {
+        canvas.setAttribute(attribute.name, attribute.value);
+      }
+    }
+    canvas.dataset.videoCaptureClone = "true";
+    const destinationWidth = Math.round(video.clientWidth || video.offsetWidth);
+    const destinationHeight = Math.round(video.clientHeight || video.offsetHeight);
+    if (video.videoWidth <= 0 || video.videoHeight <= 0 || destinationWidth <= 0 || destinationHeight <= 0) {
+      return;
+    }
+    try {
+      const view = video.ownerDocument.defaultView;
+      const objectFit = video.style.objectFit || view?.getComputedStyle(video).objectFit || "fill";
+      const frame = videoFrameRect(
+        video.videoWidth,
+        video.videoHeight,
+        destinationWidth,
+        destinationHeight,
+        objectFit
+      );
+      const context = canvas.getContext("2d");
+      if (!context) return;
+      canvas.width = destinationWidth;
+      canvas.height = destinationHeight;
+      context.drawImage(
+        video,
+        frame.sx,
+        frame.sy,
+        frame.sw,
+        frame.sh,
+        frame.dx,
+        frame.dy,
+        frame.dw,
+        frame.dh
+      );
+      const foreignObject = canvas.closest("foreignObject");
+      const svg = canvas.closest("svg");
+      if (foreignObject && svg) {
+        const originalHost = video.closest(".doc-player__block") ?? originalRoot;
+        const clonedHost = svg.closest(".doc-player__block") ?? clonedRoot;
+        const videoRect = video.getBoundingClientRect();
+        const hostRect = originalHost.getBoundingClientRect();
+        const renderedWidth = videoRect.width || destinationWidth;
+        const renderedHeight = videoRect.height || destinationHeight;
+        const fallbackX = Number.parseFloat(foreignObject.getAttribute("x") ?? "0") || 0;
+        const fallbackY = Number.parseFloat(foreignObject.getAttribute("y") ?? "0") || 0;
+        const left = videoRect.width ? videoRect.left - hostRect.left : fallbackX;
+        const top = videoRect.height ? videoRect.top - hostRect.top : fallbackY;
+        foreignObject.remove();
+        if (clonedHost === clonedRoot && !clonedHost.style.position) {
+          clonedHost.style.position = "relative";
+        }
+        canvas.style.position = "absolute";
+        canvas.style.left = `${left}px`;
+        canvas.style.top = `${top}px`;
+        canvas.style.width = `${renderedWidth}px`;
+        canvas.style.height = `${renderedHeight}px`;
+        canvas.style.zIndex = "3";
+        canvas.style.margin = "0";
+        canvas.style.transform = "none";
+        clonedHost.appendChild(canvas);
+      }
+    } 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 planScheduledVideoComposite(captureRoot) {
+  const activeVideos = Array.from(
+    captureRoot.querySelectorAll(SCHEDULED_VIDEO_SELECTOR)
+  ).filter(scheduledVideoIsVisual);
+  if (activeVideos.length === 0) return null;
+  const underlays = [];
+  const overlays = [];
+  for (const video of activeVideos) {
+    const presentation = scheduledVideoPresentation(video);
+    if (presentation === "background") underlays.push(video);
+    else if (presentation === "picture-in-picture") 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) {
+      element.style.backgroundColor = "transparent";
+      element.style.backgroundImage = "none";
+    }
+  }
+}
+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 drawScheduledVideosOnto(destination, captureRoot, videos) {
+  const context = destination.getContext("2d");
+  if (!context) throw new Error("Could not create the scheduled-video 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;
+  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 = [];
+  if (typeof captureRoot.getAnimations === "function") {
+    const animations = captureRoot.getAnimations({ subtree: true });
+    animations.forEach((animation, index) => {
+      try {
+        const timing = animation.effect?.getComputedTiming();
+        if (!timing) {
+          needsTimelineKey = true;
+          return;
+        }
+        animationStates.push(
+          `${index}:${animation.playState}:${String(timing.progress)}:${String(
+            timing.currentIteration
+          )}`
+        );
+      } catch {
+        needsTimelineKey = true;
+      }
+    });
+  } else if (/\b(?:anim-|transition-)|animation(?:-name)?\s*:/i.test(markup)) {
+    needsTimelineKey = true;
+  }
+  const imageStates = Array.from(captureRoot.querySelectorAll("img")).map((image) => {
+    const src = image.currentSrc || image.src;
+    if (POTENTIALLY_ANIMATED_IMAGE_URL.test(src)) needsTimelineKey = true;
+    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")).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(
+    "canvas, iframe, object, embed, animate, animateMotion, animateTransform, set"
+  )) {
+    needsTimelineKey = true;
+  }
+  const fontStatus = captureRoot.ownerDocument.fonts?.status ?? "unsupported";
+  return JSON.stringify({
+    markup,
+    animationStates,
+    imageStates,
+    videoStates,
+    fontStatus,
+    timelineTime: needsTimelineKey ? timelineTime.toFixed(6) : null
+  });
+}
+function useFrameCapture() {
+  const containerRef = useRef(null);
+  const rootRef = useRef(null);
+  const renderAPIRef = useRef(null);
+  const mediaProviderRef = useRef(null);
+  const ownsMediaProviderRef = useRef(false);
+  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 || captureBaseCanvasRef.current) {
+        const oldRoot = rootRef.current;
+        const oldContainer = containerRef.current;
+        const oldMediaProvider = mediaProviderRef.current;
+        const oldOwnsMediaProvider = ownsMediaProviderRef.current;
+        const oldCaptureCanvas = captureCanvasRef.current;
+        const oldCaptureBaseCanvas = captureBaseCanvasRef.current;
+        rootRef.current = null;
+        containerRef.current = null;
+        renderAPIRef.current = null;
+        mediaProviderRef.current = null;
+        ownsMediaProviderRef.current = false;
+        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();
+            if (oldContainer) oldContainer.remove();
+            if (oldOwnsMediaProvider) oldMediaProvider?.dispose();
+            if (oldCaptureCanvas) {
+              oldCaptureCanvas.width = 0;
+              oldCaptureCanvas.height = 0;
+            }
+            if (oldCaptureBaseCanvas) {
+              oldCaptureBaseCanvas.width = 0;
+              oldCaptureBaseCanvas.height = 0;
+            }
+            resolve();
+          }, 0);
+        });
+      }
+      const width = renderOptions.width ?? 1920;
+      const height = renderOptions.height ?? 1080;
+      const animationsEnabled = renderOptions.animationsEnabled ?? true;
+      dimensionsRef.current = { width, height };
+      const captureCanvas = document.createElement("canvas");
+      captureCanvas.width = width;
+      captureCanvas.height = height;
+      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);
+      containerRef.current = container;
+      const renderRoot = document.createElement("div");
+      renderRoot.id = "squisq-capture-root";
+      renderRoot.style.cssText = `width:${width}px;height:${height}px;`;
+      container.appendChild(renderRoot);
+      const mediaProvider = renderOptions.images ? createInlineProvider(renderOptions.images) : renderOptions.mediaProvider ?? null;
+      mediaProviderRef.current = mediaProvider;
+      ownsMediaProviderRef.current = !!renderOptions.images;
+      const root = createRoot(renderRoot);
+      rootRef.current = root;
+      const captionsEnabled = captionMode !== void 0 && captionMode !== "off";
+      const captionStyle = captionMode === "social" ? "social" : "standard";
+      let resolveRenderAPI;
+      const renderAPIReady = new Promise((resolve) => {
+        resolveRenderAPI = resolve;
+      });
+      const playerElement = createElement(DocPlayer, {
+        doc,
+        basePath: ".",
+        renderMode: true,
+        animationsEnabled,
+        showControls: false,
+        autoPlay: false,
+        forceViewport: { width, height, name: "export" },
+        theme: renderOptions.theme,
+        videoPresentation: renderOptions.videoPresentation,
+        pipSize: renderOptions.pipSize,
+        pipShape: renderOptions.pipShape,
+        pipPosition: renderOptions.pipPosition,
+        showCoverSlide: renderOptions.showCoverSlide,
+        coverSlideTemplate: renderOptions.coverSlideTemplate,
+        captionsEnabled,
+        captionStyle,
+        onRenderAPIReady: (api) => {
+          if (containerRef.current !== container) return;
+          renderAPIRef.current = api;
+          if (api) resolveRenderAPI(api);
+        }
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      if (mediaProvider) {
+        root.render(createElement(MediaContext.Provider, { value: mediaProvider }, playerElement));
+      } else {
+        root.render(playerElement);
+      }
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          const api = renderAPIRef.current;
+          const hasSeek = typeof api?.seekTo === "function";
+          const hasDur = typeof api?.getDuration === "function";
+          const rootEl = containerRef.current?.querySelector("#squisq-capture-root");
+          const hasPlayer = rootEl ? rootEl.querySelector(".doc-player") !== null : false;
+          reject(
+            new Error(
+              `Render API did not initialize within 15s. seekTo=${hasSeek}, getDuration=${hasDur}, player=${hasPlayer}, root=${!!rootEl}`
+            )
+          );
+        }, 15e3);
+        void renderAPIReady.then(async (api) => {
+          try {
+            const captureRoot = container.querySelector("#squisq-capture-root");
+            if (!(captureRoot instanceof HTMLElement)) {
+              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) {
+            clearTimeout(timeout);
+            reject(assetError);
+          }
+        });
+      });
+    },
+    []
+  );
+  const setCoverVisible = useCallback(async (visible) => {
+    const api = renderAPIRef.current;
+    if (!api) throw new Error("Frame capture not initialized \xE2\u20AC\u201D call init() first");
+    if (visible) await api.showCover();
+    else await api.hideCover();
+    lastVisualStateKeyRef.current = null;
+  }, []);
+  const captureCanvasFrame = useCallback(
+    async (time, options = {}) => {
+      const container = containerRef.current;
+      const api = renderAPIRef.current;
+      const captureCanvas = captureCanvasRef.current;
+      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;
+      const root = container.querySelector("#squisq-capture-root");
+      if (!root) {
+        throw new Error("Capture root element not found");
+      }
+      await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current);
+      try {
+        await api.seekTo(time);
+      } catch (seekError) {
+        if (!await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current)) {
+          throw seekError;
+        }
+        await api.seekTo(time);
+      }
+      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.`
+        );
+      }
+      await waitForCaptureAssets(root, decodedImagesRef.current);
+      const compositePlan = planScheduledVideoComposite(root);
+      const hasUnderlays = compositePlan !== null && compositePlan.underlays.length > 0;
+      const rasterMode = compositePlan ? hasUnderlays ? "base-underlay" : "base" : "full";
+      const visualStateKey = options.reuseIfUnchanged ? `${rasterMode}:${getFrameVisualStateKey(root, time, {
+        ignoreScheduledVideoFrames: compositePlan !== null
+      })}` : null;
+      const shouldRasterize = visualStateKey === null || !hasCapturedFrameRef.current || lastVisualStateKeyRef.current !== visualStateKey;
+      if (!shouldRasterize && !compositePlan) return captureCanvas;
+      const rasterCanvas = compositePlan ? captureBaseCanvas : captureCanvas;
+      const captureContext = rasterCanvas.getContext("2d");
+      if (!captureContext) throw new Error("Could not create the frame capture canvas context");
+      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,
+            // An underlay base must stay transparent so the background video
+            // composited beneath it shows through everything the player does
+            // not paint. The compositor restores the opaque black backdrop.
+            backgroundColor: hasUnderlays ? null : "#000000",
+            logging: false,
+            onclone: async (_clonedDocument, clonedRoot) => {
+              if (compositePlan) {
+                if (hasUnderlays) clearScheduledUnderlayBackdrops(clonedRoot);
+                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 (compositePlan) {
+        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.fillStyle = "#000000";
+        outputContext.fillRect(0, 0, width, height);
+        drawScheduledVideosOnto(captureCanvas, root, compositePlan.underlays);
+        outputContext.drawImage(captureBaseCanvas, 0, 0);
+        drawScheduledVideosOnto(captureCanvas, root, compositePlan.overlays);
+      }
+      return captureCanvas;
+    },
+    []
+  );
+  const captureFrame = useCallback(
+    async (time, options = {}) => {
+      const canvas = await captureCanvasFrame(time, options);
+      return createImageBitmap(canvas);
+    },
+    [captureCanvasFrame]
+  );
+  const destroy = useCallback(() => {
+    if (rootRef.current) {
+      rootRef.current.unmount();
+      rootRef.current = null;
+    }
+    if (containerRef.current) {
+      containerRef.current.remove();
+      containerRef.current = null;
+    }
+    if (ownsMediaProviderRef.current) mediaProviderRef.current?.dispose();
+    mediaProviderRef.current = null;
+    ownsMediaProviderRef.current = false;
+    if (captureCanvasRef.current) {
+      captureCanvasRef.current.width = 0;
+      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(
+    () => ({ init, setCoverVisible, captureFrame, captureCanvasFrame, destroy }),
+    [init, setCoverVisible, captureFrame, captureCanvasFrame, destroy]
+  );
+}
+
+export {
+  useFrameCapture
+};