Fixing fadeout notification transition

app/components/controls/music-control.js

@@ -8,28 +8,26 @@ export default Em.Component.extend(musicControlMixin, {
   onActiveChange: function(){
     if(this.get('active')){
       Em.$('#beatSpeakerCenter').removeClass('pop');
-      Em.$('#playNotification').removeClass('fadeout');
+      Em.$('#playNotification').removeClass('fadeOut');
     }
   }.observes('active'),
 
   actions: {
     goToSong: function(index){
-      //if(index !== this.get('playQueuePointer')) {
-        var dancer = this.get('dancer'), audio = new Audio();
-        audio.src = this.get('playQueue')[index].url;
+      var dancer = this.get('dancer'), audio = new Audio();
+      audio.src = this.get('playQueue')[index].url;
 
-        if(dancer.audio) {
-          this.clearCurrentAudio(true);
-        }
+      if(dancer.audio) {
+        this.clearCurrentAudio(true);
+      }
 
-        dancer.load(audio);
-        this.setProperties({
-          playQueuePointer: index,
-          timeElapsed: 0
-        });
+      dancer.load(audio);
+      this.setProperties({
+        playQueuePointer: index,
+        timeElapsed: 0
+      });
 
-        this.send('play');
-      //}
+      this.send('play');
     },
     removeAudio: function(index){
       if(index === this.get('playQueuePointer')) {
@@ -58,7 +56,8 @@ export default Em.Component.extend(musicControlMixin, {
     playerAreaPlay: function(){
       if(Em.isEmpty(Em.$('#playerControls:hover'))){
         this.send('play');
-        Em.$('#playNotification').removeClass('fadeout').prop('offsetWidth', Em.$('#playerArea').prop('offsetWidth')).addClass('fadeout');
+        this.set('fadeOutNotification', true);
+        Em.$('#playNotification').removeClass('fadeOut').prop('offsetWidth', Em.$('#playNotification').prop('offsetWidth')).addClass('fadeOut');
       }
     },
     play: function () {

app/components/mixins/music-control.js

@@ -90,6 +90,8 @@ export default Em.Mixin.create({
   // audio: playing or paused
   playing: false,
 
+  fadeOutNotification: false,
+
   speakerViewed: true,
   speakerLabel: function() {
     if(this.get('speakerViewed')){

app/styles/app.scss

@@ -456,7 +456,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
   opacity: 0;
 }
 
-.fadeOut:before {
+.fadeOut {
   animation-duration: 1s;
   animation-name: fadeOut;
 }
@@ -529,7 +529,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
   background: white !important;
 }
 
-#playerArea * .noUi-handle:after, #playerArea * .noUi-handle:before {
+#playerArea * .noUi-handle::after, #playerArea * .noUi-handle::before {
   content: none;
 }
 

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

@@ -1,7 +1,7 @@
 <div class="row">
     <div id="playerArea" class="col-sm-8 col-xs-12" {{action "playerAreaPlay"}}>
 
-        <div id="playNotification" class="material-icons {{if playing "play-arrow" "pause"}}"></div>
+        <div id="playNotification" class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
         <div id="playerControls">
           {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
 
@@ -96,7 +96,7 @@
     </div>
 
     <div id="beatContainer" class="col-sm-4 col-xs-12">
-      {{#if speakerViewed}}
+      {{#liquid-if speakerViewed}}
         <div id="beatSpeaker">
           <img src="assets/images/speaker-outer.png" />
             <div id="beatSpeakerCenter">
@@ -109,7 +109,7 @@
             <p>{{{item}}}</p>
           {{/each}}
         </div>
-      {{/if}}
+      {{/liquid-if}}
 
       {{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}}
     </div>