chore: minor refactoring of scroll to bottom and adjust options

Signed-off-by: DorraJaouad <[email protected]>
nextcloud · Mar 22, 2024 · 9beca0c · 9beca0c
1 parent 10a7ace
commit 9beca0c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 17 deletions.
diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
@@ -224,7 +224,7 @@ export default {
 		},
 
 		smoothScrollToBottom() {
-			EventBus.$emit('scroll-chat-to-bottom', { smooth: true })
+			EventBus.$emit('scroll-chat-to-bottom', { smooth: true, force: true })
 		},
 	},
 

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -365,7 +365,7 @@ export default {
 
 	watch: {
 		showJoinCallButton() {
-			EventBus.$emit('scroll-chat-to-bottom')
+			EventBus.$emit('scroll-chat-to-bottom', { smooth: true })
 		},
 	},
 

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
@@ -1104,26 +1104,31 @@ export default {
 				if (!this.$refs.scroller) {
 					return
 				}
-				if (!this.isWindowVisible || (!document.hasFocus() && !this.isInCall)) {
+
+				let newTop
+				if (options?.force) {
+					newTop = this.$refs.scroller.scrollHeight
+					this.setChatScrolledToBottom(true)
+				} else if (!this.isSticky) {
+					// Reading old messages
+					return
+				} else if (!this.isWindowVisible) {
 					const firstUnreadMessageHeight = this.$refs.scroller.scrollHeight - this.$refs.scroller.scrollTop - this.$refs.scroller.offsetHeight
-					// Otherwise we jump half a message and stop autoscrolling, so the user can read up
+					const scrollBy = firstUnreadMessageHeight < 40 ? 10 : 40
+					// We jump half a message and stop autoscrolling, so the user can read up
 					// Single new line from the previous author is 35px so scroll half a line (10px)
 					// Single new line from the new author is 75px so scroll half an avatar (40px)
-					this.$refs.scroller.scrollTop += firstUnreadMessageHeight < 40 ? 10 : 40
+					newTop = this.$refs.scroller.scrollTop + scrollBy
 					this.setChatScrolledToBottom(false)
-					return
+				} else {
+					newTop = this.$refs.scroller.scrollHeight
+					this.setChatScrolledToBottom(true)
 				}
 
-				if (options?.force || this.isChatScrolledToBottom || this.isSticky) {
-					if (this.isWindowVisible && (document.hasFocus() || this.isInCall)) {
-						// scrollTo is used when the user is watching
-						this.$refs.scroller.scrollTo({
-							top: this.$refs.scroller.scrollHeight,
-							behavior: options?.smooth ? 'smooth' : 'auto',
-						})
-						this.setChatScrolledToBottom(true)
-					}
-				}
+				this.$refs.scroller.scrollTo({
+					top: newTop,
+					behavior: options?.smooth ? 'smooth' : 'auto',
+				})
 			})
 		},
 

diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
@@ -695,7 +695,7 @@ export default {
 				this.text = ''
 				this.userData = {}
 				// Scrolls the message list to the last added message
-				EventBus.$emit('scroll-chat-to-bottom', { smooth: true })
+				EventBus.$emit('scroll-chat-to-bottom', { smooth: true, force: true })
 				// Also remove the message to be replied for this conversation
 				this.chatExtrasStore.removeParentIdToReply(this.token)