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

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

diff --git a/src/components/marquee/Marquee.astro b/src/components/marquee/Marquee.astro
index 2c85a49..6d00a6a 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: HTMLVideoElement | null = 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,37 @@ 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) {
+        offsetCarousel(1);
+      }
     });
   }
 
-  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>

From 9c9b2b000eb84442a5d9357285a3766d87001709 Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Wed, 18 Jun 2025 23:29:29 -0700
Subject: [PATCH 2/4] fix dead links in introduction

---
 src/guide/introduction.mdx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/guide/introduction.mdx b/src/guide/introduction.mdx
index 7dd0ae9..2d6b483 100644
--- a/src/guide/introduction.mdx
+++ b/src/guide/introduction.mdx
@@ -24,9 +24,8 @@ Configs at other paths, including raw qml files can be run with `--path` or `-p`
 
 ## Creating Windows
 
-Quickshell has two main window types available,
-[PanelWindow](/docs/types/quickshell/panelwindow) for bars and widgets, and
-[FloatingWindow](/docs/types/quickshell/floatingwindow) for standard desktop windows.
+Quickshell has two main window types available, @@Quickshell.PanelWindow for bars
+and widgets, and @@Quickshell.FloatingWindow for standard desktop windows.
 
 We'll start with an example:
 

From c0d295c2892eec913849a44bfb61700be4b5b0fa Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Wed, 18 Jun 2025 23:29:18 -0700
Subject: [PATCH 3/4] 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..64f599a 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,35 @@ 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: HTMLVideoElement | null = null;
 
   function autoplayInit() {
-    videos[0].play();
-  };
+    setActiveVideo(0);
+    currentVideo!.play();
+  }
+
+  function setActiveVideo(index: number) {
+    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 +102,36 @@ 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", () => {
       // 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) {
+        offsetCarousel(1);
+      }
     });
   }
 
-  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>

From fd9cd4f3fd7d4b1236854ef97728dc5379cfd432 Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Wed, 18 Jun 2025 23:29:29 -0700
Subject: [PATCH 4/4] fix dead links in introduction

---
 src/guide/introduction.mdx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/guide/introduction.mdx b/src/guide/introduction.mdx
index 7dd0ae9..2d6b483 100644
--- a/src/guide/introduction.mdx
+++ b/src/guide/introduction.mdx
@@ -24,9 +24,8 @@ Configs at other paths, including raw qml files can be run with `--path` or `-p`
 
 ## Creating Windows
 
-Quickshell has two main window types available,
-[PanelWindow](/docs/types/quickshell/panelwindow) for bars and widgets, and
-[FloatingWindow](/docs/types/quickshell/floatingwindow) for standard desktop windows.
+Quickshell has two main window types available, @@Quickshell.PanelWindow for bars
+and widgets, and @@Quickshell.FloatingWindow for standard desktop windows.
 
 We'll start with an example: