Implementing picking and deleting a song, next song, previous song

app/components/controls/music-control.js

@@ -6,13 +6,41 @@ export default Em.Component.extend(musicControlMixin, {
 
   actions: {
     goToSong: function(index){
-      var a = new Audio();
-      a.src = this.get('playQueue')[index].url;
-      this.get('dancer').load(a);
-      this.set('playQueuePointer', index);
-      this.send('play');
+      if(index !== this.get('playQueuePointer')) {
+        var dancer = this.get('dancer'), audio = new Audio();
+        audio.src = this.get('playQueue')[index].url;
+
+        if(dancer.audio) {
+          this.send('clearCurrentAudio');
+        }
+
+        dancer.load(audio);
+        this.setProperties({
+          playQueuePointer: index,
+          timeElapsed: 0
+        });
+
+        this.send('play');
+      }
+    },
+    clearCurrentAudio: function() {
+      var dancer = this.get('dancer');
+
+      dancer.pause();
+      clearInterval(this.get('incrementElapseTimeHandle'));
+
+      this.setProperties({
+        playQueuePointer: -1,
+        timeElapsed: 0,
+        timeTotal: 0,
+        playing: false
+      });
     },
     removeAudio: function(index){
+      if(index === this.get('playQueuePointer')) {
+        this.send('clearCurrentAudio');
+      }
+
       this.get('playQueue').removeAt(index);
 
       //if(index === this.get('playQueuePointer')){
@@ -32,30 +60,31 @@ export default Em.Component.extend(musicControlMixin, {
     playerAreaPlay: function(){
       if(Em.isEmpty(Em.$('#playerControls:hover'))){
         this.send('play');
+        Em.$('#playerArea').removeClass('material-icons').prop('offsetWidth', Em.$('#playerArea').prop('offsetWidth')).addClass('material-icons');
       }
     },
     play: function () {
       var dancer = this.get('dancer'),
         playQueue = this.get('playQueue');
 
-      if (this.get('playing')) {
-        dancer.pause();
-        clearInterval(this.get('incrementElapseTimeHandle'));
-        this.toggleProperty('playing');
-        this.set('timeElapsed', Math.floor(dancer.getTime()));
-      } else if(playQueue.length > 0) {
-        if(this.get('volumeMuted')) {
-          dancer.setVolume(0);
+      if(this.get('playQueuePointer') !== -1 ) {
+        if (this.get('playing')) {
+          dancer.pause();
+          clearInterval(this.get('incrementElapseTimeHandle'));
+          this.toggleProperty('playing');
+          this.set('timeElapsed', Math.floor(dancer.getTime()));
         } else {
-          dancer.setVolume(this.get('volume')/100);
+          if(this.get('volumeMuted')) {
+            dancer.setVolume(0);
+          } else {
+            dancer.setVolume(this.get('volume')/100);
+          }
+
+          dancer.play();
+          this.set('incrementElapseTimeHandle', window.setInterval(this.incrementElapseTime.bind(this), 1000));
+          this.toggleProperty('playing');
         }
-
-        dancer.play();
-        this.set('incrementElapseTimeHandle', window.setInterval(this.incrementElapseTime.bind(this), 1000));
-        this.toggleProperty('playing');
       }
-
-      Em.$('#playerArea').removeClass('material-icons').prop('offsetWidth', Em.$('#playerArea').prop('offsetWidth')).addClass('material-icons');
     },
     volumeChanged: function (value) {
       this.changePlayerControl('volume', value);
@@ -64,10 +93,24 @@ export default Em.Component.extend(musicControlMixin, {
       }
     },
     next: function () {
+      var playQueuePointer = this.get('playQueuePointer'), playQueueLength = this.get('playQueue.length');
+      var nextSong = (playQueuePointer + 1) % playQueueLength;
 
+      this.send('goToSong', nextSong);
     },
     previous: function () {
+      if(this.get('timeElapsed') > 5) {
+        this.send('seekChanged', 0);
+      } else {
+        var nextSong = this.get('playQueuePointer');
+        nextSong--;
 
+        if(nextSong < 0) {
+          nextSong = this.get('playQueue.length') - 1;
+        }
+
+        this.send('goToSong', nextSong);
+      }
     },
     fullscreen: function () {
 
@@ -111,9 +154,7 @@ export default Em.Component.extend(musicControlMixin, {
       Em.$('#fileInput').click();
     },
     playListAreaAddAudio: function(){
-      if(this.get('playQueue').length === 0){
-        this.send('addAudio');
-      }
+      this.send('addAudio');
     },
     speakerViewedChanged: function(value){
       this.set('speakerViewed', value);
@@ -191,7 +232,7 @@ export default Em.Component.extend(musicControlMixin, {
     kick.on();
 
     dancer.bind('loaded', function(){
-      self.set('timeTotal', dancer.audio.duration);
+      self.set('timeTotal', Math.round(dancer.audio.duration));
     });
 
     window.dancer = dancer;
@@ -229,7 +270,7 @@ export default Em.Component.extend(musicControlMixin, {
           self.notifyPropertyChange('playQueue');
 
           // make sure to init the first song
-          if(playQueue.length > 0 && !self.get('dancer').isLoaded()){
+          if(playQueue.length > 0 && self.get('playQueuePointer') === -1){
             self.send('goToSong', 0);
           }
         };

app/components/mixins/music-control.js

@@ -51,15 +51,15 @@ export default Em.Mixin.create({
   decay: 0.02,
   frequency: [0,5],
 
-  playQueuePointer: 0,
+  playQueuePointer: -1,
   playQueue: Em.A(),
   beatHistory: Em.A(),
   maxBeatHistorySize: 30,
   timeElapsed: 0,
   timeTotal: 0,
 
-  playQueueEmpty: Ember.computed.empty('playQueue'),
-  playQueueNotEmpty: Ember.computed.notEmpty('playQueue'),
+  playQueueEmpty: Em.computed.empty('playQueue'),
+  playQueueNotEmpty: Em.computed.notEmpty('playQueue'),
   playQueueMultiple: function(){
     return this.get('playQueue.length') > 1;
   }.property('playQueue'),

app/styles/app.scss

@@ -49,6 +49,7 @@ body {
 
 .footer {
   position: absolute;
+  left: 0;
   bottom: 0;
   width: 100%;
   height: $footerHeight;

app/templates/components/controls/music-control.hbs

@@ -42,14 +42,14 @@
                   class="pull-right" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon" }}</span>
         </div>
 
-        <div id="playListArea" class={{if playQueueEmpty "cursorPointer"}} {{action "playListAreaAddAudio"}}>
+        <div id="playListArea" class="cursorPointer" {{action "playListAreaAddAudio"}}>
             {{#if playQueueEmpty}}
                 <div id="dragHere">Drag your music files here</div>
                 {{paper-icon icon="library-music"}}
             {{/if}}
 
           {{#each playQueue as |item index|}}
-              <div class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}}" {{action "goToSong" index}}>
+              <div class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}}" {{action "goToSong" index bubbles=false}}>
                 {{#if item.title}}
                   {{item.title}}
                   <div class="songArtist">{{item.artist}}</div>

bower.json

@@ -20,8 +20,6 @@
   },
   "resolutions": {
     "ember": "~2.0.2",
-    "ember-qunit": "0.4.9",
-    "jquery": "~2.1.4",
-    "qunit": "~1.18.0"
+    "jquery": "~2.1.4"
   }
 }