From 2aa37096d3cbf24559ff928df6bdd4cc54e9f3cd Mon Sep 17 00:00:00 2001 From: priscilla Date: Wed, 30 Oct 2019 13:42:15 -0700 Subject: [PATCH 01/10] Update album-info.js --- scripts/album-info.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/scripts/album-info.js b/scripts/album-info.js index e69de29b..0b3417fc 100644 --- a/scripts/album-info.js +++ b/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); +} From 6d669a18fcf2b18d9a3d4c6ba333be36ba3eeceb Mon Sep 17 00:00:00 2001 From: priscilla Date: Wed, 30 Oct 2019 13:44:20 -0700 Subject: [PATCH 02/10] Update player.js --- scripts/player.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/scripts/player.js b/scripts/player.js index 0d81b305..b00a3bb3 100644 --- a/scripts/player.js +++ b/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,12 +37,12 @@ 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); @@ -50,4 +50,3 @@ class Player { } const player = new Player(); - From c6b8780b2111c9c2db3aba9e31227836b73c4a6f Mon Sep 17 00:00:00 2001 From: priscilla Date: Wed, 30 Oct 2019 15:45:08 -0700 Subject: [PATCH 03/10] Update song-list.js --- scripts/song-list.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/scripts/song-list.js b/scripts/song-list.js index e69de29b..675455ff 100644 --- a/scripts/song-list.js +++ b/scripts/song-list.js @@ -0,0 +1,22 @@ +{ + album.songs.forEach( (song, index) => { + song.element = $(` + + + + ${song.title} + ${song.duration} + + `); + + song.element.on('click', event => { + player.playPause(song); + }); + + $('#song-list').append(song.element); + }); +} From 5a51ca55fa2b513b6150a327236b4414b2a936c2 Mon Sep 17 00:00:00 2001 From: priscilla Date: Fri, 1 Nov 2019 15:10:38 -0700 Subject: [PATCH 04/10] assignment --- scripts/player-bar.js | 17 +++++++++++++++++ scripts/song-list.js | 1 + 2 files changed, 18 insertions(+) diff --git a/scripts/player-bar.js b/scripts/player-bar.js index e69de29b..f26cd222 100644 --- a/scripts/player-bar.js +++ b/scripts/player-bar.js @@ -0,0 +1,17 @@ +{ + $('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); + }); +} diff --git a/scripts/song-list.js b/scripts/song-list.js index 675455ff..76eaf010 100644 --- a/scripts/song-list.js +++ b/scripts/song-list.js @@ -15,6 +15,7 @@ song.element.on('click', event => { player.playPause(song); + $('button#play-pause').attr('playState', player.playState); }); $('#song-list').append(song.element); From f5ef41245f932ad257ffea1030b356641747a8f3 Mon Sep 17 00:00:00 2001 From: priscilla Date: Fri, 1 Nov 2019 16:24:18 -0700 Subject: [PATCH 05/10] Update player-bar.js --- scripts/player-bar.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/scripts/player-bar.js b/scripts/player-bar.js index f26cd222..fff1fd52 100644 --- a/scripts/player-bar.js +++ b/scripts/player-bar.js @@ -14,4 +14,17 @@ 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); + }); + } From c93ebcddc68c96d1bfc292f63792a46584f790cc Mon Sep 17 00:00:00 2001 From: priscilla Date: Fri, 1 Nov 2019 16:35:22 -0700 Subject: [PATCH 06/10] Update player-bar.js --- scripts/player-bar.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/scripts/player-bar.js b/scripts/player-bar.js index f26cd222..d2a95555 100644 --- a/scripts/player-bar.js +++ b/scripts/player-bar.js @@ -14,4 +14,16 @@ 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); +}); } From 34ca1366f0920f39ff777b517a10b3160b08e086 Mon Sep 17 00:00:00 2001 From: priscilla Date: Sat, 2 Nov 2019 15:26:37 -0700 Subject: [PATCH 07/10] Update player-bar.js --- scripts/player-bar.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/scripts/player-bar.js b/scripts/player-bar.js index fff1fd52..9bb05733 100644 --- a/scripts/player-bar.js +++ b/scripts/player-bar.js @@ -27,4 +27,18 @@ player.playPause(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 input').val(percent); + }, 1000); + } From febbebc1582aa1c7a06f425107ff0d999a2205c0 Mon Sep 17 00:00:00 2001 From: priscilla Date: Sun, 3 Nov 2019 14:31:08 -0800 Subject: [PATCH 08/10] changes --- index.html | 6 +++--- scripts/player-bar.js | 7 +++++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 83c9da28..d11628f3 100644 --- a/index.html +++ b/index.html @@ -36,11 +36,11 @@

- + - +
@@ -71,7 +71,7 @@

- +
diff --git a/scripts/player-bar.js b/scripts/player-bar.js index 9bb05733..9d821bca 100644 --- a/scripts/player-bar.js +++ b/scripts/player-bar.js @@ -31,13 +31,20 @@ 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; + const totalTime = duration - currentTime; $('#time-control .current-time').text( currentTime ); + $('#time-control .total-time').text( totalTime); $('#time-control input').val(percent); }, 1000); From 6fb0747cec28125f01016625c860b25a69947407 Mon Sep 17 00:00:00 2001 From: priscilla Date: Tue, 5 Nov 2019 15:21:19 -0800 Subject: [PATCH 09/10] prettyTime() --- scripts/player-bar.js | 11 +++++++++-- scripts/player.js | 9 +++++++++ scripts/song-list.js | 2 +- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/scripts/player-bar.js b/scripts/player-bar.js index 9d821bca..0baa4209 100644 --- a/scripts/player-bar.js +++ b/scripts/player-bar.js @@ -39,13 +39,20 @@ $('#volume-control input').on('input', function (event) { setInterval( () => { if (player.playState !== 'playing') { return; } - const currentTime = player.getTime(); + var currentTime = player.getTime(); + const duration = player.getDuration(); const percent = (currentTime / duration) * 100; - const totalTime = duration - currentTime; + 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); } diff --git a/scripts/player.js b/scripts/player.js index b00a3bb3..5a02f4ca 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -47,6 +47,15 @@ class Player { 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(); diff --git a/scripts/song-list.js b/scripts/song-list.js index 76eaf010..56ab9b5e 100644 --- a/scripts/song-list.js +++ b/scripts/song-list.js @@ -9,7 +9,7 @@ ${song.title} - ${song.duration} + ${player.prettyTime(song.duration)} `); From 54c90990cc6beeb47d92e88b388ab0a09cfa1609 Mon Sep 17 00:00:00 2001 From: priscilla Date: Wed, 6 Nov 2019 18:44:35 -0800 Subject: [PATCH 10/10] https --- index.html | 4 ++-- scripts/album-data.js | 3 ++- scripts/player.js | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index d11628f3..29cbdef0 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,8 @@ Bloc Jams - - + + diff --git a/scripts/album-data.js b/scripts/album-data.js index 69e24bb8..808dcb2d 100644 --- a/scripts/album-data.js +++ b/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' } + ] -}; \ No newline at end of file +}; diff --git a/scripts/player.js b/scripts/player.js index 5a02f4ca..aec8ad3b 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -54,7 +54,7 @@ class Player { if (seconds < 10) { seconds = "0" + seconds; } - return minutes + ":" + seconds + return minutes + ":" + seconds; } }