volume slider

client/static/index.html

@@ -175,16 +175,21 @@ height: 50px;
 
 
 	      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
-		<div class="label">Volume</div>
-            <md-button class="md-fab" aria-label="Volume down" ng-click="volumeDown()">
-             	    <md-icon class="material-icons">volume_down</md-icon>
-            </md-button>
-              <md-button class="md-fab" aria-label="Volume up" ng-click="volumeUp()">
-           	<md-icon class="material-icons">volume_up</md-icon>
-              </md-button>
-	    <md-button class="md-fab" aria-label="Toggle mute" ng-click="toggleMute()">
-               	    <md-icon class="material-icons">volume_off</md-icon>
+          <md-button ng-show="isMuted" class="md-fab" aria-label="Unmute" ng-click="unmute()">
+                        <md-icon class="material-icons">volume_mute</md-icon>
+                  </md-button>
+              <md-button ng-hide="isMuted" class="md-fab" aria-label="Mute" ng-click="mute()">
+                       	    <md-icon class="material-icons">volume_off</md-icon>
+                      </md-button>
+              <md-slider flex="" min="0" ng-change="" max="130" ng-model="currentVolume" aria-label="VolumeSlider" id="volume-slider">
+              </md-slider>
+              <md-button class="md-fab" aria-label="Volume down" ng-click="volumeDown()">
+                    <md-icon class="material-icons">volume_down</md-icon>
               </md-button>
+                <md-button class="md-fab" aria-label="Volume up" ng-click="volumeUp()">
+              <md-icon class="material-icons">volume_up</md-icon>
+                </md-button>
+
 	      </section>
 
 	 <div class="status-container">
@@ -255,11 +260,15 @@ var chapterCommand = function(isForward) {
 };
 var playCommand = { command: 'play' };
 var pauseCommand = { command: 'pause' };
+var muteCommand = { command: 'mute' };
+var unmuteCommand = { command: 'unmute' };
 // ---------------------------------------------------------
 $scope.status = '';
 $scope.currentDurationSeconds = 0;
 $scope.totalDurationSeconds = 1;
+$scope.currentVolume = 0;
 $scope.isPlaying = false;
+$scope.isMuted = false;
 $scope.fileName = '';
 $scope.connectionStatus = '';
 $scope.alert = '';
@@ -304,6 +313,8 @@ var updateState = function(state) {
   $scope.totalDurationSeconds = state.totalDuration;
   $scope.isPlaying = state.isPlaying;
   $scope.fileName = state.fileName;
+  $scope.isMuted = state.isMuted;
+  $scope.currentVolume = state.volume;
   $scope.$apply();
 };
 connect();
@@ -315,7 +326,7 @@ $scope.onDurationChange = function() {
 
 $scope.previousChapter	= function() { sendCommand(chapterCommand(false)) };
 $scope.nextChapter = function() { sendCommand(chapterCommand(true)) };
-$scope.back = function() {};
+$scope.back = function() { sendCommand(seekCommand(Math.max(0, $scope.currentDurationSeconds - 10))) };
 $scope.play = function() {
   $scope.isPlaying = true;
   sendCommand(playCommand);
@@ -324,10 +335,11 @@ $scope.pause = function() {
   $scope.isPlaying = false;
   sendCommand(pauseCommand);
 };
-$scope.forward = function() {};
+$scope.forward = function() { sendCommand(seekCommand(Math.min($scope.totalDurationSeconds, $scope.currentDurationSeconds + 10))) };
 $scope.volumeUp = function() { volume(5) };
 $scope.volumeDown = function() { volume(-5) };
-$scope.toggleMute = function() { };
+$scope.mute = function() { sendCommand(muteCommand) };
+$scope.unmute = function() { sendCommand(unmuteCommand) };
 
   $scope.showListBottomSheet = function($event) {
     $scope.alert = '';

protocol

@@ -8,7 +8,8 @@ Response:
   "currentDuration": 2,
   "volume": 50,
   "fileName": "Foo",
-  "isPlaying": true
+  "isPlaying": true,
+  "isMuted": false
 }
 --------------------------------------------------------------------------------
 Seek: