Extract function to update data based on CallViewParticipantModels

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

src/components/CallView/CallView.vue

@@ -142,6 +142,36 @@ export default {
 		},
 
 		callParticipantModels: function(models) {
+			this.updateDataFromCallParticipantModels(models)
+		},
+
+		'speakers': function() {
+			this._setPromotedParticipant()
+		},
+
+		'screenSharingActive': function() {
+			this._setPromotedParticipant()
+		},
+
+		'screens': function() {
+			this._setScreenVisible()
+		},
+
+	},
+
+	methods: {
+
+		/**
+		 * Updates data properties that depend on the CallParticipantModels.
+		 *
+		 * The data contains some properties that can not be dynamically
+		 * computed but that depend on the current CallParticipantModels, so
+		 * this function adds and removes elements and watchers as needed based
+		 * on the given CallParticipantModels.
+		 *
+		 * @param {Array} models the array of CallParticipantModels
+		 */
+		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)
 
@@ -192,22 +222,6 @@ export default {
 			})
 		},
 
-		'speakers': function() {
-			this._setPromotedParticipant()
-		},
-
-		'screenSharingActive': function() {
-			this._setPromotedParticipant()
-		},
-
-		'screens': function() {
-			this._setScreenVisible()
-		},
-
-	},
-
-	methods: {
-
 		_setSpeaking(peerId, speaking) {
 			if (speaking) {
 				// Move the speaker to the first element of the list