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

Migrated slplayer overlay to new vuetify

This commit is contained in:
Travis Shivers 2020-06-19 20:46:35 -05:00
parent 445adf579c
commit 68b9e5877e
2 changed files with 113 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
src/components/application/slplayer.vue
View File

@ -1,4 +1,4 @@
f<template> <template>
<v-row <v-row
style="position: relative" style="position: relative"
class="slplayer-container" class="slplayer-container"
@ -27,49 +27,49 @@ f<template>
<div> <div>
<transition name="fade"> <transition name="fade">
<div v-show="ARE_PLAYER_CONTROLS_SHOWN"> <div v-show="ARE_PLAYER_CONTROLS_SHOWN">
<v-layout <v-row
row
wrap
style="position: absolute; top: 0; left: 0; z-index: 2" style="position: absolute; top: 0; left: 0; z-index: 2"
class="pa-3 hidden-xs-only" class="pa-3 hidden-xs-only"
> >
<img <v-col cols="auto">
:src="GET_THUMB_URL" <v-img
class="elevation-20 plex-thumb" contain
> :src="GET_THUMB_URL"
<v-flex class="pl-3"> class="plex-thumb"
/>
</v-col>
<v-col class="pl-3">
<v-container <v-container
class="pa-0" class="pa-0"
fill-height fill-height
> >
<v-layout <v-row no-gutters>
column <v-col>
wrap
justify="space-apart"
>
<v-flex>
<h1>{{ GET_TITLE }}</h1> <h1>{{ GET_TITLE }}</h1>
</v-flex> </v-col>
</v-row>
<v-flex> <v-row no-gutters>
<v-col>
<h3>{{ GET_SECONDARY_TITLE }}</h3> <h3>{{ GET_SECONDARY_TITLE }}</h3>
</v-flex> </v-col>
</v-row>
<v-flex> <v-row no-gutters>
<v-col>
<h5>Playing from {{ GET_PLEX_SERVER.name }}</h5> <h5>Playing from {{ GET_PLEX_SERVER.name }}</h5>
</v-flex> </v-col>
</v-layout> </v-row>
</v-container> </v-container>
</v-flex> </v-col>
</v-layout> </v-row>
<v-layout <v-row
row
wrap
style="position: absolute; top: 0; right: 0; z-index: 2" style="position: absolute; top: 0; right: 0; z-index: 2"
class="pa-3 hidden-xs-only" class="pa-3 hidden-xs-only"
> >
<v-flex class="text-xs-right pa-1"> <v-col class="text-xs-right pa-1">
<div class="hidden-xs-only"> <div class="hidden-xs-only">
<v-tooltip <v-tooltip
v-if="!AM_I_HOST" v-if="!AM_I_HOST"
@ -87,116 +87,106 @@ f<template>
Manual Sync Manual Sync
</v-tooltip> </v-tooltip>
<router-link <v-icon
to="/browse" color="white"
class="pl-3"
@click.native="PRESS_STOP"
> >
<v-icon close
color="white" </v-icon>
class="pl-3"
@click.native="PRESS_STOP"
>
close
</v-icon>
</router-link>
</div> </div>
</v-flex> </v-col>
</v-layout> </v-row>
<v-layout <v-row
row
wrap
class="hoverBar" class="hoverBar"
style="height: 120px; width: 100%; pointer-events: none; position: absolute; top: 0;" style="height: 120px; width: 100%; pointer-events: none; position: absolute; top: 0;"
> >
<v-flex xs12 /> <v-col xs12 />
</v-layout> </v-row>
</div> </div>
</transition> </transition>
</div> </div>
<div <div
v-if="$vuetify.breakpoint.mdAndDown" v-if="$vuetify.breakpoint.mdAndDown"
class="messages-wrapper"
> >
<messages /> <messages class="messages-wrapper" />
<MessageInput />
</div> </div>
<v-layout <div class="hidden-sm-and-up">
justify-center <v-row
row justify="center"
class="pa-3 hidden-sm-and-up" class="pa-3"
> >
<v-flex xs12> <v-col cols="auto">
<v-layout <v-img
row contain
wrap
>
<img
:src="GET_THUMB_URL" :src="GET_THUMB_URL"
class="elevation-20 plex-thumb" class="plex-thumb"
/>
</v-col>
<v-col class="pl-2">
<v-container
class="pa-0"
fill-height
> >
<v-flex class="pl-2"> <v-row no-gutters>
<v-container <v-col>
class="pa-0" <h1>{{ GET_TITLE }}</h1>
fill-height </v-col>
> </v-row>
<v-layout
column <v-row no-gutters>
wrap <v-col>
justify="space-apart" <h3>{{ GET_SECONDARY_TITLE }}</h3>
> </v-col>
<v-flex> </v-row>
<h1>{{ GET_TITLE }}</h1>
</v-flex> <v-row no-gutters>
<v-flex> <v-col>
<h3>{{ GET_SECONDARY_TITLE }}</h3> <h5>Playing from {{ GET_PLEX_SERVER.name }}</h5>
</v-flex> </v-col>
<v-flex> </v-row>
<h5>Playing from {{ GET_PLEX_SERVER.name }}</h5> </v-container>
</v-flex> </v-col>
</v-layout> </v-row>
</v-container>
</v-flex> <v-row>
<v-layout <v-col v-if="!AM_I_HOST">
row <v-btn
wrap block
class="" :disabled="manualSyncQueued"
color="blue"
@click.native="doManualSync"
> >
<v-flex xs12> Manual sync
<v-btn </v-btn>
v-if="!AM_I_HOST" </v-col>
block
:disabled="manualSyncQueued" <v-col>
color="blue" <v-btn
@click.native="doManualSync" block
> color="primary"
Manual sync @click.native="dialog = !dialog"
</v-btn> >
</v-flex> Playback Settings
<v-flex xs12> </v-btn>
<v-btn </v-col>
block
color="primary" <v-col>
@click.native="dialog = !dialog" <v-btn
> block
Playback Settings color="error"
</v-btn> @click.native="DO_COMMAND_STOP"
</v-flex> >
<v-flex xs12> Stop playback
<router-link to="/browse"> </v-btn>
<v-btn </v-col>
block </v-row>
color="error" </div>
@click.native="DO_COMMAND_STOP"
>
Stop playback
</v-btn>
</router-link>
</v-flex>
</v-layout>
</v-layout>
</v-flex>
</v-layout>
</v-col> </v-col>
</v-row> </v-row>
</template> </template>
@ -225,6 +215,7 @@ export default {
components: { components: {
messages: () => import('@/components/messages.vue'), messages: () => import('@/components/messages.vue'),
MessageInput: () => import('@/components/MessageInput.vue'),
}, },
data() { data() {
@ -528,7 +519,8 @@ export default {
<style> <style>
.messages-wrapper { .messages-wrapper {
height: calc(100vh - (0.5625 * 100vw) - 150px); max-height: calc(100vh - (0.5625 * 100vw) - 150px);
overflow: scroll;
} }
.is-fullscreen .messages-wrapper { .is-fullscreen .messages-wrapper {

2
src/store/modules/slplayer/actions.js
View File

@ -121,7 +121,7 @@ export default {
timeout: 10000, timeout: 10000,
}), }),
FETCH_TIMELINE_POLL_DATA: ({ getters }) => (getters.GET_PLAYER FETCH_TIMELINE_POLL_DATA: ({ getters }) => (getters.GET_PLAYER_MEDIA_ELEMENT
? { ? {
time: getPlayerCurrentTimeMs(getters), time: getPlayerCurrentTimeMs(getters),
duration: getPlayerDurationMs(getters), duration: getPlayerDurationMs(getters),