src/components/marquee/Marquee.astro

@@ -47,7 +47,6 @@ const videos = [
           muted
           controls
           playsinline
-          preload="metadata"
         >
           <source src={path} type="video/mp4"/>
         </video>
@@ -61,36 +60,18 @@ 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() {
-    setActiveVideo(0);
+    videos[0].play();
-    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,
@@ -103,7 +84,9 @@ const videos = [
       const video = entry.target as HTMLVideoElement;
       if (!entry.isIntersecting) {
         video.pause();
-      } else if (video === currentVideo) {
+        video.removeAttribute("autoplay")
+        video.currentTime = 0;
+      } else {
         video.play();
       }
     });
@@ -113,25 +96,36 @@ const 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 == currentVideo && video.duration !== 0 && video.currentTime === video.duration) nextVideo();
+      if (video.duration !== 0 && video.currentTime === video.duration) nextVideo();
     });
   }
 
-  let wasPaused = false;
+  const onVisibilityChange = () => {
-  document.addEventListener("visibilitychange", () => {
+    for(const video of videos){
-    if (currentVideo) {
       if(document.hidden){
-        wasPaused = currentVideo.paused;
+        video.pause();
-        currentVideo.pause();
+      } else {
-      } else if (!wasPaused) {
+        video.play();
-        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", () => offsetCarousel(-1));
+  document.getElementById("marquee-scroll-left")!.addEventListener("mousedown", prevVideo);
-  document.getElementById("marquee-scroll-right")!.addEventListener("mousedown", () => offsetCarousel(1));
+  document.getElementById("marquee-scroll-right")!.addEventListener("mousedown", nextVideo);
 </script>

src/guide/introduction.mdx

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