sound btn hover fix and removed console logs

psychoactive-studios · Dec 1, 2024 · af5c9d6 · af5c9d6
1 parent 70e8138
commit af5c9d6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 52 deletions.
diff --git a/dist/app.js b/dist/app.js
diff --git a/dist/app.js.map b/dist/app.js.map
diff --git a/js/global/showreel.js b/js/global/showreel.js
@@ -6,6 +6,9 @@ export function showreelHome(audio) {
   const showreelVideo = document.querySelector("#showreel_home");
   const clickToUnmuteUI = document.querySelector(".showreel-ui-wrapper");
   const clickToMuteUI = document.querySelector(".showreel-ui-wrapper-2");
+  const soundBtns = Array.from(
+    document.querySelectorAll(".showreel-sound-button")
+  );
 
   showreelVideo.volume = 0.7;
 
@@ -31,7 +34,6 @@ export function showreelHome(audio) {
 
   // FIRST CLICK LOGIC
   function firstClickLogic() {
-    console.log("first click logic");
     showreelVideo.muted = false; //unmute video
     showreelVideo.currentTime = 0; //restart video
     clickToUnmuteUI.style.display = "none"; //hide unmute ui
@@ -43,7 +45,6 @@ export function showreelHome(audio) {
 
   // SECOND CLICK LOGIC
   function secondClickLogic() {
-    console.log("second click logic");
     showreelVideo.muted = true; //mute video again
     if (!showreelMuteState()) fadeMusicToggle(); //if unmuted, toggle music fade
     clickToUnmuteUI.style.opacity = "100"; // set unmute opacity to 100
@@ -54,7 +55,6 @@ export function showreelHome(audio) {
 
   // THIRD CLICK LOGIC
   function thirdClickLogic() {
-    console.log("third click logic");
     showreelVideo.muted = false; //unmute video
     if (!showreelMuteState()) fadeMusicToggle(); //if unmuted, toggle music fade
     clickToUnmuteUI.style.display = "none"; //hide unmute ui
@@ -87,36 +87,34 @@ export function showreelHome(audio) {
 
   // initial show / hide on hover
   homeBlock.addEventListener("mouseenter", () => {
-    const muteStyle = window.getComputedStyle(clickToMuteUI);
     const unMuteStyle = window.getComputedStyle(clickToUnmuteUI);
-    console.log(muteStyle.display == "none");
     if (unMuteStyle.display == "none" && showreelVideo.muted) {
-      console.log("show unmute");
       clickToUnmuteUI.style.display = "flex";
     }
-    // if (muteStyle.display == "none" && !showreelVideo.muted) {
-    //   console.log("show mute");
-    //   clickToMuteUI.style.display = "flex";
-    // }
   });
 
-  clickToUnmuteUI.addEventListener("mouseout", () => {
+  // hover out interaction with checks to ensure its not hovering out into the sound btns itself
+  clickToUnmuteUI.addEventListener("mouseout", (event) => {
     const unMuteStyle = window.getComputedStyle(clickToUnmuteUI);
-    if (unMuteStyle.display == "flex" && showreelVideo.muted) {
-      console.log("hide unmute");
+
+    // Check if the mouse is still over clickToUnmuteUI or any soundBtns
+    const isHoveringSoundBtns = soundBtns.some((btn) =>
+      btn.contains(event.relatedTarget)
+    );
+    const isHoveringClickToUnmute = clickToUnmuteUI.contains(
+      event.relatedTarget
+    );
+
+    if (
+      !isHoveringSoundBtns &&
+      !isHoveringClickToUnmute &&
+      unMuteStyle.display === "flex" &&
+      showreelVideo.muted
+    ) {
       clickToUnmuteUI.style.display = "none";
     }
   });
 
-  // homeBlock.addEventListener("mouseout", () => {
-  //   console.log("hovered out");
-  //   const muteStyle = window.getComputedStyle(clickToMuteUI);
-  //   if (muteStyle.display == "flex" && !showreelVideo.muted) {
-  //     console.log("hide mute");
-  //     clickToMuteUI.style.display = "none";
-  //   }
-  // });
-
   // catch if user hovers off showreel, after clicking once
   showreelVideo.addEventListener("mouseout", function () {
     const clickedOnce = clickLogic == "once";
@@ -143,7 +141,6 @@ export function showreelNav(audio) {
   navPlayReel.addEventListener("click", () => {
     showreelVideo.muted = false; //unmute video
     showreelVideo.currentTime = 0; //restart video
-    console.log(!showreelMuteState());
     if (!showreelMuteState()) fadeMusicToggle(); //if unmuted, toggle music fade
     wave.forEach((stroke) => {
       stroke.style.fill = "#F5F4F2"; //set mute svg fill back to white