(chore) fix shadowRoot pointer

Author: antoine92190

src/components/EmojiPickerContainer/EmojiPickerContainer.vue

@@ -114,7 +114,9 @@ export default {
 		},
 		setEmojiPickerPosition(clientY, innerWidth, innerHeight) {
 			const mobileSize = innerWidth < 500 || innerHeight < 700
-			const roomFooterRef = document.getElementById('room-footer')
+			const roomFooterRef = document
+				.querySelector('vue-advanced-chat')
+				.shadowRoot.getElementById('room-footer')
 
 			if (!roomFooterRef) {
 				if (mobileSize) this.emojiPickerRight = '-50px'

src/lib/Room/Room.vue

@@ -332,11 +332,15 @@ export default {
 				this.observer.disconnect()
 			}
 
-			const loader = document.getElementById('infinite-loader-messages')
+			const loader = document
+				.querySelector('vue-advanced-chat')
+				.shadowRoot.getElementById('infinite-loader-messages')
 
 			if (loader) {
 				const options = {
-					root: document.getElementById('messages-list'),
+					root: document
+						.querySelector('vue-advanced-chat')
+						.shadowRoot.getElementById('messages-list'),
 					rootMargin: `${this.scrollDistance}px`,
 					threshold: 0
 				}

src/lib/Room/RoomFooter/RoomEmojis/RoomEmojis.vue

@@ -39,7 +39,9 @@ export default {
 
 	computed: {
 		footerHeight() {
-			return document.getElementById('room-footer').clientHeight
+			return document
+				.querySelector('vue-advanced-chat')
+				.shadowRoot.getElementById('room-footer').clientHeight
 		}
 	},
 

src/lib/Room/RoomFooter/RoomFiles/RoomFiles.vue

@@ -46,7 +46,9 @@ export default {
 
 	computed: {
 		footerHeight() {
-			return document.getElementById('room-footer').clientHeight
+			return document
+				.querySelector('vue-advanced-chat')
+				.shadowRoot.getElementById('room-footer').clientHeight
 		}
 	}
 }

src/lib/Room/RoomFooter/RoomMessageReply/RoomMessageReply.vue

@@ -101,7 +101,9 @@ export default {
 
 	computed: {
 		footerHeight() {
-			return document.getElementById('room-footer').clientHeight
+			return document
+				.querySelector('vue-advanced-chat')
+				.shadowRoot.getElementById('room-footer').clientHeight
 		},
 		firstFile() {
 			return this.messageReply?.files?.length ? this.messageReply.files[0] : {}

src/lib/Room/RoomFooter/RoomTemplatesText/RoomTemplatesText.vue

@@ -46,7 +46,9 @@ export default {
 
 	computed: {
 		footerHeight() {
-			return document.getElementById('room-footer').clientHeight
+			return document
+				.querySelector('vue-advanced-chat')
+				.shadowRoot.getElementById('room-footer').clientHeight
 		}
 	},
 

src/lib/Room/RoomFooter/RoomUsersTag/RoomUsersTag.vue

@@ -48,7 +48,9 @@ export default {
 
 	computed: {
 		footerHeight() {
-			return document.getElementById('room-footer').clientHeight
+			return document
+				.querySelector('vue-advanced-chat')
+				.shadowRoot.getElementById('room-footer').clientHeight
 		}
 	},
 

src/lib/Room/RoomMessage/AudioPlayer/AudioPlayer.vue

@@ -62,7 +62,9 @@ export default {
 	},
 
 	mounted() {
-		this.player = document.getElementById(this.playerUniqId)
+		this.player = document
+			.querySelector('vue-advanced-chat')
+			.shadowRoot.getElementById(this.playerUniqId)
 
 		this.player.addEventListener('ended', () => {
 			this.isPlaying = false

src/lib/Room/RoomMessage/MessageActions/MessageActions.vue

@@ -169,7 +169,9 @@ export default {
 			if (!this.optionsOpened) return
 
 			setTimeout(() => {
-				const roomFooterRef = document.getElementById('room-footer')
+				const roomFooterRef = document
+					.querySelector('vue-advanced-chat')
+					.shadowRoot.getElementById('room-footer')
 
 				if (
 					!roomFooterRef ||

src/lib/RoomsList/RoomsList.vue

@@ -2,7 +2,10 @@
 	<div
 		v-show="showRoomsList"
 		class="vac-rooms-container"
-		:class="{ 'vac-rooms-container-full': isMobile, 'vac-app-border-r': !isMobile }"
+		:class="{
+			'vac-rooms-container-full': isMobile,
+			'vac-app-border-r': !isMobile
+		}"
 	>
 		<slot name="rooms-header" />
 
@@ -165,11 +168,15 @@ export default {
 				this.observer.disconnect()
 			}
 
-			const loader = document.getElementById('infinite-loader-rooms')
+			const loader = document
+				.querySelector('vue-advanced-chat')
+				.shadowRoot.getElementById('infinite-loader-rooms')
 
 			if (loader) {
 				const options = {
-					root: document.getElementById('rooms-list'),
+					root: document
+						.querySelector('vue-advanced-chat')
+						.shadowRoot.getElementById('rooms-list'),
 					rootMargin: `${this.scrollDistance}px`,
 					threshold: 0
 				}