From 1407a48a6c02b197ef167affc342c2cd6a8f7f2e Mon Sep 17 00:00:00 2001 From: DorraJaouad Date: Wed, 3 Apr 2024 18:19:51 +0200 Subject: [PATCH 1/2] chore: remove external objects from component data Signed-off-by: DorraJaouad --- src/components/CallView/CallView.vue | 6 +++--- src/components/MediaSettings/MediaSettings.vue | 2 +- src/components/TopBar/TopBar.vue | 6 ++++-- src/components/TopBar/TopBarMediaControls.vue | 2 +- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue index d81aa5ccfa9..80719e0212e 100644 --- a/src/components/CallView/CallView.vue +++ b/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: () => {}, diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue index 63ef9a92099..a366b9c258e 100644 --- a/src/components/MediaSettings/MediaSettings.vue +++ b/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, diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index d8ace74e134..f1e8a854336 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -206,14 +206,16 @@ export default { setup() { useGetParticipants() + return { + localCallParticipantModel, + localMediaModel, + } }, data: () => { return { unreadNotificationHandle: null, showBreakoutRoomsEditor: false, - localCallParticipantModel, - localMediaModel, } }, diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue index 328cd99abb1..e1a44571fe7 100644 --- a/src/components/TopBar/TopBarMediaControls.vue +++ b/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, From 853249c2f581349efd82c603feb1c9bdf5cdc44c Mon Sep 17 00:00:00 2001 From: DorraJaouad Date: Thu, 4 Apr 2024 12:47:27 +0200 Subject: [PATCH 2/2] chore: add reactivity to webrtc utils Signed-off-by: DorraJaouad --- src/components/CallView/CallView.vue | 2 +- src/components/TopBar/TopBarMenu.vue | 2 +- src/utils/webrtc/SentVideoQualityThrottler.js | 6 +++--- src/utils/webrtc/SpeakingStatusHandler.js | 2 +- src/utils/webrtc/analyzers/CallAnalyzer.js | 6 ++++-- .../webrtc/models/CallParticipantCollection.js | 15 +++++++++------ .../webrtc/models/LocalCallParticipantModel.js | 6 ++++-- src/utils/webrtc/models/LocalMediaModel.js | 6 ++++-- 8 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue index 80719e0212e..19e8b43f6a5 100644 --- a/src/components/CallView/CallView.vue +++ b/src/components/CallView/CallView.vue @@ -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() { diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue index ddbe4e6bba0..577f1dfc5e2 100644 --- a/src/components/TopBar/TopBarMenu.vue +++ b/src/components/TopBar/TopBarMenu.vue @@ -389,7 +389,7 @@ export default { methods: { forceMuteOthers() { - callParticipantCollection.callParticipantModels.forEach(callParticipantModel => { + callParticipantCollection.callParticipantModels.value.forEach(callParticipantModel => { callParticipantModel.forceMute() }) }, diff --git a/src/utils/webrtc/SentVideoQualityThrottler.js b/src/utils/webrtc/SentVideoQualityThrottler.js index 7462a366aa7..916ab8e451b 100644 --- a/src/utils/webrtc/SentVideoQualityThrottler.js +++ b/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++ } diff --git a/src/utils/webrtc/SpeakingStatusHandler.js b/src/utils/webrtc/SpeakingStatusHandler.js index 63bb40e0af2..fd75ecc6b24 100644 --- a/src/utils/webrtc/SpeakingStatusHandler.js +++ b/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) }) diff --git a/src/utils/webrtc/analyzers/CallAnalyzer.js b/src/utils/webrtc/analyzers/CallAnalyzer.js index cf63d18bb11..839236c9aff 100644 --- a/src/utils/webrtc/analyzers/CallAnalyzer.js +++ b/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 diff --git a/src/utils/webrtc/models/CallParticipantCollection.js b/src/utils/webrtc/models/CallParticipantCollection.js index c2779806ef9..7fa1a1f28fb 100644 --- a/src/utils/webrtc/models/CallParticipantCollection.js +++ b/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,7 +31,8 @@ export default function CallParticipantCollection() { this._superEmitterMixin() - this.callParticipantModels = [] + // FIXME: use reactive instead of ref after migration to vue 3 + this.callParticipantModels = ref([]) } @@ -37,7 +40,7 @@ CallParticipantCollection.prototype = { add(options) { const callParticipantModel = new CallParticipantModel(options) - this.callParticipantModels.push(callParticipantModel) + this.callParticipantModels.value.push(callParticipantModel) this._trigger('add', [callParticipantModel]) @@ -45,19 +48,19 @@ CallParticipantCollection.prototype = { }, 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]) diff --git a/src/utils/webrtc/models/LocalCallParticipantModel.js b/src/utils/webrtc/models/LocalCallParticipantModel.js index 9ad233d80ac..b7fd0323549 100644 --- a/src/utils/webrtc/models/LocalCallParticipantModel.js +++ b/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) diff --git a/src/utils/webrtc/models/LocalMediaModel.js b/src/utils/webrtc/models/LocalMediaModel.js index d8bb2eb224a..044654612b7 100644 --- a/src/utils/webrtc/models/LocalMediaModel.js +++ b/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)