fix(mosaic): wrong display for lines with video

2 files changed, 19 insertions, 3 deletions

diff --git a/src/component/MosaicBackground.astro b/src/component/MosaicBackground.astro
index 4d110d2..c39a802 100644
--- a/src/component/MosaicBackground.astro
+++ b/src/component/MosaicBackground.astro
@@ -44,6 +44,7 @@ const { height = "400" } = Astro.props;
         }
       }
       e.replaceChildren(...newChildren);
+      e.dispatchEvent(new Event("updatevideo"));
     });
   });
 </script>
diff --git a/src/component/VideoAuto.astro b/src/component/VideoAuto.astro
index 8746b68..bcf23a3 100644
--- a/src/component/VideoAuto.astro
+++ b/src/component/VideoAuto.astro
@@ -5,9 +5,13 @@ const { src, thumb } = Astro.props;
 <img src={thumb} data-video={src} alt="Video thumbnail" />
 
 <script>
-  window.addEventListener("load", () => {
+  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;
@@ -16,8 +20,19 @@ const { src, thumb } = Astro.props;
       const source = document.createElement("source");
       source.src = img.getAttribute("data-video");
       video.appendChild(source);
-      img.parentNode.insertBefore(video, img);
-      img.parentNode.removeChild(img);
+      console.log(img);
+      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>