From 1bbf453ae755eceb481d2ab0e0e3e98be784eb2d Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Wed, 18 Jun 2025 23:29:18 -0700
Subject: [PATCH] fix the video showcase

Please be fixed this time
---
 src/components/marquee/Marquee.astro | 70 +++++++++++++++-------------
 1 file changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/components/marquee/Marquee.astro b/src/components/marquee/Marquee.astro
index 2c85a49..6d2c9d8 100644
--- a/src/components/marquee/Marquee.astro
+++ b/src/components/marquee/Marquee.astro
@@ -47,6 +47,7 @@ const videos = [
           muted
           controls
           playsinline
+          preload="metadata"
         >
           <source src={path} type="video/mp4"/>
         </video>
@@ -60,18 +61,36 @@ const videos = [
 </div>
 
 <script>
-  // marquee
   const videoCount = 5; // last array index
   const marquee = document.getElementById("marquee-content")!;
   marquee.style.setProperty("--scroll", "0")
 
-  // autoplay
   window.addEventListener("load", autoplayInit, false);
   const videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>;
+  let currentVideoIndex = 0;
+  let currentVideo = null;
 
   function autoplayInit() {
-    videos[0].play();
-  };
+    setActiveVideo(0);
+    currentVideo.play();
+  }
+
+  function setActiveVideo(index: number) {
+    console.log("setActive", index);
+    currentVideo?.pause();
+
+    currentVideoIndex = index;
+    currentVideo = videos[currentVideoIndex];
+    currentVideo.currentTime = 0;
+    marquee.style.setProperty("--scroll", `-${currentVideoIndex*100}%`)
+  }
+
+  function offsetCarousel(offset: number) {
+    let nextIndex = currentVideoIndex + offset;
+    if (nextIndex < 0) nextIndex += videoCount;
+    nextIndex = nextIndex % videoCount;
+    setActiveVideo(nextIndex);
+  }
 
   const intersectionOptions = {
     root: marquee,
@@ -84,48 +103,35 @@ const videos = [
       const video = entry.target as HTMLVideoElement;
       if (!entry.isIntersecting) {
         video.pause();
-        video.removeAttribute("autoplay")
-        video.currentTime = 0;
-      } else {
+      } else if (video === currentVideo) {
         video.play();
       }
     });
-  },intersectionOptions);
+  }, intersectionOptions);
 
   for (const video of videos) {
     observer.observe(video);
 
     video.addEventListener("ended", () => {
+      console.log("video ended", "duration", video.duration, "ctime", video.currentTime);
       // The "ended" event might just mean its buffering.
-      if (video.duration !== 0 && video.currentTime === video.duration) nextVideo();
+      if (video == currentVideo && video.duration !== 0 && video.currentTime === video.duration) nextVideo();
     });
   }
 
-  const onVisibilityChange = () => {
-    for(const video of videos){
-      if(document.hidden){
-        video.pause();
-      } else {
-        video.play();
+  let wasPaused = false;
+  document.addEventListener("visibilitychange", () => {
+    if (currentVideo) {
+      if (document.hidden) {
+        wasPaused = currentVideo.paused;
+        currentVideo.pause();
+      } else if (!wasPaused) {
+        currentVideo.play();
       }
     }
-  }
-  document.addEventListener("visibilitychange", onVisibilityChange);
-
-  function offsetCarousel(offset: number) {
-    const currentIndex = Number(marquee.getAttribute("data-media-index"));
-    let nextIndex = currentIndex + offset;
-    if (nextIndex < 0) nextIndex += videoCount;
-    nextIndex = nextIndex % videoCount;
-
-    marquee.setAttribute("data-media-index", `${nextIndex}`);
-    marquee.style.setProperty("--scroll", `-${nextIndex*100}%`)
-  }
-
-  function prevVideo() { offsetCarousel(-1) }
-  function nextVideo() { offsetCarousel(1) }
+  });
 
   // left-right buttons
-  document.getElementById("marquee-scroll-left")!.addEventListener("mousedown", prevVideo);
-  document.getElementById("marquee-scroll-right")!.addEventListener("mousedown", nextVideo);
+  document.getElementById("marquee-scroll-left")!.addEventListener("mousedown", () => offsetCarousel(-1));
+  document.getElementById("marquee-scroll-right")!.addEventListener("mousedown", () => offsetCarousel(1));
 </script>