redoing the dimmer

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

@@ -33,5 +33,5 @@
   </div>
 
   {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected}}
-  {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates}}
+  {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn}}
 {{/if}}

app/pods/components/huegasm-app/component.js

@@ -1,12 +1,36 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
+  actions: {
+    toggleDimmer(){
+      this.toggleProperty('dimmerOn');
+    }
+  },
   bridgeIp: null,
 
   bridgeUsername: null,
 
   trial: false,
 
+  dimmerOn: false,
+  dimmerOnClass: function(){
+    var dimmerOn = this.get('dimmerOn'),
+      className = null;
+
+    if(dimmerOn){
+      className = 'active';
+      Em.$('body').addClass('dimmerOn');
+      Em.$('html').addClass('dimmerOn');
+      Em.$('md-icon').addClass('dimmerOn');
+    } else {
+      Em.$('body').removeClass('dimmerOn');
+      Em.$('html').removeClass('dimmerOn');
+      Em.$('md-icon').removeClass('dimmerOn');
+    }
+
+    return className;
+  }.property('dimmerOn'),
+
   init(){
     this._super();
 

app/pods/components/huegasm-app/template.hbs

@@ -1,9 +1,9 @@
 {{#if bridgeUsername}}
-  {{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial}}
+  {{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn}}
 {{else}}
   {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial}}
 {{/if}}
 
 <footer id="footer">
-  <p>Made by <a href="//egorphilippov.me">egorphilippov.me</a> © 2015 Huegasm</p>
+   <p><span class="dimmerWrapper" {{action "toggleDimmer"}}>{{fa-icon "fa-lightbulb-o" classNames=dimmerOnClass}}</span>Made by <a href="//egorphilippov.me">egorphilippov.me</a> © 2015 Huegasm</p>
 </footer>

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

@@ -72,9 +72,6 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     toggleIsShowingAddSoundCloudModal() {
       this.toggleProperty('isShowingAddSoundCloudModal');
     },
-    toggleDimming(){
-      this.changePlayerControl('dimmerEnabled', !this.get('dimmerEnabled'));
-    },
     useLocalAudio(){
       var audioStream = this.get('audioStream');
       this.changePlayerControl('audioMode', 0);
@@ -192,8 +189,6 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
           if(!replayPause){
             this.set('timeElapsed', Math.floor(dancer.getTime()));
           }
-
-          this.set('dimmerOn', false);
         } else {
           var timeTotal = this.get('timeTotal');
 
@@ -209,10 +204,6 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
           }
 
           dancer.play();
-
-          if(this.get('dimmerEnabled')){
-            this.set('dimmerOn', true);
-          }
         }
 
         this.toggleProperty('playing');
@@ -287,8 +278,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       var dancer = this.get('dancer');
 
       if(dancer.audio){
-        var audioPosition = Math.floor(this.get('timeTotal') * position / 100);
-        dancer.audio.currentTime = audioPosition;
+        dancer.audio.currentTime = Math.floor(this.get('timeTotal') * position / 100);
       }
     },
     volumeMutedChanged(value) {
@@ -665,7 +655,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       this.set('usingMicSupported', false);
     }
 
-    ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'interval', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'dimmerEnabled', 'songBeatPreferences', 'debugFiltered'].forEach(function (item) {
+    ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'interval', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'songBeatPreferences', 'debugFiltered'].forEach(function (item) {
       if (!Em.isNone(storage.get('huegasm.' + item))) {
         var itemVal = storage.get('huegasm.' + item);
 
@@ -696,12 +686,6 @@ 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,7 +90,6 @@ export default Em.Mixin.create({
   visualizationsDisplayed: false,
   audioStream: null,
   dimmerOn: false,
-  dimmerEnabled: false,
   isShowingAddSoundCloudModal: false,
 
   SC_CLIENT_ID: 'aeec0034f58ecd85c2bd1deaecc41594',
@@ -225,22 +224,12 @@ export default Em.Mixin.create({
     }
 
     if(this.get('dimmerOn')){
-      classes += ' dimmerFriendly';
+      classes += ' dimmerOn';
     }
 
     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';
 
@@ -281,20 +270,6 @@ export default Em.Mixin.create({
     }
   }.property('volumeMuted', 'volume'),
 
-  onDimmerOnChange: function() {
-    var opacity = 0;
-
-    if(this.get('dimmerOn')) {
-      opacity = 0.8;
-    }
-
-    this.$('#dimmer').fadeTo(400, opacity, function() {
-      if(opacity === 0) {
-        Em.$(this).hide();
-      }
-    });
-  }.observes('dimmerOn'),
-
   onOptionChange: function(self, option){
     this.get('storage').set('huegasm.' + option, this.get(option));
   }.observes('randomTransition', 'onBeatBriAndColor'),
@@ -311,22 +286,6 @@ export default Em.Mixin.create({
     this.changeTooltipText(type, tooltipTxt);
   }.observes('repeat').on('init'),
 
-  onDimmerEnabledChange: function () {
-    var tooltipTxt = 'Dim on play', type = 'dimmerEnabled';
-
-    if (this.get(type)) {
-      tooltipTxt = 'Stop dimming';
-    }
-
-    if(!this.get(type)){
-      this.set('dimmerOn', false);
-    } else if(this.get('playing')){
-      this.set('dimmerOn', true);
-    }
-
-    this.changeTooltipText(type, tooltipTxt);
-  }.observes('dimmerEnabled').on('init'),
-
   onShuffleChange: function () {
     var tooltipTxt = 'Shuffle', type = 'shuffle';
 

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

@@ -1,4 +1,4 @@
-<div class="row antiDimmer">
+<div class="row">
   <div id="playerArea" class="col-sm-8 col-xs-12" {{action "playerAreaPlay"}}>
     <div id="playNotification" class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
     <div id="playerControls">
@@ -23,8 +23,6 @@
       {{/if}}
 
       <span class="pull-right">
-            <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="dimmerEnabledTooltip" data-title={{dimmerEnabledTooltipTxt}} {{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"}}
             </span>
             <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen"  class="playerControllIcon"}}
@@ -99,13 +97,13 @@
   </div>
 </div>
 
-<div id="slideToggle" class="text-center cursorPointer row antiDimmer" {{action "slideTogglePlayerBottom"}}>
+<div id="slideToggle" class="text-center cursorPointer row" {{action "slideTogglePlayerBottom"}}>
   <div class="col-xs-offset-5 col-xs-2">
     {{paper-icon icon=beatDetectionArrowIcon}}
   </div>
 </div>
 
-<div id="playerBottom" class="row antiDimmer {{if dimmerOn "dimmerFriendly"}}">
+<div id="playerBottom" class="row {{if dimmerOn "dimmerOn"}}">
   <div id="beatArea" class="col-sm-7 col-xs-12">
     {{#if usingBeatPreferences}}
       <span data-toggle="tooltip" data-placement="bottom auto" data-title="Using your saved beat preferences from the last time you listened to this song" class="bootstrapTooltip savedStarTooltip">
@@ -192,6 +190,5 @@
 </div>
 
 {{ember-notify closeAfter=5000}}
-<div id="dimmer" {{action "toggleDimming"}}></div>
 
 {{add-soundcloud-sound-modal action="handleNewSoundCloudURL" isShowingModal=isShowingAddSoundCloudModal}}

app/styles/app.scss

@@ -426,7 +426,6 @@ md-switch.md-default-theme.md-checked .md-thumb {
 }
 
 #playerControls {
-  opacity: 0;
   transition: all 0.2s ease-in-out;
   position: absolute;
   bottom: 0;
@@ -501,10 +500,6 @@ md-switch.md-default-theme.md-checked .md-thumb {
   padding: 0;
 }
 
-#playerArea:hover #playerControls {
-  opacity: 1;
-}
-
 #playlist {
   height: $playerHeight;
   background-color: #1E1E1E;
@@ -965,26 +960,33 @@ $vibrateblurouter: 2px;
   height: 100%
 }
 
-#dimmer {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background: black;
-  top: 0;
-  left: 0;
-  display: none;
-}
-
-.antiDimmer {
-  position: relative;
-  z-index: 2;
-}
-
-.dimmerFriendly {
+div.dimmerOn {
   color: white !important;
   background: #171717 !important;
 }
 
+html.dimmerOn {
+  color: white;
+  background: #242424;
+}
+
+body.dimmerOn {
+  color: white;
+  background: #242424;
+}
+
+md-icon.dimmerOn {
+  color: inherit !important;
+}
+
+.dimmerWrapper {
+  font-size: 40px;
+  position: relative;
+  top: 7px;
+  margin-right: 20px;
+  cursor: pointer;
+}
+
 .noUi-value-vertical {
   margin-top: -10px;
 }