Fixes
This commit is contained in:
samcm
parent
0ab3424e3e
commit
9878ee7846
25
src/App.vue
25
src/App.vue
|
|
@ -3,31 +3,34 @@
|
|||
<v-navigation-drawer app temporary v-model="drawer" disable-route-watcher>
|
||||
<leftsidebar></leftsidebar>
|
||||
</v-navigation-drawer>
|
||||
<v-navigation-drawer app
|
||||
permanent
|
||||
clipped v-model="drawerRight" clipped right disable-route-watcher enable-resize-watcher>
|
||||
<v-navigation-drawer
|
||||
v-if="showRightDrawerButton"
|
||||
style="padding: 0"
|
||||
app
|
||||
persistent
|
||||
v-model="drawerRight" right enable-resize-watcher>
|
||||
<drawerright></drawerright>
|
||||
</v-navigation-drawer>
|
||||
<v-toolbar app fixed>
|
||||
<v-toolbar-side-icon @click.native.stop="drawer = !drawer"></v-toolbar-side-icon>
|
||||
<v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
|
||||
<v-toolbar-title class="white--text">PlexTogether</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-toolbar-items>
|
||||
<img class="ma-2 mr-3" style="height:70%;width:auto" v-bind:src="logo"/>
|
||||
<img class="ma-2 mr-3" style="height:48px; width: 52px" v-bind:src="logo"/>
|
||||
<v-btn primary dark raised v-if="shortUrl != null" v-clipboard="shortUrl" @success="sendNotification()">Invite</v-btn>
|
||||
<v-btn small tag="a" class="hidden-sm-and-down" flat v-for="item in links" :key="item.title" :href="item.href" :target="item.target">{{ item.title }}</v-btn>
|
||||
<v-toolbar-side-icon v-if="showRightDrawerButton" @click="drawerRight = !drawerRight"></v-toolbar-side-icon>
|
||||
<v-toolbar-side-icon v-if="showRightDrawerButton" @click="toggleDrawerRight"></v-toolbar-side-icon>
|
||||
</v-toolbar-items>
|
||||
</v-toolbar>
|
||||
<main v-bind:style="mainStyle">
|
||||
<v-content style="padding:0; max-width:100%; margin: 0; margin-top: 64px" v-bind:style="containerStyle">
|
||||
<v-container fluid class="ma-0 pa-0">
|
||||
<v-content v-bind:style="containerStyle">
|
||||
<v-container class="ma-0 pa-0" fluid>
|
||||
<router-view></router-view>
|
||||
<v-snackbar
|
||||
bottom
|
||||
:timeout="4000"
|
||||
v-model="snackbar"
|
||||
> <div style="text-align:center;width:100%">{{snackbarMsg}}</div>
|
||||
> <div style="text-align:center;width:100%">{{ snackbarMsg }}</div>
|
||||
</v-snackbar>
|
||||
</v-container>
|
||||
</v-content>
|
||||
|
|
@ -90,6 +93,10 @@
|
|||
methods: {
|
||||
sendNotification() {
|
||||
window.EventBus.$emit('notification', 'Copied to clipboard')
|
||||
},
|
||||
toggleDrawerRight() {
|
||||
console.log('Opening right drawer', !this.drawerRight)
|
||||
this.drawerRight = !this.drawerRight
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,9 @@
|
|||
.label {
|
||||
color: rgba(240, 245, 255, 0.55);
|
||||
}
|
||||
|
||||
.application--dark .a {
|
||||
color: white !important;
|
||||
}
|
||||
.select {
|
||||
color: rgba(240, 245, 255, 0.55)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,10 +81,15 @@ main {
|
|||
.application--dark {
|
||||
background: #151924;
|
||||
}
|
||||
|
||||
.application--dark .navigation-drawer .list {
|
||||
background: #151924;
|
||||
}
|
||||
|
||||
.application--dark .a {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.menu__content {
|
||||
background: #272c38;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
</span>
|
||||
</h4>
|
||||
<v-layout v-if="recentlyAdded" class="row" row wrap justify-space-between>
|
||||
<v-flex xs4 md3 xl1 lg1 class="pb-3" v-for="content in subsetRecentlyAdded(10)" :key="content.key">
|
||||
<v-flex xs4 md3 xl1 lg1 class="pb-3 pa-1" v-for="content in subsetRecentlyAdded(10)" :key="content.key">
|
||||
<plexthumb :content="content" :server="server" type="thumb" fullTitle locked @contentSet="setContent(content)"></plexthumb>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
|
|
|||
|
|
@ -16,56 +16,52 @@
|
|||
></videoplayer>
|
||||
<v-dialog v-model="dialog">
|
||||
<v-card>
|
||||
<v-card-row>
|
||||
<v-card-title>Playback Settings </v-card-title>
|
||||
</v-card-row>
|
||||
<v-card-row>
|
||||
<v-card-text>
|
||||
|
||||
<v-select
|
||||
v-model="chosenQuality"
|
||||
:items="qualitiesSelect"
|
||||
item-text="text"
|
||||
item-value="id"
|
||||
persistent-hint
|
||||
label="Quality"
|
||||
hint="Select a different quality"
|
||||
></v-select>
|
||||
<v-select
|
||||
v-model="chosenAudioTrackIndex"
|
||||
:select-text="'Default'"
|
||||
label="Audio track"
|
||||
item-text="text"
|
||||
item-value="id"
|
||||
persistent-hint
|
||||
hint="Select a different audio track"
|
||||
:items="audioTrackSelect"
|
||||
></v-select>
|
||||
<v-select
|
||||
persistent-hint
|
||||
label="Subtitles"
|
||||
item-text="text"
|
||||
item-value="id"
|
||||
hint="Select a different subtitle track"
|
||||
v-model="chosenSubtitleIndex"
|
||||
:select-text="'Default'"
|
||||
:items="subtitleTrackSelect"
|
||||
></v-select>
|
||||
<v-select
|
||||
v-if="mediaIndexSelect.length > 1"
|
||||
persistent-hint
|
||||
item-text="text"
|
||||
item-value="id"
|
||||
hint="Select a different version of the content you're playing"
|
||||
v-model="chosenMediaIndex"
|
||||
label="Version"
|
||||
:items="mediaIndexSelect"
|
||||
></v-select>
|
||||
</v-card-text>
|
||||
</v-card-row>
|
||||
<v-card-row actions>
|
||||
<v-card-title>Playback Settings </v-card-title>
|
||||
<v-card-text>
|
||||
|
||||
<v-select
|
||||
v-model="chosenQuality"
|
||||
:items="qualitiesSelect"
|
||||
item-text="text"
|
||||
item-value="id"
|
||||
persistent-hint
|
||||
label="Quality"
|
||||
hint="Select a different quality"
|
||||
></v-select>
|
||||
<v-select
|
||||
v-model="chosenAudioTrackIndex"
|
||||
:select-text="'Default'"
|
||||
label="Audio track"
|
||||
item-text="text"
|
||||
item-value="id"
|
||||
persistent-hint
|
||||
hint="Select a different audio track"
|
||||
:items="audioTrackSelect"
|
||||
></v-select>
|
||||
<v-select
|
||||
persistent-hint
|
||||
label="Subtitles"
|
||||
item-text="text"
|
||||
item-value="id"
|
||||
hint="Select a different subtitle track"
|
||||
v-model="chosenSubtitleIndex"
|
||||
:select-text="'Default'"
|
||||
:items="subtitleTrackSelect"
|
||||
></v-select>
|
||||
<v-select
|
||||
v-if="mediaIndexSelect.length > 1"
|
||||
persistent-hint
|
||||
item-text="text"
|
||||
item-value="id"
|
||||
hint="Select a different version of the content you're playing"
|
||||
v-model="chosenMediaIndex"
|
||||
label="Version"
|
||||
:items="mediaIndexSelect"
|
||||
></v-select>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn class="blue--text darken-1" flat @click.native="dialog = false">Close</v-btn>
|
||||
</v-card-row>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-layout v-if="playingMetadata && chosenServer" row justify-center>
|
||||
|
|
|
|||
|
|
@ -19,11 +19,13 @@
|
|||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div style="text-align:center" class="pt-4">
|
||||
<h6 style="text-align:initial">Syncing Method</h6>
|
||||
<v-radio label="Clean Seek" class="pa-0 ma-0" v-model="syncmode" value="cleanseek"></v-radio>
|
||||
<v-radio label="Skip Ahead" class="pa-0 ma-0" v-model="syncmode" value="skipahead"
|
||||
persistent-hint
|
||||
hint="Sets the syncing method used when we need to get back in line with the host."></v-radio>
|
||||
<h6 style="text-align:initial">Syncing Method</h6>
|
||||
<v-radio-group v-model="syncmode">
|
||||
<v-radio label="Clean Seek" class="pa-0 ma-0" value="cleanseek"></v-radio>
|
||||
<v-radio label="Skip Ahead" class="pa-0 ma-0" value="skipahead"
|
||||
persistent-hint
|
||||
hint="Sets the syncing method used when we need to get back in line with the host."></v-radio>
|
||||
</v-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -49,10 +49,10 @@
|
|||
<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>
|
||||
<label>Running</label><span style="opacity:0.8"> {{ testClient.product }} </span>
|
||||
</div>
|
||||
<div class="pb-2">
|
||||
<label>Platform</label><span style="opacity:0.8" v-tooltip="testClient.platformVersion"> {{ testClient.platform }} </span>
|
||||
<label>Platform</label><span style="opacity:0.8"> {{ testClient.platform }} </span>
|
||||
</div>
|
||||
<div v-if="testClientWaiting" class="center spinner-orange">
|
||||
<div style="width:100%;text-align:center">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<v-layout wrap row ckass="pt-4">
|
||||
<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>
|
||||
<h1 class="white--text center-text pa-4">Sign in to Plex.tv</h1>
|
||||
<div v-if="!pin">
|
||||
<v-layout wrap row style="position:relative">
|
||||
<v-flex xs12 md4 offset-md4>
|
||||
|
|
|
|||
|
|
@ -1,100 +1,69 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-list class="pa-0">
|
||||
<v-list-item>
|
||||
<v-list-tile avatar tag="div" v-if="validDevices">
|
||||
<v-list-tile-avatar>
|
||||
<img :src="plex.user.thumb" />
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>{{ plex.user.username }}</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
<v-list-tile-action>
|
||||
<v-btn icon dark>
|
||||
<v-icon>chevron_left</v-icon>
|
||||
</v-btn>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list class="pt-0" dense>
|
||||
<v-divider></v-divider>
|
||||
<v-subheader >Preferences</v-subheader>
|
||||
<v-list-item @click.stop="ptsettingstoggle = !ptsettingstoggle">
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon >settings</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>PlexTogether Settings</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="plex && plex.gotDevices" @click.stop="plexsettingstoggle = !plexsettingstoggle">
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon >settings</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Plex Settings</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list-item>
|
||||
<v-subheader v-if="plex && plex.gotDevices" >Account</v-subheader>
|
||||
<v-list-item v-if="plex && plex.gotDevices">
|
||||
<v-list-tile :router="true" to="/signout">
|
||||
<v-list-tile-action>
|
||||
<v-icon >cancel</v-icon>
|
||||
</v-list-tile-action>
|
||||
<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>
|
||||
<v-subheader >About</v-subheader>
|
||||
<v-list-item>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon >info</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>PlexTogether v{{appVersion}}</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list class="pa-1" dense>
|
||||
<template>
|
||||
<v-list-tile v-if="plex && plex.user">
|
||||
<v-list-tile-avatar>
|
||||
<img class="pa-1" :src="plex.user.thumb" />
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title style="font-weight: bold">{{ plex.user.username }}</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-divider></v-divider>
|
||||
<v-subheader>Preferences</v-subheader>
|
||||
<v-list-tile @click.stop="ptsettingstoggle = !ptsettingstoggle">
|
||||
<v-list-tile-action>
|
||||
<v-icon color="white">settings</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>PlexTogether Settings</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile v-if="plex && plex.gotDevices" @click.stop="plexsettingstoggle = !plexsettingstoggle">
|
||||
<v-list-tile-action>
|
||||
<v-icon color="white">settings</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Plex Settings</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-subheader v-if="plex && plex.gotDevices" >Account</v-subheader>
|
||||
<v-list-tile :router="true" to="/signout">
|
||||
<v-list-tile-action>
|
||||
<v-icon color="white">cancel</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Sign out</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-subheader >About</v-subheader>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="white">info</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>PlexTogether v{{appVersion}}</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
</v-list>
|
||||
|
||||
<v-dialog v-model="ptsettingstoggle">
|
||||
<v-card class="grey darken-4">
|
||||
<v-card-row>
|
||||
<v-card-title>PlexTogether Settings</v-card-title>
|
||||
</v-card-row>
|
||||
<v-card class="grey darken-4 pa-3">
|
||||
<h6 class="soft-text">PlexTogether Settings</h6>
|
||||
<v-divider></v-divider>
|
||||
<v-card-row>
|
||||
<v-card-text>
|
||||
<ptsettings></ptsettings>
|
||||
</v-card-text>
|
||||
</v-card-row>
|
||||
<ptsettings></ptsettings>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-dialog v-model="plexsettingstoggle">
|
||||
<v-card class="grey darken-4">
|
||||
<v-card-row>
|
||||
<v-card-title>Plex Settings</v-card-title>
|
||||
</v-card-row>
|
||||
<v-card class="grey darken-4 pa-3">
|
||||
<h6 class="soft-text">Plex Settings</h6>
|
||||
<v-divider></v-divider>
|
||||
<v-card-row>
|
||||
<v-card-text>
|
||||
<plexsettings v-if="validPlex && plex.gotDevices"></plexsettings>
|
||||
</v-card-text>
|
||||
</v-card-row>
|
||||
<plexsettings v-if="validPlex && plex.gotDevices"></plexsettings>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
135
src/sidebar.vue
135
src/sidebar.vue
|
|
@ -1,74 +1,79 @@
|
|||
<template>
|
||||
<v-container class="pa-0" fill-height>
|
||||
<v-layout column v-if="ptRoom" class="pl-2 pr-2" style="">
|
||||
<v-flex xs12 style="height: 50vh">
|
||||
<h6 style="text-align:center" class="mb-0 pb-0 pt-3"> Room {{ ptRoom }}</h6>
|
||||
<v-subheader>Users ({{ ptUsers.length }})</v-subheader>
|
||||
<v-list dense style="overflow-y:scroll">
|
||||
<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%"><v-icon style="font-size:90%">{{playerState(user)}}</v-icon> - {{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)" style="color: #E5A00D">star</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
</v-list-item>
|
||||
<div 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-divider class="mt-0 pt-0" style="height:2px; color:white"></v-divider>
|
||||
</div>
|
||||
</v-list>
|
||||
</v-flex>
|
||||
<v-flex xs12 style="overflow-y: auto; max-height: 50vh">
|
||||
<v-container class="ma-0 pa-0" fill-height>
|
||||
<v-layout column>
|
||||
<v-flex xs12>
|
||||
<v-divider></v-divider>
|
||||
<v-subheader>Messages</v-subheader>
|
||||
<v-list id="chatbox" :style="chatboxStyle" style="overflow-y:scroll; max-height: 34vh">
|
||||
<v-list-item style="min-height:50px" v-bind:id="getMsgId(msg)" v-for="msg in messages" v-bind:key="msg.msg + msg.time">
|
||||
<v-list-tile style="height:initial; position:relative" tag="div">
|
||||
<v-container class="pa-1 pb-0" fill-height>
|
||||
<v-layout>
|
||||
<v-flex xs12>
|
||||
<v-layout v-if="ptRoom" column>
|
||||
<v-flex xs12 style="height: 50vh">
|
||||
<h6 style="text-align:center" class="mb-0 pb-0 pt-3"> Room {{ ptRoom }}</h6>
|
||||
<v-subheader>Users ({{ ptUsers.length }})</v-subheader>
|
||||
<v-list dense style="overflow-y:scroll">
|
||||
<div v-for="user in ptUsers" v-bind:key="user.username" style="position:relative;height:7em">
|
||||
<v-list-tile avatar style="height:4em" class="pb-0 mb-0" tag="div" >
|
||||
<v-list-tile-avatar>
|
||||
<img v-bind:src="msg.user.thumb || msg.user.avatarUrl" style="position:absolute;top:0; width: 36px; height: 36px"/>
|
||||
<img v-bind:src="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-title> {{ user.username }}</v-list-tile-title>
|
||||
<v-list-tile-sub-title style="opacity:0.6;color:white;font-size:70%"><v-icon style="font-size:90%">{{playerState(user)}}</v-icon> - {{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)" style="color: #E5A00D">star</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-flex>
|
||||
<v-flex xs12 style="position:relative" class="pt-2">
|
||||
<div style="position:absolute; bottom:0; width: 100%" class="ma-0 pa-0">
|
||||
<v-text-field
|
||||
prepend-icon="message"
|
||||
:label="'Send a message to ' + '#'+ptRoom"
|
||||
autoGrow
|
||||
v-on:keyup.enter.native="sendMessage()"
|
||||
v-model="messageToBeSent"
|
||||
|
||||
></v-text-field>
|
||||
<v-btn block v-on:click.native="handleDisconnect()" class="ma-0 mt-1" primary>Leave room </v-btn>
|
||||
<div 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-divider class="mt-0 pt-0" style="height:2px; color:white"></v-divider>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-list>
|
||||
</v-flex>
|
||||
<v-flex xs12 style="height: 50vh max-height: 50vh; position: relative">
|
||||
<v-container class="ma-0 pa-0">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<v-divider></v-divider>
|
||||
<v-subheader>Messages</v-subheader>
|
||||
<v-list id="chatbox" :style="chatboxStyle" style="overflow-y:scroll; max-height: 35vh; height: 35vh">
|
||||
<v-list-tile style="min-height:50px; height:initial; position:relative" v-bind:id="getMsgId(msg)" v-for="msg in messages" v-bind:key="msg.msg + msg.time" tag="div">
|
||||
<v-list-tile-avatar>
|
||||
<img v-bind:src="msg.user.thumb || msg.user.avatarUrl" style="position:absolute;top:0; width: 36px; height: 36px"/>
|
||||
</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-list>
|
||||
</v-flex>
|
||||
<v-flex xs12 style="position:relative" class="pt-2">
|
||||
<div style="bottom:0; width: 100%" class="ma-0 pa-0">
|
||||
<v-text-field
|
||||
prepend-icon="message"
|
||||
:label="'Send a message to ' + '#'+ptRoom"
|
||||
autoGrow
|
||||
v-on:keyup.enter.native="sendMessage()"
|
||||
v-model="messageToBeSent"
|
||||
|
||||
></v-text-field>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 class="pt-2">
|
||||
<div style="position: absolute; bottom:0; width: 100%" class="ma-0 pa-0">
|
||||
<v-btn block v-on:click.native="handleDisconnect()" class="ma-0 mt-1" primary>Leave room </v-btn>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue