fix(directive): replace v-observe-visibility with vIntersectionObserver

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

9 files changed, 35 insertions, 26 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index f5089ddb9..450a69a19 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -507,7 +507,7 @@ describe('Message.vue', () => {
 		test('displays unread message marker that marks the message seen when visible', () => {
 			getVisualLastReadMessageIdMock.mockReturnValue(123)
 			messageProps.nextMessageId = 333
-			const observeVisibility = jest.fn()
+			const IntersectionObserver = jest.fn()
 
 			const wrapper = shallowMount(Message, {
 				localVue,
@@ -516,7 +516,7 @@ describe('Message.vue', () => {
 					MessageBody,
 				},
 				directives: {
-					observeVisibility,
+					IntersectionObserver,
 				},
 				propsData: messageProps,
 				provide: injected,
@@ -525,26 +525,26 @@ describe('Message.vue', () => {
 			const marker = wrapper.find('.new-message-marker')
 			expect(marker.exists()).toBe(true)
 
-			expect(observeVisibility).toHaveBeenCalled()
-			const directiveValue = observeVisibility.mock.calls[0][1]
+			expect(IntersectionObserver).toHaveBeenCalled()
+			const directiveValue = IntersectionObserver.mock.calls[0][1]
 
 			expect(wrapper.vm.seen).toEqual(false)
 
-			directiveValue.value(false)
+			directiveValue.value([{ isIntersecting: false }])
 			expect(wrapper.vm.seen).toEqual(false)
 
-			directiveValue.value(true)
+			directiveValue.value([{ isIntersecting: true }])
 			expect(wrapper.vm.seen).toEqual(true)
 
 			// stays true if it was visible once
-			directiveValue.value(false)
+			directiveValue.value([{ isIntersecting: false }])
 			expect(wrapper.vm.seen).toEqual(true)
 		})
 
 		test('does not display read marker on the very last message', () => {
 			messageProps.lastReadMessageId = 123
 			messageProps.nextMessageId = null // last message
-			const observeVisibility = jest.fn()
+			const IntersectionObserver = jest.fn()
 
 			const wrapper = shallowMount(Message, {
 				localVue,
@@ -553,7 +553,7 @@ describe('Message.vue', () => {
 					MessageBody,
 				},
 				directives: {
-					observeVisibility,
+					IntersectionObserver,
 				},
 				propsData: messageProps,
 				provide: injected,
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 894dc4ce5..0885bcc9a 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -78,7 +78,7 @@
 			@close="isTranslateDialogOpen = false" />
 
 		<div v-if="isLastReadMessage"
-			v-observe-visibility="lastReadMessageVisibilityChanged"
+			v-intersection-observer="lastReadMessageVisibilityChanged"
 			class="new-message-marker">
 			<span>{{ t('spreed', 'Unread messages') }}</span>
 		</div>
@@ -86,6 +86,8 @@
 </template>
 
 <script>
+import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components'
+
 import UnfoldLess from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
 import UnfoldMore from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
 
@@ -128,6 +130,10 @@ export default {
 		UnfoldMore,
 	},
 
+	directives: {
+		IntersectionObserver,
+	},
+
 	props: {
 		message: {
 			type: Object,
@@ -346,8 +352,8 @@ export default {
 
 	methods: {
 		t,
-		lastReadMessageVisibilityChanged(isVisible) {
-			if (isVisible) {
+		lastReadMessageVisibilityChanged([{ isIntersecting }]) {
+			if (isIntersecting) {
 				this.seen = true
 			}
 		},
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
index 4f5ddb90c..58573392d 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
@@ -6,7 +6,7 @@
 <template>
 	<!-- Poll card -->
 	<a v-if="!showAsButton"
-		v-observe-visibility="getPollData"
+		v-intersection-observer="getPollData"
 		:aria-label="t('spreed', 'Poll')"
 		class="poll-card"
 		role="button"
@@ -30,6 +30,8 @@
 </template>
 
 <script>
+import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components'
+
 import PollIcon from 'vue-material-design-icons/Poll.vue'
 
 import { t } from '@nextcloud/l10n'
@@ -46,6 +48,10 @@ export default {
 		PollIcon,
 	},
 
+	directives: {
+		IntersectionObserver,
+	},
+
 	props: {
 		name: {
 			type: String,
diff --git a/src/components/NewConversationDialog/NewConversationContactsPage.vue b/src/components/NewConversationDialog/NewConversationContactsPage.vue
index cec291bc9..105062282 100644
--- a/src/components/NewConversationDialog/NewConversationContactsPage.vue
+++ b/src/components/NewConversationDialog/NewConversationContactsPage.vue
@@ -8,7 +8,7 @@
 		<!-- Search -->
 		<div class="set-contacts__form">
 			<NcTextField ref="setContacts"
-				v-observe-visibility="visibilityChanged"
+				v-intersection-observer="visibilityChanged"
 				:value.sync="searchText"
 				type="text"
 				class="set-contacts__form-input"
@@ -57,6 +57,7 @@
 </template>
 
 <script>
+import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components'
 import debounce from 'debounce'
 import { ref } from 'vue'
 
@@ -93,6 +94,10 @@ export default {
 		Magnify,
 	},
 
+	directives: {
+		IntersectionObserver,
+	},
+
 	props: {
 		conversationName: {
 			type: String,
@@ -225,12 +230,14 @@ export default {
 				this.contactsLoading = false
 			}
 		},
-		visibilityChanged(isVisible) {
-			if (isVisible) {
+
+		visibilityChanged([{ isIntersecting }]) {
+			if (isIntersecting) {
 				// Focus the input field of the current component.
 				this.focusInput()
 			}
 		},
+
 		focusInput() {
 			this.setContacts.focus()
 		},
diff --git a/src/main.js b/src/main.js
index ac23314b0..62c861568 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@
 
 import { createPinia, PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
-import VueObserveVisibility from 'vue-observe-visibility'
 import VueRouter from 'vue-router'
 import VueShortKey from 'vue-shortkey'
 import Vuex from 'vuex'
@@ -48,7 +47,6 @@ Vue.prototype.OCA = OCA
 Vue.use(PiniaVuePlugin)
 Vue.use(Vuex)
 Vue.use(VueRouter)
-Vue.use(VueObserveVisibility)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
 
 const pinia = createPinia()
diff --git a/src/mainFilesSidebar.js b/src/mainFilesSidebar.js
index 1809fb42b..7a9f1640b 100644
--- a/src/mainFilesSidebar.js
+++ b/src/mainFilesSidebar.js
@@ -5,7 +5,6 @@
 
 import { createPinia, PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
-import VueObserveVisibility from 'vue-observe-visibility'
 import VueShortKey from 'vue-shortkey'
 import Vuex from 'vuex'
 
@@ -42,7 +41,6 @@ Vue.prototype.OCA = OCA
 Vue.use(PiniaVuePlugin)
 Vue.use(Vuex)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
-Vue.use(VueObserveVisibility)
 
 const pinia = createPinia()
 
diff --git a/src/mainPublicShareAuthSidebar.js b/src/mainPublicShareAuthSidebar.js
index e6253f611..a51738ba2 100644
--- a/src/mainPublicShareAuthSidebar.js
+++ b/src/mainPublicShareAuthSidebar.js
@@ -5,7 +5,6 @@
 
 import { createPinia, PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
-import VueObserveVisibility from 'vue-observe-visibility'
 import VueShortKey from 'vue-shortkey'
 import Vuex from 'vuex'
 
@@ -42,7 +41,6 @@ Vue.prototype.OCA = OCA
 Vue.use(PiniaVuePlugin)
 Vue.use(Vuex)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
-Vue.use(VueObserveVisibility)
 
 const pinia = createPinia()
 store.dispatch('setMainContainerSelector', '#talk-sidebar')
diff --git a/src/mainPublicShareSidebar.js b/src/mainPublicShareSidebar.js
index 05343c5ab..0fe180f2a 100644
--- a/src/mainPublicShareSidebar.js
+++ b/src/mainPublicShareSidebar.js
@@ -5,7 +5,6 @@
 
 import { createPinia, PiniaVuePlugin } from 'pinia'
 import Vue, { reactive } from 'vue'
-import VueObserveVisibility from 'vue-observe-visibility'
 import VueShortKey from 'vue-shortkey'
 import Vuex from 'vuex'
 
@@ -42,7 +41,6 @@ Vue.prototype.OCA = OCA
 Vue.use(PiniaVuePlugin)
 Vue.use(Vuex)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
-Vue.use(VueObserveVisibility)
 
 const pinia = createPinia()
 
diff --git a/src/mainRecording.js b/src/mainRecording.js
index 00b39c5bb..121d9e5f2 100644
--- a/src/mainRecording.js
+++ b/src/mainRecording.js
@@ -6,7 +6,6 @@
 
 import { createPinia, PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
-import VueObserveVisibility from 'vue-observe-visibility'
 import VueRouter from 'vue-router'
 import VueShortKey from 'vue-shortkey'
 import Vuex from 'vuex'
@@ -51,7 +50,6 @@ Vue.prototype.OCA = OCA
 Vue.use(PiniaVuePlugin)
 Vue.use(Vuex)
 Vue.use(VueRouter)
-Vue.use(VueObserveVisibility)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
 
 const pinia = createPinia()