[vue3] fix: fix unmount issues and call reactivity

src/components/CallView/CallView.vue

@@ -204,7 +204,7 @@ export default {
 		},
 
 		callParticipantModels() {
-			return callParticipantCollection.callParticipantModels.value.filter(callParticipantModel => !callParticipantModel.attributes.internal)
+			return callParticipantCollection.callParticipantModels.filter(callParticipantModel => !callParticipantModel.attributes.internal)
 		},
 
 		callParticipantModelsWithScreen() {
@@ -362,9 +362,12 @@ export default {
 			this.adjustSimulcastQuality()
 		},
 
-		speakers(value) {
-			if (value) {
-				this._setPromotedParticipant()
+		speakers: {
+			deep: true,
+			handler(value) {
+				if (value) {
+					this._setPromotedParticipant()
+				}
 			}
 		},
 
@@ -375,9 +378,16 @@ export default {
 		},
 
 		screens() {
+			console.log('screens watcher')
 			this._setScreenVisible()
 
 		},
+		// screens: {
+		// 	deep: true,
+		// 	handler() {
+		// 		this._setScreenVisible()
+		// 	}
+		// },
 
 		callParticipantModelsWithScreen(newValue, previousValue) {
 			// Everytime a new screen is shared, switch to promoted view
@@ -455,6 +465,7 @@ export default {
 		 * @param {Array} models the array of CallParticipantModels
 		 */
 		updateDataFromCallParticipantModels(models) {
+			console.log('updateDataFromCallParticipantModels', models)
 			const addedModels = models.filter(model => !this.sharedDatas[model.attributes.peerId])
 			const removedModelIds = Object.keys(this.sharedDatas).filter(sharedDataId => models.find(model => model.attributes.peerId === sharedDataId) === undefined)
 
@@ -464,15 +475,15 @@ export default {
 				delete this.sharedDatas[removedModelId]
 
 				this.speakingUnwatchers[removedModelId]()
-				// Not reactive, but not a problem
+				// FIXME Not reactive, but not a problem?
 				delete this.speakingUnwatchers[removedModelId]
 
 				this.screenUnwatchers[removedModelId]()
-				// Not reactive, but not a problem
+				// FIXME Not reactive, but not a problem?
 				delete this.screenUnwatchers[removedModelId]
 
 				this.raisedHandUnwatchers[removedModelId]()
-				// Not reactive, but not a problem
+				// FIXME Not reactive, but not a problem?
 				delete this.raisedHandUnwatchers[removedModelId]
 
 				const index = this.speakers.findIndex(speaker => speaker.id === removedModelId)
@@ -490,7 +501,7 @@ export default {
 
 				this.sharedDatas[addedModel.attributes.peerId] = sharedData
 
-				// Not reactive, but not a problem
+				// FIXME Not reactive, but not a problem?
 				this.speakingUnwatchers[addedModel.attributes.peerId] = this.$watch(function() {
 					return addedModel.attributes.speaking
 				}, function(speaking) {
@@ -502,14 +513,14 @@ export default {
 					active: false,
 				})
 
-				// Not reactive, but not a problem
+				// FIXME Not reactive, but not a problem?
 				this.screenUnwatchers[addedModel.attributes.peerId] = this.$watch(function() {
 					return addedModel.attributes.screen
 				}, function(screen) {
 					this._setScreenAvailable(addedModel.attributes.peerId, screen)
 				})
 
-				// Not reactive, but not a problem
+				// FIXME Not reactive, but not a problem? - at least works
 				this.raisedHandUnwatchers[addedModel.attributes.peerId] = this.$watch(function() {
 					return addedModel.attributes.raisedHand
 				}, function(raisedHand) {
@@ -578,6 +589,7 @@ export default {
 		},
 
 		_setScreenAvailable(id, screen) {
+			console.log('_setScreenAvailable', id, screen)
 			if (screen) {
 				this.screens.unshift(id)
 
@@ -625,6 +637,7 @@ export default {
 		},
 
 		_setScreenVisible() {
+			console.log('_setScreenVisible', this.sharedDatas)
 			this.localSharedData.screenVisible = false
 
 			Object.values(this.sharedDatas).forEach(sharedData => {

src/components/CallView/shared/VideoVue.vue

@@ -578,7 +578,7 @@ export default {
 		},
 
 		updateVideoAspectRatio() {
-			if (!this.isBig) {
+			if (!this.isBig || !this.model.attributes.stream) {
 				return
 			}
 

src/components/MessagesList/MessagesList.vue

@@ -785,6 +785,10 @@ export default {
 		},
 
 		checkSticky() {
+			if (!this.$refs.scroller) {
+				return
+			}
+
 			const ulElements = this.$refs['dateGroup-' + this.token]
 			if (!ulElements) {
 				return
@@ -807,7 +811,7 @@ export default {
 			this.isScrolling = true
 			this.endScrollTimeout = setTimeout(this.endScroll, 3000)
 			// handle sticky date
-			if (this.$refs.scroller.scrollTop === 0) {
+			if (this.$refs.scroller?.scrollTop === 0) {
 				this.stickyDate = null
 			} else {
 				this.checkSticky()

src/components/TopBar/TopBarMenu.vue

@@ -420,7 +420,7 @@ export default {
 	methods: {
 		t,
 		forceMuteOthers() {
-			callParticipantCollection.callParticipantModels.value.forEach(callParticipantModel => {
+			callParticipantCollection.callParticipantModels.forEach(callParticipantModel => {
 				callParticipantModel.forceMute()
 			})
 		},

src/utils/webrtc/CallParticipantsAudioPlayer.js

@@ -49,7 +49,7 @@ export default function CallParticipantsAudioPlayer(callParticipantCollection, m
 	this._callParticipantCollection.on('add', this._handleCallParticipantAddedBound)
 	this._callParticipantCollection.on('remove', this._handleCallParticipantRemovedBound)
 
-	this._callParticipantCollection.callParticipantModels.value.forEach(callParticipantModel => {
+	this._callParticipantCollection.callParticipantModels.forEach(callParticipantModel => {
 		this._handleCallParticipantAddedBound(this._callParticipantCollection, callParticipantModel)
 	})
 }
@@ -60,7 +60,7 @@ CallParticipantsAudioPlayer.prototype = {
 		this._callParticipantCollection.off('add', this._handleCallParticipantAddedBound)
 		this._callParticipantCollection.off('remove', this._handleCallParticipantRemovedBound)
 
-		this._callParticipantCollection.callParticipantModels.value.forEach(callParticipantModel => {
+		this._callParticipantCollection.callParticipantModels.forEach(callParticipantModel => {
 			this._handleCallParticipantRemovedBound(this._callParticipantCollection, callParticipantModel)
 		})
 

src/utils/webrtc/CallParticipantsAudioPlayer.spec.js

@@ -69,7 +69,7 @@ describe('CallParticipantsAudioPlayer', () => {
 	 * @param {object} callParticipantModel the CallParticipantModel to add.
 	 */
 	function addCallParticipantModel(callParticipantModel) {
-		callParticipantCollection.callParticipantModels.value.push(callParticipantModel)
+		callParticipantCollection.callParticipantModels.push(callParticipantModel)
 
 		callParticipantCollection._trigger('add', [callParticipantModel])
 	}
@@ -82,8 +82,8 @@ describe('CallParticipantsAudioPlayer', () => {
 	 * @param {object} callParticipantModel the CallParticipantModel to remove.
 	 */
 	function removeCallParticipantModel(callParticipantModel) {
-		const index = callParticipantCollection.callParticipantModels.value.indexOf(callParticipantModel)
-		callParticipantCollection.callParticipantModels.value.splice(index, 1)
+		const index = callParticipantCollection.callParticipantModels.indexOf(callParticipantModel)
+		callParticipantCollection.callParticipantModels.splice(index, 1)
 
 		callParticipantCollection._trigger('remove', [callParticipantModel])
 	}

src/utils/webrtc/SentVideoQualityThrottler.js

@@ -84,7 +84,7 @@ SentVideoQualityThrottler.prototype = {
 		this._callParticipantCollection.on('add', this._handleAddParticipantBound)
 		this._callParticipantCollection.on('remove', this._handleRemoveParticipantBound)
 
-		this._callParticipantCollection.callParticipantModels.value.forEach(callParticipantModel => {
+		this._callParticipantCollection.callParticipantModels.forEach(callParticipantModel => {
 			callParticipantModel.on('change:videoAvailable', this._adjustVideoQualityIfNeededBound)
 			callParticipantModel.on('change:audioAvailable', this._adjustVideoQualityIfNeededBound)
 		})
@@ -103,7 +103,7 @@ SentVideoQualityThrottler.prototype = {
 		this._callParticipantCollection.off('add', this._handleAddParticipantBound)
 		this._callParticipantCollection.off('remove', this._handleRemoveParticipantBound)
 
-		this._callParticipantCollection.callParticipantModels.value.forEach(callParticipantModel => {
+		this._callParticipantCollection.callParticipantModels.forEach(callParticipantModel => {
 			callParticipantModel.off('change:videoAvailable', this._adjustVideoQualityIfNeededBound)
 			callParticipantModel.off('change:audioAvailable', this._adjustVideoQualityIfNeededBound)
 		})
@@ -171,7 +171,7 @@ SentVideoQualityThrottler.prototype = {
 
 		let availableVideosCount = 0
 		let availableAudiosCount = 0
-		this._callParticipantCollection.callParticipantModels.value.forEach(callParticipantModel => {
+		this._callParticipantCollection.callParticipantModels.forEach(callParticipantModel => {
 			if (callParticipantModel.get('videoAvailable')) {
 				availableVideosCount++
 			}

src/utils/webrtc/SpeakingStatusHandler.js

@@ -58,7 +58,7 @@ export default class SpeakingStatusHandler {
 		this.#callParticipantCollection.off('add', this.#handleAddParticipantBound)
 		this.#callParticipantCollection.off('remove', this.#handleRemoveParticipantBound)
 
-		this.#callParticipantCollection.callParticipantModels.value.forEach(callParticipantModel => {
+		this.#callParticipantCollection.callParticipantModels.forEach(callParticipantModel => {
 			callParticipantModel.off('change:speaking', this.#handleSpeakingBound)
 			callParticipantModel.off('change:stoppedSpeaking', this.#handleSpeakingBound)
 		})

src/utils/webrtc/models/CallParticipantCollection.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { ref } from 'vue'
+import { reactive } from 'vue'
 
 import CallParticipantModel from './CallParticipantModel.js'
 import EmitterMixin from '../../EmitterMixin.js'
@@ -15,36 +15,35 @@ export default function CallParticipantCollection() {
 
 	this._superEmitterMixin()
 
-	// FIXME: use reactive instead of ref after migration to vue 3
-	this.callParticipantModels = ref([])
+	this.callParticipantModels = reactive([])
 
 }
 
 CallParticipantCollection.prototype = {
 
 	add(options) {
 		const callParticipantModel = new CallParticipantModel(options)
-		this.callParticipantModels.value.push(callParticipantModel)
+		this.callParticipantModels.push(callParticipantModel)
 
 		this._trigger('add', [callParticipantModel])
 
 		return callParticipantModel
 	},
 
 	get(peerId) {
-		return this.callParticipantModels.value.find(function(callParticipantModel) {
+		return this.callParticipantModels.find(function(callParticipantModel) {
 			return callParticipantModel.attributes.peerId === peerId
 		})
 	},
 
 	remove(peerId) {
-		const index = this.callParticipantModels.value.findIndex(function(callParticipantModel) {
+		const index = this.callParticipantModels.findIndex(function(callParticipantModel) {
 			return callParticipantModel.attributes.peerId === peerId
 		})
 		if (index !== -1) {
-			const callParticipantModel = this.callParticipantModels.value[index]
+			const callParticipantModel = this.callParticipantModels[index]
 
-			this.callParticipantModels.value.splice(index, 1)
+			this.callParticipantModels.splice(index, 1)
 
 			this._trigger('remove', [callParticipantModel])
 

src/utils/webrtc/models/CallParticipantModel.js

@@ -2,6 +2,7 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+import { reactive, toRaw } from 'vue'
 
 import EmitterMixin from '../../EmitterMixin.js'
 
@@ -26,7 +27,7 @@ export default function CallParticipantModel(options) {
 
 	this._superEmitterMixin()
 
-	this.attributes = {
+	this.attributes = reactive({
 		peerId: null,
 		nextcloudSessionId: null,
 		peer: null,
@@ -53,7 +54,7 @@ export default function CallParticipantModel(options) {
 			state: false,
 			timestamp: null,
 		},
-	}
+	})
 
 	this.set('peerId', options.peerId)
 
@@ -115,25 +116,26 @@ CallParticipantModel.prototype = {
 	},
 
 	_handlePeerStreamAdded(peer) {
-		if (this.get('peer') === peer) {
+		// FIXME store as a non-reactive, raw value using toRaw to not have proxy created for Peer at all.
+		if (toRaw(this.get('peer')) === toRaw(peer)) {
 			this.set('stream', this.get('peer').stream || null)
 
 			// "peer.nick" is set only for users and when the MCU is not used.
 			if (this.get('peer').nick !== undefined) {
 				this.set('name', this.get('peer').nick)
 			}
-		} else if (this.get('screenPeer') === peer) {
+		} else if (toRaw(this.get('screenPeer')) === toRaw(peer)) {
 			this.set('screen', this.get('screenPeer').stream || null)
 		}
 	},
 
 	_handlePeerStreamRemoved(peer) {
-		if (this.get('peer') === peer) {
+		if (toRaw(this.get('peer')) === toRaw(peer)) {
 			this.set('stream', null)
 			this.set('audioAvailable', undefined)
 			this.set('speaking', undefined)
 			this.set('videoAvailable', undefined)
-		} else if (this.get('screenPeer') === peer) {
+		} else if (toRaw(this.get('screenPeer')) === toRaw(peer)) {
 			this.set('screen', null)
 		}
 	},