Now Playing chip
This commit is contained in:
Sam
parent
0747dd398c
commit
dd1b860952
13
src/App.vue
13
src/App.vue
|
|
@ -18,6 +18,7 @@
|
|||
<img class="ma-1 hidden-xs-only" style="height: 42px; width: auto; vertical-align: middle" v-bind:src="logos.light.long"/>
|
||||
<img class="ma-1 hidden-sm-and-up" style="height: 42px; width: auto; vertical-align: middle" v-bind:src="logo"/>
|
||||
</a>
|
||||
<nowplayingchip class="pl-4" v-if="showNowPlaying"></nowplayingchip>
|
||||
<v-spacer></v-spacer>
|
||||
<v-toolbar-items>
|
||||
<v-btn color="primary" dark raised v-if="shortUrl != null" v-clipboard="shortUrl" @success="sendNotification()">Invite</v-btn>
|
||||
|
|
@ -70,6 +71,7 @@ import './assets/css/style.css'
|
|||
import drawerright from './sidebar'
|
||||
import leftsidebar from './leftsidebar'
|
||||
import upnext from './upnext'
|
||||
import nowplayingchip from './nowplayingchip'
|
||||
import donate from './donate'
|
||||
|
||||
let SettingsHelper = require('../SettingsHelper')
|
||||
|
|
@ -79,6 +81,7 @@ export default {
|
|||
components: {
|
||||
drawerright,
|
||||
upnext,
|
||||
nowplayingchip,
|
||||
leftsidebar,
|
||||
donate
|
||||
},
|
||||
|
|
@ -231,7 +234,7 @@ export default {
|
|||
return this.$store.getters.getExtAvailable
|
||||
},
|
||||
crumbs: function () {
|
||||
if (this.$route.path.indexOf('browse') === -1) {
|
||||
if (this.$route.path.indexOf('browse') === -1 && this.$route.path.indexOf('nowplaying') === -1) {
|
||||
return []
|
||||
}
|
||||
const getTitle = id => {
|
||||
|
|
@ -330,13 +333,11 @@ export default {
|
|||
data.push(link)
|
||||
}
|
||||
}
|
||||
// this.$route.params.forEach((route) => {
|
||||
// console.log(route)
|
||||
// if (!route || route.path === '') return
|
||||
|
||||
// })
|
||||
return data
|
||||
},
|
||||
showNowPlaying: function () {
|
||||
return this.chosenClient && this.chosenClient.clientPlayingMetadata && this.$route.name !== 'nowplaying'
|
||||
},
|
||||
showRightDrawerButton: function () {
|
||||
return this.ptConnected && this.chosenClient && this.ptRoom
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<router-link :to="href">
|
||||
<v-card color="blue darken-4" hover style="height: 100%; width: 230px">
|
||||
<v-layout row wrap justify-center align-center>
|
||||
<v-flex md2 class="hidden-xs-only text-xs-center">
|
||||
<img :src="thumb" style="height: 52px; vertical-align: middle"/>
|
||||
</v-flex>
|
||||
<v-flex md10 xs12 class="pl-3 pa-1 text-xs-left" style="overflow: hidden; white-space: nowrap; line-height: 24px">
|
||||
<div style="font-size: 18px">Now Playing</div>
|
||||
<div><small><b>{{ getTitle }}</b> - {{ getUnder }}</small></div>
|
||||
<!-- <div class="hidden-xs-only soft-text" style="font-size: 12px">Click for more info</div> -->
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted: async function () {
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
item: function () {
|
||||
return this.chosenClient.clientPlayingMetadata
|
||||
},
|
||||
href: function () {
|
||||
return '/nowplaying/' + this.item.machineIdentifier + '/' + this.item.ratingKey
|
||||
},
|
||||
chosenClient: function () {
|
||||
return this.$store.getters.getChosenClient
|
||||
},
|
||||
plexserver: function () {
|
||||
if (!this.item) {
|
||||
return
|
||||
}
|
||||
return this.plex.servers[this.item.machineIdentifier]
|
||||
},
|
||||
thumb: function () {
|
||||
return this.plexserver.getUrlForLibraryLoc(this.item[this.imageType], 100, 300)
|
||||
},
|
||||
imageType: function () {
|
||||
switch (this.item.type) {
|
||||
case 'movie':
|
||||
return 'thumb'
|
||||
case 'show':
|
||||
return 'parentThumb'
|
||||
case 'episode':
|
||||
return 'grandparentThumb'
|
||||
default:
|
||||
return 'thumb'
|
||||
}
|
||||
},
|
||||
getTitle () {
|
||||
switch (this.item.type) {
|
||||
case 'movie':
|
||||
if (this.fullTitle !== undefined) {
|
||||
if (this.item.year) {
|
||||
return this.item.title + ' (' + this.item.year + ')'
|
||||
}
|
||||
}
|
||||
return this.item.title
|
||||
case 'show':
|
||||
return this.item.title
|
||||
case 'season':
|
||||
return this.item.title
|
||||
case 'episode':
|
||||
return this.item.grandparentTitle
|
||||
default:
|
||||
return this.item.title
|
||||
}
|
||||
},
|
||||
getUnder () {
|
||||
switch (this.item.type) {
|
||||
case 'movie':
|
||||
if (this.item.year) {
|
||||
return this.item.year
|
||||
}
|
||||
return ' '
|
||||
case 'show':
|
||||
if (this.item.childCount === 1) {
|
||||
return this.item.childCount + ' season'
|
||||
}
|
||||
return this.item.childCount + ' seasons'
|
||||
case 'season':
|
||||
return this.item.leafCount + ' episodes'
|
||||
case 'album':
|
||||
return this.item.year
|
||||
case 'artist':
|
||||
return ''
|
||||
case 'episode':
|
||||
return (
|
||||
' S' +
|
||||
this.item.parentIndex +
|
||||
'E' +
|
||||
this.item.index +
|
||||
' - ' +
|
||||
this.item.title
|
||||
)
|
||||
default:
|
||||
return this.item.title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -375,53 +375,42 @@ module.exports = function PlexClient () {
|
|||
}
|
||||
this.subscribe = function (connection, commit) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const doRequest = () => {
|
||||
// Already have a valid http server running, lets send the request
|
||||
if (!connection) {
|
||||
// It is possible to try to subscribe before we've found a working connection
|
||||
connection = this.chosenConnection
|
||||
}
|
||||
var command = '/player/timeline/subscribe'
|
||||
|
||||
// Now that we've built our params, it's time to hit the client api
|
||||
if (connection.uri.charAt(connection.uri.length - 1) === '/') {
|
||||
// Remove a trailing / that some clients broadcast
|
||||
connection.uri = connection.uri.slice(0, connection.uri.length - 1)
|
||||
}
|
||||
|
||||
var _url = connection.uri + command
|
||||
// console.log('subscription url: ' + _url)
|
||||
this.commandId = this.commandId + 1
|
||||
var params = {
|
||||
'port': '8555',
|
||||
'protocol': 'http',
|
||||
'X-Plex-Device-Name': 'SyncLounge',
|
||||
commandID: this.commandId
|
||||
}
|
||||
this.setValue('commandId', this.commandId + 1)
|
||||
var options = PlexAuth.getClientApiOptions(_url, this.clientIdentifier, this.uuid, 5000, this.accessToken)
|
||||
axios.get(connection.uri + command, {
|
||||
params,
|
||||
headers: options.headers
|
||||
}).then((res) => {
|
||||
console.log('Subscription result', res)
|
||||
this.setValue('lastSubscribe', new Date().getTime())
|
||||
resolve()
|
||||
}).catch((e) => {
|
||||
console.log('Error sending subscribe', e)
|
||||
reject(e)
|
||||
})
|
||||
// axios(options, (error, response, body) => {
|
||||
// // console.log('subscription result', response)
|
||||
// this.setValue('lastSubscribe', new Date().getTime())
|
||||
// if (error) {
|
||||
// return reject(error)
|
||||
// } else {
|
||||
// return resolve(true)
|
||||
// }
|
||||
// })
|
||||
// Already have a valid http server running, lets send the request
|
||||
if (!connection) {
|
||||
// It is possible to try to subscribe before we've found a working connection
|
||||
connection = this.chosenConnection
|
||||
}
|
||||
doRequest()
|
||||
let command = '/player/timeline/subscribe'
|
||||
let params = {
|
||||
'port': '8555',
|
||||
'protocol': 'http',
|
||||
'X-Plex-Device-Name': 'SyncLounge',
|
||||
commandID: this.commandId
|
||||
}
|
||||
let query = ''
|
||||
Object.assign(params, {
|
||||
type: 'video',
|
||||
commandID: this.commandId
|
||||
})
|
||||
for (let key in params) {
|
||||
query += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
|
||||
}
|
||||
query = query.substring(0, query.length - 1)
|
||||
if (connection.uri.charAt(connection.uri.length - 1) === '/') {
|
||||
// Remove a trailing / that some clients broadcast
|
||||
connection.uri = connection.uri.slice(0, connection.uri.length - 1)
|
||||
}
|
||||
var _url = connection.uri + command + '?' + query
|
||||
this.setValue('commandId', this.commandId + 1)
|
||||
var options = PlexAuth.getClientApiOptions(_url, this.clientIdentifier, null, 5000, this.accessToken)
|
||||
request(options, (error, response, body) => {
|
||||
if (!error) {
|
||||
this.lastSubscribe = new Date().getTime()
|
||||
return resolve(true)
|
||||
} else {
|
||||
return reject(error)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
this.playContentAutomatically = function (client, hostData, servers, offset) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue