From ead6d5533f081238acce129f88466e9bb62883fd Mon Sep 17 00:00:00 2001
From: Jing Sun <jing.sun@citrix.com>
Date: Tue, 27 Dec 2016 19:08:01 +0100
Subject: [PATCH] improved client with reconnect, slider works sorta

---
 client/static/index.html | 202 ++++++++++++++++++++++++++-------------
 1 file changed, 136 insertions(+), 66 deletions(-)
diff --git a/client/static/index.html b/client/static/index.html
index 02fbcc5..af500d1 100644
--- a/client/static/index.html
+++ b/client/static/index.html
@@ -74,6 +74,38 @@ margin-bottom: 1px; }
 .status-container {
 height: 50px;
 }
+
+.dont-break-out {
+
+  /* These are technically the same, but use both */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  -ms-word-break: break-all;
+  /* This is the dangerous one in WebKit, as it breaks things wherever */
+  word-break: break-all;
+  /* Instead use this non-standard one: */
+  word-break: break-word;
+
+  /* Adds a hyphen where the word breaks, if supported (No Blink) */
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.overlay {
+    height: 0;
+    width: 100%;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0, 0.5);
+    overflow-x: hidden;
+    transition: 0.5s;
+}
 </style>
 
     <meta charset="utf-8">
@@ -88,13 +120,16 @@ height: 50px;
   </head>
 
 <body layout="row" ng-controller="MpvRemote">
+<div id="overlay" class="overlay">
+</div>
 
   <div layout="column" class="relative" layout-fill role="main">
     <md-toolbar>
       <div class="md-toolbar-tools">
         <h3>
-            mpv remote control
+            mpv remote
           </h3>
+          <md-chips><md-chip>{{connectionStatus}}</md-chip></md-chips>
         <span flex></span>
         <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
           <ng-md-icon icon="more_vert"></ng-md-icon>
@@ -105,12 +140,14 @@ height: 50px;
     <md-content flex md-scroll-y>
       <ui-view layout="column" layout-fill layout-padding>
 
+<label class="dont-break-out" layout="column" layout-align="center center">{{fileName}}</label>
+
 <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-icon class="material-icons" ng-hide="isPlaying" ng-click="play()">play_arrow</md-icon>
+       <md-icon class="material-icons" ng-show="isPlaying" ng-click="pause()">pause</md-icon>
    </md-button>
-        <md-slider flex="" min="0" max="{{totalDurationSeconds}}" ng-model="currentDurationSeconds" aria-label="Progress" id="progress-slider">
+        <md-slider flex="" min="0" ng-change="onDurationChange()" 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>
@@ -168,6 +205,15 @@ height: 50px;
       <script src="http://cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>
 
       <script type="text/javascript">
+
+function openOverlay() {
+    document.getElementById('overlay').style.height = "100%";
+}
+
+function closeOverlay() {
+    document.getElementById('overlay').style.height = "0%";
+}
+
 var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons']);
 app.filter('toMinSec', function(){
   return function(input){
@@ -187,77 +233,101 @@ var showStatus = function(text) {
   $timeout(function() {$scope.status = ''; }, 2000);
 };
 
-var seek = function(seconds) {
-  var direction = seconds < 0 ? "Back" : "Forward";
-  $http({
-    method: 'GET',
-    url: '/seek/' + seconds
-  }).then(function successCallback(response) {
-    showStatus(direction + ": Success");
-  }, function errorCallback(response) {
-    showStatus(direction + ": Error");
-    });
+// Commands
+var seekCommand = function(targetDuration) {
+  return {
+    command: 'seek',
+    seekValue: targetDuration
+  };
 };
-
-var volume = function(delta) {
-  var direction = delta < 0 ? "down" : "up";
-  $http({
-    method: 'GET',
-    url: '/volume/' + delta
-  }).then(function successCallback(response) {
-    showStatus("Volume " + direction + ": Success");
-  }, function errorCallback(response) {
-    showStatus("Volume " + direction + ": Error");
-    });
+var changeVolumeCommand = function(targetVolume) {
+  return {
+    command: 'changeVolume',
+    seekValue: targetDuration
+  };
 };
-
-var chapter = function(isNext) {
-  var direction = isNext ? "Next" : "Previous";
-  var delta = isNext ? 1 : -1;
-  $http({
-    method: 'GET',
-    url: '/seekChapter/' + delta
-  }).then(function successCallback(response) {
-    showStatus(direction + " chapter: Success");
-  }, function errorCallback(response) {
-    showStatus(direction + " chapter: Error");
-    });
+var chapterCommand = function(isForward) {
+  var direction = isForward ? 'forward' : 'backward';
+  return {
+    command: 'seekChapter',
+    direction: direction
+  };
 };
+var playCommand = { command: 'play' };
+var pauseCommand = { command: 'pause' };
 // ---------------------------------------------------------
 $scope.status = '';
-$scope.currentDurationSeconds = 50;
-$scope.totalDurationSeconds = 530;
-$scope.isPlaying = true;
-
+$scope.currentDurationSeconds = 0;
+$scope.totalDurationSeconds = 1;
+$scope.isPlaying = false;
+$scope.fileName = '';
+$scope.connectionStatus = '';
 $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'
-  }).then(function successCallback(response) {
-    showStatus("Toggle play: Success");
-  }, function errorCallback(response) {
-    showStatus("Toggle play: Error");
-    });
+
+// Socket stuff
+//var socket = new WebSocket('ws://echo.websocket.org');
+var socket;
+var connect = function() {
+  socket = new WebSocket('ws://192.168.1.42:8000');
+  socket.onmessage = function(event) {
+    console.log(event.data);
+    var serverMessage = JSON.parse(event.data);
+    if (serverMessage.type === 'status') {
+      updateState(serverMessage);
+    }
+  }
+  socket.onopen = function(event) {
+    console.log('connected');
+    reconnectTimer = 2000;
+    $scope.connectionStatus = 'Connected';
+    $scope.$apply();
+    closeOverlay();
+  };
+  socket.onclose = function(event) {
+    $scope.connectionStatus = 'Disconnected';
+    $scope.$apply();
+    openOverlay();
+    tryReconnect();
+  };
 };
-$scope.forward = function() { seek(10) };
+var sendCommand = function(command) {
+  socket.send(JSON.stringify(command));
+}
+var reconnectTimer = 2000;
+var tryReconnect = function() {
+  console.log('Reconnecting in ' + reconnectTimer/1000 + 's');
+  setTimeout(connect, reconnectTimer);
+  reconnectTimer = reconnectTimer*2;
+};
+var updateState = function(state) {
+  $scope.currentDurationSeconds = state.currentDuration;
+  $scope.totalDurationSeconds = state.totalDuration;
+  $scope.isPlaying = state.isPlaying;
+  $scope.fileName = state.fileName;
+  $scope.$apply();
+};
+connect();
+
+$scope.onDurationChange = function() {
+  console.log($scope.currentDurationSeconds);
+  sendCommand(seekCommand($scope.currentDurationSeconds));
+};
+
+$scope.previousChapter	= function() { sendCommand(chapterCommand(false)) };
+$scope.nextChapter = function() { sendCommand(chapterCommand(true)) };
+$scope.back = function() {};
+$scope.play = function() {
+  $scope.isPlaying = true;
+  sendCommand(playCommand);
+};
+$scope.pause = function() {
+  $scope.isPlaying = false;
+  sendCommand(pauseCommand);
+};
+$scope.forward = function() {};
 $scope.volumeUp = function() { volume(5) };
 $scope.volumeDown = function() { volume(-5) };
-$scope.toggleMute = function() {
- $http({
-    method: 'GET',
-    url: '/muteunmute'
-  }).then(function successCallback(response) {
-    showStatus("Toggle mute: Success");
-  }, function errorCallback(response) {
-    showStatus("Toggle mute: Error");
-    });
-};
+$scope.toggleMute = function() { };
 
   $scope.showListBottomSheet = function($event) {
     $scope.alert = '';
