Update script.js, Added Features to Enhance UX

Video 84 - Project 2 - Spotify Clone/js/script.js

@@ -180,34 +180,64 @@ async function main() {
         }
     })
 
-    // Add an event to volume
-    document.querySelector(".range").getElementsByTagName("input")[0].addEventListener("change", (e) => {
-        console.log("Setting volume to", e.target.value, "/ 100")
-        currentSong.volume = parseInt(e.target.value) / 100
-        if (currentSong.volume >0){
-            document.querySelector(".volume>img").src = document.querySelector(".volume>img").src.replace("mute.svg", "volume.svg")
-        }
-    })
-
-    // Add event listener to mute the track
-    document.querySelector(".volume>img").addEventListener("click", e=>{ 
-        if(e.target.src.includes("volume.svg")){
-            e.target.src = e.target.src.replace("volume.svg", "mute.svg")
-            currentSong.volume = 0;
-            document.querySelector(".range").getElementsByTagName("input")[0].value = 0;
-        }
-        else{
-            e.target.src = e.target.src.replace("mute.svg", "volume.svg")
-            currentSong.volume = .10;
-            document.querySelector(".range").getElementsByTagName("input")[0].value = 10;
-        }
-
-    })
+   // Add an event to volume
+  document
+    .querySelector(".range")
+    .getElementsByTagName("input")[0]
+    .addEventListener("change", (event) => {
+        // Now it is more readable and easy to understand
+      currentSong.volume = parseInt(event.target.value) / 100;
+    // If the song is muted and user increase or decrease the volume then it will be automatically unmute, this is good for ehancing UX
+      currentSong.muted = false;
+      document.querySelector(".volume img").src = "img/volume.svg";
+    });
+
+      // Add event to mute the track
+    document.querySelector(".volume img").addEventListener("click", (event) => {
+    if (currentSong.muted) {
+      currentSong.muted = false;
+        // If the user unmute the song, then the range of input will be automatically set to 100 and volume iamge appears
+      document.querySelector(".volume img").src = "img/volume.svg";
+      document.querySelector(".volume input[type=range]").value = 100;
+    } else {
+      currentSong.muted = true;
+        // If the user mute the song, then the range of input will be automatically set to 0 and mute iamge appears
+      document.querySelector(".volume img").src = "img/mute.svg";
+      document.querySelector(".volume input[type=range]").value = 0;
+    }
+  });
+     // Pause or play the music whenever the space button is clicked
+  document.addEventListener("keydown", (event) => {
+    if (event.code == "Space") {
+      event.preventDefault();
+      if (currentSong.paused) {
+        currentSong.play();
+        play.src = "img/pause.svg";
+      } else {
+        currentSong.pause();
+        play.src = "img/play.svg";
+      }
+    }
+  });
+      // Step 5 seconds forward or backwards the song when left or right arrow key is pressed
+  document.addEventListener("keydown", (event) => {
+    if (event.code == "ArrowRight") {
+      let percent = (currentSong.currentTime + 5) / currentSong.duration;
+        // Also moving the circle of seek bar according to time
+      document.querySelector(".circle").style.left = percent * 100 + "%";
+      currentSong.currentTime = percent * currentSong.duration;
+    } else if (event.code == "ArrowLeft") {
+      let percent = (currentSong.currentTime - 5) / currentSong.duration;
+        // Also moving the circle of seek bar according to time
+      document.querySelector(".circle").style.left = percent * 100 - "%";
+      currentSong.currentTime = percent * currentSong.duration;
+    }
+  });
 
 
 
 
 
 }
 
-main() 
+main()