minor improvements

README.md

@@ -7,8 +7,9 @@ It lives at http://www.huegasm.com
 ## Current priorities
 - create a hybrid app with Cardova
 
-## Bugs
+## WTF
-- HackTimer not working? Slowness when switching to another browser tab, etc...
+Cordova disables the volume buttons for some reason. Monkey patching that shit ( must be a better way :( ).
+Comment out: webView.setButtonPlumbedToJs lines from its source code.
 
 ## POSSIBLE FUTURE FEATURES
 - decode the hue color better

mobile/app/pods/components/hue-controls/component.js

@@ -83,6 +83,7 @@ export default Component.extend({
 
     if (!isNone(storage.get('huegasm.dimmerOn'))) {
       this.set('dimmerOn', storage.get('huegasm.dimmerOn'));
+      this.get('dimmerOnClass');
     }
 
     if (!isNone(this.get('storage').get('huegasm.selectedTab'))) {
@@ -106,7 +107,9 @@ export default Component.extend({
 
   updateLightData(){
     let fail = ()=>{
-      if(this.get('displayFailure')){
+      if(isNone(this.get('lightsData'))) {
+        this.send('clearBridge');
+      } else if(this.get('displayFailure')) {
         this.get('notify').warning({html: '<div class="alert alert-warning" role="alert">Error retrieving data from your lights. Yikes.</div>'});
         this.set('displayFailure', false);
 

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

@@ -1,7 +1,9 @@
 {{#if ready}}
   <div id="navigation">
-    <div id="dimmer" class={{dimmerOnClass}} {{action "toggleDimmer"}}>
+    <div id="dimmer-container" {{action "toggleDimmer"}}>
+      <div id="dimmer" class={{dimmerOnClass}} >
         <div id="dimmer-switch"></div>
+      </div>
     </div>
 
     {{#each tabData as |tab|}}
@@ -35,6 +37,8 @@
   {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn playing=playing pauseLightUpdates=pauseLightUpdates}}
 
   {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn playing=playing storage=storage colorLoopOn=colorLoopOn action="startIntro"}}
+{{else}}
+  {{paper-progress-circular diameter=100}}
 {{/if}}
 
 {{ember-notify messageStyle='bootstrap' closeAfter=5000}}

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

@@ -304,22 +304,6 @@ export default Component.extend(helperMixin, visualizerMixin, {
       client_id: this.get('SC_CLIENT_ID')
     });
 
-    document.addEventListener('volumedownbutton', () => {
-      let volume = this.get('volume') - 5;
-      volume = volume < 0 ? 0 : volume;
-      this.set('volume', volume);
-
-      window.system.setSystemVolume(volume/100);
-    }, false);
-
-    document.addEventListener('volumeupbutton', () => {
-      let volume = this.get('volume') + 5;
-      volume = volume > 100 ? 100 : volume;
-      this.set('volume', volume);
-
-      window.system.setSystemVolume(volume/100);
-    }, false);
-
     document.addEventListener('pause', () => {
       this.get('dancer').pause();
     }, false);

mobile/app/styles/dimmer.scss

@@ -50,9 +50,6 @@ body.dimmerOn {
   .add-new-music:hover {
     background: darken($dimmerOnButtonColor, 5%);
   }
-  .popover-content {
-    color: $blackish !important;
-  }
   .md-bar {
     background-color: darken(white, 60%) !important;
   }
@@ -63,22 +60,28 @@ body.dimmerOn {
   opacity: 0.9 !important;
 }
 
+#dimmer-container {
+  float: left;
+  cursor: pointer;
+  padding: 5px 10px;
+  position: relative;
+  bottom: 5px;
+}
+
 #dimmer {
   background: url(images/lightswitch.png) !important;
   width: 14px;
   height: 34px;
-  display: inline-block;
-  float: left;
-  margin-left: 15px;
   &.dimmerOn #dimmer-switch {
     opacity: 0;
   }
-  #dimmer-switch {
+}
-    background: url(images/lightswitch.png) -14px 0px;
+
-    width: 14px;
+#dimmer-switch {
-    height: 34px;
+  background: url(images/lightswitch.png) -14px 0px;
-    transition: opacity 0.4s;
+  width: 14px;
-    float: left;
+  height: 34px;
-    opacity: 1;
+  transition: opacity 0.4s;
-  }
+  float: left;
+  opacity: 1;
 }

mobile/app/styles/hue-controls.scss

@@ -12,6 +12,13 @@
 #hue-controls {
   max-width: 1200px;
   position: relative;
+  min-height: 100vh;
+  md-progress-circular {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
 
 // preload images

mobile/bower.json

@@ -1,7 +1,6 @@
 {
   "name": "huegasm",
   "dependencies": {
-    "HackTimer": "https://github.com/turuslan/HackTimer.git#~1.1.0",
     "JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git",
     "bootstrap-sass": "^3.3.5",
     "ember": "beta",

mobile/config/environment.js

@@ -5,7 +5,7 @@ module.exports = function(environment) {
     modulePrefix: 'huegasm_mobile',
     podModulePrefix: 'huegasm_mobile/pods',
     environment: environment,
-    rootURL: '/',
+    rootURL: '',
     locationType: 'hash',
     EmberENV: {
       FEATURES: {

mobile/ember-cli-build.js

@@ -4,12 +4,8 @@ var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 module.exports = function(defaults) {
   var app = new EmberApp(defaults);
 
-  app.import('bower_components/HackTimer/HackTimer.js');
-
   app.import('vendor/dancer.js');
 
-  app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
-  app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js');
   app.import('bower_components/intro.js/intro.js');
   app.import('bower_components/intro.js/introjs.css');
   app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');

mobile/ember-cordova/cordova/config.xml

@@ -89,5 +89,4 @@
     </platform>
     <engine name="android" spec="~5.2.2" />
     <preference name="ShowSplashScreenSpinner" value="false" />
-    <plugin name="com.jiliac.systemvolume" spec="https://github.com/hoboman313/phonegap-plugin-systemvolume" />
 </widget>

web/app/pods/components/hue-controls/component.js

@@ -89,7 +89,9 @@ export default Component.extend({
 
   updateLightData(){
     let fail = ()=>{
-      if(this.get('displayFailure')){
+      if(isNone(this.get('lightsData'))) {
+        this.send('clearBridge');
+      } else if(this.get('displayFailure')){
         this.get('notify').warning({html: '<div class="alert alert-warning" role="alert">Error retrieving data from your lights. Yikes.</div>'});
         this.set('displayFailure', false);
 

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

@@ -1,7 +1,9 @@
 {{#if ready}}
   <div id="navigation">
-      <div id="dimmer" class={{dimmerOnClass}} {{action "toggleDimmer"}}>
+      <div id="dimmer-container" {{action "toggleDimmer"}}>
-        <div id="dimmer-switch"></div>
+        <div id="dimmer" class={{dimmerOnClass}} >
+          <div id="dimmer-switch"></div>
+        </div>
       </div>
 
     {{#each tabData as |tab|}}
@@ -36,6 +38,8 @@
 
     {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn playing=playing action="startIntro"}}
   </div>
+{{else}}
+  {{paper-progress-circular diameter=100}}
 {{/if}}
 
 {{ember-notify messageStyle='bootstrap' closeAfter=5000}}

web/app/styles/bootstrap.scss

@@ -48,7 +48,7 @@
 // Components w/ JavaScript
 //@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/modals";
 @import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
-@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/popovers";
+//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/popovers";
 //@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/carousel";
 
 // Utility classes

web/app/styles/dimmer.scss

@@ -56,9 +56,6 @@ body.dimmerOn {
   .add-new-music:hover {
     background: darken($dimmerOnButtonColor, 5%);
   }
-  .popover-content {
-    color: $blackish !important;
-  }
   .md-bar {
     background-color: darken(white, 60%) !important;
   }
@@ -78,23 +75,28 @@ body.dimmerOn {
   background-size: 40px 40px;
 }
 
+#dimmer-container {
+  float: left;
+  cursor: pointer;
+  padding: 5px 10px;
+  position: relative;
+  bottom: 5px;
+}
+
 #dimmer {
   background: url(images/lightswitch.png) !important;
   width: 14px;
   height: 34px;
-  display: inline-block;
-  float: left;
-  margin-left: 15px;
-  cursor: pointer;
   &.dimmerOn #dimmer-switch {
     opacity: 0;
   }
-  #dimmer-switch {
+}
-    background: url(images/lightswitch.png) -14px 0px;
+
-    width: 14px;
+#dimmer-switch {
-    height: 34px;
+  background: url(images/lightswitch.png) -14px 0px;
-    transition: opacity 0.4s;
+  width: 14px;
-    float: left;
+  height: 34px;
-    opacity: 1;
+  transition: opacity 0.4s;
-  }
+  float: left;
+  opacity: 1;
 }

web/app/styles/hue-controls.scss

@@ -24,6 +24,13 @@
   max-width: 1200px;
   position: relative;
   flex: 1;
+  min-height: 100vh;
+  md-progress-circular {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
 
 // preload images

web/bower.json

@@ -1,7 +1,6 @@
 {
   "name": "huegasm",
   "dependencies": {
-    "HackTimer": "https://github.com/turuslan/HackTimer.git#~1.1.0",
     "JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git",
     "bootstrap-sass": "^3.3.5",
     "ember": "beta",

web/ember-cli-build.js

@@ -4,12 +4,9 @@ var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 module.exports = function(defaults) {
   var app = new EmberApp(defaults);
 
-  app.import('bower_components/HackTimer/HackTimer.js');
-
   app.import('vendor/dancer.js');
 
   app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
-  app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js');
   app.import('bower_components/intro.js/intro.js');
   app.import('bower_components/intro.js/introjs.css');
   app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');