working on dimmer

app/pods/components/hue-controls/template.hbs

@@ -1,5 +1,5 @@
 {{#if ready}}
-  <div class="row navigation antiDimmer">
+  <div class="row navigation">
     <div class="col-lg-4 col-lg-offset-4 col-xs-6 col-xs-offset-3">
       {{#each tabData as |tab|}}
         <span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
@@ -17,7 +17,7 @@
         <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Application Settings" {{action "toggleAppSettings"}}>{{paper-icon icon="settings"}}</span>
 
         {{#if appSettingsDisplayed}}
-          <div id="appSettings" class="antiDimmer">
+          <div id="appSettings">
             <div class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</div>
             <div class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</div>
           </div>

app/pods/components/music-tab/component.js

@@ -16,6 +16,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
   }.observes('active'),
 
   actions: {
+    toggleDimming: function(){
+      this.toggleProperty('dimmerEnabled');
+    },
     useLocalAudio: function(){
       var audioStream = this.get('audioStream');
       this.changePlayerControl('audioMode', 0);
@@ -113,10 +116,12 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
           }
 
           dancer.play();
-          this.setProperties({
-            dimmerOn: true,
-            incrementElapseTimeHandle: window.setInterval(this.incrementElapseTime.bind(this), 1000)
-          });
+
+          if(this.get('dimmerEnabled')){
+            this.set('dimmerOn', true);
+          }
+
+          this.setProperties('incrementElapseTimeHandle', window.setInterval(this.incrementElapseTime.bind(this), 1000));
         }
         this.toggleProperty('playing');
       }
@@ -455,18 +460,18 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       }
     });
 
-    dancer.bind('update', function(){
-      var waveform = this.getWaveform(), spectrum = this.getSpectrum(), sumS = 0, sumW = 0;
-      for (let i = 0, l = spectrum.length; i < l && i < 512; i++ ) {
-        sumS += spectrum[i];
-      }
-
-      for (let i = 0, l = waveform.length; i < l && i < 512; i++ ) {
-        sumW += waveform[i];
-      }
-
-      //console.log('sumW: ' + sumW + ', sumS: ' + sumS);
-    });
+    //dancer.bind('update', function(){
+    //  var waveform = this.getWaveform(), spectrum = this.getSpectrum(), sumS = 0, sumW = 0;
+    //  for (let i = 0, l = spectrum.length; i < l && i < 512; i++ ) {
+    //    sumS += spectrum[i];
+    //  }
+    //
+    //  for (let i = 0, l = waveform.length; i < l && i < 512; i++ ) {
+    //    sumW += waveform[i];
+    //  }
+    //
+    //  //console.log('sumW: ' + sumW + ', sumS: ' + sumS);
+    //});
 
     this.setProperties({
       dancer: dancer,
@@ -509,6 +514,12 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       event.preventDefault();
     });
 
+    Em.$(document).on('mousedown', function(event){
+      if(Em.$('#musicTab').has(event.target).length === 0 && self.get('dimmerEnabled')){
+        self.set('dimmerEnabled', false);
+      }
+    });
+
     // control the volume by scrolling up/down
     Em.$('#playerArea').on('mousewheel', function(event) {
       if(self.get('playQueueNotEmpty')) {

app/pods/components/music-tab/mixins/music-tab.js

@@ -90,6 +90,7 @@ export default Em.Mixin.create({
   visualizationsDisplayed: false,
   audioStream: null,
   dimmerOn: false,
+  dimmerEnabled: false,
 
   notFoundHtml: '<div class="alert alert-danger" role="alert">A microphone was not found.</div>',
 
@@ -210,6 +211,26 @@ export default Em.Mixin.create({
     return classes;
   }.property('dragging', 'draggingOverPlayListArea', 'dimmerOn'),
 
+  dimmingClass: function(){
+    var classes = 'playerControllIcon';
+
+    if(this.get('dimmerEnabled')){
+      classes += ' active';
+    }
+
+    return classes;
+  }.property('dimmerEnabled'),
+
+  volumeMutedClass: function(){
+    var classes = 'playerControllIcon volumeButton';
+
+    if(this.get('volumeMuted')){
+      classes += ' active';
+    }
+
+    return classes;
+  }.property('volumeMuted'),
+
   usingLocalAudioClass: function() {
     return this.get('usingLocalAudio') ? 'playerControllIcon active' : 'playerControllIcon';
   }.property('usingLocalAudio'),
@@ -226,7 +247,7 @@ export default Em.Mixin.create({
     return this.get('shuffle') ? 'playerControllIcon active' : 'playerControllIcon';
   }.property('shuffle'),
 
-  volumeClass: function () {
+  volumeIcon: function () {
     var volume = this.get('volume');
 
     if (this.get('volumeMuted')) {
@@ -240,6 +261,15 @@ export default Em.Mixin.create({
     }
   }.property('volumeMuted', 'volume'),
 
+  onDimmerEnabledChange: function(){
+    if(!this.get('dimmerEnabled')){
+      this.set('dimmerOn', false);
+    } else if(this.get('playing')){
+      this.set('dimmerOn', true);
+    }
+
+  }.observes('dimmerEnabled'),
+
   onSpeakerViewedChange: function(){
     localStorage.setItem('huegasm.speakerViewed', this.get('speakerViewed'));
     this.get('beatHistory').clear();

app/pods/components/music-tab/template.hbs

@@ -17,7 +17,7 @@
                          data-title="Next" {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!--
                   -->{{/if}}<!--
           --><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="volumeMutedTooltip"
-                   data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}</span><!--
+                   data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeIcon class=volumeMutedClass}}</span><!--
                   -->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}}
 
         <div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
@@ -25,7 +25,7 @@
 
       <span class="pull-right">
             <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
-                  data-title="Dim background on play" {{action "toggleDimming"}}>{{paper-icon icon="brightness-high"  class="playerControllIcon"}}
+                  data-title="Dim on play" {{action "toggleDimming"}}>{{paper-icon icon="brightness-high"  class=dimmingClass}}
             </span>
             <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
                   data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye"  class="playerControllIcon"}}