Rooba
/
synclounge
mirror of https://github.com/synclounge/synclounge.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Now Playing Splash updates

This commit is contained in:
samcm 2017-05-11 01:01:59 +10:00
parent 93eb186b57
commit 3fb1d71bf3
7 changed files with 54 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -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>

2
src/assets/css/style2.css
View File

@ -1,12 +1,10 @@
/* Ensure layout covers the entire screen. */
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
a {

7
src/assets/js/plex/PlexServer.js
View File

@ -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){

8
src/components/application.vue
View File

@ -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')

51
src/components/application/nowplaying.vue
View File

@ -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){

1
src/components/application/plexbrowser/plexseason.vue
View File

@ -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">

9
src/components/application/plexbrowser/plexseries.vue
View File

@ -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>