Colorloop, music fixes, styling

app/components/bridge-controls.js

@@ -129,20 +129,19 @@ export default Em.Component.extend({
   musicTabSelected: Em.computed.equal('selectedTab', 1),
 
   updateLightData: function(){
-    var self = this;
+    var self = this, fail = function() {
+      clearInterval(self.get('lightsDataIntervalHandle'));
+      self.setProperties({
+        bridgeIp: null,
+        bridgeUsername: null
+      });
+    };
 
     Em.$.get(this.get('apiURL') + '/lights', function (result, status) {
       if (status === 'success' && JSON.stringify(self.get('lightsData')) !== JSON.stringify(result) ) {
         self.set('lightsData', result);
-      } else if(status !== 'success') {
-        // something went terribly wrong ( user got unauthenticated? ) and we'll need to start all over
-        clearInterval(self.get('lightsDataIntervalHandle'));
-        this.setProperties({
-          bridgeIp: null,
-          bridgeUsername: null
-        });
       }
-    });
+    }).fail(fail);
   },
 
   ready: function() {

app/components/controls/group-control.js

@@ -1,6 +1,7 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
+  classNameBindings: ['groupControlDisplayed:on'],
   classNames: ['innerControlFrame'],
   elementId: 'groupControls',
 

app/components/controls/light-control.js

@@ -18,7 +18,7 @@ export default Em.Component.extend({
         lightId = activeLights.indexOf(light);
 
       if(lightId !== -1){
-        delete activeLights[lightId];
+        activeLights.removeObject(light);
       } else {
         activeLights.pushObject(light);
       }
@@ -30,7 +30,8 @@ export default Em.Component.extend({
 
   didInsertElement: function() {
     var self = this;
-    this.xyToRgb(0.5,0.5)
+    // TODO remove debug
+    this.xyToRgb(0.5,0.5);
     Em.$(document).click(function() {
       if(self.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !Em.$(event.target).closest('.colorpicker, .colorRow').length) {
         self.toggleProperty('colorPickerDisplayed');
@@ -63,6 +64,18 @@ export default Em.Component.extend({
     return "toggleColorpicker";
   }.property('trial'),
 
+  colorLoopOn: function(){
+    var lightsData = this.get('lightsData');
+
+    if(this.get('strobeOn')){
+      return false;
+    }
+
+    return this.get('activeLights').some(function(light) {
+      return lightsData[light].state.effect === 'colorloop';
+    });
+  }.property('lightsData.@each.state.effect', 'activeLights.[]', 'strobeOn'),
+
   // determines whether the lights are on/off for the lights switch
   lightsOn: function(){
     var lightsData = this.get('lightsData');
@@ -70,11 +83,11 @@ export default Em.Component.extend({
     if(this.get('strobeOn')){
       return false;
     }
-    this.get('color');
+
     return this.get('activeLights').some(function(light) {
       return lightsData[light].state.on === true;
     });
-  }.property('lightsData', 'activeLights', 'strobeOn'),
+  }.property('lightsData.@each.state.on', 'activeLights.[]', 'strobeOn'),
 
   // determines the average brightness of the hue system for the brightness slider
   lightsBrightness: function(){
@@ -108,6 +121,25 @@ export default Em.Component.extend({
     }
   }.observes('lightsOn'),
 
+  onColorLoopOnChange: function(){
+    var lightsData = this.get('lightsData'), activeLights = this.get('activeLights'), colorLoopsOn = this.get('colorLoopOn'), self = this;
+
+    var colorLoopsOnSystem = activeLights.some(function(light) {
+      return lightsData[light].state.effect === 'colorloop';
+    });
+
+    // if the internal lights state is different than the one from lightsData ( user manually toggled the switch ), send the request to change the bulbs state
+    if(colorLoopsOn !== colorLoopsOnSystem){
+      activeLights.forEach(function (light) {
+        Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
+          data: JSON.stringify({"effect": colorLoopsOn ? 'colorloop' : 'none'}),
+          contentType: 'application/json',
+          type: 'PUT'
+        });
+      });
+    }
+  }.observes('colorLoopOn'),
+
   onBrightnessChanged: function(){
     var lightsData = this.get('lightsData'), lightsBrightnessSystem = false, lightsBrightness = this.get('lightsBrightness'), activeLights = this.get('activeLights'), self = this;
 
@@ -133,6 +165,10 @@ export default Em.Component.extend({
     return this.get('lightsOn') ? 'On' : 'Off';
   }.property('lightsOn'),
 
+  colorloopOnTxt: function(){
+    return this.get('colorLoopOn') ? 'On' : 'Off';
+  }.property('colorLoopOn'),
+
 
   // **************** STROBE LIGHT START ****************
 

app/components/controls/music-control.js

@@ -5,9 +5,16 @@ export default Em.Component.extend(musicControlMixin, {
   classNames: ['innerControlFrame'],
   classNameBindings: ['active::hidden'],
 
+  onActiveChange: function(){
+    if(this.get('active')){
+      Em.$('#beatSpeakerCenter').removeClass('pop');
+      Em.$('#playNotification').removeClass('fadeout');
+    }
+  }.observes('active'),
+
   actions: {
     goToSong: function(index){
-      if(index !== this.get('playQueuePointer')) {
+      //if(index !== this.get('playQueuePointer')) {
         var dancer = this.get('dancer'), audio = new Audio();
         audio.src = this.get('playQueue')[index].url;
 
@@ -22,7 +29,7 @@ export default Em.Component.extend(musicControlMixin, {
         });
 
         this.send('play');
-      }
+      //}
     },
     removeAudio: function(index){
       if(index === this.get('playQueuePointer')) {
@@ -42,13 +49,20 @@ export default Em.Component.extend(musicControlMixin, {
       this.changePlayerControl('decay', beatOptions.decay.defaultValue, true);
       this.changePlayerControl('frequency', beatOptions.frequency.defaultValue, true);
     },
-    clickLight:function() {
-      debugger;
+    clickLight: function(light){
+      var activeLights = this.get('activeLights'),
+        lightId = activeLights.indexOf(light);
+
+      if(lightId !== -1){
+        activeLights.removeObject(light);
+      } else {
+        activeLights.pushObject(light);
+      }
     },
     playerAreaPlay: function(){
       if(Em.isEmpty(Em.$('#playerControls:hover'))){
         this.send('play');
-        Em.$('#playerArea').removeClass('material-icons').prop('offsetWidth', Em.$('#playerArea').prop('offsetWidth')).addClass('material-icons');
+        Em.$('#playNotification').removeClass('fadeout').prop('offsetWidth', Em.$('#playerArea').prop('offsetWidth')).addClass('fadeout');
       }
     },
     play: function () {

app/components/huegasm-app.js

@@ -1,7 +1,6 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
-  classNames: ['container'],
   bridgeIp: null,
 
   bridgeUsername: null,

app/styles/app.scss

@@ -205,6 +205,12 @@ md-list-item .md-no-style {
   cursor: crosshair;
 }
 
+#loopAddition{
+  position: absolute;
+  left: 18px;
+  top: 13px;
+  font-size: 16px;
+}
 // LIGHT GROUP
 md-slider {
   cursor: pointer;
@@ -220,6 +226,7 @@ md-slider.md-default-theme .md-thumb:after {
 }
 
 #groupControls {
+  display: none;
   box-shadow: 5px 10px 15px 5px rgba(0,0,0,.3);
   border-radius: 0 0 5px 5px;
   width: 300px;
@@ -233,6 +240,9 @@ md-slider.md-default-theme .md-thumb:after {
   text-align: left;
 }
 
+#groupControls.on {
+  display: block;
+}
 .lightGroup {
   margin: 0 auto 0 auto;
   .tooltip.top {
@@ -434,18 +444,17 @@ md-switch.md-default-theme.md-checked .md-thumb{
   color: white !important;
 }
 
-#playerArea:before {
+#playNotification {
   position: relative;
   color: white;
   top: 45%;
   left: 45%;
-  animation-duration: 1s;
   opacity: 0;
-  animation-name: fadeOut;
 }
 
-#playerArea.blockAnimation:before{
-  animation-name: none !important;
+.fadeOut:before {
+  animation-duration: 1s;
+  animation-name: fadeOut;
 }
 
 @keyframes fadeOut {
@@ -620,6 +629,8 @@ md-switch.md-default-theme.md-checked .md-thumb{
 
 #beatArea {
   position: relative;
+  float: none;
+  display: table-cell;
 }
 
 #beatArea * .noUi-target {
@@ -641,27 +652,33 @@ md-switch.md-default-theme.md-checked .md-thumb{
   margin-top: 20px;
   .beatOption {
     display: inline-block;
-    margin-right: 2em;
+    margin-right: 1em;
   }
 }
 
 #playerBottom {
   color: white;
   background-color: #5D5D5D;
+  display: table;
 }
 
 #beatContainer {
+  vertical-align: middle;
   padding: 0;
+  float: none;
+  display: table-cell;
+  md-switch {
+    bottom: 0;
+    position: absolute;
+    margin-left: 0;
+    z-index: 3;
+  }
 }
 
-#beatContainer md-switch {
-  bottom: -35px;
-  position: absolute;
-  margin-left: 0;
-  z-index: 3;
-}
+#beatContainer
 
 #beatSpeaker {
+  position:relative;
   padding: 0 5%;
   img {
     width: 100%;
@@ -671,8 +688,8 @@ md-switch.md-default-theme.md-checked .md-thumb{
 #beatSpeakerCenter {
   position: absolute;
   width: 100%;
-  height: 100%;
-  top: 16%;
+  top: 14%;
+  right: 0;
   padding: 0 20%;
   img {
     width: 100%;
@@ -692,9 +709,9 @@ md-switch.md-default-theme.md-checked .md-thumb{
   }
 }
 #beatArea .lightGroup {
-  margin: 10px 50px 0 40px;
+  margin: 10px 20px 0 40px;
   float: right;
-  span {
+  div {
     display: block;
     padding: 10px;
   }
@@ -706,7 +723,7 @@ md-switch.md-default-theme.md-checked .md-thumb{
 
 #vertDivider {
   position: absolute;
-  right: 0;
+  right: 10px;
   top: 25%;
   width: 2px;
   height: 50%;

app/templates/components/bridge-controls.hbs

@@ -10,9 +10,7 @@
       <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}">
         <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups" {{action "toggleGroupControl"}}>{{paper-icon icon="group"}}</span>
 
-        {{#if groupControlDisplayed}}
-          {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData}}
-        {{/if}}
+        {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
       </span>
 
       <span id="appSettingsMenu" class="settingsItem {{if appSettingsDisplayed 'on'}}">

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

@@ -33,4 +33,10 @@
     <p>Strobe</p>
     {{#paper-switch checked=strobeOn disabled=trial skipProxy=trial}} {{strobeOnTxt}} {{/paper-switch}}
   {{/paper-item}}
+
+  {{#paper-item}}
+    {{paper-icon icon="color-lens"}} {{paper-icon icon="loop" id="loopAddition"}}
+    <p>Colorloop</p>
+    {{#paper-switch checked=colorLoopOn disabled=trial skipProxy=trial}} {{colorloopOnTxt}} {{/paper-switch}}
+  {{/paper-item}}
 {{/paper-list}}

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

@@ -1,6 +1,7 @@
 <div class="row">
-    <div id="playerArea" class="col-sm-8 col-xs-12 material-icons {{if playing "play-arrow" "pause"}} {{if playQueueEmpty "blockAnimation"}}" {{action "playerAreaPlay"}}>
+    <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="playerControls">
           {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
 
@@ -66,17 +67,17 @@
       <div id="beatOptionGroup">
         <span class="beatOption">
           {{range-slider start=threshold orientation="vertical" range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
-          Max. Beat Intensity
+          Max. Intensity
         </span>
 
         <span class="beatOption">
           {{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}}
-          Beat Decay Rate
+          Decay Rate
         </span>
 
         <span class="beatOption">
           {{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}}
-          Beat Frequency Range
+          Frequency Range
         </span>
       </div>
 
@@ -90,10 +91,9 @@
         <div id="beatSpeakerContainer">
           <div id="beatSpeaker">
             <img src="assets/images/speaker-outer.png" />
-          </div>
-
-          <div id="beatSpeakerCenter">
-            <img src="assets/images/speaker-inner.png" class="beatSpeakerCenter cursorPointer" {{action "clickSpeaker"}} />
+              <div id="beatSpeakerCenter">
+                  <img src="assets/images/speaker-inner.png" class="cursorPointer" {{action "clickSpeaker"}} />
+              </div>
           </div>
         </div>
       {{else}}