Function loadPreviewImage

Web/script.js:914–1075

(card, result)

  }
}
async function loadPreviewImage(card, result) {
  const episodeMatch = result.filename?.match(/\[P(\d+)\]/);
  const timeMatch = result.timestamp?.match(/^(\d+)m(\d+)s$/);

  if (!episodeMatch || !timeMatch) return;

  const episodeNum = parseInt(episodeMatch[1], 10);
  const minutes = parseInt(timeMatch[1]);
  const seconds = parseInt(timeMatch[2]);
  const totalSeconds = minutes * 60 + seconds;

  const imgContainer = document.createElement("div");
  imgContainer.className = "preview-frame-container";

  const placeholder = document.createElement("div");
  placeholder.className = "preview-frame-placeholder";
  imgContainer.appendChild(placeholder);
  card.insertBefore(imgContainer, card.firstChild);

  try {
    const imageBlob = await extractFrame(
      episodeNum,
      totalSeconds,
      CONFIG.imageBaseUrl,
    );
    const imageUrl = URL.createObjectURL(imageBlob);
    const img = new Image();
    img.src = imageUrl;
    img.className = "preview-frame";
    img.decoding = "async";

    img.onerror = () => {
      console.error("Failed to load preview image");
      imgContainer.remove();
      URL.revokeObjectURL(imageUrl);
    };

    img.onload = () => {
      const originalCanvas = document.createElement("canvas");
      originalCanvas.width = img.width;
      originalCanvas.height = img.height;

      try {
        const originalCtx = originalCanvas.getContext("2d");
        if (!originalCtx) {
          throw new Error("Failed to get canvas context");
        }

        originalCtx.drawImage(img, 0, 0);

        const displayCanvas = document.createElement("canvas");
        displayCanvas.width = img.width;
        displayCanvas.height = img.height;
        displayCanvas.className = "preview-frame";
        displayCanvas.originalCanvas = originalCanvas;

        const renderCanvas = () => {
          const ctx = displayCanvas.getContext("2d");