chore: minor refactoring of scroll to bottom and adjust options

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

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 })
 		},
 	},
 

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 })
 		},
 	},
 

src/components/MessagesList/MessagesList.vue

@@ -308,9 +308,8 @@ export default {
 					this.softUpdateByDateGroups(this.messagesGroupedByDateByAuthor, newGroups)
 				}
 
-				if (this.isSticky) {
-					this.scrollToBottom({ smooth: true })
-				}
+				// scroll to bottom if needed
+				this.scrollToBottom({ smooth: true })
 			},
 		},
 	},
@@ -1104,26 +1103,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',
+				})
 			})
 		},
 

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)
 

src/store/fileUploadStore.js

@@ -323,7 +323,7 @@ const actions = {
 			// Add temporary messages (files) to the messages list
 			dispatch('addTemporaryMessage', { token, message })
 			// Scroll the message list
-			EventBus.$emit('scroll-chat-to-bottom', { force: true })
+			EventBus.$emit('scroll-chat-to-bottom', { smooth: true, force: true })
 		}
 
 		await dispatch('prepareUploadPaths', { token, uploadId })