From 013812bdfce042d4e7a216922ccfaaa7b7fdaf0e Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Fri, 31 Jan 2025 12:35:30 +0100 Subject: [PATCH 1/2] fix(MessagesList): keep chat at the bottom when list height is changing Signed-off-by: Maksim Sukharev --- src/components/MessagesList/MessagesList.vue | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue index e83792d814e..46160c7dad3 100644 --- a/src/components/MessagesList/MessagesList.vue +++ b/src/components/MessagesList/MessagesList.vue @@ -341,6 +341,10 @@ export default { subscribe('networkOnline', this.handleNetworkOnline) window.addEventListener('focus', this.onWindowFocus) + window.addEventListener('resize', this.updateSize) + this.resizeObserver = new ResizeObserver(this.updateSize) + this.resizeObserver.observe(this.$refs.scroller) + /** * Every 30 seconds we remove expired messages from the store */ @@ -364,6 +368,11 @@ export default { unsubscribe('networkOffline', this.handleNetworkOffline) unsubscribe('networkOnline', this.handleNetworkOnline) + window.removeEventListener('resize', this.updateSize) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + } + if (this.expirationInterval) { clearInterval(this.expirationInterval) this.expirationInterval = null @@ -373,6 +382,14 @@ export default { methods: { t, n, + updateSize() { + if (this.isChatScrolledToBottom) { + this.$refs.scroller.scrollTo({ + top: this.$refs.scroller.scrollHeight, + }) + } + }, + prepareMessagesGroups(messages) { let prevGroupMap = null const groupsByDate = {} From 355ac521e74c7d761eee812ffa389d289d4077f7 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Fri, 31 Jan 2025 13:16:36 +0100 Subject: [PATCH 2/2] fix(jest): move ResizeObserver mock to global setup Signed-off-by: Maksim Sukharev --- src/components/CallView/shared/VideoVue.spec.js | 6 ------ src/test-setup.js | 6 ++++++ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/CallView/shared/VideoVue.spec.js b/src/components/CallView/shared/VideoVue.spec.js index ee69021e948..df78b28340f 100644 --- a/src/components/CallView/shared/VideoVue.spec.js +++ b/src/components/CallView/shared/VideoVue.spec.js @@ -14,12 +14,6 @@ import storeConfig from '../../../store/storeConfig.js' import EmitterMixin from '../../../utils/EmitterMixin.js' import CallParticipantModel from '../../../utils/webrtc/models/CallParticipantModel.js' -global.ResizeObserver = jest.fn().mockImplementation(() => ({ - observe: jest.fn(), - unobserve: jest.fn(), - disconnect: jest.fn(), -})) - describe('VideoVue.vue', () => { let localVue let store diff --git a/src/test-setup.js b/src/test-setup.js index 8b767810387..ccc6136592a 100644 --- a/src/test-setup.js +++ b/src/test-setup.js @@ -109,6 +109,12 @@ global.BroadcastChannel = jest.fn(() => ({ addEventListener: jest.fn(), })) +global.ResizeObserver = jest.fn(() => ({ + observe: jest.fn(), + unobserve: jest.fn(), + disconnect: jest.fn(), +})) + // Work around missing "URL.createObjectURL" (which is used in the code but not // relevant for the tests) in jsdom: https://github.com/jsdom/jsdom/issues/1721 window.URL.createObjectURL = jest.fn()