larger album art, bug fixes

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

@@ -23,18 +23,22 @@ export default Em.Component.extend({
 
   dimmerOnClass: function(){
     var dimmerOn = this.get('dimmerOn'),
-      storage = this.get('storage');
+      storage = this.get('storage'),
+      dimmerOnClass = null;
 
     if(dimmerOn){
       Em.$('body').addClass('dimmerOn');
       Em.$('html').addClass('dimmerOn');
+      dimmerOnClass = 'active';
     } else {
       Em.$('body').removeClass('dimmerOn');
       Em.$('html').removeClass('dimmerOn');
     }
 
     storage.set('huegasm.dimmerOn', dimmerOn);
-  }.observes('dimmerOn'),
+
+    return dimmerOnClass;
+  }.property('dimmerOn'),
 
   init(){
     this._super();

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

@@ -18,6 +18,6 @@
 {{/if}}
 
 <footer id="footer">
-   <p><span class="relative"><span id="dimmerWrapper" {{action "toggleDimmer"}}>
+   <p><span class="relative"><span id="dimmerWrapper" {{action "toggleDimmer"}} class={{dimmerOnClass}}>
    </span>Made by <a href="//egorphilippov.me">egorphilippov.me</a> © 2015 Huegasm</span></p>
 </footer>

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

@@ -44,7 +44,7 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
                 var picture = null;
 
                 if(result.artwork_url){
-                  picture = result.artwork_url;
+                  picture = result.artwork_url.replace('large', 't67x67');
                 } else if(result.user.avatar_url){
                   picture = result.user.avatar_url;
                 }

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

@@ -138,6 +138,25 @@ export default Em.Mixin.create({
   storage: null,
   firstVisit: true,
 
+  largeArtworkPic: function(){
+    var pic = null,
+      currentVisName = this.get('currentVisName'),
+      usingMicAudio = this.get('usingMicAudio'),
+      playQueuePointer = this.get('playQueuePointer'),
+      playQueue = this.get('playQueue');
+
+    if(playQueuePointer !== -1 && !usingMicAudio && currentVisName === 'None'){
+      var song = playQueue[playQueuePointer];
+      if(song.scUrl){
+        pic = song.picture.replace('67x67', '500x500');
+      } else {
+        pic = song.picture;
+      }
+    }
+
+    return pic;
+  }.property('playQueuePointer', 'usingMicAudio', 'currentVisName'),
+
   // used to insure that we don't replay the same thing multiple times in shuffle mode
   shufflePlayed: [],
   pauseLightUpdates: function(){

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

@@ -1,6 +1,7 @@
 <div class="row" id="step1">
   <div id="playerArea" class="col-sm-8 col-xs-12 {{if (eq "None" currentVisName) "displayIcon"}}" {{action "playerAreaPlay"}}>
   <canvas id="visualization"></canvas>
+  <div id="artwork"><img src={{largeArtworkPic}}></div>
   <div id="playNotification" class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
 
     <div id="playerControls">
@@ -160,7 +161,7 @@
       </div>
   {{/if}}
 
-  <div id="lightOption" class="beatOption {{if usingMicAudio "col-xs-4" "col-xs-8"}}">
+  <div id="lightOption" class="beatOption {{if usingMicAudio "col-xs-4" "col-sm-4 col-xs-8"}}">
     <span data-toggle="tooltip" data-placement="bottom auto" data-title="Quickly flash the lights on beat" class="bootstrapTooltip" {{action "hideTooltip" on="mouseLeave"}}>
       {{#paper-checkbox checked=flashingTransitions}}Flashing Transitions{{/paper-checkbox}}
     </span>

app/styles/app.scss

@@ -1071,7 +1071,19 @@ div.ember-modal-dialog {
 }
 
 .displayIcon {
-  background:url(/favicon-96x96.png) center center no-repeat;
+  background: url(/favicon-96x96.png) center center no-repeat;
+  background-size: 80px 80px;
+}
+
+#artwork {
+  position: absolute;
+  width: 100%;
+  overflow: hidden;
+  img {
+    display: block;
+    margin: 0 auto;
+    max-height: 400px;
+  }
 }
 
 .keyboard-arrow-down {