Update album-info.js

index.html

@@ -4,8 +4,8 @@
     <title>Bloc Jams</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300">
-    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300">
+    <link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css">
     <link rel="stylesheet" type="text/css" href="styles/album.css">
     <link rel="stylesheet" type="text/css" href="styles/player-bar.css">
@@ -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  -->

scripts/album-data.js

@@ -9,5 +9,6 @@ const album = {
     { title: 'Red', duration: '268.45', soundFileUrl: 'assets/music/red.mp3' },
     { title: 'Pink', duration: '153.14', soundFileUrl: 'assets/music/pink.mp3' },
     { title: 'Magenta', duration: '374.22', soundFileUrl: 'assets/music/magenta.mp3' }
+
   ]
-};
+};

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/player-bar.js

@@ -0,0 +1,58 @@
+{
+  $('button#play-pause').on('click', function() {
+    player.playPause();
+    $(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];
+    player.playPause(nextSong);
+  });
+
+  $('button#previous').on('click', function() {
+    if (player.playState !== 'playing') { return; }
+
+
+    const currentSongIndex = album.songs.indexOf(player.currentlyPlaying);
+    const previousSongIndex = currentSongIndex - 1;
+    if (currentSongIndex == 0) { return; }
+
+    const previousSong = album.songs[previousSongIndex];
+    player.playPause(previousSong);
+  });
+
+  $('#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; }
+
+    var currentTime = player.getTime();
+
+    const duration = player.getDuration();
+    const percent = (currentTime / duration) * 100;
+    var totalTime = duration - currentTime;
+
+    currentTime = player.prettyTime(currentTime);
+    totalTime = player.prettyTime(totalTime);
+
+    $('#time-control .current-time').text( currentTime );
+    $('#time-control .total-time').text( totalTime);
+    $('#time-control input').val(percent);
+
+
+  }, 1000);
+
+}

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,25 @@ 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) {
+    var minutes = Math.floor(timeInSeconds / 60);
+    var seconds = Math.floor(timeInSeconds - minutes * 60);
+    if (seconds < 10) {
+      seconds = "0" + seconds;
+    }
+    return minutes + ":" + seconds;
+  }
 }
 
 const player = new Player();
-

scripts/song-list.js

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