Assignment 18 sliders

index.html

@@ -36,11 +36,11 @@ <h2 class="artist"></h2>
           <col id="song-number-column">
           <col id="song-title-column">
           <col id="song-duration-column">
-        </colgroup>  
+        </colgroup>
       </table>
 
     </main>
-    
+
     <!-- Player Bar  -->
     <section id="player-bar">
       <section id="buttons">
@@ -71,7 +71,7 @@ <h2 class="artist"></h2>
         <div class="icon ion-volume-high"></div>
       </div>
 
-      
+
     </section>
 
     <!-- Scripts  -->
@@ -82,5 +82,6 @@ <h2 class="artist"></h2>
     <script src="scripts/album-info.js"></script>
     <script src="scripts/song-list.js"></script>
     <script src="scripts/player-bar.js"></script>
+    <script src="scripts/helper.js"></script>
   </body>
 </html>

scripts/album-info.js

@@ -0,0 +1,6 @@
+{
+   $('#album-title').text(album.title);
+   $('img#album-cover-art').attr('src', album.albumArtUrl);
+   $('.artist').text(album.artist);
+   $('#release-info').text(album.releaseInfo);
+ }

scripts/helper.js

@@ -0,0 +1,17 @@
+class Helper {
+
+    playPauseAndUpdate(song) {
+      player.playPause(song);
+      let totalTime = 'null';
+      if (song !== undefined){
+        totalTime =song.duration;
+      } else {
+        totalTime = player.getDuration();
+    }
+
+    $('#time-control .total-time').text(totalTime);
+
+};
+
+}
+const helper = new Helper();

scripts/player-bar.js

@@ -0,0 +1,51 @@
+{
+  $('button#play-pause').on('click', function() {
+    helper.playPauseAndUpdate();
+    $(this).attr('playState', player.playState);
+  });
+
+  $('button#next').on('click', function() {
+     if (player.playState !== 'playing') { return; }
+
+     const currentSongIndex = album.songs.indexOf(player.currentlyPlaying);
+     const nextSongIndex = currentSongIndex + 1;
+     if (nextSongIndex >= album.songs.length) { return; }
+
+     const nextSong = album.songs[nextSongIndex];
+     helper.playPauseAndUpdate(nextSong);
+
+  });
+
+  $('#time-control input').on('input', function(event) {
+    player.skipTo(event.target.value);
+  });
+
+  $('#volume-control input').on('input', function (event) {
+    player.setVolume(event.target.value)
+  });
+
+  setInterval( () => {
+    if (player.playState !== 'playing') { return; }
+    const currentTime = player.getTime();
+    const duration = player.getDuration();
+    const percent = (currentTime / duration) * 100;
+    $('#time-control .current-time').text(player.prettyTime(currentTime));
+    $('#time-control .total-time').text(player.prettyTime(duration));
+    $('#time-control input').val(percent);
+  }, 1000);
+
+
+
+  $('button#previous').on('click', function() {
+     if (player.playState !== 'playing') { return; }
+
+     const currentSongIndex = album.songs.indexOf(player.currentlyPlaying);
+     const previousSongIndex = currentSongIndex - 1;
+     if (previousSongIndex < 0) { return; }
+
+     const previousSong = album.songs[previousSongIndex];
+     helper.playPauseAndUpdate(previousSong);
+
+  });
+
+}

scripts/player.js

@@ -13,14 +13,14 @@ class Player {
   getTime() {
     return this.soundObject.getTime();
   }
-  
+
   playPause (song = this.currentlyPlaying) {
     if (this.currentlyPlaying !== song) {
       // Stop the currently playing sound file (even if nothing is playing)
       this.soundObject.stop();
       // Clear classes on the song that's currently playing
       this.currentlyPlaying.element.removeClass('playing paused');
-      
+
       // Update our currentlyPlaying and playState properties
       this.currentlyPlaying = song;
       this.playState = 'stopped';
@@ -37,17 +37,23 @@ class Player {
       this.currentlyPlaying.element.removeClass('playing').addClass('paused');
     }
   }
-  
+
   skipTo (percent) {
     if (this.playState !== 'playing') { return }
     this.soundObject.setTime( (percent / 100) * this.soundObject.getDuration() );
   }
-  
+
   setVolume (percent) {
     this.volume = percent;
     this.soundObject.setVolume(percent);
   }
+
+  prettyTime (timeInSeconds) {
+    const minutes = Math.floor(timeInSeconds / 60);
+    const seconds = Math.floor(timeInSeconds % 60) <=9 ? `0${Math.floor(timeInSeconds % 60)}` : Math.floor(timeInSeconds % 60);
+    return `${minutes}:${seconds}`;
+  }
+
 }
 
 const player = new Player();
-

scripts/song-list.js

@@ -0,0 +1,24 @@
+{
+  album.songs.forEach( (song, index) => {
+    song.element= $(`
+      <tr>
+        <td>
+          <button>
+            <span class="song-number">${index + 1}</span>
+            <span class="ion-play"></span>
+            <span class="ion-pause"></span>
+          </button>
+        </td>
+        <td>${song.title}</td>
+        <td>${player.prettyTime(song.duration)}</td>
+      </tr>
+    `);
+
+    song.element.on('click', event => {
+      helper.playPauseAndUpdate(song);
+      $('button#play-pause').attr('playState', player.playState);
+    });
+
+    $('#song-list').append(song.element);
+  });
+}