Fixed PTPlayer + start to 1.2 release
This commit is contained in:
samcm
parent
f2beb255f2
commit
3c567fe9eb
|
|
@ -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",
|
||||
|
|
|
|||
14
src/App.vue
14
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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -57,7 +57,6 @@
|
|||
|
||||
that.source = that.src
|
||||
that.initReqSent = true
|
||||
|
||||
this.$emit('playerMounted')
|
||||
|
||||
// Events from the parent component
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
142
src/sidebar.vue
142
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)
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue