Merge pull request #412 from openscript-ch/409-fix-video-and-button

409 fix video and button

Author: openscript

.changeset/five-candles-send.md

@@ -0,0 +1,5 @@
+---
+"@quassel/website": minor
+---
+
+Update play button class name, video ratio and controls effect

apps/website/public/favicon.png

@@ -9,6 +9,7 @@ import "@fontsource-variable/montserrat";
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any" />
+    <link rel="icon" href="/favicon.png" type="image/png" />
     <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
     <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
     <link rel="icon" href="/favicon-48x48.png" type="image/png" sizes="48x48" />

apps/website/src/assets/videos/play-button.svg renamed to apps/website/src/assets/videos/play-button-symbol.svg

@@ -1,9 +1,9 @@
 ---
 import { Image } from "astro:assets";
 import UzhLogo from "../assets/logos/uzh-logo.svg";
-import videoUrl from "../assets/videos/quassel.mp4";
+import Video from "../assets/videos/quassel.mp4";
 import Poster from "../assets/videos/poster.png";
-import PlayButton from "../assets/videos/play-button.svg";
+import PlayButtonSymbol from "../assets/videos/play-button-symbol.svg";
 ---
 
 <style>
@@ -12,14 +12,17 @@ import PlayButton from "../assets/videos/play-button.svg";
     flex-direction: column;
     align-items: center;
     background: radial-gradient(50% 50% at 50% 50%, var(--color-primary) 60%, transparent 100%);
+    font-size: var(--font-size-lg);
   }
 
   h1 {
     font-size: var(--font-size-xxxl);
   }
 
-  p {
+  h2 {
     font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-medium);
+    align-self: center;
   }
 
   .intro {
@@ -29,7 +32,7 @@ import PlayButton from "../assets/videos/play-button.svg";
     max-width: 37rem;
   }
 
-  .quassel-video {
+  .video-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -53,29 +56,24 @@ import PlayButton from "../assets/videos/play-button.svg";
     filter: brightness(0.2);
   }
 
-  .playButton {
-    background: none;
+  .play-button {
     position: absolute;
-    border: none;
     cursor: pointer;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
-    visibility: visible;
+    translate: -50% -50%;
+    transform-origin: center center;
+    width: clamp(3rem, 10vw, 6rem);
   }
 
-  .playButton-invisible {
+  .play-button.hidden {
     visibility: hidden;
   }
 
-  .playButton :hover {
+  .play-button:hover {
     transform: scale(1.1);
   }
 
-  .playButton img {
-    width: clamp(3rem, 10vw, 6rem);
-  }
-
   .used-by {
     margin-top: var(--spacing-xl);
     display: flex;
@@ -87,12 +85,6 @@ import PlayButton from "../assets/videos/play-button.svg";
     }
   }
 
-  .used-by h2 {
-    font-size: var(--font-size-lg);
-    font-weight: var(--font-weight-medium);
-    align-self: center;
-  }
-
   .used-by img {
     max-height: 4rem;
   }
@@ -105,25 +97,22 @@ import PlayButton from "../assets/videos/play-button.svg";
 <script>
   document.addEventListener("DOMContentLoaded", () => {
     const video = document.querySelector("video") as HTMLVideoElement;
-    const playButton = document.getElementsByClassName("playButton")[0] as HTMLButtonElement;
-    let isPlaying = false;
-
-    video.classList.add("video-not-interactive");
-
-    playButton.addEventListener("click", () => {
-      video.play();
-      isPlaying = true;
-      playButton.classList.add("playButton-invisible");
-      video.classList.remove("video-not-interactive");
-    });
-
-    video.addEventListener("pause", () => {
-      if (isPlaying) {
-        isPlaying = false;
-        playButton.classList.remove("playButton-invisible");
-        video.classList.add("video-not-interactive");
+    const playButton = document.querySelector(".play-button") as HTMLButtonElement;
+    let wasSeeking = false;
+
+    const togglePlayButton = () => {
+      if (!video.seeking && !wasSeeking) {
+        playButton.classList.toggle("hidden");
+        video.toggleAttribute("controls");
+      } else {
+        wasSeeking = !wasSeeking;
       }
-    });
+    };
+
+    playButton.addEventListener("click", () => video.play());
+    video.addEventListener("play", togglePlayButton);
+    video.addEventListener("pause", togglePlayButton);
+    video.addEventListener("click", togglePlayButton);
   });
 </script>
 
@@ -132,13 +121,11 @@ import PlayButton from "../assets/videos/play-button.svg";
     <h1>Gather language exposure data</h1>
     <p>Efficient documenting <strong>children's</strong> language exposure by carer, language and time.</p>
   </div>
-  <div class="quassel-video">
-    <video controls poster={Poster.src} muted playsinline>
-      <source src={videoUrl} type="video/mp4" />
+  <div class="video-wrapper">
+    <video poster={Poster.src} muted playsinline>
+      <source src={Video} type="video/mp4" />
     </video>
-    <button class="playButton">
-      <Image src={PlayButton} alt="Play button" />
-    </button>
+    <Image class="play-button" src={PlayButtonSymbol} alt="Play button symbol" />
   </div>
   <div class="used-by">
     <h2>Used by</h2>