Merge pull request #11993 from nextcloud/fix/9450/explicit-reactivity

chore: define explicit reactivity for webrtc models

src/components/CallView/CallView.vue

@@ -193,14 +193,15 @@ export default {
 	setup() {
 		return {
 			supportedReactions,
+			localMediaModel,
+			localCallParticipantModel,
+			callParticipantCollection,
 		}
 	},
 
 	data() {
 		return {
 			screens: [],
-			localMediaModel,
-			localCallParticipantModel,
 			sharedDatas: {},
 			raisedHandUnwatchers: {},
 			speakingUnwatchers: {},
@@ -209,7 +210,6 @@ export default {
 			localSharedData: {
 				screenVisible: true,
 			},
-			callParticipantCollection,
 			isBackgroundBlurred: true,
 			showPresenterOverlay: true,
 			debounceFetchPeers: () => {},
@@ -222,7 +222,7 @@ export default {
 		},
 
 		callParticipantModels() {
-			return callParticipantCollection.callParticipantModels.filter(callParticipantModel => !callParticipantModel.attributes.internal)
+			return callParticipantCollection.callParticipantModels.value.filter(callParticipantModel => !callParticipantModel.attributes.internal)
 		},
 
 		callParticipantModelsWithScreen() {

src/components/MediaSettings/MediaSettings.vue

@@ -310,12 +310,12 @@ export default {
 			initializeDevices,
 			stopDevices,
 			virtualBackground,
+			model: localMediaModel,
 		}
 	},
 
 	data() {
 		return {
-			model: localMediaModel,
 			modal: false,
 			tabContent: 'none',
 			audioOn: undefined,

src/components/TopBar/TopBar.vue

@@ -206,14 +206,16 @@ export default {
 
 	setup() {
 		useGetParticipants()
+		return {
+			localCallParticipantModel,
+			localMediaModel,
+		}
 	},
 
 	data: () => {
 		return {
 			unreadNotificationHandle: null,
 			showBreakoutRoomsEditor: false,
-			localCallParticipantModel,
-			localMediaModel,
 		}
 	},
 

src/components/TopBar/TopBarMediaControls.vue

@@ -193,6 +193,7 @@ export default {
 	setup() {
 		return {
 			isInCall: useIsInCall(),
+			callAnalyzer,
 		}
 	},
 
@@ -202,7 +203,6 @@ export default {
 			screenSharingMenuOpen: false,
 			boundaryElement: document.querySelector('.main-view'),
 			mouseover: false,
-			callAnalyzer,
 			qualityWarningInGracePeriodTimeout: null,
 			audioEnabledBeforeSpacebarKeydown: undefined,
 			spacebarKeyDown: false,

src/components/TopBar/TopBarMenu.vue

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

src/utils/webrtc/SentVideoQualityThrottler.js

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

src/utils/webrtc/SpeakingStatusHandler.js

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

src/utils/webrtc/analyzers/CallAnalyzer.js

@@ -19,6 +19,8 @@
  *
  */
 
+import { reactive } from 'vue'
+
 import { ParticipantAnalyzer } from './ParticipantAnalyzer.js'
 import EmitterMixin from '../../EmitterMixin.js'
 
@@ -51,11 +53,11 @@ import EmitterMixin from '../../EmitterMixin.js'
 export default function CallAnalyzer(localMediaModel, localCallParticipantModel, callParticipantCollection) {
 	this._superEmitterMixin()
 
-	this.attributes = {
+	this.attributes = reactive({
 		senderConnectionQualityAudio: null,
 		senderConnectionQualityVideo: null,
 		senderConnectionQualityScreen: null,
-	}
+	})
 
 	this._localMediaModel = localMediaModel
 	this._localCallParticipantModel = localCallParticipantModel

src/utils/webrtc/models/CallParticipantCollection.js

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

src/utils/webrtc/models/LocalCallParticipantModel.js

@@ -19,6 +19,8 @@
  *
  */
 
+import { reactive } from 'vue'
+
 import { ConnectionState } from './CallParticipantModel.js'
 import store from '../../../store/index.js'
 import EmitterMixin from '../../EmitterMixin.js'
@@ -30,14 +32,14 @@ export default function LocalCallParticipantModel() {
 
 	this._superEmitterMixin()
 
-	this.attributes = {
+	this.attributes = reactive({
 		peerId: null,
 		peer: null,
 		screenPeer: null,
 		guestName: null,
 		peerNeeded: false,
 		connectionState: null,
-	}
+	})
 
 	this._handleForcedMuteBound = this._handleForcedMute.bind(this)
 	this._handleExtendedIceConnectionStateChangeBound = this._handleExtendedIceConnectionStateChange.bind(this)

src/utils/webrtc/models/LocalMediaModel.js

@@ -19,6 +19,8 @@
  *
  */
 
+import { reactive } from 'vue'
+
 import { VIRTUAL_BACKGROUND } from '../../../constants.js'
 import BrowserStorage from '../../../services/BrowserStorage.js'
 import store from '../../../store/index.js'
@@ -31,7 +33,7 @@ export default function LocalMediaModel() {
 
 	this._superEmitterMixin()
 
-	this.attributes = {
+	this.attributes = reactive({
 		localStreamRequestVideoError: null,
 		localStream: null,
 		audioAvailable: false,
@@ -50,7 +52,7 @@ export default function LocalMediaModel() {
 		localScreen: null,
 		token: '',
 		raisedHand: false,
-	}
+	})
 
 	this._handleLocalStreamRequestedBound = this._handleLocalStreamRequested.bind(this)
 	this._handleLocalStreamBound = this._handleLocalStream.bind(this)