autoplay,autoscroll done, added spinning logos

public/assets/wayland-logo.svg

@@ -0,0 +1,9 @@
+<svg width="266" height="266" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<title>Wayland logo</title>
+ <g transform="translate(-208.6 -332.1)">
+  <circle cx="341.4" cy="465.2" r="122.9" style="fill:currentColor"/>
+  <g transform="scale(.9156 1.092)" style="fill:#fff">
+   <path d="m443.9 314.6h2.35l-1.495 1.495h-0.8544v-1.495m-173 3.631v1.709l-5.554 6.836h-0.8544l-0.8544-5.34c3.275-2.136 5.696-3.204 7.263-3.204m202.5 2.35c4.842 1.9e-4 7.547 3.062 8.117 9.185l-4.059 28.84h1.495l3.204-2.136h0.8544v0.6408c-4.415 2.706-8.687 10.11-12.82 22.22-1.567 10.4-4.201 20.01-7.904 28.84-3.276 9.114-4.913 17.52-4.913 25.21l-6.195 15.17c-1.7e-4 1.282 2.35 2.563 7.049 3.845-0.8546 2.991-2.136 4.486-3.845 4.486v0.8544h1.495v0.6408c-1.7e-4 1.567-2.421 2.35-7.263 2.35l0.8544 0.8544v2.991h-1.495c0.9967 2.991 3.133 4.486 6.408 4.486v1.495h-6.408v0.8544c2.136 4e-5 3.204 1.282 3.204 3.845l-8.972 2.991 0.8544 0.8544v0.6408c-1.6e-4 0.9969-1.068 1.495-3.204 1.495v0.8544c2.706 3e-5 4.058 0.4985 4.059 1.495-3.845 1.282-8.901 7.619-15.17 19.01-6.408 10.11-11.96 15.17-16.66 15.17h-1.709c-3.56-2.279-6.48-9.826-8.758-22.64-9.114-19.51-13.67-30.97-13.67-34.39-1e-4 -8.829-2.919-18.23-8.758-28.2-1.567-4.415-2.635-9.968-3.204-16.66l-3.845-0.8544c-9.684 14.67-14.74 26.13-15.17 34.39-2.706 4.842-4.842 10.68-6.408 17.52 5.839 1.567 8.758 3.062 8.758 4.486v0.8544c-4.557-0.5696-7.761-1.638-9.612-3.204-1.994 3.845-4.628 14.53-7.904 32.04-2.563 8.117-5.768 12.18-9.612 12.18-10.82-3.56-19.87-9.399-27.13-17.52-1.139 2e-5 -2.991-4.059-5.554-12.18-1.566 3e-5 -2.635-4.059-3.204-12.18-5.411-11.53-9.114-24.71-11.11-39.52v-22.22h-0.8544l-3.845 0.8544v-0.8544c1e-5 -0.9967 1.282-1.495 3.845-1.495l-0.8544-12.82v-10.04l-6.195-32.04v-13.67c2.706-8.544 7.405-12.82 14.1-12.82h44.86v1.495c-3.56 0.1426-5.981 0.9258-7.263 2.35-2.706-1.566-5.34-2.35-7.904-2.35h-8.758l-4.913 0.6408-0.8544-0.6408h-0.6408l-6.408 0.6408-3.204-0.6408-2.35 0.6408-2.563-0.6408c10.4 11.39 16.52 21.01 18.37 28.84h7.263v1.495h-5.554v1.709c2.136 6.551 3.703 9.826 4.699 9.826h1.709l3.845-0.8544 0.8544 0.8544 0.8544-0.8544 0.8544 0.8544v0.6408c-2.848 1.709-4.771 4.059-5.767 7.049h-0.6408v1.495h1.495c1.994 23.78 5.696 41.8 11.11 54.04l3.204 2.136h1.709c2.136 8e-5 6.622-8.331 13.46-24.99 4.415-7.547 7.619-14.17 9.612-19.87l-0.8544-2.35c4.415-5.554 8.972-8.331 13.67-8.331h1.495c2.99 1.4e-4 5.127 1.567 6.408 4.699 3.987 4.7 7.191 11.75 9.612 21.15l11.96 22.22c1.566 1.567 2.35 3.347 2.35 5.34 4.414 8.402 8.402 13.96 11.96 16.66h2.563c2.99 6e-5 6.978-10.4 11.96-31.19 0.8543 9e-5 3.204-5.554 7.049-16.66v-0.8544l-13.46-1.495-3.204 0.8544h-4.059v-1.709l8.117-0.6408h15.81c6.123-18.37 11.75-32.61 16.88-42.72 1.709-20.79 4.058-31.19 7.049-31.19l9.612-3.845m-45.5 2.35c-0.8546 1.994-2.706 2.991-5.554 2.991v-1.495l5.554-1.495m-80.53 3.845h21.57v1.495l-4.913 0.6408-4.699-0.6408-4.059 1.495-1.495-1.495h-6.408v-1.495m-112.4 2.991h2.35l1.495 1.495v0.8544l-4.699 4.486v3.845h-1.709v-2.35l0.8544-0.6408v-0.8544l-4.059-3.845c0.9969-1.994 2.919-2.99 5.767-2.991m157 9.185h2.35v0.6408c-1.1e-4 0.997-0.7834 1.495-2.35 1.495l-0.8544 0.8544v0.8544l-2.35-0.8544v-1.495l3.204-1.495m-11.96 8.331v0.8544c-1e-4 1.139-3.418 2.35-10.25 3.631v-1.495l4.699-2.136 0.8544 0.6408h0.6408l4.059-1.495m-139.5 7.69v0.6408l-1.709 1.495-0.6408-0.6408v-0.8544l0.6408-0.6408h1.709m116.4 0v0.6408c-2.991 2.279-7.832 4.344-14.53 6.195v-1.495c1.139 1.5e-4 1.709-0.7831 1.709-2.35l12.82-2.991m40.59 7.476 0.8544 0.8544v0.6408l-1.495 1.709h-0.8544l-1.709-1.709v-0.6408l3.204-0.8544m29.48 0.8544h0.8544v0.6408l-1.495 1.709h-0.8544v-0.8544l1.495-1.495m-13.46 10.68 3.204 2.136c-0.5698 1.567-2.136 2.35-4.699 2.35l-1.709-2.35c-1.3e-4 -0.7119 1.068-1.424 3.204-2.136m19.22 9.826 0.6408 0.8544v0.6408l-0.6408 0.8544h-1.709v-0.8544l1.709-1.495m-30.33 7.69v0.6408l-4.059 3.204h-2.35v-0.8544c-1.1e-4 -1.282 2.136-2.278 6.408-2.991m-132.4 29.69h0.8544v0.6408c-2.136 4.7-3.987 7.548-5.554 8.544h-1.709v-3.204l6.408-5.981m104.5 35.67h0.8544v1.495l-6.408 3.204-0.8544-0.8544v-1.495l6.408-2.35m-87.79 10.04h1.495l2.563 8.331h-1.709l-2.35-7.69v-0.6408m85.44 9.826h0.6408l2.563 2.35-0.8544 0.6408h-0.8544l-1.495-2.136v-0.8544"/>
+  </g>
+ </g>
+</svg>

src/components/featurelist/FeatureList.astro

@@ -31,7 +31,7 @@ const codeHTML = await processMarkdown(codeString);
       </span>
     </section>
     <section class="feature-showcase">
-      <video class="feature-video" style="height: 21rem" preload="metadata" controls>
+      <video class="feature-video" style="height: 21rem" preload="metadata" controls={false} autoplay loop>
         <source src="/assets/simple-shell-livereload.mp4" type="video/mp4"/>
       </video>
     </section>
@@ -48,15 +48,20 @@ const codeHTML = await processMarkdown(codeString);
       <Fragment set:html={codeHTML}/>
     </section>
   </li>
-  <li class="featurelist-item cloud left">
+  <li class="featurelist-item cloud-li left">
     <section class="feature-text">
       <h3 class="feature-title">Extensive integrations</h3>
       <span class="feature-subtitle">
         Quickshell comes with a large set of integrations, with new ones arriving all the time.
       </span>
     </section>
-    <section class="feature-showcase">
+    <section class="feature-showcase cloud">
-      <span>image</span>
+      <span class="cloud-item hyprland">
+        <img src={"/assets/hyprland-logo.ico"}/>
+      </span>
+      <span class="cloud-item wayland">
+        <img src={"/assets/wayland-logo.png"}/>
+      </span>
     </section>
   </li>
 </ul>

src/components/marquee/Marquee.astro

@@ -18,7 +18,6 @@ const videos = [
     path: "/assets/showcase/vaxry.mp4",
   },
 ];
-
 ---
 <div class="marquee">
   <div class="marquee-scroll">
@@ -30,10 +29,18 @@ const videos = [
       <div><Icon name="caret-right"/></div>
     </div>
   </div>
-  <div id="marquee-content" class="marquee-content" data-scroll="0">
+  <div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
     {videos.map(({ author, authorlink, path }, index) => <div class="marquee-item">
       <div>
-        <video class="marquee-item-spacing marquee-item-content" muted controls {...(index == 0 ? {autoplay: ""} : {})}>
+        <video
+          data-media-index={index}
+          data-media-author={author}
+          id="showcase-video"
+          class="marquee-item-spacing marquee-item-content"
+          muted
+          controls
+          playsinline
+        >
           <source src={path} type="video/mp4"/>
         </video>
         <p>Configuration by <a href={authorlink}>{author}</a></p>
@@ -44,43 +51,105 @@ const videos = [
 
 <script>
   // marquee
-  // const dataNum = 10 // number of elements
+  const dataNum = 2; // 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>;
+
+  function autoplayInit() {
+    videos[0].play();
+    videos[0].setAttribute("data-active", "");
+  };
+
+  const intersectionOptions = {
+    root: marquee,
+    rootMargin: "0px",
+    threshold: 1.0,
+  };
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (!entry.isIntersecting) {
+        //@ts-expect-error
+        entry.target.pause();
+        entry.target.removeAttribute("autoplay")
+        entry.target.removeAttribute("data-active")
+      } else {
+        //@ts-expect-error
+        entry.target.play();
+        entry.target.setAttribute("data-active","")
+      }
+    });
+  },intersectionOptions);
+
+  for (const video of videos) {
+    observer.observe(video);
+    video.addEventListener("ended", onVideoEnded)
+  }
+
+  const onVisibilityChange = () => {
+    for(const video of videos){
+      if(document.hidden){
+        video.pause();
+      } else {
+        video.play();
+      }
+    }
+  }
+  document.addEventListener("visibilitychange", onVisibilityChange);
+
+
+  function onVideoEnded() {
+    const currentIndex = marquee.getAttribute("data-media-index");
+    const currentIndexNum = Number(currentIndex);
+    if(currentIndexNum !== dataNum){
+      const newIndex = currentIndexNum + 1;
+      marquee.setAttribute("data-media-index", `${newIndex}`);
+      marquee.style.setProperty("--scroll", `-${newIndex*100}%`)
+    } else {
+      marquee.setAttribute("data-media-index", "0");
+      marquee.style.setProperty("--scroll", "0")
+    }
+  }
+
   // left-right buttons
   const scrollLeft = document.getElementById("marquee-scroll-left")!;
   const scrollRight = document.getElementById("marquee-scroll-right")!;
+  const scrollMaxPercent = dataNum*100;
 
   scrollLeft.addEventListener("mousedown", () => {
     const dataScroll = marquee.getAttribute("data-scroll")!;
     const hashMap = {
-      "0": () => {
+      "first": () => {
-        const scrollToLast = "-900%" // dataNum
+        const scrollToLast = `-${scrollMaxPercent}%`;
         marquee.setAttribute("data-scroll", scrollToLast);
       },
       "lt0": () => {
         const oldDataScroll = marquee.getAttribute("data-scroll")!.slice(1, -1);
         const oldNumScroll = Number(oldDataScroll)
         const newScroll = oldNumScroll - 100;
-        newScroll <= 900 && newScroll > 0 ?
+        newScroll <= scrollMaxPercent && newScroll > 0 ?
           marquee.setAttribute("data-scroll",`-${newScroll.toString()}%`)
           : marquee.setAttribute("data-scroll", "0")
       }
     }
 
     hashMap[dataScroll === "0" ?
-      "0"
+      "first"
       : "lt0"
     ]()
     const updatedScroll = marquee.getAttribute("data-scroll")!;
+    const mediaIndex = updatedScroll.indexOf("%") !== -1 ? updatedScroll.slice(1, -3) : "0";
+    marquee.setAttribute("data-media-index", mediaIndex);
     marquee.style.setProperty("--scroll", updatedScroll)
   })
 
   scrollRight.addEventListener("mousedown", () => {
     const dataScroll = marquee.getAttribute("data-scroll")!;
     const hashMap = {
-      "900": () => { // dataNum
+      "last": () => {
         const scrollToFirst = "0";
         marquee.setAttribute("data-scroll", scrollToFirst);
       },
@@ -88,17 +157,19 @@ const videos = [
         const oldDataScroll = marquee.getAttribute("data-scroll")!.slice(1, -1);
         const oldNumScroll = Number(oldDataScroll)
         const newScroll = oldNumScroll + 100;
-        newScroll <= 900 && newScroll < 1000 ?
+        newScroll <= scrollMaxPercent ?
           marquee.setAttribute("data-scroll",`-${newScroll.toString()}%`)
           : marquee.setAttribute("data-scroll", "0")
       }
     }
 
-    hashMap[dataScroll === "900" ?
+    hashMap[dataScroll === `${scrollMaxPercent}` ?
-      "900"
+      "last"
       : "mt0"
     ]()
     const updatedScroll = marquee.getAttribute("data-scroll")!;
-    marquee.style.setProperty("--scroll", updatedScroll)
+    const mediaIndex = updatedScroll.indexOf("%") !== -1 ? updatedScroll.slice(1, -3) : "0";
+    marquee.setAttribute("data-media-index", mediaIndex);
+    marquee.style.setProperty("--scroll", updatedScroll);
   })
 </script>

src/styles/components/featurelist.css

@@ -59,6 +59,53 @@
   border-radius: 0.681rem;
 }
 
+.feature-showcase.cloud {
+  position: relative;
+  max-width: 345.717px;
+  border-radius: 100vh;
+  animation: spin 40s linear infinite;
+
+  & .cloud-item {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 60px;
+    height: 60px;
+    animation: counter-spin 40s linear infinite;
+    &.hyprland {
+      left: 60px;
+      top: 60px;
+    }
+    &.wayland {
+      right: 60px;
+      top: 60px;
+    }
+    & img {
+      width: 60px;
+      height: 60px;
+    }
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes counter-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
 @media (min-width: 68rem) {
   .featurelist {
     max-width: 75rem;

src/styles/components/marquee.css

@@ -0,0 +1,91 @@
+.marquee-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2.217rem;
+  font-size: 1.874rem;
+  font-weight: 600;
+  margin-inline: 0.618rem;
+}
+
+.marquee-button {
+  all: unset;
+  position: relative;
+  color: hsl(var(--accent-400));
+
+  &::before {
+    content: "";
+    position: absolute;
+    bottom: 3px;
+    left: 2px;
+    right: 2px;
+    height: 3px;
+    background-color: hsla(var(--accent-400) / 0.3);
+    z-index: -1;
+  }
+}
+.marquee {
+  position: relative;
+  width: 100%;
+  margin-block: 1.618rem;
+}
+
+.marquee-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+}
+
+.marquee-item {
+  flex: 1 0 100%;
+  transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  transform: translateX(var(--scroll));
+  display: flex;
+  justify-content: center;
+}
+
+.marquee-item-spacing {
+  width: 75svw;
+  max-width: 75rem;
+  aspect-ratio: 16 / 9;
+}
+
+.marquee-item-content {
+  border-radius: 6px;
+}
+
+.marquee-scroll {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.3s, opacity 0.3s;
+  z-index: 10;
+  user-select: none;
+  align-items: stretch;
+  pointer-events: none;
+}
+
+.marquee-scroll-arrow {
+  flex-grow: 1;
+  max-width: 8rem;
+  font-size: 2rem;
+  pointer-events: all;
+}
+
+.marquee-scroll-arrow > div {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+
+  &:hover {
+    opacity: 0.9;
+    cursor: pointer;
+  }
+}

src/styles/global.css

@@ -12,6 +12,7 @@
 @import "./docs/collapsible.css";
 
 @import "./components/featurelist.css";
+@import "./components/marquee.css";
 
 .changing-theme * {
   transition: none !important;

src/styles/main-page.css

@@ -48,98 +48,6 @@ h1.gradient-text {
   }
 }
 
-.marquee-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 2.217rem;
-  font-size: 1.874rem;
-  font-weight: 600;
-  margin-inline: 0.618rem;
-}
-
-.marquee-button {
-  all: unset;
-  position: relative;
-  color: hsl(var(--accent-400));
-
-  &::before {
-    content: "";
-    position: absolute;
-    bottom: 3px;
-    left: 2px;
-    right: 2px;
-    height: 3px;
-    background-color: hsla(var(--accent-400) / 0.3);
-    z-index: -1;
-  }
-}
-
-.marquee {
-  position: relative;
-  width: 100%;
-  margin-block: 1.618rem;
-}
-
-.marquee-content {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-}
-
-.marquee-item {
-  flex: 1 0 100%;
-  transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
-  transform: translateX(var(--scroll));
-  display: flex;
-  justify-content: center;
-}
-
-.marquee-item-spacing {
-  width: 75svw;
-  max-width: 75rem;
-  aspect-ratio: 16 / 9;
-}
-
-.marquee-item-content {
-  border-radius: 6px;
-}
-
-.marquee-scroll {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: background-color 0.3s, opacity 0.3s;
-  z-index: 10;
-  user-select: none;
-  align-items: stretch;
-  pointer-events: none;
-}
-
-.marquee-scroll-arrow {
-  flex-grow: 1;
-  max-width: 8rem;
-  font-size: 2rem;
-  pointer-events: all;
-}
-
-.marquee-scroll-arrow > div {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.5;
-  transition: opacity 0.3s ease;
-
-  &:hover {
-    opacity: 0.9;
-  }
-}
-
 .main-page_links {
   display: flex;
   flex-direction: row;