wip

app/components/controls/music-control.js

@@ -15,8 +15,9 @@ export default Em.Component.extend({
         this.set('status', 'playing');
       }
     },
-    volumeSliderChanged: function(){
+    volumeSliderChanged: function(volume){
-
+      this.set('volume', volume);
+      localStorage.setItem('huegasm.volume', volume);
     },
 
     next : function(){
@@ -28,9 +29,32 @@ export default Em.Component.extend({
 
     fullscreen: function(){
 
+    },
+
+    seekChanged: function() {
+
+    },
+
+    toggleMute: function() {
+      this.toggleProperty('volumeMuted');
     }
   },
 
+  volumeMuted: false,
+  volumeClass: function(){
+    var volume = this.get('volume');
+
+    if(this.get('volumeMuted')){
+      return "volume-off";
+    } else if(volume >= 70){
+      return "volume-up";
+    } else if(volume > 10){
+      return "volume-down";
+    } else {
+      return 'volume-mute';
+    }
+  }.property('volumeMuted', 'volume'),
+
   nextPrevEnabled: function(){
     return this.get('playQueue').length > 1;
   }.property('playQueue.[]'),
@@ -38,8 +62,10 @@ export default Em.Component.extend({
   status: null,
 
   playQueue: [],
-  timeElapsed: '0:00',
+  timeElapsed: 0,
-  timeRemaining: '0:00',
+  timeReamining: 0,
+  timeElapsedTxt: '0:00',
+  timeRemainingTxt: '0:00',
   volume: 100,
 
   playButton: function(){

app/styles/app.scss

@@ -178,6 +178,8 @@ md-toolbar {
   padding: 10px;
   width: 100%;
   color: white !important;
+  z-index: 20;
+  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
 }
 
 #playerTimeControls {
@@ -194,10 +196,11 @@ md-toolbar {
 .playerControllIcon {
   color: white !important;
   cursor: pointer;
+  transition-duration: 0.1s;
 }
 
 .playerControllIcon:hover {
-  color: darken(white, 20%) !important;
+  transform: scale(1.1)
 }
 
 #playerArea {
@@ -212,38 +215,52 @@ md-toolbar {
 
 #playlist {
   height: 300px;
-  background-color: grey;
+  background-color: #1E1E1E;
 }
 
-.volumeButtonHover {
-
-}
 .noUi-origin {
   background-color: black;
+  border-radius: 5px;
 }
 
 .noUi-base {
-  background-color: red;
+  background-color: #F12B24;
+  border-radius: 5px;
 }
 
-.noUi-target {
+#volumeBar {
   width: 100px;
-  height: 5px;
+  height: 8px;
   display: inline-block;
-  visibility: hidden;
+}
+
+#seekSlider {
+  height: 12px;
+  margin-bottom: 10px;
 }
 
 .noUi-horizontal .noUi-handle {
-  width: 4px;
+  width: 7px;
-  height: 20px;
+  height: 21px;
-  left: 0;
+  left: -1px;
   top: -8px;
+  cursor: pointer;
+  transition-duration: 0.1s;
+}
+
+.noUi-horizontal .noUi-handle:hover {
+  transform: scale(1.1);
 }
 
 .noUi-handle:after, .noUi-handle:before {
   content: none;
 }
 
-.volumeButton:hover + .noUi-target {
+#seekSlider * .noUi-handle {
-  visibility:visible;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #F12B24;
+  top: -7px;
+  left: -10px;
 }

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

@@ -1,7 +1,9 @@
-<div class="row">
+<div class="row" xmlns="http://www.w3.org/1999/html">
     <div id="playerArea" class="col-xs-8">
 
         <div id="playerControls">
+          {{range-slider start=0 min=0 max=100 id="seekSlider" change="seekChanged" }}
+
             {{#if nextPrevEnabled}}
             <span {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}} </span>`
             {{/if}}
@@ -12,10 +14,10 @@
           <span {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span>
           {{/if}}
 
-          {{paper-icon icon="volume-up"  class="playerControllIcon volumeButton"}}
+            <span {{action "toggleMute"}}>{{paper-icon icon=volumeClass  class="playerControllIcon volumeButton"}}</span>
-          {{range-slider start=volume min=0 max=100 change="volumeSliderChanged"}}
+          {{range-slider start=volume min=0 max=100 change="volumeSliderChanged" id="volumeBar"}}
 
-          <span id="playerTimeControls">{{timeElapsed}} / {{timeRemaining}}</span>
+          <span id="playerTimeControls">{{timeElapsedTxt}} / {{timeRemainingTxt}}</span>
 
           <span id="playerControlsRight">
             <span {{action "fullscreen"}}>{{paper-icon icon="fullscreen"  class="playerControllIcon"}}
@@ -26,5 +28,11 @@
 
     <div id="playlist" class="col-xs-4">
         <input id="audio_file" type="file" accept="audio/*" />
+
+        <span {{action "toggleShuffle"}}>{{paper-icon icon="shuffle" class="playerControllIcon"}}</span>
+
+        <span {{action "toggleRepeat"}}>{{paper-icon icon="repeat" class="playerControllIcon"}}</span>
+
+        <span {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
     </div>
 </div>