From 52d3c0b1af05bc1ac118ef683a0d5cdd20e8b944 Mon Sep 17 00:00:00 2001
From: Jing Sun <jing.sun@citrix.com>
Date: Tue, 27 Dec 2016 16:14:43 +0100
Subject: [PATCH] replaced play/pause button added duration slider

---
 client/static/index.html | 54 ++++++++++++++++++++++++++++------------
 1 file changed, 38 insertions(+), 16 deletions(-)
diff --git a/client/static/index.html b/client/static/index.html
index 5a2a0df..02fbcc5 100644
--- a/client/static/index.html
+++ b/client/static/index.html
@@ -75,7 +75,7 @@ margin-bottom: 1px; }
 height: 50px;
 }
 </style>
-    
+
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="description" content="">
@@ -84,10 +84,11 @@ height: 50px;
     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
     <link rel="stylesheet" href="../node_modules/angular-material/angular-material.css"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    
+
   </head>
 
 <body layout="row" ng-controller="MpvRemote">
+
   <div layout="column" class="relative" layout-fill role="main">
     <md-toolbar>
       <div class="md-toolbar-tools">
@@ -100,13 +101,19 @@ height: 50px;
         </md-button>
       </div>
     </md-toolbar>
-    
+
     <md-content flex md-scroll-y>
       <ui-view layout="column" layout-fill layout-padding>
 
-	  <md-button class="md-raised md-primary" ng-click="togglePlay()">
-	    Play/Pause
-	    </md-button>
+<section layout="row" layout-align="center center" layout-wrap>
+  <md-button class="md-fab" aria-label="Play" ng-click="">
+       <md-icon class="material-icons" ng-hide="isPlaying" ng-click="togglePlay()">play_arrow</md-icon>
+       <md-icon class="material-icons" ng-show="isPlaying" ng-click="togglePlay()">pause</md-icon>
+   </md-button>
+        <md-slider flex="" min="0" max="{{totalDurationSeconds}}" ng-model="currentDurationSeconds" aria-label="Progress" id="progress-slider">
+        </md-slider>
+</section>
+<label layout="column" layout-align="center center">{{currentDurationSeconds | toMinSec}}/{{totalDurationSeconds | toMinSec}}</label>
 
 	<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
 	  <div class="label">Skip</div>
@@ -118,7 +125,7 @@ height: 50px;
               	    <md-icon class="material-icons">fast_forward</md-icon>
             </md-button>
 	</section>
-	
+
 	      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
 		<div class="label">Chapter</div>
             <md-button class="md-fab" aria-label="Previous chapter" ng-click="previousChapter()">
@@ -129,7 +136,7 @@ height: 50px;
               </md-button>
 	      </section>
 
-	
+
 	      <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()">
@@ -142,6 +149,7 @@ height: 50px;
                	    <md-icon class="material-icons">volume_off</md-icon>
               </md-button>
 	      </section>
+
 	 <div class="status-container">
 	 <div class="ng-scope fade" ng-if="status" id="status">
 	   <b layout="row" layout-align="center center" class="md-padding ng-binding layout-align-center-center layout-row">
@@ -152,7 +160,7 @@ height: 50px;
       </ui-view>
     </md-content>
   </div>
-  
+
     <script src="../node_modules/angular/angular.js"></script>
     <script src="../node_modules/angular-animate/angular-animate.js"></script>
     <script src="../node_modules/angular-aria/angular-aria.js"></script>
@@ -161,7 +169,16 @@ height: 50px;
 
       <script type="text/javascript">
 var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons']);
-
+app.filter('toMinSec', function(){
+  return function(input){
+    var minutes = parseInt(input/60, 10);
+    var seconds = input%60;
+    if (seconds < 10) {
+        seconds = '0' + seconds;
+    }
+    return minutes + ':' + seconds;
+  }
+})
 app.controller('MpvRemote', ['$scope', '$mdBottomSheet', '$http', '$timeout', function($scope, $mdBottomSheet, $http, $timeout){
 
 // functions
@@ -204,16 +221,21 @@ var chapter = function(isNext) {
     showStatus(direction + " chapter: Success");
   }, function errorCallback(response) {
     showStatus(direction + " chapter: Error");
-    });			  
+    });
 };
-// ---------------------------------------------------------			    
+// ---------------------------------------------------------
 $scope.status = '';
+$scope.currentDurationSeconds = 50;
+$scope.totalDurationSeconds = 530;
+$scope.isPlaying = true;
 
 $scope.alert = '';
 $scope.previousChapter	= function() { chapter(false) };
 $scope.nextChapter = function() { chapter(true) };
 $scope.back = function() { seek(-10) };
 $scope.togglePlay = function() {
+  $scope.isPlaying = !$scope.isPlaying;
+    
     $http({
     method: 'GET',
     url: '/playpause'
@@ -236,7 +258,7 @@ $scope.toggleMute = function() {
     showStatus("Toggle mute: Error");
     });
 };
-			  
+
   $scope.showListBottomSheet = function($event) {
     $scope.alert = '';
     $mdBottomSheet.show({
@@ -248,12 +270,12 @@ $scope.toggleMute = function() {
     });
   };
 }]);
-  
+
 app.controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet) {
   $scope.items = [
     { name: 'Share', icon: 'share' },
   ];
-  
+
   $scope.listItemClick = function($index) {
     var clickedItem = $scope.items[$index];
     $mdBottomSheet.hide(clickedItem);
@@ -278,6 +300,6 @@ app.config(function($mdThemingProvider) {
 });
 
     </script>
-    
+
   </body>
 </html>
