fixing bugs, kicking ass, support for multiple bridge IPs

README.md

@@ -5,13 +5,16 @@ Music awesomeness for hue lights.
 # TODO
 ## FEATURES
 - finish beat detection light effects
-- more granular light controls on the lights tab
-- handle multiple bridge IPs for bridge-finder
 - save beat detection settings per song 
+- more granular light controls on the lights tab
 - app intro with intro.js
 - music visualizations with three.js
 - new favicon
 
+## BUGS
+- can't create groups anymore
+- BUGS BUGS BUGS
+
 ## POSSIBLE FEATURES
 - clear localstorage
 - help, contact, about, youtube video ???
@@ -19,8 +22,3 @@ Music awesomeness for hue lights.
 - integration with youtube, soundcloud, spotify ???
 - auto beat detection mode
 - lights on/off switch
-
-## BUGS
-- fuckery when listening to music and switching tabs
-- can't create groups anymore
-- BUGS BUGS BUGS

app/components/bridge-finder.js

@@ -22,6 +22,7 @@ export default Em.Component.extend({
 
   manualBridgeIp: null,
   manualBridgeIpNotFound: false,
+  multipleBridgeIps: [],
 
   actions: {
     retry: function(){
@@ -77,6 +78,12 @@ export default Em.Component.extend({
           localStorage.setItem('huegasm.bridgeIp', result[0].internalipaddress);
           bridgeFindStatus = 'success';
         } else if(result.length > 1) {
+          var multipleBridgeIps = self.get('multipleBridgeIps');
+
+          result.forEach(function(item) {
+            multipleBridgeIps.push(item.internalipaddress);
+          });
+
           bridgeFindStatus = 'multiple';
         } else {
           bridgeFindStatus = 'fail';

app/components/controls/light-control.js

@@ -2,6 +2,7 @@ import Em from 'ember';
 
 export default Em.Component.extend({
   classNames: ['innerControlFrame'],
+  classNameBindings: ['active::hidden'],
 
   activeLights: [],
   lightsData: null,

app/components/controls/music-control.js

@@ -3,6 +3,7 @@ import musicControlMixin from '../mixins/music-control';
 
 export default Em.Component.extend(musicControlMixin, {
   classNames: ['innerControlFrame'],
+  classNameBindings: ['active::hidden'],
 
   actions: {
     goToSong: function(index){
@@ -235,7 +236,7 @@ export default Em.Component.extend(musicControlMixin, {
   init: function () {
     this._super();
 
-    var dancer = window.dancer || new Dancer(),
+    var dancer = new Dancer(),
       self = this,
       threshold = this.get('threshold'),
       decay = this.get('decay'),
@@ -291,7 +292,6 @@ export default Em.Component.extend(musicControlMixin, {
       self.set('timeTotal', Math.round(dancer.audio.duration));
     });
 
-    window.dancer = dancer;
     this.setProperties({
       dancer: dancer,
       kick: kick
@@ -339,12 +339,5 @@ export default Em.Component.extend(musicControlMixin, {
         event.preventDefault();
       }
     });
-  },
-
-  // component clean up
-  destroy: function(){
-    //this.get('dancer').audioAdapter.context.close();
-    this.get('dancer').unbind('loaded');
-    this._super();
   }
 });

app/styles/app.scss

@@ -86,6 +86,10 @@ md-progress-circular {
   margin: 0 auto 20px auto !important;
 }
 
+md-progress-linear {
+  margin-bottom: 50px;
+}
+
 #pressButtonBridgeImg {
   width: 200px;
   margin: 0 auto 30px auto;
@@ -96,6 +100,12 @@ md-progress-circular {
   text-decoration: none;
 }
 
+#bridgeButtonGroup {
+  width: 150px;
+  margin: 30px auto;
+  text-align: left;
+}
+
 // BRIDGE CONTROLS
 #bridgeControls {
   position: relative;
@@ -297,14 +307,21 @@ md-toolbar {
   color: white !important;
   z-index: 20;
   background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
+  .tooltip.top {
+    margin-top: -15px;
+  }
+  .tooltip-arrow {
+    display: none;
+  }
 }
 
 #playerTimeControls {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  position: relative;
   font-size: 14px;
-  top: 0.167em;
-  margin-left: 0.833em;
+  display: inline-block;
+  margin-left: 1em;
+  position: relative;
+  bottom: 2px;
 }
 
 .playerControllIcon {
@@ -384,6 +401,7 @@ md-toolbar {
   width: 5em;
   height: 0.4em;
   display: inline-block;
+  margin-bottom: 3px;
 }
 
 .noUi-handle {
@@ -447,18 +465,21 @@ md-toolbar {
   margin: 10px auto 0 auto;
   border-radius: 5px;
   transition: 0.1s all ease-in-out;
+  position: relative;
   #dragHere {
     position: absolute;
-    top: 41%;
-    right: 18%;
+    top: 27%;
     font-size: 20px;
+    text-align: center;
+    width: 100%;
   }
   .library-music {
     position: absolute;
-    top: 50%;
-    right: 34%;
+    top: 40%;
     font-size: 100px;
     opacity: 0.5;
+    width: 100%;
+    text-align: center;
   }
 }
 
@@ -579,7 +600,6 @@ md-toolbar {
     transform: scale(1.1);
   }
 }
-
 #beatArea .lightGroup {
   margin: 10px 0 0 40px;
 }

app/templates/components/bridge-controls.hbs

@@ -11,11 +11,6 @@
     {{/each}}
   </div>
 
-  {{#if lightsTabSelected class="tabSwitch"}}
-    {{controls/light-control apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial}}
-  {{/if}}
-
-  {{#if musicTabSelected class="tabSwitch"}}
-    {{controls/music-control apiURL=apiURL lightsData=lightsData  activeLights=activeLights}}
-  {{/if}}
+  {{controls/light-control apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected}}
+  {{controls/music-control apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected}}
 {{/if}}

app/templates/components/bridge-finder.hbs

@@ -16,7 +16,14 @@
     {{/unless}}
 
     {{#if bridgeFindMultiple}}
-      <p>Found multiple hue bridges.</p>
+      <p>Found multiple hue bridges. <br>
+      Please select the one you want to use for this application.</p>
+
+      <div id="bridgeButtonGroup">
+        {{#each multipleBridgeIps as |bridge|}}
+          {{#paper-radio value=bridge selected=bridgeIp}}{{bridge}}{{/paper-radio}}
+        {{/each}}
+      </div>
     {{else}}
       {{#if bridgeFindFail}}
         <p>A hue bridge was not found on your network :( <br>

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

@@ -14,7 +14,7 @@
           --><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="volumeMutedTooltip" data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass  class="playerControllIcon volumeButton"}}</span><!--
                   -->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}}
 
-            <span id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</span>
+            <div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
 
           <span class="pull-right">
             <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"