From 6678a93d4d0e7bf360b54925091b8edbe4d56479 Mon Sep 17 00:00:00 2001
From: Jing <jingliang0503@gmail.com>
Date: Sun, 12 Jan 2020 10:51:01 -0500
Subject: [PATCH 1/2] Assignment 17 completed

---
 scripts/album-info.js |  7 +++++++
 scripts/player-bar.js | 24 ++++++++++++++++++++++++
 scripts/song-list.js  | 24 ++++++++++++++++++++++++
 3 files changed, 55 insertions(+)

diff --git a/scripts/album-info.js b/scripts/album-info.js
index e69de29b..c26a242b 100644
--- a/scripts/album-info.js
+++ b/scripts/album-info.js
@@ -0,0 +1,7 @@
+{
+	$('#album-title').text(album.title);
+	$ ('img#album-cover-art').attr('src', album.albumArtUrl);
+	$ ('.artist').text(album.artist);
+	$ ('#release-info').text(album.releaseInfo);
+	
+}
\ No newline at end of file
diff --git a/scripts/player-bar.js b/scripts/player-bar.js
index e69de29b..f35f8185 100644
--- a/scripts/player-bar.js
+++ b/scripts/player-bar.js
@@ -0,0 +1,24 @@
+{
+$('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 prevSongIndex = currentSongIndex - 1;
+	if (prevSongIndex >= album.songs.length) { return; } 
+	const prevSong = album.songs[prevSongIndex];
+    player.playPause(prevSong);
+	
+});
+}
\ No newline at end of file
diff --git a/scripts/song-list.js b/scripts/song-list.js
index e69de29b..269e28cd 100644
--- a/scripts/song-list.js
+++ b/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);
+});	
+}

From 757a772b52a66eabf626b1ec1cdc04ae76863723 Mon Sep 17 00:00:00 2001
From: Jing <jingliang0503@gmail.com>
Date: Mon, 13 Jan 2020 12:55:51 -0500
Subject: [PATCH 2/2] redo

---
 scripts/player-bar.js | 63 +++++++++++++++++++++++++++++--------------
 1 file changed, 43 insertions(+), 20 deletions(-)

diff --git a/scripts/player-bar.js b/scripts/player-bar.js
index f35f8185..5d6d7a38 100644
--- a/scripts/player-bar.js
+++ b/scripts/player-bar.js
@@ -1,24 +1,47 @@
 {
-$('button#play-pause').on('click', function(){
-	player.playPause();
-	$(this).attr('playState', player.playState);
-});
+   $('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];
-    player.playPause(nextSong);
-	
-$('button#previous').on('click',function(){
- if (player.playState !== 'playing'){return;}
-    const prevSongIndex = currentSongIndex - 1;
-	if (prevSongIndex >= album.songs.length) { return; } 
-	const prevSong = album.songs[prevSongIndex];
-    player.playPause(prevSong);
+   $('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 prevSongIndex = currentSongIndex - 1;
+     if (prevSongIndex < 0) { return; }
+
+     const prevSong = album.songs[prevSongIndex];
+     player.playPause(prevSong);
+   });
+
+   $('#volume-control input').on ('input', function (event) {
+	   player.setVolume(event.target.value);
+	});	   
 	
+	   $('#time-control input').on('input', function (event) {
+ player.skipTo(event.target.value); 
 });
-}
\ No newline at end of file
+   
+   
+   setInterval( () => {
+	if (player.playState !== 'playing'){return;}
+	const currentTime = player.getTime();
+	const duration = player.getDuration ();
+	const percent = (currentTime/duration) * 100;
+	$ ('#time-control input').val(percent);
+	$ ('#time-control .current-time').text(currentTime);
+
+	}, 1000);
+ }
\ No newline at end of file