Checkpoint 18

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  -->
@@ -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>

lint.erlintrc

@@ -0,0 +1,3 @@
+{
+    “extends”: “eslint-config-google”
+}

scripts/album-info.js

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

scripts/helper.js

@@ -0,0 +1,14 @@
+
+
+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,45 @@
+
+  $('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);
+
+   });
+
+   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 input').val(percent);
+       $('#time-control .total-time').text(duration);
+ }, 1000);
+
+     $('button#previous').on('click', function() {
+       const currentSongIndex = album.songs.indexOf(player.currentlyPlaying);
+       const previousSongIndex = currentSongIndex - 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);
+});
+
+      $('#volume-control input').on('input', function (event){
+        player.setVolume(event.target.value);
+
+});

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,18 @@ 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);
   }
+
+
 }
 
 const player = new Player();
-

scripts/song-list.js

@@ -0,0 +1,25 @@
+{
+
+  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 => {
+  helper.playPauseAndUpdate(song);
+  $('button#play-pause').attr('playState', player.playState);
+});
+
+    $(`#song-list`).append(song.element);
+  });
+}