From e0beb7390bea4b30db987d6618e93eaa03e34e7d Mon Sep 17 00:00:00 2001
From: Jing Sun <jing.sun@citrix.com>
Date: Tue, 27 Dec 2016 19:46:05 +0100
Subject: [PATCH] more consistent indentation and quotes

---
 client/static/index.html | 556 +++++++++++++++------------------------
 1 file changed, 210 insertions(+), 346 deletions(-)
diff --git a/client/static/index.html b/client/static/index.html
index 2dbbf7f..90aa37d 100644
--- a/client/static/index.html
+++ b/client/static/index.html
@@ -1,135 +1,26 @@
 <!DOCTYPE html>
-<html lang="en" ng-app="StarterApp">
-  <head>
-    <title>mpv remote</title>
-
-<style type="text/css">
-md-content {
-  background-color: #eee;
-}
-
-md-card {
-  background-color: #fff;
-  text-align: center;
-}
-md-card h2:first-of-type {
-  margin-top: 0;
-}
-
-h2 {
-  font-weight: 400;
-}
-
-.md-toolbar-tools-bottom {
-  font-size: small;
-}
-.md-toolbar-tools-bottom :last-child {
-  opacity: 0.8;
-}
-
-#status {
-color: #c60008;
-}
-
-
-/* The starting CSS styles for the enter animation */
-.fade.ng-enter {
-  transition:0.5s linear all;
-  opacity:0;
-}
-
-/* The finishing CSS styles for the enter animation */
-.fade.ng-enter.ng-enter-active {
-  opacity:1;
-}
-
-/* now the element will fade out before it is removed from the DOM */
-.fade.ng-leave {
-  transition:0.5s linear all;
-  opacity:1;
-}
-.fade.ng-leave.ng-leave-active {
-  opacity:0;
-}
-
-section {
-  background: #ffffff;
-  border-radius: 3px;
-  text-align: center;
-  margin: 0.5em;
-  position: relative !important;
-  padding-bottom: 5px; }
-
-section .md-button {
-  margin-top: 10px;
-margin-bottom: 1px; }
-
-.label {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  font-size: 14px;
-  opacity: 0.84; }
-
-.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">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="description" content="">
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
-
-    <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>
+<html lang="en" ng-app="MpvRemoteApp">
+<head>
+  <title>mpv remote</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="description" content="">
+  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+
+  <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 rel="stylesheet" href="style.css"/>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
 
 <body layout="row" ng-controller="MpvRemote">
-<div id="overlay" class="overlay">
-</div>
+  <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
-          </h3>
-          <md-chips><md-chip>{{connectionStatus}}</md-chip></md-chips>
+        <h3>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>
@@ -140,248 +31,221 @@ 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="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" 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>
-
-	<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
-	  <div class="label">Skip</div>
-           <md-button class="md-fab" aria-label="Back" ng-click="back()">
-           	    <md-icon class="material-icons">fast_rewind</md-icon>
-            </md-button>
-
-            <md-button class="md-fab" aria-label="Forward" ng-click="forward()">
-              	    <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()">
-           	    <md-icon class="material-icons">skip_previous</md-icon>
-            </md-button>
-              <md-button class="md-fab" aria-label="Next chapter" ng-click="nextChapter()">
-              	    <md-icon class="material-icons">skip_next</md-icon>
-              </md-button>
-	      </section>
-
-
-	      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+        <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="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" 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>
+
+        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+          <div class="label">Skip</div>
+          <md-button class="md-fab" aria-label="Back" ng-click="back()">
+            <md-icon class="material-icons">fast_rewind</md-icon>
+          </md-button>
+          <md-button class="md-fab" aria-label="Forward" ng-click="forward()">
+            <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()">
+            <md-icon class="material-icons">skip_previous</md-icon>
+          </md-button>
+          <md-button class="md-fab" aria-label="Next chapter" ng-click="nextChapter()">
+            <md-icon class="material-icons">skip_next</md-icon>
+          </md-button>
+        </section>
+
+        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
           <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>
+            <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">
-	 <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">
-	     {{status}}
-    </b>
-  </div>
-</div>
       </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>
-    <script type="text/javascript" src="../node_modules/angular-material/angular-material.js"></script>
-      <script src="http://cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>
+  <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>
+  <script type="text/javascript" src="../node_modules/angular-material/angular-material.js"></script>
+  <script src="http://cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>
 
-      <script type="text/javascript">
+  <script type="text/javascript">
 
-function openOverlay() {
-    document.getElementById('overlay').style.height = "100%";
-}
+  function openOverlay() {
+    document.getElementById('overlay').style.height = '100%';
+  }
 
-function closeOverlay() {
-    document.getElementById('overlay').style.height = "0%";
-}
+  function closeOverlay() {
+    document.getElementById('overlay').style.height = '0%';
+  }
 
-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) {
+  var app = angular.module('MpvRemoteApp', ['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;
     }
-    return minutes + ':' + seconds;
-  }
-})
-app.controller('MpvRemote', ['$scope', '$mdBottomSheet', '$http', '$timeout', function($scope, $mdBottomSheet, $http, $timeout){
-
-// functions
-var showStatus = function(text) {
-  $scope.status = text;
-  $timeout(function() {$scope.status = ''; }, 2000);
-};
-
-// Commands
-var seekCommand = function(targetDuration) {
-  return {
-    command: 'seek',
-    seekValue: targetDuration
-  };
-};
-var changeVolumeCommand = function(targetVolume) {
-  return {
-    command: 'changeVolume',
-    seekValue: targetDuration
-  };
-};
-var chapterCommand = function(isForward) {
-  var direction = isForward ? 'forward' : 'backward';
-  return {
-    command: 'seekChapter',
-    direction: direction
-  };
-};
-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 = '';
+  })
+  app.controller('MpvRemote', ['$scope', '$mdBottomSheet', '$http', '$timeout', function($scope, $mdBottomSheet, $http, $timeout){
+
+    // Commands
+    var seekCommand = function(targetDuration) {
+      return { command: 'seek', seekValue: targetDuration };
+    };
+    var changeVolumeCommand = function(targetVolume) {
+      return { command: 'changeVolume', seekValue: targetVolume };
+    };
+    var chapterCommand = function(isForward) {
+      var direction = isForward ? 'forward' : 'backward';
+      return { command: 'seekChapter', direction: direction };
+    };
+    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 = '';
 
-// 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 stuff
+    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();
+      };
+    };
+    var sendCommand = function(command) {
+      socket.send(JSON.stringify(command));
     }
-  }
-  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();
-  };
-};
-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.isMuted = state.isMuted;
-  $scope.currentVolume = state.volume;
-  $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() { sendCommand(seekCommand(Math.max(0, $scope.currentDurationSeconds - 10))) };
-$scope.play = function() {
-  $scope.isPlaying = true;
-  sendCommand(playCommand);
-};
-$scope.pause = function() {
-  $scope.isPlaying = false;
-  sendCommand(pauseCommand);
-};
-$scope.forward = function() { sendCommand(seekCommand(Math.min($scope.totalDurationSeconds, $scope.currentDurationSeconds + 10))) };
-$scope.volumeUp = function() { volume(5) };
-$scope.volumeDown = function() { volume(-5) };
-$scope.mute = function() { sendCommand(muteCommand) };
-$scope.unmute = function() { sendCommand(unmuteCommand) };
+    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.isMuted = state.isMuted;
+      $scope.currentVolume = state.volume;
+      $scope.$apply();
+    };
+    connect();
+
+    $scope.onDurationChange = function() {
+      console.log($scope.currentDurationSeconds);
+      sendCommand(seekCommand($scope.currentDurationSeconds));
+    };
+
+    $scope.onVolumeChange = function() {
+      console.log($scope.currentVolume);
+      sendCommand(changeVolumeCommand($scope.currentVolume));
+    };
+
+    $scope.previousChapter	= function() { sendCommand(chapterCommand(false)) };
+    $scope.nextChapter = function() { sendCommand(chapterCommand(true)) };
+    $scope.back = function() { sendCommand(seekCommand(Math.max(0, $scope.currentDurationSeconds - 10))) };
+    $scope.play = function() { sendCommand(playCommand) };
+    $scope.pause = function() { sendCommand(pauseCommand) };
+    $scope.forward = function() { sendCommand(seekCommand(Math.min($scope.totalDurationSeconds, $scope.currentDurationSeconds + 10))) };
+    $scope.volumeUp = function() { volume(5) };
+    $scope.volumeDown = function() { volume(-5) };
+    $scope.mute = function() { sendCommand(muteCommand) };
+    $scope.unmute = function() { sendCommand(unmuteCommand) };
+
+    $scope.showListBottomSheet = function($event) {
+      $scope.alert = '';
+      $mdBottomSheet.show({
+        template: '<md-bottom-sheet class="md-list md-has-header"> <md-subheader>Settings</md-subheader> <md-list> <md-item ng-repeat="item in items"><md-item-content md-ink-ripple flex class="inset"> <a flex aria-label="{{item.name}}" ng-click="listItemClick($index)"> <span class="md-inline-list-icon-label">{{ item.name }}</span> </a></md-item-content> </md-item> </md-list></md-bottom-sheet>',
+        controller: 'ListBottomSheetCtrl',
+        targetEvent: $event
+      }).then(function(clickedItem) {
+        $scope.alert = clickedItem.name + ' clicked!';
+      });
+    };
+  }]);
+
+  app.controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet) {
+    $scope.items = [
+      { name: 'Share', icon: 'share' },
+    ];
+
+    $scope.listItemClick = function($index) {
+      var clickedItem = $scope.items[$index];
+      $mdBottomSheet.hide(clickedItem);
+    };
+  });
 
-  $scope.showListBottomSheet = function($event) {
-    $scope.alert = '';
-    $mdBottomSheet.show({
-      template: '<md-bottom-sheet class="md-list md-has-header"> <md-subheader>Settings</md-subheader> <md-list> <md-item ng-repeat="item in items"><md-item-content md-ink-ripple flex class="inset"> <a flex aria-label="{{item.name}}" ng-click="listItemClick($index)"> <span class="md-inline-list-icon-label">{{ item.name }}</span> </a></md-item-content> </md-item> </md-list></md-bottom-sheet>',
-      controller: 'ListBottomSheetCtrl',
-      targetEvent: $event
-    }).then(function(clickedItem) {
-      $scope.alert = clickedItem.name + ' clicked!';
+  app.config(function($mdThemingProvider) {
+    var customBlueMap = $mdThemingProvider.extendPalette('light-blue', {
+      'contrastDefaultColor': 'light',
+      'contrastDarkColors': ['50'],
+      '50': 'ffffff'
     });
-  };
-}]);
-
-app.controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet) {
-  $scope.items = [
-    { name: 'Share', icon: 'share' },
-  ];
-
-  $scope.listItemClick = function($index) {
-    var clickedItem = $scope.items[$index];
-    $mdBottomSheet.hide(clickedItem);
-  };
-});
-
-app.config(function($mdThemingProvider) {
-  var customBlueMap = $mdThemingProvider.extendPalette('light-blue', {
-    'contrastDefaultColor': 'light',
-    'contrastDarkColors': ['50'],
-    '50': 'ffffff'
-  });
-  $mdThemingProvider.definePalette('customBlue', customBlueMap);
-  $mdThemingProvider.theme('default')
+    $mdThemingProvider.definePalette('customBlue', customBlueMap);
+    $mdThemingProvider.theme('default')
     .primaryPalette('customBlue', {
       'default': '500',
       'hue-1': '50'
     })
     .accentPalette('red');
-  $mdThemingProvider.theme('input', 'default')
-        .primaryPalette('grey');
-});
+    $mdThemingProvider.theme('input', 'default')
+    .primaryPalette('grey');
+  });
 
-    </script>
+  </script>
 
-  </body>
+</body>
 </html>
