better lightgroup formatting - WIP

2015-09-17 09:40:36 -07:00 · 2015-09-17 09:40:36 -07:00 · ee82ce63b6
commit ee82ce63b6
parent 3a0325fec2
6 changed files with 94 additions and 75 deletions
--- a/README.md
+++ b/README.md
@ -17,6 +17,8 @@ Music awesomeness for hue lights.
 - help, contact, about, youtube video ???
 - beat settings by interval
 - integration with youtube, soundcloud, spotify ???
+- auto beat detection mode
+- lights on/off switch

 ## BUGS
 - fuckery when listening to music and switching tabs
--- a/app/components/light-group.js
+++ b/app/components/light-group.js
@ -2,6 +2,12 @@ import Em from 'ember';

 export default Em.Component.extend({

+  classNames: ['lightGroup'],
+
+  isHovering: false,
+
+  lightsList: Em.A(),
+
  actions: {
    clickLight: function(id, data){
      this.sendAction('action', id, data);
@ -18,6 +24,8 @@ export default Em.Component.extend({
          type: 'PUT'
        });
      }
+
+      this.set('isHovering', true);
    },
    lightStopHover: function(id){
      var hoveredLight = this.get('lightsList').filter(function(light){
@ -31,14 +39,15 @@ export default Em.Component.extend({
          type: 'PUT'
        });
      }
+
+      this.set('isHovering', false);
    }
  },

-  classNames: ['lightGroup'],
-
  // list of all the lights in the hue system
-  lightsList: function(){
-    var lightsData = this.get('lightsData'), lightsList = [], type;
+  onLightsDataChange: function(){
+    if(!this.get('isHovering')){
+      var lightsData = this.get('lightsData'), lightsList = Em.A(), type;
      for (var key in lightsData) {
        if (lightsData.hasOwnProperty(key)) {
          switch(lightsData[key].modelid){
@ -94,6 +103,7 @@ export default Em.Component.extend({
        }
      }

-    return lightsList;
-  }.property('lightsData', 'activeLights.[]')
+      this.set('lightsList', lightsList);
+    }
+  }.observes('lightsData', 'activeLights.[]')
 });
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@ -98,6 +98,7 @@ md-progress-circular {

 // BRIDGE CONTROLS
 #bridgeControls {
+  position: relative;
  max-width: 1000px;
 }

@ -153,6 +154,9 @@ md-progress-circular {

 .lightGroup {
  margin: 0 auto 0 auto;
+  .tooltip.top {
+    margin-top: -10px;
+  }
 }

 .hueLight {
@ -182,14 +186,15 @@ md-progress-circular {
  background-color: rgba(255, 0, 0, 0.7);
 }

-.lightActive:hover {
+.lightActive img {
  cursor: pointer;
-  -webkit-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  -webkit-transform: scale(1.2);
+  transition-duration: 0.3s;
+  transition-property: transform;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+
+.lightActive img:hover {
  transform: scale(1.2);
-  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
-  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
 }

 .ember-modal-overlay.translucent {
--- a/app/templates/components/controls/music-control.hbs
+++ b/app/templates/components/controls/music-control.hbs
@ -5,20 +5,20 @@
          {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}

          {{#if playQueueMultiple}}
-              <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip" title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!--
+              <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip" data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!--
          -->{{/if}}<!--
-                    --><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrapTooltip" title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!--
+                    --><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrapTooltip" data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!--
                  -->{{#if playQueueMultiple}}<!--
-                --><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" title="Next" {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!--
+                --><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" 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" title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass  class="playerControllIcon volumeButton"}}</span><!--
+          --><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>

          <span class="pull-right">
            <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
-                  title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen"  class="playerControllIcon"}}
+                  data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen"  class="playerControllIcon"}}
            </span>
          </span>
        </div>
@ -29,12 +29,12 @@

        <div id="playListControls">
            <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip"
-                  title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
+                  data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>

            <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip"
-                  title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
+                  data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>

-            <span data-toggle="tooltip" data-placement="bottom" title="Add new music"
+            <span data-toggle="tooltip" data-placement="bottom" data-title="Add new music"
                  class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon" }}</span>
        </div>

@ -52,7 +52,7 @@
                {{else}}
                  {{item.filename}}
                {{/if}}
-                  <div data-toggle="tooltip" data-placement="bottom auto" title="Remove from playlist" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div></div>
+                  <div data-toggle="tooltip" data-placement="bottom auto" data-title="Remove from playlist" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div></div>
          {{/each}}
        </div>
    </div>
--- a/app/templates/components/light-group.hbs
+++ b/app/templates/components/light-group.hbs
@ -1,5 +1,5 @@
 {{#each lightsList as |light|}}
-    <span class="{{light.activeClass}} bootstrapTooltip" data-toggle="tooltip" data-placement="top auto" title="{{light.name}}" {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
+    <span class="{{light.activeClass}} bootstrapTooltip" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
          <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
  </span>
 {{/each}}
--- a/bower.json
+++ b/bower.json
@ -20,6 +20,8 @@
  },
  "resolutions": {
    "ember": "~2.0.2",
-    "jquery": "~2.1.4"
+    "jquery": "~2.1.4",
+    "ember-qunit": "0.4.9",
+    "qunit": "~1.18.0"
  }
 }