fixing bugs, more options playlist menu, better 'previous' when shuffling
This commit is contained in:
Egor
parent
cfe82715c6
commit
757946c9ac
5 changed files with 130 additions and 72 deletions
|
|
@ -144,10 +144,12 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
|
|||
var playQueuePointer =this.get('playQueuePointer'),
|
||||
song = this.get('playQueue')[playQueuePointer];
|
||||
|
||||
this.send('removeAudio', playQueuePointer);
|
||||
if(song.local){
|
||||
this.send('removeAudio', playQueuePointer);
|
||||
} else {
|
||||
this.send('next', true);
|
||||
}
|
||||
|
||||
debugger;
|
||||
|
||||
if(event.target.error.code === 2){
|
||||
this.get('notify').alert({html: this.get('failedToDecodeFileHtml')(song.fileName)});
|
||||
} else {
|
||||
|
|
@ -251,9 +253,9 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
|
|||
this.changePlayerControl('volumeMuted', false);
|
||||
}
|
||||
},
|
||||
next(userTriggered) {
|
||||
next(repeatAll) {
|
||||
var playQueuePointer = this.get('playQueuePointer'),
|
||||
playQueueLength = this.get('playQueue.length'),
|
||||
playQueue = this.get('playQueue'),
|
||||
nextSong = (playQueuePointer + 1),
|
||||
repeat = this.get('repeat'),
|
||||
shuffle = this.get('shuffle');
|
||||
|
|
@ -261,29 +263,30 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
|
|||
this.get('beatHistory').clear();
|
||||
|
||||
if(repeat === 2){ // repeating one song takes precedence over shuffling
|
||||
if(playQueuePointer === -1 && playQueueLength > 0) {
|
||||
if(playQueuePointer === -1 && playQueue.length > 0) {
|
||||
nextSong = 0;
|
||||
} else {
|
||||
nextSong = playQueuePointer;
|
||||
}
|
||||
} else if(shuffle){
|
||||
} else if(shuffle){ // next shuffle song
|
||||
var shufflePlayed = this.get('shufflePlayed');
|
||||
|
||||
// played all the song in shuffle mode
|
||||
if(shufflePlayed.length === playQueueLength){
|
||||
if(shufflePlayed.length === playQueue.length){
|
||||
shufflePlayed.clear();
|
||||
this.send('play', true);
|
||||
return;
|
||||
}
|
||||
|
||||
// we're going to assume that the song URL is the id
|
||||
do {
|
||||
nextSong = Math.floor(Math.random() * playQueueLength);
|
||||
} while(shufflePlayed.contains(nextSong));
|
||||
nextSong = Math.floor(Math.random() * playQueue.length);
|
||||
} while(shufflePlayed.contains(playQueue[nextSong].url));
|
||||
|
||||
shufflePlayed.pushObject(nextSong);
|
||||
} else if(nextSong > playQueueLength-1){
|
||||
if(repeat === 1 || userTriggered){
|
||||
nextSong = nextSong % playQueueLength;
|
||||
shufflePlayed.pushObject(playQueue[nextSong].url);
|
||||
} else if(nextSong > playQueue.length-1){
|
||||
if(repeat === 1 || repeatAll){
|
||||
nextSong = nextSong % playQueue.length;
|
||||
} else {
|
||||
this.send('play', true);
|
||||
return;
|
||||
|
|
@ -296,11 +299,37 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
|
|||
if(this.get('timeElapsed') > 5) {
|
||||
this.send('seekChanged', 0);
|
||||
} else {
|
||||
var nextSong = this.get('playQueuePointer');
|
||||
nextSong--;
|
||||
var nextSong = this.get('playQueuePointer'),
|
||||
playQueue = this.get('playQueue');
|
||||
|
||||
if(nextSong < 0) {
|
||||
nextSong = this.get('playQueue.length') - 1;
|
||||
if(this.get('shuffle') && !Em.isNone(playQueue[nextSong])) { // go to the previously shuffled song
|
||||
var shufflePlayed = this.get('shufflePlayed'),
|
||||
shuffledSongIndx = this.get('shufflePlayed').indexOf(playQueue[nextSong].url),
|
||||
i = 0;
|
||||
|
||||
if(shufflePlayed.length > 0 && shuffledSongIndx !== -1){ // only if there was one
|
||||
nextSong = shuffledSongIndx - 1;
|
||||
|
||||
if(nextSong < 0){
|
||||
nextSong = shufflePlayed.length - 1;
|
||||
}
|
||||
|
||||
playQueue.some(function(item){ // try to find the previous song id
|
||||
if(item.url === shufflePlayed[nextSong]){
|
||||
nextSong = i;
|
||||
return true;
|
||||
}
|
||||
i++;
|
||||
|
||||
return false;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
nextSong--;
|
||||
|
||||
if(nextSong < 0) {
|
||||
nextSong = playQueue.length - 1;
|
||||
}
|
||||
}
|
||||
|
||||
this.send('goToSong', nextSong, true, true);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default Em.Mixin.create({
|
|||
this.get('storage').set('huegasm.currentVisName', currentVisName);
|
||||
}.observes('currentVisName'),
|
||||
|
||||
didInsertElement(){
|
||||
doDancerBind(){
|
||||
var dancer = this.get('dancer'),
|
||||
canvasEl = Em.$('#visualization')[0],
|
||||
ctx = canvasEl.getContext('2d'),
|
||||
|
|
@ -69,6 +69,10 @@ export default Em.Mixin.create({
|
|||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
didInsertElement(){
|
||||
this.doDancerBind();
|
||||
}
|
||||
})
|
||||
;
|
||||
|
|
|
|||
|
|
@ -53,73 +53,77 @@
|
|||
<input id="fileInput" type="file" accept="audio/*" multiple="true"/>
|
||||
|
||||
<div id="playListControls">
|
||||
{{#if usingLocalAudio}}
|
||||
<button class="dropdown-toggle pull-right addNewMusic" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
Add new music
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
{{#if usingLocalAudio}}
|
||||
<button class="dropdown-toggle pull-right addNewMusic" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
Add new music
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
|
||||
<ul id="addMusicChoices" class="dropdown-menu">
|
||||
<li><a href="#" {{action "addLocalAudio"}}>Local</a></li>
|
||||
<li><a href="#" {{action "toggleIsShowingAddSoundCloudModal"}}>SoundCloud</a></li>
|
||||
</ul>
|
||||
<ul id="addMusicChoices" class="dropdown-menu">
|
||||
<li><a href="#" {{action "addLocalAudio"}}>Local</a></li>
|
||||
<li><a href="#" {{action "toggleIsShowingAddSoundCloudModal"}}>SoundCloud</a></li>
|
||||
</ul>
|
||||
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon icon="clear-all" class="playerControllIcon"}}</span>
|
||||
{{/if}}
|
||||
{{#if playQueueNotEmpty}}
|
||||
<div id="extraOptionsMenu">
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon icon="clear-all" class="playerControllIcon"}}</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if usingMicSupported}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Listen to audio through mic" {{action "useMicAudio"}}>{{paper-icon icon=micIcon class=usingMicAudioClass}}</span>
|
||||
{{/if}}
|
||||
{{#if usingMicSupported}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Listen to audio through mic" {{action "useMicAudio"}}>{{paper-icon icon=micIcon class=usingMicAudioClass}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if usingMicAudio}}
|
||||
<div id="playAreaMic">
|
||||
{{paper-icon icon="mic"}}
|
||||
</div>
|
||||
<div id="playAreaMic">
|
||||
{{paper-icon icon="mic"}}
|
||||
</div>
|
||||
{{else}}
|
||||
{{#if usingLocalAudio}}
|
||||
<div id="playListArea" class={{playListAreaClass}} {{action "addLocalAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
|
||||
{{#if (or playQueueEmpty dragging)}}
|
||||
<div id="dragHere">
|
||||
{{#if dragging}}
|
||||
Drag your music files here
|
||||
{{else}}
|
||||
Add your music files here
|
||||
{{/if}}
|
||||
</div>
|
||||
{{paper-icon icon="library-music" class=dimmerOnClass}}
|
||||
{{/if}}
|
||||
|
||||
{{#each playQueue as |item index|}}
|
||||
<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}}>
|
||||
{{else}}
|
||||
<img class="albumArt" src="assets/images/missingArtwork.png">
|
||||
{{#if usingLocalAudio}}
|
||||
<div id="playListArea" class={{playListAreaClass}} {{action "addLocalAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
|
||||
{{#if (or playQueueEmpty dragging)}}
|
||||
<div id="dragHere">
|
||||
{{#if dragging}}
|
||||
Drag your music files here
|
||||
{{else}}
|
||||
Add your music files here
|
||||
{{/if}}
|
||||
</div>
|
||||
{{paper-icon icon="library-music" class=dimmerOnClass}}
|
||||
{{/if}}
|
||||
|
||||
<div class="songInfo">
|
||||
{{#if item.title}}
|
||||
<div class="songTitle">{{item.title}}</div>
|
||||
<div class="songArtist">
|
||||
{{#if item.artistUrl}}
|
||||
<a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}>{{item.artist}}</a>
|
||||
{{#each playQueue as |item index|}}
|
||||
<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}}>
|
||||
{{else}}
|
||||
<img class="albumArt" src="assets/images/missingArtwork.png">
|
||||
{{/if}}
|
||||
|
||||
<div class="songInfo">
|
||||
{{#if item.title}}
|
||||
<div class="songTitle">{{item.title}}</div>
|
||||
<div class="songArtist">
|
||||
{{#if item.artistUrl}}
|
||||
<a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}>{{item.artist}}</a>
|
||||
{{else}}
|
||||
{{item.artist}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
{{item.artist}}
|
||||
{{item.fileName}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
{{item.fileName}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Remove" data-container="body" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Remove" data-container="body" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1025,3 +1025,19 @@ div.ember-modal-dialog {
|
|||
.keyboard-arrow-down {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#extraOptionsMenu {
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 3px 15px;
|
||||
position: absolute;
|
||||
bottom: -37px;
|
||||
right: 17px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#extraOptionsMenu:hover {
|
||||
opacity: 1;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
|
|
|||
5
vendor/dancer.js
vendored
5
vendor/dancer.js
vendored
|
|
@ -388,6 +388,11 @@
|
|||
this.isLoaded = false;
|
||||
this.progress = 0;
|
||||
|
||||
if(this.proc){
|
||||
this.proc.onaudioprocess = null;
|
||||
delete this.proc;
|
||||
}
|
||||
|
||||
this.proc = this.context.createScriptProcessor( SAMPLE_SIZE / 2, 1, 1 );
|
||||
|
||||
this.proc.onaudioprocess = function ( e ) {
|
||||
|
|
|
|||
Reference in a new issue