Disconnect received videos when not needed

src/__mocks__/attachmediastream.js

@@ -0,0 +1,17 @@
+/**
+ * Basic "attachmediastream" implementation without using "webrtc-adapter", as
+ * "browserDetails" is null in unit tests.
+ *
+ * @param {MediaStream} stream the stream to attach
+ * @param {HTMLElement} element the element to attach the stream to
+ * @param {object} options ignored
+ */
+export default function(stream, element, options) {
+	if (!element) {
+		element = document.createElement(options.audio ? 'audio' : 'video')
+	}
+
+	element.srcObject = stream
+
+	return element
+}

src/components/CallView/CallView.vue

@@ -141,6 +141,7 @@ import { loadState } from '@nextcloud/initial-state'
 import Grid from './Grid/Grid'
 import { SIMULCAST } from '../../constants'
 import { localMediaModel, localCallParticipantModel, callParticipantCollection } from '../../utils/webrtc/index'
+import RemoteVideoBlocker from '../../utils/webrtc/RemoteVideoBlocker'
 import { fetchPeers } from '../../services/callsService'
 import { showMessage } from '@nextcloud/dialogs'
 import EmptyCallView from './shared/EmptyCallView'
@@ -212,7 +213,7 @@ export default {
 		callParticipantModelsWithVideo() {
 			return this.callParticipantModels.filter(callParticipantModel => {
 				return callParticipantModel.attributes.videoAvailable
-					&& this.sharedDatas[callParticipantModel.attributes.peerId].videoEnabled
+					&& this.sharedDatas[callParticipantModel.attributes.peerId].remoteVideoBlocker.isVideoEnabled()
 					&& (typeof callParticipantModel.attributes.stream === 'object')
 			})
 		},
@@ -404,15 +405,13 @@ export default {
 
 		callParticipantCollection.on('remove', this._lowerHandWhenParticipantLeaves)
 
-		subscribe('talk:video:toggled', this.handleToggleVideo)
 		subscribe('switch-screen-to-id', this._switchScreenToId)
 	},
 	beforeDestroy() {
 		EventBus.$off('refresh-peer-list', this.debounceFetchPeers)
 
 		callParticipantCollection.off('remove', this._lowerHandWhenParticipantLeaves)
 
-		unsubscribe('talk:video:toggled', this.handleToggleVideo)
 		unsubscribe('switch-screen-to-id', this._switchScreenToId)
 	},
 	methods: {
@@ -454,7 +453,7 @@ export default {
 			addedModels.forEach(addedModel => {
 				const sharedData = {
 					promoted: false,
-					videoEnabled: true,
+					remoteVideoBlocker: new RemoteVideoBlocker(addedModel),
 					screenVisible: false,
 				}
 
@@ -646,11 +645,6 @@ export default {
 			}
 		}, 1500),
 
-		// Toggles videos on and off
-		handleToggleVideo({ peerId, value }) {
-			this.sharedDatas[peerId].videoEnabled = value
-		},
-
 		adjustSimulcastQuality() {
 			this.callParticipantModels.forEach(callParticipantModel => {
 				this.adjustSimulcastQualityForParticipant(callParticipantModel)

src/components/CallView/Grid/Grid.vue

@@ -584,7 +584,11 @@ export default {
 
 		placeholderSharedData() {
 			return {
-				videoEnabled: true,
+				videoEnabled: {
+					isVideoEnabled() {
+						return true
+					},
+				},
 				screenVisible: false,
 			}
 		},