diff --git a/app/pods/components/music-tab/component.js b/app/pods/components/music-tab/component.js index 653672a..50ae7d6 100644 --- a/app/pods/components/music-tab/component.js +++ b/app/pods/components/music-tab/component.js @@ -31,14 +31,11 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { if(result.artwork_url){ picture = result.artwork_url; + } else if(result.user.avatar_url){ + picture = result.user.avatar_url; } this.get('playQueue').pushObject({url: result.stream_url + '?client_id=' + this.get('SC_CLIENT_ID'), fileName: result.title + ' - ' + result.user.username, artist: result.user.username, artistUrl: result.user.permalink_url, title: result.title, artworkUrl: result.artwork_url, picture: picture }); - - // make sure to init the first song - if(this.get('playQueue').length > 0 && this.get('playQueuePointer') === -1){ - this.send('goToSong', 0, true); - } } else { failedSongs.push(result.title); } @@ -61,6 +58,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { } else { processResult(resultObj); } + + if(this.get('playQueuePointer') === -1){ + this.send('next'); + } }, () => { this.get('notify').alert({html: this.get('urlNotFoundHtml')(URL)}); }); @@ -105,7 +106,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { this.$('#playerBottom').slideToggle(); this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed')); }, - goToSong(index, playSong){ + goToSong(index, playSong, scrollToSong){ var dancer = this.get('dancer'), playQueue = this.get('playQueue'); if(dancer.audio) { @@ -144,13 +145,26 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { if(playSong){ this.send('play'); } + + if(scrollToSong){ + var playListArea = Em.$('#playListArea'); + + Em.run.later(()=>{ + playListArea.animate({ + scrollTop: Em.$('.track'+index).offset().top - playListArea.offset().top + playListArea.scrollTop() + }); + }, 1000); + } } }, removeAudio(index){ this.get('playQueue').removeAt(index); + // need to manually remove the tooltip + Em.$('body .tooltip').remove(); + if(index === this.get('playQueuePointer')) { - this.send('goToSong', index, true); + this.send('goToSong', index, true, true); } }, defaultControls(){ @@ -218,12 +232,28 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { var playQueuePointer = this.get('playQueuePointer'), playQueueLength = this.get('playQueue.length'), nextSong = (playQueuePointer + 1), - repeat = this.get('repeat'); + repeat = this.get('repeat'), + shuffle = this.get('shuffle'); this.get('beatHistory').clear(); - if(repeat === 2){ - this.send('goToSong', playQueuePointer, true); + if(repeat === 2){ // repeating one song takes precedence over shuffling + nextSong = playQueuePointer; + } else if(shuffle){ + var shufflePlayed = this.get('shufflePlayed'); + + // played all the song in shuffle mode + if(shufflePlayed.length === playQueueLength){ + shufflePlayed.clear(); + this.send('play', true); + return; + } + + do { + nextSong = Math.floor(Math.random() * playQueueLength); + } while(shufflePlayed.contains(nextSong)); + + shufflePlayed.pushObject(nextSong); } else if(nextSong > playQueueLength-1){ if(repeat === 1 || userTriggered){ nextSong = nextSong % playQueueLength; @@ -233,7 +263,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { } } - this.send('goToSong', nextSong, true); + this.send('goToSong', nextSong, true, true); }, previous() { if(this.get('timeElapsed') > 5) { @@ -246,7 +276,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { nextSong = this.get('playQueue.length') - 1; } - this.send('goToSong', nextSong, true); + this.send('goToSong', nextSong, true, true); } }, toggleVisualizations() { @@ -344,9 +374,8 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { ID3.clearAll(); - // make sure to init the first song - if(playQueue.length > 0 && self.get('playQueuePointer') === -1){ - self.send('goToSong', 0, true); + if(self.get('playQueuePointer') === -1){ + self.send('next'); } }; diff --git a/app/pods/components/music-tab/mixins/music-tab.js b/app/pods/components/music-tab/mixins/music-tab.js index e973e2e..213a28a 100644 --- a/app/pods/components/music-tab/mixins/music-tab.js +++ b/app/pods/components/music-tab/mixins/music-tab.js @@ -139,6 +139,8 @@ export default Em.Mixin.create({ oldBeatPrefCache: null, storage: null, + // used to insure that we don't replay the same thing multiple times in shuffle mode + shufflePlayed: [], pauseLightUpdates: function(){ return this.get('playing'); }.property('playing'), @@ -329,6 +331,7 @@ export default Em.Mixin.create({ var tooltipTxt = 'Shuffle', type = 'shuffle'; if (this.get(type)) { + this.get('shufflePlayed').clear(); tooltipTxt = 'Unshuffle'; } diff --git a/app/pods/components/music-tab/template.hbs b/app/pods/components/music-tab/template.hbs index 3237d53..fe7c52b 100644 --- a/app/pods/components/music-tab/template.hbs +++ b/app/pods/components/music-tab/template.hbs @@ -69,7 +69,7 @@ {{/if}} {{#each playQueue as |item index|}} -
+
{{#if item.picture}} {{/if}} diff --git a/app/styles/app.scss b/app/styles/app.scss index 5f0ee7c..02b622d 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -646,9 +646,11 @@ md-switch.md-default-theme.md-checked .md-thumb { } .playlistItem { - height: 65px; + border-bottom: 1px solid rgba(128, 128, 128, 0.3); + border-top: 1px solid rgba(128,128,128,0.3); + height: 62px; font-family: 'Open Sans', sans-serif; - padding: 5px 20px 5px 5px; + padding: 0 20px 0 5px; position: relative; color: black; background: darken(white, 5%); @@ -672,13 +674,15 @@ md-switch.md-default-theme.md-checked .md-thumb { } .audioRemoveButton { position: absolute; - top: 40%; - right: 0; + top: 20px; + right: 5px; } } .playlistItem.active { background: darken(white, 15%) !important; + border-top: 1px solid $secondaryThemeColor; + border-bottom: 1px solid $secondaryThemeColor; } .playlistItem:hover {