Checkpoint 18

index.html

@@ -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,5 @@
+
+  $('#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,9 @@
+class Helper{
+  playPauseAndUpdate(song) {
+    player.playPause(song);
+    const duration = player.getDuration(); 
+    $('#time-control .total-time').text(duration);
+  }  
+}
+
+const helper = new Helper();

scripts/player-bar.js

@@ -0,0 +1,46 @@
+{
+    $('button#play-pause').on('click', function() {
+        helper.playPauseAndUpdate();
+        $(this).attr('playState', player.playState);
+    });
+
+    $('button#next').on('click', function() {
+        if (player.playState !== 'playing') { return; }
+
+        const songIndex = album.songs.indexOf(player.currentlyPlaying);
+        const nextSongIndex = songIndex + 1;
+        if (nextSongIndex >= album.songs.length) { return; }
+
+        const nextSong = album.songs[nextSongIndex];
+        helper.playPauseAndUpdate(nextSong);
+    });
+
+    $('button#previous').on('click', function(){
+        if (player.playState !== 'playing') { return; }
+
+        const songIndex = album.songs.indexOf(player.currentlyPlaying);
+        const previousSongIndex = songIndex - 1;
+        if (previousSongIndex < 0 ) { return; }
+
+        const previousSong = album.songs[previousSongIndex];
+        helper.playPauseAndUpdate(previousSong);
+    });
+
+    $('#time-control input').on('input', function(event){
+        player.skipTo(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( currentTime );
+        $('#time-control .total-time').text (duration);
+        $('#time-control input').val(percent);
+      }, 1000);
+
+    $('#volume-control input').on('input', function(event) {
+        player.setVolume(event.target.value);
+    })
+}

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>${song.duration}</td>
+         </tr>
+      `);
+
+      song.element.on('click', event => {
+        player.playPause(song);
+        $('button#play-pause').attr('playState', player.playState);
+      });
+
+      $('#song-list').append(song.element);    
+    });
+  }