Added pause functionality (#349)

* added pause functionality * fixed clearing timeLeft
KendallDoesCoding · Nov 20, 2022 · 01e36a4 · 01e36a4
1 parent 328533d
commit 01e36a4
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -203,7 +203,7 @@ <h1 class="heading g-col-4">A very Mogul Christmas</h1>
 
     <div class="audio-controls hidden">
       <i id="play-btn" title="Play" name="Play" class="icon-btn fa fa-play fa-2x" onClick="playSongs();"></i>
-      <i id="pause-btn" title="Pause" name="Pause" class="icon-btn fa fa-pause fa-2x hidden" onClick="resumeSongs();"></i>
+      <i id="pause-btn" title="Pause" name="Pause" class="icon-btn fa fa-pause fa-2x hidden" onClick="pauseSong();"></i>
       <i id="stop-btn" title="Stop" name="Stop" class="icon-btn fa fa-stop fa-2x hidden" onClick="stopVideo()"></i>
       <i id="shuffle-btn" title="Shuffle" name="Shuffle" class="icon-btn fa fa-random fa-2x" onClick="toggleShuffle();"></i>
       <i id="repeat-btn" title="Repeat current" name="Repeat current" class="icon-btn fa fa-repeat fa-2x" onClick="toggleLoop();"></i>

diff --git a/index.js b/index.js
@@ -152,26 +152,31 @@ function onPlayerStateChange(event) {
     pauseButton.classList.remove("hidden");
     playButton.classList.add("hidden");
     intervalId = window.setInterval(() => {
-      let secLeft =
-        (currSong ? songs[currSong].end : player.getDuration()) -
-        player.getCurrentTime();
-      secLeft=parseInt(secLeft);
-      const songBlock=document.getElementById(`song_${(currSong??"All Of The Above").split(' ').join('_')}`);
-
-      const timeEl=songBlock.childNodes[1]
-      timeEl.classList.add('active');
-      timeEl.innerHTML = `${parseInt(secLeft/60)}:${(secLeft%60 < 10) ? ("0" + secLeft%60) : secLeft%60}`;
+      if (player.getPlayerState() === 1) {
+        let secLeft =
+          (currSong ? songs[currSong].end : player.getDuration()) -
+          player.getCurrentTime();
+        secLeft = parseInt(secLeft);
+        const songBlock = document.getElementById(
+          `song_${(currSong ?? "All Of The Above").split(" ").join("_")}`
+        );
 
+        const timeEl = songBlock.childNodes[1];
+        timeEl.classList.add("active");
+        timeEl.innerHTML = `${parseInt(secLeft / 60)}:${
+          secLeft % 60 < 10 ? "0" + (secLeft % 60) : secLeft % 60
+        }`;
+      }
     }, 500);
+  }
+  // paused
+  else if (player.getPlayerState() === 2) {
+    pauseButton.classList.add("hidden");
+    playButton.classList.remove("hidden");
   } else {
     stopButton.classList.add("hidden");
     pauseButton.classList.add("hidden");
     playButton.classList.remove("hidden");
-    clearInterval(intervalId);
-    const a=document.getElementsByClassName('time-left');
-    for (let i = 0; i < a.length; i++) {
-      a[i].classList.remove('active');
-    }
   }
   // if buffering
   if (player.getPlayerState() === 3) {
@@ -193,6 +198,7 @@ Object.keys(songs).map((song_title) => {
   link.innerHTML = song_title;
   link.style = "cursor: pointer";
   link.onclick = () => {
+    clearTimeLeft();
     player.loadVideoById({
       videoId: VIDEO_ID,
       startSeconds: startTime,
@@ -211,7 +217,8 @@ Object.keys(songs).map((song_title) => {
 });
 
 function playSongs() {
-  if (player.isMuted()) {
+  clearTimeLeft();
+  if (player.isMuted() || player.getPlayerState() === 2) {
     player.playVideo();
   } else {
     if (songList.length) {
@@ -226,6 +233,9 @@ function playSongs() {
     }
   }
 }
+function pauseSong() {
+  player.pauseVideo();
+}
 
 // randomly shuffle a song from main page's songs
 function shuffleSongsList() {
@@ -238,8 +248,9 @@ function shuffleSongsList() {
 //stop button function
 function stopVideo() {
   songList = [];
-  currSong=undefined;
+  currSong = undefined;
   player.stopVideo();
+  clearTimeLeft();
 }
 
 //loop song code
@@ -285,3 +296,11 @@ function updateVolume() {
   player?.setVolume?.(volumeState);
   volumeBar.value = volumeState;
 }
+
+function clearTimeLeft() {
+  clearInterval(intervalId);
+  const a = document.getElementsByClassName("time-left");
+  for (let i = 0; i < a.length; i++) {
+    a[i].classList.remove("active");
+  }
+}