Loop feature (addressing issue #187) (#332)

* Added loop button and style (yet to add function) * Loop feature complete * Cleaned up some code
KendallDoesCoding · Sep 24, 2022 · 84f3f1a · 84f3f1a
1 parent ec1b3a2
commit 84f3f1a
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -59,18 +59,23 @@ <h1 class="heading">A very Mogul Christmas</h1>
          <p> PS: listen to Christmas Music throughout the year, not only during Christmas time. </p>
       </div>
       <div class="main-random-div">
-            <div class="random-song-container">
-               <i id="random-btn-meta" class="fa fa-random fa-2x"></i>
-               <div id="random-text-container">
-                  <button class="random" id="random-btn-text" onClick="shuffleSongs();">Play Random Song</button>
-               </div>
-               <!-- Stop button -->
-               <div id="random-text-container">
-                  <button class="stop-btn-style" id="stop-btn" onClick="stopVideo()">Stop</button>
-               </div>
-               <!-- stop button end -->
+         <div class="random-song-container">
+            <i id="random-btn-meta" class="fa fa-random fa-2x"></i>
+            <div id="random-text-container">
+               <button class="random" id="random-btn-text" onClick="shuffleSongs();">Play Random Song</button>
             </div>
+            <!-- Stop button -->
+            <div id="random-text-container">
+               <button class="stop-btn-style" id="stop-btn" onClick="stopVideo()">Stop</button>
+            </div>
+            <!-- stop button end -->
+         </div>
+      </div>
+      <!-- Loop button -->
+      <div class="random-text-container">
+         <button class="loop-btn-style loop-false" id="loop-btn"><i id="random-btn-meta" class="fa fa-repeat fa-2x"></i></button>
       </div>
+      <!-- loop button end -->
       <iframe id="embed" src="https://www.youtube.com/embed/TtY9eRayseg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
       <!-- songs container, the contents of the div are called upon in the js file, thus this div is empty. -->
       <div class="songs">

diff --git a/index.js b/index.js
@@ -63,13 +63,16 @@ Object.keys(songs).map((song_title) => {
   const outerElem = document.createElement("p");
 
   //stop button for individual songs
-  outerElem.onclick=()=>revealStopButton();
+  outerElem.onclick=()=>revealStopAndLoopButton();
 
   const link = document.createElement("a");
   link.innerHTML = song_title;
   link.style = "cursor: pointer";
   link.onclick = () => {
     embed.src = `https://www.youtube.com/embed/TtY9eRayseg?start=${startTime}&autoplay=1&end=${endTime}&enablejsapi=1`;
+    //for looping feature
+    clearTimeout(timeoutData);
+    loopWatcher(startTime,endTime,`https://www.youtube.com/embed/TtY9eRayseg?start=${startTime}&autoplay=1&end=${endTime}&enablejsapi=1`)
     console.log(
       "If you don't know this song, we suggest you go to the lyrics page. You can play the song from that page too :)"
     );
@@ -83,13 +86,16 @@ Object.keys(songs).map((song_title) => {
 
 // randomly shuffle a song from main page's songs
 function shuffleSongs() {
-  revealStopButton();
+  revealStopAndLoopButton();
   var properties = Object.getOwnPropertyNames(songs);
   var ranNum = Math.floor(Math.random() * (properties.length - 1));
   var songName = properties[ranNum];
   var song = songs[songName];
   console.log(songs[songName]);
   embed.src = `https://www.youtube.com/embed/TtY9eRayseg?start=${song.start}&autoplay=1&end=${song.end}&enablejsapi=1`;
+  //for loop feature
+  clearTimeout(timeoutData);
+  loopWatcher(song.start,song.end,`https://www.youtube.com/embed/TtY9eRayseg?start=${song.start}&autoplay=1&end=${song.end}&enablejsapi=1`);
 }
 
 // Open GitHub repo in a new window if user clicks GitHub icon on project website
@@ -105,12 +111,62 @@ newTabGithub.addEventListener("click", () => {
 const stopButton=document.querySelector("#stop-btn"); //stop button
 
 //make the stop button visible when "play random song button is clicked"
-function revealStopButton(){
+function revealStopAndLoopButton(){
   stopButton.style.display='block';
+  loopButton.style.display='inline-block';
+}
+
+function hideStopAndLoopButton(){
+  stopButton.style.display='none';
+  loopButton.style.display='none';
 }
 
 //stop button function
 function stopVideo(){
   embed.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}','*');
-  stopButton.style.display='none';
-}
+  hideStopAndLoopButton();
+  clearTimeout(timeoutData);
+  toggleLoop();
+}
+
+//loop song code
+
+const loopButton=document.querySelector('#loop-btn');
+//loopState=false means no loop
+//loopState=true means loop
+let loopState=false;
+let timeoutData=null;
+
+
+//toggle loop button effect
+function toggleLoop(){
+  loopState=!loopState;
+  if(loopState===false){
+    loopButton.classList.remove('loop-true');
+    loopButton.classList.add('loop-false');
+  }
+  else if(loopState===true){
+    loopButton.classList.remove('loop-false');
+    loopButton.classList.add('loop-true');
+  }
+}
+
+//when loop button clicked
+loopButton.addEventListener('click',() => {
+  toggleLoop();
+  console.log(`Loop=${loopState}`);
+})
+
+//loop function
+function loopWatcher(start,end,apiURL){
+  const waitTime=((parseInt(end)-parseInt(start))+5)*1000 //seconds
+  timeoutData=setTimeout(() => {
+    if(loopState===true){
+      embed.src=apiURL;
+      console.log('looped')//remove
+    }
+    else{
+      hideStopAndLoopButton();
+    }
+  },waitTime)
+}
diff --git a/styles.css b/styles.css
@@ -216,6 +216,37 @@ a:active {
   margin-top: 1rem;
 }
 
+.loop-btn-style{
+  display:none;
+  outline: none;
+  border: none;
+  font-family: "Handlee", cursive;
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 0.6rem 0.7rem;
+  border-radius: 50px;
+  transition: all 0.2s ease-in-out;
+  margin-top: 0rem;
+}
+
+.loop-true{
+  background-image: radial-gradient(
+    circle farthest-corner at 92.3% 71.5%,
+    rgb(0, 144, 14) 0%,
+    rgb(194, 212, 0) 90%
+    );
+  color:rgb(77, 0, 177);
+  }
+
+.loop-false{
+  background-image: radial-gradient(
+    circle farthest-corner at 92.3% 71.5%,
+    rgb(0, 0, 0) 0%,
+    rgb(138, 138, 138) 90%
+    );
+  color: white;
+}
+
 .suggest {
   background-color: #f4d03f;
   background-image: linear-gradient(132deg, #f4d03f 0%, #16a085 100%);