From 3fb1d71bf333fc873e9c9fba1d97da931172e2f8 Mon Sep 17 00:00:00 2001
From: samcm <sam_cm_to@hotmail.com>
Date: Thu, 11 May 2017 01:01:59 +1000
Subject: [PATCH] Now Playing Splash updates

---
 src/App.vue                                   |  2 +-
 src/assets/css/style2.css                     |  2 -
 src/assets/js/plex/PlexServer.js              |  7 ++-
 src/components/application.vue                |  8 ++-
 src/components/application/nowplaying.vue     | 51 ++++++++++++++-----
 .../application/plexbrowser/plexseason.vue    |  1 +
 .../application/plexbrowser/plexseries.vue    |  9 ++--
 7 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 80ef7603..ed07770d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-bind:class="{ 'dark-theme': darkMode }" style="height: 100%; overflow-y: auto">
+  <div id="app" v-bind:class="{ 'dark-theme': darkMode }" style="height: 100%; overflow:hidden">
   <meta name="viewport" content="width=device-width">
     <navbar></navbar>
     <router-view></router-view>
diff --git a/src/assets/css/style2.css b/src/assets/css/style2.css
index 16c4deb4..70ef83ed 100644
--- a/src/assets/css/style2.css
+++ b/src/assets/css/style2.css
@@ -1,12 +1,10 @@
 /* Ensure layout covers the entire screen. */
 html {
-    overflow: hidden;
     height: 100%;
 }
 
 body {
     height: 100%;
-    overflow: auto;
 }
 
 a {
diff --git a/src/assets/js/plex/PlexServer.js b/src/assets/js/plex/PlexServer.js
index 1f5acbec..a17bc5a5 100644
--- a/src/assets/js/plex/PlexServer.js
+++ b/src/assets/js/plex/PlexServer.js
@@ -158,8 +158,11 @@ module.exports = function PlexServer(){
             return handleMetadata(result,that,callback)
         })
     }
-    this.getUrlForLibraryLoc = function(location,width,height){
-       return this.chosenConnection.uri + '/photo/:/transcode?url=' + this.chosenConnection.uri + location + '&X-Plex-Token=' + this.accessToken + '&height='+Math.floor(height)+'&width='+Math.floor(width)
+    this.getUrlForLibraryLoc = function(location,width,height,blur){
+        if (!(blur > 0)){
+            blur = 0
+        }
+        return this.chosenConnection.uri + '/photo/:/transcode?url=' + this.chosenConnection.uri + location + '&X-Plex-Token=' + this.accessToken + '&height='+Math.floor(height)+'&width='+Math.floor(width) + '&blur='+blur
     }
     this.getAllLibraries = function(callback){
         this.hitApi('/library/sections',{},function(result,that){
diff --git a/src/components/application.vue b/src/components/application.vue
index 25faea80..997a2130 100644
--- a/src/components/application.vue
+++ b/src/components/application.vue
@@ -17,8 +17,7 @@
               <div class="col l12 s12 no-padding" id="main-body" v-if="validDevices" style="height: 100%">               
                   <div v-if="!ptConnected || !chosenClient" style="height: 100%; overflow-y: visible">
                       <walkthrough></walkthrough>
-                  </div>
-                  
+                  </div>                  
                   <plexbrowser v-if="showBrowser"></plexbrowser>
                   <ptplayer v-if="isPTPlayer" style="height:100%;"></ptplayer>
                   <nowplaying v-if="showMetadata"></nowplaying>
@@ -60,8 +59,7 @@
                               </div>
                           </div>
                       </div>
-                  </div>             
-
+                  </div>
               </div>
           </div>
       </div>
@@ -210,7 +208,7 @@ export default {
            } return this.plex.gotDevices
        },
        showBrowser(){
-           return (this.chosenClient && !this.chosenClient.clientPlayingMetadata)
+           return (this.chosenClient && !this.chosenClient.clientPlayingMetadata && this.ptRoom)
        },
        isPTPlayer(){
            return (this.chosenClient && this.chosenClient.clientIdentifier == 'PTPLAYER9PLUS10')
diff --git a/src/components/application/nowplaying.vue b/src/components/application/nowplaying.vue
index 1f4472b7..37d3f539 100644
--- a/src/components/application/nowplaying.vue
+++ b/src/components/application/nowplaying.vue
@@ -1,15 +1,18 @@
 <template>
-    <div class="row center container" style="margin-top:20%">
-        <div class="col s12 m12 l12">
-            <div class="row">
-                <div class="col s12 l4 m4">
-                    <img :src="metadataThumb" style="width:100%;height:auto">
-                </div>
-                <div class="col s12 l8 m8" style="text-align:left">
-                    <h2> {{chosenClient.name}} </h2>
-                    <label>Playing {{ metadataTitle }} {{ metadataInfo }} from {{ metadataServer }}</label>
-                    <p> {{metadata.summary}}</p>
-
+    <div style="position:relative">
+        <img style="position:absolute;width:100%;height:auto;z-index:0;opacity:0.1" :src="metadataArt"/>
+        <div class="row center container" style="z-index:3;margin-bottom:0">
+            <div class="col s12 m12 l12" style="margin-top:20%;opacity:0.9">
+                <div class="row">
+                    <div class="col s12 l4 m4">
+                        <img :src="metadataThumb" style="width:100%;height:auto">
+                    </div>
+                    <div class="col s12 l8 m8" style="text-align:left">
+                        <h3> Now Playing </h3>
+                        <h2> {{ chosenClient.name }} </h2>
+                        <label>Playing {{ metadataTitle }} {{ metadataInfo }} from {{ metadataServer }}</label>
+                        <p> {{ metadata.summary }}</p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -42,7 +45,12 @@ export default {
        },
         context: function(){
             return this.$store
-        },      
+        },    
+        backgroundImgObj: function(){
+            return {
+                'background-image': this.metadataArt
+            }
+        },  
         metadataThumb: function(){
             if (!this.validPlex ) {                
                 return ''
@@ -64,6 +72,25 @@ export default {
                 return ''
             }
             return plexObj.getServerById(metadata.machineIdentifier).getUrlForLibraryLoc(content,700,700)
+        },        
+        metadataArt: function(){
+            if (!this.validPlex ) {                
+                return ''
+            }
+            let plexObj = this.$store.state.plex
+            if (!this.$store.getters.getChosenClient){
+                return ''
+            }
+            let metadata = this.$store.getters.getChosenClient.clientPlayingMetadata
+            if (!metadata){
+                return ''
+            }
+            let server;
+            let content = metadata.art;
+            if (!plexObj.getServerById(metadata.machineIdentifier)){
+                return ''
+            }
+            return plexObj.getServerById(metadata.machineIdentifier).getUrlForLibraryLoc(content,700,700,1)
         },
         metadataServer: function(){
             if (!this.validPlex){
diff --git a/src/components/application/plexbrowser/plexseason.vue b/src/components/application/plexbrowser/plexseason.vue
index 4f66410d..8a1888e8 100644
--- a/src/components/application/plexbrowser/plexseason.vue
+++ b/src/components/application/plexbrowser/plexseason.vue
@@ -12,6 +12,7 @@
                     </div>
                 </div>
             </v-card>
+            <div class="divider"></div>
             <h2> Episodes </h2>
             <div v-for="content in contents.MediaContainer.Metadata">
                 <v-card v-on:click.native="setContent(content)" class="blue-grey darken-1 col l2 s6 hoverable" style="box-shadow:none">
diff --git a/src/components/application/plexbrowser/plexseries.vue b/src/components/application/plexbrowser/plexseries.vue
index 07131d05..0ca1333a 100644
--- a/src/components/application/plexbrowser/plexseries.vue
+++ b/src/components/application/plexbrowser/plexseries.vue
@@ -4,21 +4,22 @@
             <v-card class="blue-grey darken-1 col l12 s12" style="height:100%;box-shadow:none">
                 <div class="white-text row">
                     <img :src="getThumb(content)" style="height:100%" class="col s6 l2"/>
-                    <div class="col l10 s6">
+                    <div class="col l9 s6">
                         <h2 class="card-title truncate">{{ content.title }}</h2>
                         <label> {{ content.leafCount }} episodes since {{ content.year }} </label>
                         <p> {{ content.summary }} </p>
                     </div>
                 </div>
-            </v-card>
+            </v-card>            
+            <div class="divider"></div>
             <h2> Seasons </h2>
             <div v-for="content in contents.MediaContainer.Metadata">
                 <v-card v-on:click.native="setContent(content)" class="blue-grey darken-1 col l1 s12 hoverable" style="box-shadow:none">
                     <div class="white-text">
                         <img :src="getThumb(content)" style="width:100%"/>
-                        <span style="font-size: .5vw;" class="card-title truncate">{{ content.title }}</span>
+                        <span style="font-size: .7vw;" class="card-title truncate">{{ content.title }}</span>
                         <div> 
-                            <label> {{ content.leafCount }} episodes </label> 
+                            <label style="font-size: .7vw;"> {{ content.leafCount }} episodes </label> 
                         </div>
                     </div>
                 </v-card>