From 4dd5bb890c435fffab74929e591fce74749ede34 Mon Sep 17 00:00:00 2001
From: samcm <sam_cm_to@hotmail.com>
Date: Thu, 22 Jun 2017 16:01:37 +1000
Subject: [PATCH] Auto chat scroll

---
 package.json    |  1 +
 src/main.js     |  4 +++-
 src/sidebar.vue | 38 ++++++++++++++++++++++++++------------
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index e642bfcf..8d1181ab 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "vue-loader": "^11.3.4",
     "vue-observe-visibility": "^0.1.3",
     "vue-resource": "^1.3.4",
+    "vue-scrollto": "^2.6.10",
     "vue-style-loader": "^2.0.5",
     "vue-template-compiler": "^2.2.6",
     "vue-video-player": "^3.1.1",
diff --git a/src/main.js b/src/main.js
index 8f2169b3..30aab9e5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,7 @@ require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
 require('vanilla-tilt');
 
 import Vue from 'vue'
-
+import VueScrollTo from 'vue-scrollto'
 import Vuetify from 'vuetify'
 import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility'
 import VueVideoPlayer from 'vue-video-player'
@@ -12,6 +12,8 @@ import VueResource from 'vue-resource'
 import VueClipboards from 'vue-clipboards'
 
 
+
+Vue.use(VueScrollTo)
 Vue.use(VueClipboards);
 Vue.use(VueResource);
 Vue.directive('observe-visibility', ObserveVisibility)
diff --git a/src/sidebar.vue b/src/sidebar.vue
index 4a36d0ac..002571cc 100644
--- a/src/sidebar.vue
+++ b/src/sidebar.vue
@@ -28,11 +28,11 @@
 					</div>
 				</v-list>
 			</div>
-			<div style="overflow-y: auto; height: 30%">
+			<div id="chatbox" style="overflow-y: auto; height: 30%">
 				<v-divider light></v-divider>  
 				<v-subheader light>Messages</v-subheader>  
-				<v-list ref="chatbox" :style="chatboxStyle" two-line class="pb-2 pt-0 mt-0 mb-2">
-					<v-list-item v-for="msg in messages" v-bind:key="msg">
+				<v-list  :style="chatboxStyle" two-line class="pb-2 pt-0 mt-0 mb-2">
+					<v-list-item v-bind:id="getMsgId(msg)" 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"/>
@@ -77,6 +77,23 @@
 				messageToBeSent: ''
       }
     },
+		watch: {
+			messages: function () {	
+				this.$nextTick(() => {
+					var options = {
+						container: '#chatbox',
+						easing: 'ease-in',
+						cancelable: true,
+						onDone: function() {
+							// scrolling is done
+							console.log('done')
+						},
+				}
+				console.log(document.getElementById('lastMessage'))
+					this.$scrollTo('#lastMessage', 700, options)
+				})
+			}
+		},
     computed: {
       plex: function () {
 				return this.$store.getters.getPlex
@@ -151,15 +168,7 @@
 			}
 			return 'none'
 			},
-			messages: function () {
-				if (this.$store.getters.getMessages && this.$refs.chatbox){
-					var container = this.$refs.chatbox.$el
-					console.log(container.scrollHeight)
-					console.log(container.scrollTop)
-					if (container){
-						this.$refs.chatbox.$el.scrollTop = container.scrollHeight
-					}
-				}
+			messages: function () {			
 				return this.$store.getters.getMessages
 			},
 			chatboxStyle: function(){
@@ -182,6 +191,11 @@
         }
         return perc
       },
+			getMsgId (msg){				
+				if (this.messages && (msg == this.messages[this.messages.length - 1])){
+					return 'lastMessage'
+				}
+			},
       getCurrent: function (user) {
         if (isNaN(user.time)) {
 						return this.getTimeFromMs(0)