From bb79b3c590c63a7b22ac985c9efdeeaa5a935d0b Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Sun, 4 Aug 2024 10:59:00 +1000
Subject: [PATCH] added DOM interaction listener

---
 src/components/sections/MoreProjects.svelte | 40 ++++++++++++---------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/components/sections/MoreProjects.svelte b/src/components/sections/MoreProjects.svelte
index a6a9719..20d818a 100644
--- a/src/components/sections/MoreProjects.svelte
+++ b/src/components/sections/MoreProjects.svelte
@@ -4,6 +4,17 @@
     onMount(() => {
         const videos = document.querySelectorAll<HTMLVideoElement>(".playable");
 
+        let userInteracted = false;
+
+        const handleUserInteraction = () => {
+            userInteracted = true;
+            document.removeEventListener("click", handleUserInteraction);
+            document.removeEventListener("keydown", handleUserInteraction);
+        };
+
+        document.addEventListener("click", handleUserInteraction);
+        document.addEventListener("keydown", handleUserInteraction);
+
         videos.forEach((video) => {
             // Ensure the video element supports play and pause methods
             if (
@@ -11,6 +22,11 @@
                 typeof video.pause === "function"
             ) {
                 video.addEventListener("mouseenter", () => {
+                    if (userInteracted) {
+                        video.volume = 0.1;
+                    } else {
+                        video.muted = true;
+                    }
                     video.play();
                 });
 
@@ -18,24 +34,14 @@
                     video.pause();
                     video.currentTime = 0;
                 });
+
+                // Check if the screen width is less than or equal to 768px (mobile screen size)
+                if (window.innerWidth <= 768) {
+                    video.muted = true;
+                    video.autoplay = true;
+                    video.play();
+                }
             }
-
-            videos.forEach((video) => {
-                if (window.innerWidth < 1025) {
-                    video.muted = true;
-                    video.play();
-                }
-            });
-        });
-
-        // On screen size change
-        window.addEventListener("resize", () => {
-            videos.forEach((video) => {
-                if (window.innerWidth < 1025) {
-                    video.muted = true;
-                    video.play();
-                }
-            });
         });
     });
 </script>