audio player ui work

app/components/controls/music-control.js

@@ -1,12 +1,58 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
-  didInsertElement: function () {
+  dancer: null,
+
+  classNames: ['container-fluid'],
+
+  actions: {
+    play: function(){
+      if(this.get('status') === 'playing'){
+        this.get('dancer').pause();
+        this.set('status', 'paused');
+      } else if(this.get('status') === 'paused'){
+        this.get('dancer').play();
+        this.set('status', 'playing');
+      }
+    },
+    next : function(){
+
+    },
+    previous: function(){
+
+    },
+
+    fullscreen: function(){
+
+    }
+  },
+
+  nextPrevEnabled: function(){
+    return this.get('playQueue').length > 1;
+  }.property('playQueue.[]'),
+
+  status: null,
+
+  playQueue: [],
+  timeElapsed: '0:00',
+  timeRemaining: '0:00',
+
+  playButton: function(){
+    if(this.get('status') === 'playing'){
+      return 'pause';
+    } else {
+      return 'play-arrow';
+    }
+  }.property('status'),
+
+  init: function(){
+    this._super();
+
     var dancer = new Dancer(),
       self = this,
       briOff  = function(i){
         Em.$.ajax(self.get('apiURL') + '/lights/' + i + '/state', {
-          data: JSON.stringify({'on': 1, 'transitiontime': 0}),
+          data: JSON.stringify({'bri': 1, 'transitiontime': 0}),
           contentType: 'application/json',
           type: 'PUT'
         });
@@ -35,18 +81,24 @@ export default Em.Component.extend({
           }
 
         }
-      }),
-      a = new Audio();
+      });
 
     kick.on();
 
+    this.setProperties({
+      dancer: dancer,
+      kick: kick
+    });
+  },
+
+  didInsertElement: function () {
+    var dancer = this.get('dancer'), self = this;
     audio_file.onchange = function(){
-      var files = this.files;
+      var files = this.files, a = new Audio();
       var file = URL.createObjectURL(files[0]);
       a.src = file;
       dancer.load(a);
-
-      dancer.play();
+      self.set('status', 'paused');
     };
   },
 

app/components/controls/music-control/music-player.js

@@ -1,27 +0,0 @@
-import Em from 'ember';
-
-export default Em.Component.extend({
-  classNames: ['container-fluid'],
-
-  actions: {
-    play: function(){
-
-    },
-    next : function(){
-
-    },
-    previous: function(){
-
-    }
-  },
-
-  status: null,
-
-  playButton: function(){
-    if(this.get('status') === 'paused'){
-      return 'pause';
-    } else {
-      return 'play-arrow';
-    }
-  }.property('status')
-});

app/styles/app.scss

@@ -25,7 +25,6 @@ md-content {
 }
 
 .navigationItem {
-  text-transform: uppercase;
   cursor: pointer;
   font-family: 'Slabo 27px', serif;
   font-size: 18px;
@@ -170,6 +169,28 @@ md-toolbar {
   color: red;
 }
 
+#playerControls {
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 10px;
+  width: 100%;
+  color: white !important;
+}
+
+#playerTimeControls {
+  position: relative;
+  font-size: 12px;
+  top: 2px;
+  margin-left: 10px;
+}
+
+#playerControlsRight {
+  float: right;
+}
+
 .playerControllIcon {
   color: white !important;
   cursor: pointer;
@@ -180,13 +201,17 @@ md-toolbar {
 }
 
 #playerArea {
-  height: 200px;
+  height: 300px;
   background-color: black;
   display: inline-block;
 }
 
+#playerArea:hover #playerControls {
+  opacity: 1;
+}
+
 #playlist {
-  height: 200px;
+  height: 300px;
   background-color: grey;
   display: inline-block;
 }

app/templates/components/bridge-controls.hbs

@@ -14,7 +14,7 @@
     {{#paper-content flex-layout="column" flex=true}}
         <div class="navigation">
           {{#each tabData as |tab|}}
-              <span class="navigationItem {{if tab.selected "active" ""}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
+              <span class="navigationItem {{if tab.selected "active" ""}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
           {{/each}}
         </div>
 

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

@@ -1 +1,29 @@
-{{controls/music-control/music-player}}
+<div class="row">
+    <div id="playerArea" class="col-xs-8">
+
+        <div id="playerControls">
+            {{#if nextPrevEnabled}}
+            <span {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}} </span>`
+            {{/if}}
+
+          <span {{action "play"}}>{{paper-icon icon=playButton class="playerControllIcon"}}</span>
+
+          {{#if nextPrevEnabled}}
+          <span {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span>
+          {{/if}}
+
+          {{paper-icon icon="volume-up"  class="playerControllIcon"}}
+
+          <span id="playerTimeControls">{{timeElapsed}} / {{timeRemaining}}</span>
+
+          <span id="playerControlsRight">
+            <span {{action "fullscreen"}}>{{paper-icon icon="fullscreen"  class="playerControllIcon"}}
+            </span>
+          </span>
+        </div>
+    </div>
+
+    <div id="playlist" class="col-xs-4">
+        <input id="audio_file" type="file" accept="audio/*" />
+    </div>
+</div>

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

@@ -1,14 +0,0 @@
-<div class="row">
-    <div id="playerArea" class="col-lg-8 col-xs-12">
-
-        <div id="playerControls">
-          {{paper-icon icon="skip-previous" action="previous" class="playerControllIcon"}}
-          {{paper-icon icon=playButton action="play" class="playerControllIcon"}}
-          {{paper-icon icon="skip-next" action="pause" class="playerControllIcon"}}
-        </div>
-    </div>
-
-    <div id="playlist" class="col-lg-4 col-xs-12">
-        <input id="audio_file" type="file" accept="audio/*" />
-    </div>
-</div>

bower.json

@@ -1,18 +1,18 @@
 {
   "name": "huegasm",
   "dependencies": {
+    "bootstrap-sass": "~3.3.5",
     "ember": "1.13.6",
     "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
     "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
+    "ember-data": "~1.13.9",
     "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5",
     "ember-qunit": "0.4.9",
     "ember-qunit-notifications": "0.0.7",
     "ember-resolver": "~0.1.18",
+    "hammerjs": "~2.0.4",
     "jquery": "^1.11.1",
     "loader.js": "ember-cli/loader.js#3.2.0",
-    "qunit": "~1.18.0",
-    "hammerjs": "~2.0.4",
-    "bootstrap-sass": "~3.3.5",
-    "ember-data": "~1.13.9"
+    "qunit": "~1.18.0"
   }
 }

ember-cli-build.js

@@ -7,6 +7,7 @@ module.exports = function(defaults) {
   });
 
   app.import('vendor/dancer.js');
+
   // Use `app.import` to add additional libraries to the generated
   // output files.
   //

tests/integration/components/controls/music-control/music-player-test.js

@@ -1,26 +0,0 @@
-import { moduleForComponent, test } from 'ember-qunit';
-import hbs from 'htmlbars-inline-precompile';
-
-moduleForComponent('controls/music-control/music-player', 'Integration | Component | controls/music control/music player', {
-  integration: true
-});
-
-test('it renders', function(assert) {
-  assert.expect(2);
-
-  // Set any properties with this.set('myProperty', 'value');
-  // Handle any actions with this.on('myAction', function(val) { ... });
-
-  this.render(hbs`{{controls/music-control/music-player}}`);
-
-  assert.equal(this.$().text().trim(), '');
-
-  // Template block usage:
-  this.render(hbs`
-    {{#controls/music-control/music-player}}
-      template block text
-    {{/controls/music-control/music-player}}
-  `);
-
-  assert.equal(this.$().text().trim(), 'template block text');
-});