---
const { src, thumb } = Astro.props;
---

<img src={thumb} data-video={src} alt="Video thumbnail" />

<script>
  const updateVideo = () => {
    document.querySelectorAll("img[data-video]").forEach((img) => {
      if (window.screen.width < 1000) return;
      const parent = img.parentNode;
      if (parent == null) {
        throw new Error("Invalid video");
      }
      const video = document.createElement("video");
      video.muted = true;
      video.defaultMuted = true;
      video.loop = true;
      video.autoplay = true;
      const source = document.createElement("source");
      source.src = img.getAttribute("data-video");
      video.appendChild(source);
      parent.insertBefore(video, img);
      parent.removeChild(img);
    });
  };

  window.addEventListener("load", () => {
    document.querySelectorAll("img[data-video]").forEach((img) => {
      const parent = img.parentNode;
      if (parent == null) {
        throw new Error("Invalid video.");
      }
      parent.addEventListener("updatevideo", updateVideo);
    });
  });
</script>