From febb332769baed0e1d0b2e86291fbef7f44c1b62 Mon Sep 17 00:00:00 2001
From: Yixuan Wu <y@ixuan.ch>
Date: Sun, 20 Apr 2025 20:10:55 +0000
Subject: [PATCH 1/2] fix: make sure the play button works without any issues
 on all browsers

---
 apps/website/src/sections/Spotlight.astro | 57 +++++++++++++++--------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/apps/website/src/sections/Spotlight.astro b/apps/website/src/sections/Spotlight.astro
index fada9ec4..6244c7ed 100644
--- a/apps/website/src/sections/Spotlight.astro
+++ b/apps/website/src/sections/Spotlight.astro
@@ -98,27 +98,46 @@ import PlayButtonSymbol from "../assets/videos/play-button-symbol.svg";
   document.addEventListener("DOMContentLoaded", () => {
     const video = document.querySelector("video") as HTMLVideoElement;
     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;
-      }
+
+    let ignoreNextClick = false
+    let videoPlaying = false;
+    video.controls = false;
+
+    const updatePlayButtonVisibility = () => {
+      const showPlayButton = video.paused && !video.seeking;
+      playButton.classList.toggle("hidden", !showPlayButton);
     };
 
-    playButton.addEventListener("click", () => video.play());
-    video.addEventListener("play", togglePlayButton);
-    video.addEventListener("pause", togglePlayButton);
-    video.addEventListener("click", () => {
-      if (video.paused) {
-        video.play();
-      } else {
-        video.pause();
-      }
-    });
+    playButton.addEventListener("click", (e) => {
+      e.stopPropagation();
+      ignoreNextClick = true;
+      video.controls = true;
+      videoPlaying = true;
+      video.play();
+    })
+
+    if (videoPlaying){
+      video.addEventListener("click", () => {
+        if (ignoreNextClick) {
+          ignoreNextClick = false;
+          return;
+        }
+
+        if (video.paused) {
+          video.controls = true;
+          video.play();
+        } else {
+          video.pause();
+        }
+      })
+    }
+
+    video.addEventListener("play", updatePlayButtonVisibility);
+    video.addEventListener("pause", updatePlayButtonVisibility);
+    video.addEventListener("seeking", updatePlayButtonVisibility);
+    video.addEventListener("seeked", updatePlayButtonVisibility);
+    
+    updatePlayButtonVisibility();
   });
 </script>
 

From 2b0173e83f433f4897ce348371a5f7814b056c71 Mon Sep 17 00:00:00 2001
From: Yixuan Wu <y@ixuan.ch>
Date: Sun, 20 Apr 2025 20:22:41 +0000
Subject: [PATCH 2/2] fix: try to fix formatting issue

---
 apps/website/src/sections/Spotlight.astro | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/website/src/sections/Spotlight.astro b/apps/website/src/sections/Spotlight.astro
index 6244c7ed..0b3543c2 100644
--- a/apps/website/src/sections/Spotlight.astro
+++ b/apps/website/src/sections/Spotlight.astro
@@ -99,7 +99,7 @@ import PlayButtonSymbol from "../assets/videos/play-button-symbol.svg";
     const video = document.querySelector("video") as HTMLVideoElement;
     const playButton = document.querySelector(".play-button") as HTMLButtonElement;
 
-    let ignoreNextClick = false
+    let ignoreNextClick = false;
     let videoPlaying = false;
     video.controls = false;
 
@@ -114,9 +114,9 @@ import PlayButtonSymbol from "../assets/videos/play-button-symbol.svg";
       video.controls = true;
       videoPlaying = true;
       video.play();
-    })
+    });
 
-    if (videoPlaying){
+    if (videoPlaying) {
       video.addEventListener("click", () => {
         if (ignoreNextClick) {
           ignoreNextClick = false;
@@ -129,14 +129,13 @@ import PlayButtonSymbol from "../assets/videos/play-button-symbol.svg";
         } else {
           video.pause();
         }
-      })
+      });
     }
 
     video.addEventListener("play", updatePlayButtonVisibility);
     video.addEventListener("pause", updatePlayButtonVisibility);
     video.addEventListener("seeking", updatePlayButtonVisibility);
     video.addEventListener("seeked", updatePlayButtonVisibility);
-    
     updatePlayButtonVisibility();
   });
 </script>