lone-cloud/huegasm
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

shuffle music, scroll to the currently played song

Browse source
This commit is contained in:
Egor 2015-10-15 09:43:37 -07:00
parent 673fc2d4e6
commit 69cc6056cb
4 changed files with 56 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
app/pods/components/music-tab/component.js
View file

@ -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');
}
};

3
app/pods/components/music-tab/mixins/music-tab.js
View file

@ -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';
}

2
app/pods/components/music-tab/template.hbs
View file

@ -69,7 +69,7 @@
{{/if}}
{{#each playQueue as |item index|}}
<div class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
<div class="playlistItem cursorPointer track{{index}} {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
{{#if item.picture}}
<img class="albumArt" src={{item.picture}}>
{{/if}}

12
app/styles/app.scss
View file

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