From 3c567fe9ebd6320aea5a493aade19113fd96bf36 Mon Sep 17 00:00:00 2001
From: samcm <sam_cm_to@hotmail.com>
Date: Fri, 16 Jun 2017 01:58:03 +1000
Subject: [PATCH] Fixed PTPlayer + start to 1.2 release

---
 package.json                                  |   2 +
 src/App.vue                                   |  14 +-
 src/assets/css/styleNew.css                   | 322 +++++++++++++++++-
 src/assets/js/plex/PlexTv.js                  |  12 +-
 src/components/Navbar.vue                     |   2 +-
 src/components/application.vue                |  28 +-
 src/components/application/joinroom.vue       |  19 +-
 src/components/application/plexbrowser.vue    |   4 +-
 .../application/plexbrowser/plexcontent.vue   |  13 +-
 src/components/application/plexclient.vue     |   2 +-
 src/components/application/ptplayer.vue       |   7 +-
 .../application/ptplayer/videoplayer.vue      |   1 -
 src/components/application/walkthrough.vue    |  61 ++--
 src/components/home.vue                       |  24 +-
 src/components/signin.vue                     |  98 +++---
 src/components/signout.vue                    |  12 +-
 src/main.js                                   |   9 +-
 src/sidebar.vue                               | 142 ++++----
 18 files changed, 565 insertions(+), 207 deletions(-)

diff --git a/package.json b/package.json
index 238752f8..e6d58baf 100644
--- a/package.json
+++ b/package.json
@@ -50,8 +50,10 @@
     "stylus-loader": "^3.0.1",
     "sweet-modal-vue": "^1.1.0",
     "url-loader": "^0.5.8",
+    "vue-clipboards": "^1.0.2",
     "vue-loader": "^11.3.4",
     "vue-observe-visibility": "^0.1.3",
+    "vue-resource": "^1.3.4",
     "vue-style-loader": "^2.0.5",
     "vue-template-compiler": "^2.2.6",
     "vue-video-player": "^3.1.1",
diff --git a/src/App.vue b/src/App.vue
index 4298c169..3c67cbd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,13 +20,13 @@
       </v-list>
       <v-list class="pt-0" dense>
         <v-divider></v-divider>
-        <v-list-item v-for="item in items" :key="item">
-          <v-list-tile>
+        <v-list-item>
+          <v-list-tile :router="true" to="/signout">
             <v-list-tile-action>
-              <v-icon>{{ item.icon }}</v-icon>
+              <v-icon></v-icon>
             </v-list-tile-action>
-            <v-list-tile-content>
-              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
+            <v-list-tile-content>     
+              <v-list-tile-title v-if="plex != null"  v-text="'Signout'"></v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
         </v-list-item>
@@ -39,7 +39,7 @@
       <v-toolbar-side-icon light @click.native.stop="drawer = !drawer"></v-toolbar-side-icon>
       <v-toolbar-title class="white--text"></v-toolbar-title>
       <v-toolbar-items>
-        <v-menu class="hidden-sm-and-up" offset-y origin="bottom" left transition="v-slide-y-transition">
+        <v-menu class="hidden-sm-and-up" offset-y origin="bottom" left light>
           <v-btn icon light slot="activator">
             <v-icon>more_vert</v-icon>
           </v-btn>
@@ -59,7 +59,7 @@
       </v-toolbar-items>
     </v-toolbar>
     <main v-bind:style="mainStyle">
-      <v-container v-bind:style="containerStyle"  fluid>
+      <v-container style="padding:0" v-bind:style="containerStyle" fluid>
         <router-view></router-view>
       </v-container>
     </main>    
diff --git a/src/assets/css/styleNew.css b/src/assets/css/styleNew.css
index 0a938d99..796ba0f1 100644
--- a/src/assets/css/styleNew.css
+++ b/src/assets/css/styleNew.css
@@ -6,6 +6,9 @@
   text-overflow: ellipsis;
 }
 
+.center-text {	
+    text-align: center;
+}
 
 
 /* Headers */
@@ -48,7 +51,12 @@ html {
 }
 
 main {
-	background: #272c38;
+	/*background: #272c38;*/
+	background: #2b5876;  /* fallback for old browsers */
+	background: -webkit-linear-gradient(to top, #182848, #2b5876);  /* Chrome 10-25, Safari 5.1-6 */
+	background: linear-gradient(to bottom, #1F1C2C, #182848); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+
 }
 
 .navigation-drawer {
@@ -66,6 +74,9 @@ main {
 span {
 	color: #fff;
 }
+.menu__content  {
+	margin-top:35px !important;
+}
 
 .stepper {
 	background: #323948;
@@ -186,4 +197,313 @@ span {
   height:40vw;
   border:1px solid;
   font-size:10vw;
+}
+
+
+/* PTPlayer */
+
+.ptplayer .video-js .vjs-menu-button-inline.vjs-slider-active, .video-js .vjs-menu-button-inline:focus, .video-js .vjs-menu-button-inline:hover, .video-js.vjs-no-flex .vjs-menu-button-inline {
+  width: 10em
+}
+
+.vjs-volume-bar {
+  width: 100% !important;
+}
+
+.ptplayer .video-js .vjs-controls-disabled .vjs-big-play-button {
+  display: none !important;
+}
+
+.ptplayer .video-js .vjs-control {
+  width: 5em
+}
+
+.ptplayer .video-js .vjs-volume-control {
+  width: 10em;
+}
+
+.ptplayer .video-js .vjs-menu-button-inline:before {
+  width: 1.5em
+}
+
+.vjs-menu-button-inline .vjs-menu {
+  left: 3em
+}
+
+.ptplayer .vjs-paused.vjs-has-started.video-js .vjs-big-play-button, .video-js.vjs-ended .vjs-big-play-button, .video-js.vjs-paused .vjs-big-play-button {
+  display: block
+}
+
+.ptplayer .video-js .vjs-load-progress div, .vjs-seeking .vjs-big-play-button, .vjs-waiting .vjs-big-play-button {
+  display: none !important;
+}
+
+.ptplayer .video-js .vjs-mouse-display:after, .video-js .vjs-play-progress:after {
+  padding: 0 .4em .3em
+}
+
+.ptplayer .video-js.vjs-ended .vjs-loading-spinner {
+  display: none;
+}
+
+.ptplayer .video-js.vjs-ended .vjs-big-play-button {
+  display: block !important;
+}
+
+.ptplayer .video-js *, .video-js:after, .video-js:before {
+  box-sizing: inherit;
+  font-size: inherit;
+  color: inherit;
+  line-height: 3em
+}
+
+.ptplayer .video-js.vjs-fullscreen, .video-js.vjs-fullscreen .vjs-tech {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.ptplayer .video-js {
+  font-size: 14px;
+  overflow: hidden
+}
+
+.ptplayer .video-js .vjs-control {
+  color: inherit
+}
+
+.ptplayer .video-js .vjs-menu-button-inline:hover, .video-js.vjs-no-flex .vjs-menu-button-inline {
+  width: 8.35em
+}
+
+.ptplayer .video-js .vjs-volume-menu-button.vjs-volume-menu-button-horizontal:hover .vjs-menu .vjs-menu-content {
+  height: 2em;
+  width: 6.35em
+}
+
+.ptplayer .video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before {
+  text-shadow: 0 0 1em #fff, 0 0 1em #fff, 0 0 1em #fff
+}
+
+.ptplayer .video-js .vjs-spacer, .video-js .vjs-time-control {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-flex: 1 1 auto;
+  -moz-box-flex: 1 1 auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto
+}
+
+.ptplayer .video-js .vjs-time-control {
+  -webkit-box-flex: 0 1 auto;
+  -moz-box-flex: 0 1 auto;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  width: auto
+}
+
+.ptplayer .video-js .vjs-time-control.vjs-time-divider {
+  width: 14px
+}
+
+.ptplayer .video-js .vjs-time-control.vjs-time-divider div {
+  width: 100%;
+  text-align: center
+}
+
+.ptplayer .video-js .vjs-time-control.vjs-current-time {
+  margin-left: 1em
+}
+
+.ptplayer .video-js .vjs-time-control .vjs-current-time-display, .video-js .vjs-time-control .vjs-duration-display {
+  width: 100%
+}
+
+.ptplayer .video-js .vjs-time-control .vjs-current-time-display {
+  text-align: right
+}
+
+.ptplayer .video-js .vjs-time-control .vjs-duration-display {
+  text-align: left
+}
+
+.ptplayer .video-js .vjs-play-progress:before, .video-js .vjs-progress-control .vjs-play-progress:before, .video-js .vjs-remaining-time, .video-js .vjs-volume-level:after, .video-js .vjs-volume-level:before, .video-js.vjs-live .vjs-time-control.vjs-current-time, .video-js.vjs-live .vjs-time-control.vjs-duration, .video-js.vjs-live .vjs-time-control.vjs-time-divider, .video-js.vjs-no-flex .vjs-time-control.vjs-remaining-time {
+  display: none
+}
+
+.ptplayer .video-js.vjs-no-flex .vjs-time-control {
+  display: table-cell;
+  width: 4em
+}
+
+.ptplayer .video-js .vjs-progress-control {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: .5em;
+  top: -.5em
+}
+
+.ptplayer .video-js .vjs-progress-control .vjs-load-progress, .video-js .vjs-progress-control .vjs-play-progress, .video-js .vjs-progress-control .vjs-progress-holder {
+  height: 100%
+}
+
+.ptplayer .video-js .vjs-progress-control .vjs-progress-holder {
+  margin: 0
+}
+
+.ptplayer .video-js .vjs-progress-control:hover {
+  height: 1.5em;
+  top: -1.5em
+}
+
+.ptplayer .video-js .vjs-control-bar {
+  -webkit-transition: -webkit-transform .1s ease 0s;
+  -moz-transition: -moz-transform .1s ease 0s;
+  -ms-transition: -ms-transform .1s ease 0s;
+  -o-transition: -o-transform .1s ease 0s;
+  transition: transform .1s ease 0s
+}
+
+.ptplayer .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar, .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar, .video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar {
+  visibility: visible;
+  opacity: 1;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform: translateY(3em);
+  -moz-transform: translateY(3em);
+  -ms-transform: translateY(3em);
+  -o-transform: translateY(3em);
+  transform: translateY(3em);
+  -webkit-transition: -webkit-transform 1s ease 0s;
+  -moz-transition: -moz-transform 1s ease 0s;
+  -ms-transition: -ms-transform 1s ease 0s;
+  -o-transition: -o-transform 1s ease 0s;
+  transition: transform 1s ease 0s
+}
+
+.ptplayer .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control, .video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control {
+  height: .25em;
+  top: -.25em;
+  pointer-events: none;
+  -webkit-transition: height 1s, top 1s;
+  -moz-transition: height 1s, top 1s;
+  -ms-transition: height 1s, top 1s;
+  -o-transition: height 1s, top 1s;
+  transition: height 1s, top 1s
+}
+
+.ptplayer .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active.vjs-fullscreen .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive.vjs-fullscreen .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active.vjs-fullscreen .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control, .video-js.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control {
+  opacity: 0;
+  -webkit-transition: opacity 1s ease 1s;
+  -moz-transition: opacity 1s ease 1s;
+  -ms-transition: opacity 1s ease 1s;
+  -o-transition: opacity 1s ease 1s;
+  transition: opacity 1s ease 1s;
+  right: 0;
+  position: absolute
+
+}
+
+.ptplayer .video-js.vjs-live .vjs-live-control {
+  margin-left: 100%
+}
+
+.ptplayer .video-js .vjs-big-play-button {
+  top: 50%;
+  left: 50%;
+  margin-left: -1em;
+  margin-top: -1em;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  border: none;
+  border-radius: 50%;
+  font-size: 3.5em;
+  background-color: rgba(0, 0, 0, .45);
+  color: #fff;
+  -webkit-transition: border-color .4s, outline .4s, background-color .4s;
+  -moz-transition: border-color .4s, outline .4s, background-color .4s;
+  -ms-transition: border-color .4s, outline .4s, background-color .4s;
+  -o-transition: border-color .4s, outline .4s, background-color .4s;
+  transition: border-color .4s, outline .4s, background-color .4s
+}
+
+.ptplayer .video-js .vjs-menu-button-popup .vjs-menu {
+  left: -3em
+}
+
+.ptplayer .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  background-color: transparent;
+  width: 12em;
+  left: -1.5em;
+  padding-bottom: .5em
+}
+
+.ptplayer .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item, .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title {
+  background-color: #151b17;
+  margin: .3em 0;
+  padding: .5em;
+  border-radius: .3em
+}
+
+.ptplayer .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected {
+  background-color: #E5A00D
+}
+
+.ptplayer .video-js .vjs-big-play-button {
+  background-color: rgba(0, 0, 0, 0);
+  font-size: 8em;
+  border-radius: 0%;
+  height: 1em !important;
+  line-height: 1em !important;
+  margin-top: -0.5em !important
+}
+
+.ptplayer .video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus, .video-js .vjs-big-play-button:active {
+  background-color: transparent
+}
+
+.ptplayer .video-js .vjs-loading-spinner {
+  border-color: #e5a00d
+}
+
+.ptplayer .video-js .vjs-control-bar2 {
+  background-color: #000000
+}
+
+.ptplayer .video-js .vjs-control-bar {
+  background-color: rgba(0, 0, 0, 1) !important;
+  color: #ffffff;
+  font-size: 12px
+}
+
+.ptplayer .video-js .vjs-play-progress, .video-js .vjs-volume-level {
+  background-color: #e5a00d
+}
+
+.ptplayer .video-js .vjs-load-progress {
+  background: rgba(115, 133, 159, 0.5);
+}
+
+.ptplayer .video-js .vjs-big-play-button:hover {
+  color: #E5A00D;
+}
+
+.ptplayer .video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before {
+  color: #E5A00D;
+  text-shadow: none
+}
+
+.vjs-volume-level {
+  background-color: #E5A00D !important;
+}
+
+.vjs-fullscreen-control {
+  position: absolute !important;
+  right: 0px;
 }
\ No newline at end of file
diff --git a/src/assets/js/plex/PlexTv.js b/src/assets/js/plex/PlexTv.js
index 0c5f1d2f..4c9e88d8 100644
--- a/src/assets/js/plex/PlexTv.js
+++ b/src/assets/js/plex/PlexTv.js
@@ -277,11 +277,13 @@ module.exports = function () {
         validServers++
       }
     }
-    this.servers.forEach((server) => {
-      if (!blockedServers[server.clientIdentifier]){
-        validServers++
-      }
-    })
+    if (blockedServers){
+      this.servers.forEach((server) => {
+        if (!blockedServers[server.clientIdentifier]){
+          validServers++
+        }
+      })
+    }
     if (validServers == 0){
       return callback(false)
     }
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index c513a251..b250b8ae 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -11,7 +11,7 @@
         <v-list>
           <v-list-item v-for="item in items" :key="item">
             <v-list-tile>
-              <v-list-tile-title v-text="item.title"></v-list-tile-title>
+              <v-list-tile-title>{{ item.title }}</v-list-tile-title>              
             </v-list-tile>
           </v-list-item>
         </v-list>
diff --git a/src/components/application.vue b/src/components/application.vue
index 94b36053..c8840b9c 100644
--- a/src/components/application.vue
+++ b/src/components/application.vue
@@ -3,17 +3,21 @@
 		<div style="margin-bottom: 0">
 			<div style="margin-bottom: 0">
 				<!-- MAIN CONTENT -->
-				<div v-if="!validDevices" style="position: absolute; top: 50%; left: 50%">
-						<v-progress-circular indeterminate v-bind:size="50" class="amber--text"></v-progress-circular>
-				</div>
+				<v-layout v-if="!validDevices" wrap row style="position:relative" class="pt-4">
+					<v-flex xs12 md4 offset-md4>			
+						<div style="width:100%;text-align:center">				
+							<v-progress-circular indeterminate v-bind:size="50" class="amber--text" style="display:inline-block"></v-progress-circular>
+						</div>
+					</v-flex>      
+				</v-layout>
 				<div v-if="validDevices">
 					<div v-if="!ptConnected || !chosenClient || !ptRoom">
-						<walkthrough></walkthrough>
+						<walkthrough  class="pa-4"></walkthrough>
 					</div>
 					<div v-else>
-						<plexbrowser v-if="showBrowser"></plexbrowser>
-						<ptplayer v-if="isPTPlayer"></ptplayer>
-						<nowplaying v-if="showMetadata"></nowplaying>
+						<plexbrowser v-if="showBrowser"  class="pa-4"></plexbrowser>
+						<ptplayer v-if="isPTPlayer"></ptplayer>  
+						<plexcontent v-if="showMetadata"  class="pa-4" nowPlaying :content="chosenClient.clientPlayingMetadata" :server="nowPlayingServer"></plexcontent>
 					</div>
 				</div>
 			</div>
@@ -43,6 +47,7 @@
   import sidebar from './application/sidebar'
   import ptplayer from './application/ptplayer'
   import plexbrowser from './application/plexbrowser'
+  import plexcontent from './application/plexbrowser/plexcontent'
   import nowplaying from './application/nowplaying'
 
   export default {
@@ -57,7 +62,8 @@
 	  walkthrough,
 	  ptplayer,
 	  plexbrowser,
-	  nowplaying
+	  nowplaying,
+		plexcontent
 	},
 	mounted: function () {
 	  if (window['localStorage'].getItem('plexuser') == null) {
@@ -203,6 +209,12 @@
 	  stateTESTING: function () {
 		return this.$store
 	  },
+		nowPlayingServer: function () {
+			if (!this.chosenClient.clientPlayingMetadata){
+				return null
+			}
+			return this.plex.getServerById(this.chosenClient.clientPlayingMetadata.machineIdentifier)
+		}
 
 	},
 	methods: {
diff --git a/src/components/application/joinroom.vue b/src/components/application/joinroom.vue
index 6d505408..4f0ddfd4 100644
--- a/src/components/application/joinroom.vue
+++ b/src/components/application/joinroom.vue
@@ -6,17 +6,20 @@
         light
         :dark="false"
         v-bind:items="ptservers"
-        class="input-group--focused"
+        class="input-group--focused pt-input"
+        style="mt-4"
         v-model="selectedServer"
+        transition="v-scale-transition" origin="center center"
+        max-height="auto"
         label="Select a server"
-        item-value="value"
+        :append-icon="'arrow_drop_up'"
       ></v-select> 
       <v-text-field
         v-if="selectedServer == 'custom'"
         name="input-2"
         label="Custom Server"
         v-model="CUSTOMSERVER"
-        class="input-group--focused"
+        class="input-group pt-input"
         light
       ></v-text-field>
       <v-layout row wrap v-if="selectedServer == 'custom'">
@@ -39,20 +42,22 @@
       <v-layout row wrap>
         <v-flex xs12>          
          <v-text-field
+            transition="v-scale-transition" origin="center center"
             name="input-2"
             label="Room name"
-            autoFocus
-            v-on:keyup.enter="joinRoom()"
+            :autofocus="true"
+            v-on:keyup.enter.native="joinRoom()"
             v-model="room"
-            class="input-group pd-0 mb-0"
+            class="input-group"
             light
           ></v-text-field>
         </v-flex>  
         <v-flex xs12>          
          <v-text-field
+            transition="v-scale-transition" origin="center center"
             name="input-2"
             label="Room password"
-            v-on:keyup.enter="joinRoom()"
+            v-on:keyup.enter.native="joinRoom()"
             v-model="password"
             class="pt-0 mt-0 input-group orange--text"
             light
diff --git a/src/components/application/plexbrowser.vue b/src/components/application/plexbrowser.vue
index e9272cd2..fbdb18f3 100644
--- a/src/components/application/plexbrowser.vue
+++ b/src/components/application/plexbrowser.vue
@@ -70,10 +70,10 @@
             <v-card v-on:click="setServer(server)" horizontal height="10em" style="cursor: pointer; z-index: 0">      
               <v-card-column >
                 <v-layout row wrap>  
-                  <v-flex xs4 lg2 style="position:relative; background: rgba(0,0,0,0.5);">
+                  <v-flex xs4 lg2 style="position:relative; background: rgba(0,0,0,0.6);">
                     <img style="position: absolute;right: 0; top: 0; left: -50%; z-index: -1" src="static/plexlogo.png"/>
                   </v-flex>
-                  <v-flex xs8 lg10 style="background: rgba(0,0,0,0.5); height:100%: z-index: 2">
+                  <v-flex xs8 lg10 style="background: rgba(0,0,0,0.6); height:100%: z-index: 2">
                     <v-card-row height="10em">
                       <v-card-text>
                         <h5 class="pa-1 mb-0 pb-0 white--text">{{server.name}}</h5>
diff --git a/src/components/application/plexbrowser/plexcontent.vue b/src/components/application/plexbrowser/plexcontent.vue
index 02719319..015e9d68 100644
--- a/src/components/application/plexbrowser/plexcontent.vue
+++ b/src/components/application/plexbrowser/plexcontent.vue
@@ -1,6 +1,6 @@
 <template>
     <span>
-        <span v-on:click="reset()" style="cursor: pointer !important">{{ title }}</span>
+        <span v-if="playable" v-on:click="reset()" style="cursor: pointer !important">{{ title }}</span>
         <v-layout v-if="!contents && !browsingContent" row>
           <v-flex xs12 style="position:relative">
               <v-progress-circular style="left: 50%; top:50%" v-bind:size="60" indeterminate class="amber--text"></v-progress-circular>
@@ -77,9 +77,10 @@
                 </v-card-text>
               </v-card-row>
               <v-card-row actions class="pa-4">    
-                <v-btn style="width:15%" v-on:click.native="playMedia(content)" raised large class="primary white--text">
+                <v-btn v-if="playable" style="width:15%" v-on:click.native="playMedia(content)" raised large class="primary white--text">
                   <v-icon light>play_arrow</v-icon> Play 
                 </v-btn>
+                <div v-if="!playable">Now playing on {{ chosenClient.name }} from {{ server.name }}</div>
               </v-card-row>
             </v-card-column>
           </v-card>
@@ -92,7 +93,7 @@
   var humanizeDuration = require('humanize-duration')
 
   export default {
-    props: ['library', 'server', 'content'],
+    props: ['library', 'server', 'content', 'nowPlaying'],
     components: {
       plexcontent
     },
@@ -141,6 +142,12 @@
       plex () {
         return this.$store.getters.getPlex
       }, 
+      playable () {
+        if (this.nowPlaying || this.nowPlaying == '') {
+          return false
+        }
+        return true
+      },
       getArtUrl () {
         var w = Math.round(Math.max(document.documentElement.clientWidth, window.innerWidth || 0));
         var h = Math.round(Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
diff --git a/src/components/application/plexclient.vue b/src/components/application/plexclient.vue
index 39d26fc0..a84a0e06 100644
--- a/src/components/application/plexclient.vue
+++ b/src/components/application/plexclient.vue
@@ -12,7 +12,7 @@
        href="#" v-bind:style="styleObj">
       {{ object.name }}   
     </span>
-    <span class="grey--text" style="opacity:.5">
+    <span class="grey--text" style="opacity:.8">
       {{ object.product }}
     </span>
   </div>
diff --git a/src/components/application/ptplayer.vue b/src/components/application/ptplayer.vue
index db3d568f..d5461e57 100644
--- a/src/components/application/ptplayer.vue
+++ b/src/components/application/ptplayer.vue
@@ -59,7 +59,7 @@
     </v-dialog>
     <div class="row" v-if="playingMetadata && chosenServer">
       <div class="col l4 offset-l4 s12 center" style="padding-top:1%">
-        <v-btn class="center" style="background-color: #E5A00D" v-on:click.native="openModal()">Playback settings
+        <v-btn class="center" style="background-color: #E5A00D" v-on:click.native="stopPlayback()">Stop playback
         </v-btn>
       </div>
     </div>
@@ -81,9 +81,6 @@
       videoplayer,
     },
     created () {
-      $(document).ready(function () {
-        $('select').material_select();
-      });
     },
     mounted: function () {
       var that = this
@@ -169,8 +166,6 @@
         console.log('Unable to process the remote control command ' + data.command)
       })
 
-    },
-    created: function () {
     },
     data () {
       return {
diff --git a/src/components/application/ptplayer/videoplayer.vue b/src/components/application/ptplayer/videoplayer.vue
index f7fed98d..d9ffedbc 100644
--- a/src/components/application/ptplayer/videoplayer.vue
+++ b/src/components/application/ptplayer/videoplayer.vue
@@ -57,7 +57,6 @@
 
       that.source = that.src
       that.initReqSent = true
-
       this.$emit('playerMounted')
 
       // Events from the parent component
diff --git a/src/components/application/walkthrough.vue b/src/components/application/walkthrough.vue
index 1df3e8dd..19440405 100644
--- a/src/components/application/walkthrough.vue
+++ b/src/components/application/walkthrough.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-layout>
-    <v-flex xs12 lg4 offset-lg4>
+  <v-layout >
+    <v-flex xs12 lg4 offset-lg4 style="background: rgba(0,0,0,0.1)" class="pa-4">
       <v-layout row wrap>
         <v-flex xs12>
           <v-flex xs12>
@@ -8,18 +8,18 @@
           </v-flex>
         </v-flex>
       </v-layout>
-      <v-stepper v-model="e1" light class="mb-4">
+      <v-stepper style="background: rgba(0,0,0,0.3)" v-model="e1" light class="mb-4">
         <v-stepper-header>
           <v-stepper-step step="1" :complete="true">Select a client</v-stepper-step>
           <v-divider></v-divider>
           <v-stepper-step step="2" :complete="false">Join a room</v-stepper-step>
           <v-divider></v-divider>
-          <v-stepper-step step="3">Relax</v-stepper-step>
+          <v-stepper-step step="3">Sync</v-stepper-step>
         </v-stepper-header>
       </v-stepper>
       
       <div v-if="!chosenClient">        
-        <v-layout class="pa-1 mt-2" row wrap>        
+        <v-layout class="mt-2" row wrap>        
           <v-flex xs12 center>
             <h3>Choose your Plex player</h3>
           </v-flex>
@@ -27,6 +27,7 @@
             Choose a client from the list below. Once you've found the client you would like to use, click the connect button. PlexTogether will test to see if it can connect with the client and will let you know if it cannot.
           </v-flex>
         </v-layout>    
+        <v-divider></v-divider>
         <v-layout row wrap>      
           <v-flex xs12 lg7>
             <v-subheader light>Plex Players {{ playercount }}</v-subheader>              
@@ -41,30 +42,32 @@
               <v-subheader light>
                 Selected Player
               </v-subheader>
-              <h6 light style="margin-top: 0; margin-bottom: 5px;opacity:1">{{ testClient.name }}</h6>
-              <div>
-                <label>Last seen</label><span>  {{ lastSeenAgo(testClient.lastSeenAt) }}</span>
-              </div>
-              <div>
-                <label>Device</label><span>  {{ testClient.device }}</span>
-              </div>
-              <div>
-                <label>Running</label><span v-tooltip="testClient.productVersion">  {{ testClient.product }} </span>
-              </div>
-              <div class="pb-2">
-                <label>Platform</label><span v-tooltip="testClient.platformVersion">  {{ testClient.platform }} </span>
-              </div>
-              <div v-if="testClientWaiting" class="center spinner-orange">
-                <v-progress-circular small active></v-progress-circular>
-              </div>
-              <div v-if="!testClientWaiting">
-                <v-btn class="pt-orange" large light style="width:100%" v-on:click.native="clientClicked()">Connect</v-btn>
-              </div>
-              <div v-if="testClient.product.indexOf('Web') > -1">
-                Note: Plex Web is currently not supported
-              </div>
-              <div v-if="testClientErrorMsg">
-                {{ testClientErrorMsg }}
+              <div class="pl-1">
+                <h6 light style="opacity:1">{{ testClient.name }}</h6>
+                <div>
+                  <label >Last seen</label><span style="opacity:0.8">  {{ lastSeenAgo(testClient.lastSeenAt) }}</span>
+                </div>
+                <div>
+                  <label>Device</label><span style="opacity:0.8">  {{ testClient.device }}</span>
+                </div>
+                <div>
+                  <label>Running</label><span style="opacity:0.8" v-tooltip="testClient.productVersion">  {{ testClient.product }} </span>
+                </div>
+                <div class="pb-2">
+                  <label>Platform</label><span style="opacity:0.8" v-tooltip="testClient.platformVersion">  {{ testClient.platform }} </span>
+                </div>
+                <div v-if="testClientWaiting" class="center spinner-orange">
+                  <v-progress-circular small active></v-progress-circular>
+                </div>
+                <div v-if="!testClientWaiting">
+                  <v-btn class="pt-orange ml-0" style="width:100%" x-large light v-on:click.native="clientClicked()">Connect</v-btn>
+                </div>
+                <div v-if="testClient.product.indexOf('Web') > -1">
+                  Note: Plex Web is currently not supported
+                </div>
+                <div v-if="testClientErrorMsg">
+                  {{ testClientErrorMsg }}
+                </div>
               </div>
             </div>
           </v-flex>
diff --git a/src/components/home.vue b/src/components/home.vue
index 3bc92aef..127a65f1 100644
--- a/src/components/home.vue
+++ b/src/components/home.vue
@@ -1,30 +1,30 @@
 <template>
   <v-app dark>
     <main>
-        <v-layout>
+        <v-layout row wrap>
           <v-flex xs12 lg6 offset-lg3>
             <img style="max-width:100%" v-bind:src="logo">
           </v-flex>
         </v-layout>
-        <v-layout>
-          <v-flex lg3 offset lg9>
-            <h1 class="right" style="color:white">G'day</h1>
+        <v-layout row wrap>
+          <v-flex xs3 offset-xs6 class="center-text">
+            <h1 style="color:white">G'day</h1>
           </v-flex>
         </v-layout>
-        <v-layout>
-          <v-flex xs12>
-            <p> Plex Together is a tool to sync Plex playback with friends and family anywhere in the world.
+        <v-layout row wrap>
+          <v-flex xs12 md6 offset-md3>
+            <p> PlexTogether is a tool to sync Plex playback with friends and family anywhere in the world.
               We started off with a Python script which we distributed amongst our friends. With a command line based UI we quickly realised this was too difficult for our friends to use reliably.
               After playing around with the concept we decided to make a version that we could release that all Plex users could enjoy.
             </p>
             <h2> How it works </h2>
             <p>
-              Plex Together aims to keep multiple viewing sessions in sync regardless of whether the clients are in the same room or across the globe. To do this Plex Together utilizes a middle-man server to communicate between each of Plex Together clients.
-              Users choose their Plex client, decide on a Plex Together Server and Room name and join up. Your friends/family can do the same. Whoever joins the room first will become the host.
+              PlexTogether aims to keep multiple viewing sessions in sync regardless of whether the clients are in the same room or across the globe. To do this PlexTogether utilizes a middle-man server to communicate between each of PlexTogether clients.
+              Users choose their Plex client, decide on a PlexTogether Server and Room name and join up. Your friends/family can do the same. Whoever joins the room first will become the host.
             </p>
             <p>
               The host has complete control over a room. Commands they send to their client will be sent through to other people in the room (Play, Pause, Seek etc). If the host starts playing something different,
-              Plex Together will search all of your available Plex Media Servers for an equiavalent copy, even if it is not from the same Plex Media Server as the Host.
+              PlexTogether will search all of your available Plex Media Servers for an equiavalent copy, even if it is not from the same Plex Media Server as the Host.
             </p>
             <h2> Get involved </h2>
             <p> If you'd like to get involved with development head over to the <a
@@ -45,9 +45,9 @@
             <p>
               Plex Together is licensed under the terms of the MIT license and is in no way affiliated with Plex Inc. </p>
 
-            <div class="center">
+            <div class="center-text">
               <p> We hope you enjoy. </p>
-              <router-link to="/sync" class="center nav-item nav-link"> Let's get started. </router-link>
+              <router-link to="/sync" class="center nav-item nav-link center-text" style="font-size:250%"> Let's get started. </router-link>
             </div>
           </v-flex>
         </v-layout>
diff --git a/src/components/signin.vue b/src/components/signin.vue
index 6dd17eb7..28c11964 100644
--- a/src/components/signin.vue
+++ b/src/components/signin.vue
@@ -1,53 +1,53 @@
 <template>
-  <div class="window">
-    <div class="window-content">
-      <div class="container">
-        <div class="row">
-          <div v-if="plex == null" class="col s12 l6 offset-l3">
-            <div>
-              <h1 class="center" style="color:white !important">Sign in to Plex.tv</h1>
-            </div>
-            <div v-if="!pin" class="center spinner-orange">
-              <v-progress-circular active large></v-progress-circular>
-            </div>
-            <div v-if="token" class="center row">
-              <div class="col s12 l4 offset-l4">
-                <i style="font-size:150px; color:green" class="material-icons">done</i>
-              </div>
-              <div class="col s12 l4 offset-l4" style="color:white !important">
-                Signed in!
-              </div>
-            </div>
-            <div v-if="pin && !token">
-              <div class="row">
-                <div class="col s12 l4 offset-l4">
-                  <h1 class="center" style="color:white !important">{{ pin }}</h1>
+    <v-layout wrap row>
+      <v-flex xs12 md8 offset-md2>
+        <v-card style="background: rgba(0,0,0,0.3)">
+          <h1 class="white--text center-text pa-1">Sign in to Plex.tv</h1>
+          <div v-if="!pin">
+            <v-layout wrap row style="position:relative">
+              <v-flex xs12 md4 offset-md4>			
+                <div style="width:100%;text-align:center">				
+                  <v-progress-circular indeterminate v-bind:size="50" class="amber--text" style="display:inline-block"></v-progress-circular>
                 </div>
-              </div>
-              <div class="row">
-                <div class="col s4 l4 offset-l4 offset-s4">
-                  <button style="width:100%;background-color: #E5A00D" class="waves-effect waves-light btn"
-                          v-clipboard="pin"><i class="material-icons left">content_paste</i>Copy
-                  </button>
-                </div>
-                <div class="col s12 l12">
-                  <p class="center">Enter the pin above at <a target="_blank" href="https://plex.tv/link">
-                    https://plex.tv/link </a></p>
-                </div>
-
-              </div>
-              <div class="row center">
-                <label class="col s12">
-                  Your Plex account is used to fetch the details of your Plex devices. None of your private details are sent to our servers. If you would like to install and run Plex Together yourself
-                  have a look <a target="_blank" href="https://github.com/samcm/plextogether"> here </a>
-                  for details. </label>
-              </div>
-            </div>
+              </v-flex>      
+            </v-layout>
           </div>
-        </div>
-      </div>
-    </div>
-  </div>
+          <div v-if="token" class="center-text" style="font-size:400%">
+              <v-icon x-large class="green--text text--darken-2">done</v-icon>
+            <h3 class="white--text">
+              Signed in!
+            </h3>
+          </div>
+          <div v-if="pin && !token">
+            <v-layout wrap row flex class="pt-4">
+              <v-flex xs12 md6 offset-md3>
+                <h1 class="center-text" style="color:white !important; background-color: rgba(128, 128, 128, 0.2); letter-spacing:1px">{{ pin }}</h1>            
+                <v-layout wrap row flex class="pt-4">
+                  <v-flex xs4 offset-xs4>
+                    <v-btn v-clipboard="pin" light class="pt-orange">
+                      <v-icon light class="mr-2">content_copy</v-icon>
+                      Copy
+                    </v-btn>
+                  </v-flex>      
+                </v-layout>
+              </v-flex>      
+            </v-layout>
+            <p class="center-text pt-4">Enter the pin above at <a target="_blank" href="https://plex.tv/link">
+              https://plex.tv/link </a></p>
+            </div>
+            <v-layout wrap row class="pt-4">
+              <v-flex xs12 md8 offset-md2 class="center-text">              
+                <p style="opacity:0.7">
+                  Your Plex account is used to fetch the details of your Plex devices. None of your private details are sent to our servers. If you would like to install and run PlexTogether yourself
+                  have a look <a target="_blank" href="https://github.com/samcm/plextogether"> here </a>
+                  for details. 
+                </p>
+              </v-flex>      
+            </v-layout>
+          </div>
+        </v-card>
+      </v-flex>      
+    </v-layout>
 </template>
 
 <script>
@@ -94,7 +94,7 @@
             'X-Plex-Device': 'Web',
             'X-Plex-Device-Name': 'PlexTogether',
             'X-Plex-Product': 'PlexTogether',
-            'X-Plex-Version': '1.0',
+            'X-Plex-Version': '1.2',
             'X-Plex-Platform': sBrowser,
             'X-Plex-Platform-Version': '',
             'X-Plex-Client-Identifier': id
@@ -113,7 +113,7 @@
                       'X-Plex-Device': 'Web',
                       'X-Plex-Device-Name': 'PlexTogether',
                       'X-Plex-Product': 'PlexTogether',
-                      'X-Plex-Version': '1.0',
+                      'X-Plex-Version': '1.2',
                       'X-Plex-Platform': sBrowser,
                       'X-Plex-Platform-Version': '',
                       'X-Plex-Client-Identifier': id
diff --git a/src/components/signout.vue b/src/components/signout.vue
index 30df8781..f6a5086a 100644
--- a/src/components/signout.vue
+++ b/src/components/signout.vue
@@ -1,11 +1,9 @@
 <template>
-  <div class="window">
-    <div class="window-content">
-      <h2 class="center">
-        Sign out successful!
-      </h2>
-    </div>
-  </div>
+  <v-layout wrap row>
+    <v-flex xs12 md8 offset-md2>
+      <h1 class="white--text center-text pa-4">Successfully signed out</h1>
+    </v-flex>      
+  </v-layout>
 </template>
 
 <script>
diff --git a/src/main.js b/src/main.js
index cf3d9cb8..d5c8bd82 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,11 +1,18 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
+
+
 import Vue from 'vue'
 
 import Vuetify from 'vuetify'
 import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility'
 import VueVideoPlayer from 'vue-video-player'
+import VueResource from 'vue-resource'
+import VueClipboards from 'vue-clipboards';
 
+Vue.use(VueClipboards);
+Vue.use(VueResource);
 Vue.directive('observe-visibility', ObserveVisibility)
 Vue.use(Vuetify)
 Vue.use(VueVideoPlayer)
@@ -21,8 +28,6 @@ Vue.config.productionTip = false
 // Our Event bus
 window.EventBus = new Vue()
 
-require('videojs-contrib-hls')
-
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
diff --git a/src/sidebar.vue b/src/sidebar.vue
index a45b84e6..9ba69c75 100644
--- a/src/sidebar.vue
+++ b/src/sidebar.vue
@@ -1,70 +1,80 @@
 <template>
     <div class="pl-1 pr-1" style="height:100%; overflow-x:hidden; position:relative">  
-        <div style="max-height:60%">
-					<v-subheader light>Users in #{{ ptRoom }} ({{ ptUsers.length }})</v-subheader>  
-					<v-divider light></v-divider>  
-					<v-list three-line dense>
-						<div v-for="user in ptUsers" v-bind:key="user.username" style="position:relative;height:7em">
-							<v-list-item style="height:4em" class="mb-0 pb-0">
-								<v-list-tile avatar class="pb-0 mb-0" tag="div" >
-									<v-list-tile-avatar>
-										<img v-bind:src="user.avatarUrl"/>
-									</v-list-tile-avatar>
-									<v-list-tile-content>
-										<v-list-tile-title>{{ user.username }}</v-list-tile-title>
-										<v-list-tile-sub-title style="opacity:0.6;color:white;font-size:70%">{{getTitle(user)}}</v-list-tile-sub-title>
-									</v-list-tile-content>   
-									<v-list-tile-action>     
-										<v-icon v-if="isHost(user)" class="pt-orange-text">star</v-icon>
-									</v-list-tile-action>		
-								</v-list-tile>
-							</v-list-item>
-							<div style="width:100%; height:100% " class="pa-2 pt-0 mt-0">
-								<span style="float: left;font-size:70%" class="ptuser-time pl-2">{{ getCurrent(user) }}</span>
-								<span style="float: right;font-size:70%" class="ptuser-maxTime pr-2">{{ getMax(user) }}</span>
-								<v-progress-linear class="pt-content-progress "  :height="2" :value="percent(user)"></v-progress-linear>
-							</div>
+			<div class="hidden-md-and-up">
+				<v-divider light></v-divider>  
+				<v-text-field
+					name="input-1"
+					prepend-icon="message"					
+					:label="'Send a message to ' + '#'+ptRoom"
+					autoGrow
+					v-on:keyup.enter.native="sendMessage()"
+					v-model="messageToBeSent"
+					light
+				></v-text-field>
+			</div>
+			<div style="height:60%">
+				<v-subheader light>Users in #{{ ptRoom }} ({{ ptUsers.length }})</v-subheader>  
+				<v-list three-line dense>
+					<div v-for="user in ptUsers" v-bind:key="user.username" style="position:relative;height:7em">
+						<v-list-item style="height:4em" class="mb-0 pb-0">
+							<v-list-tile avatar class="pb-0 mb-0" tag="div" >
+								<v-list-tile-avatar>
+									<img v-bind:src="user.avatarUrl"/>
+								</v-list-tile-avatar>
+								<v-list-tile-content>
+									<v-list-tile-title>{{ user.username }}</v-list-tile-title>
+									<v-list-tile-sub-title style="opacity:0.6;color:white;font-size:70%">{{getTitle(user)}}</v-list-tile-sub-title>
+								</v-list-tile-content>   
+								<v-list-tile-action  v-if="isHost(user)">     
+									<v-icon v-if="isHost(user)" class="pt-orange-text">star</v-icon>
+								</v-list-tile-action>		
+							</v-list-tile>
+						</v-list-item>
+						<div style="width:100%;" class="pl-2 pr-2 pt-2 mt-0 pb-0 mb-0">
+							<span style="float: left;font-size:70%" class="ptuser-time pl-2">{{ getCurrent(user) }}</span>
+							<span style="float: right;font-size:70%" class="ptuser-maxTime pr-2">{{ getMax(user) }}</span>
+							<v-progress-linear class="pt-content-progress "  :height="2" :value="percent(user)"></v-progress-linear>
 						</div>
-					</v-list>
-        </div>
-				<div v-if="messages.length > 0" style="overflow-y: auto; max-height: 35%">
-					<v-divider light></v-divider>  
-					<v-subheader light>Messages in #{{ ptRoom }}</v-subheader>  
-					<div >
-						<v-list two-line class="pb-0 pt-0 mt-0 mb-0">
-							<v-divider light></v-divider> 
-							<v-list-item v-for="msg in messages" v-bind:key="msg">
-								<v-list-tile avatar>
-									<v-list-tile-avatar>
-										<img v-bind:src="msg.user.thumb"/>
-									</v-list-tile-avatar>
-									<v-list-tile-content>
-										<v-list-tile-title  style="color:white; position:relative">
-											<span style="opacity:1;font-size:80%; float:left"> {{ msg.user.username }}</span>
-											<span style="opacity:0.6;font-size:60%; float:right"> {{ msg.time}}</span>
-										</v-list-tile-title>
-										<v-list-tile-sub-title style="opacity:0.8;color:white;font-size:70%"> {{ msg.msg }}</v-list-tile-sub-title>
-									</v-list-tile-content>
-								</v-list-tile>
-								<v-divider light></v-divider>  
-							</v-list-item>
-						</v-list>
+						<v-divider class="mt-0 pt-0" style="height:2px; color:white" light></v-divider>  
 					</div>
+				</v-list>
+			</div>
+			<div v-if="messages.length > 0" style="overflow-y: auto; height: 35%">
+				<v-divider light></v-divider>  
+				<v-subheader light>Messages</v-subheader>  
+				<div >
+					<v-list two-line class="pb-0 pt-0 mt-0 mb-0">
+						<v-list-item v-for="msg in messages" v-bind:key="msg">
+							<v-list-tile avatar tag="div">
+								<v-list-tile-avatar>
+									<img v-bind:src="msg.user.thumb || msg.user.avatarUrl"/>
+								</v-list-tile-avatar>
+								<v-list-tile-content>
+									<v-list-tile-title style="color:white; position:relative">
+										<span style="opacity:1;font-size:80%; float:left"> {{ msg.user.username }}</span>
+										<span style="opacity:0.6;font-size:60%; float:right"> {{ msg.time}}</span>
+									</v-list-tile-title>
+									<v-list-tile-sub-title style="opacity:0.8;color:white;font-size:70%"> {{ msg.msg }}</v-list-tile-sub-title>
+								</v-list-tile-content>
+							</v-list-tile>
+							<v-divider light></v-divider>  
+						</v-list-item>
+					</v-list>
 				</div>
-				<div style="overflow-y: auto;">
-					<v-divider light></v-divider>  
-					<v-text-field
-						name="input-1"
-						prepend-icon="message"					
-						:label="'Send a message to ' + '#'+ptRoom"
-						autoGrow
-						v-on:keyup.enter.native="sendMessage()"
-						v-model="messageToBeSent"
-						light
-					></v-text-field>
-				</div>
-      </div>				
-    </div>			
+			</div>
+			<v-divider light></v-divider>  
+			<v-text-field
+				class="hidden-xs-only" 
+				name="input-1"
+				prepend-icon="message"					
+				:label="'Send a message to ' + '#'+ptRoom"
+				autoGrow
+				v-on:keyup.enter.native="sendMessage()"
+				v-model="messageToBeSent"
+				light
+			></v-text-field>
+		</div>		
+			
 </template>
 
 <script>
@@ -159,9 +169,9 @@
 		methods: {
 			isHost: function (user) {
         if (user.role == 'host') {
-          return 'block'
+          return true
         }
-        return 'none'
+        return false
       },
       percent: function (user) {
         let perc = (parseInt(user.time) / parseInt(user.maxTime)) * 100
@@ -172,13 +182,13 @@
       },
       getCurrent: function (user) {
         if (isNaN(user.time)) {
-          return ''
+						return this.getTimeFromMs(0)
         }
         return this.getTimeFromMs(user.time)
       },
       getMax: function (user) {
         if (isNaN(user.maxTime)) {
-          return ''
+          return this.getTimeFromMs(0)
         }
         return this.getTimeFromMs(user.maxTime)
       },