Handle audio and video available events in CallParticipantModel

Before, before the connection was established, "audio available" was
true, so the icon was not shown. Now "audio available" is explicitly
"undefined" before the connection is established, which also hides the
icon.

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

4 files changed, 53 insertions, 33 deletions

diff --git a/css/video.scss b/css/video.scss
index e91bc9e64..0ebf3eb80 100644
--- a/css/video.scss
+++ b/css/video.scss
@@ -335,6 +335,7 @@
 	}
 
 	.muteIndicator.audio-on,
+	.muteIndicator:not(.audio-on):not(.audio-off),
 	.screensharingIndicator.screen-off,
 	.iceFailedIndicator.not-failed {
 		display: none;
diff --git a/js/models/callparticipantmodel.js b/js/models/callparticipantmodel.js
index 572e9402d..b20df1d31 100644
--- a/js/models/callparticipantmodel.js
+++ b/js/models/callparticipantmodel.js
@@ -48,6 +48,8 @@
 			userId: undefined,
 			name: undefined,
 			connectionState: ConnectionState.NEW,
+			audioAvailable: undefined,
+			videoAvailable: undefined,
 		},
 
 		sync: function(method, model, options) {
@@ -59,10 +61,14 @@
 
 			this._handlePeerStreamAddedBound = this._handlePeerStreamAdded.bind(this);
 			this._handleNickBound = this._handleNick.bind(this);
+			this._handleMuteBound = this._handleMute.bind(this);
+			this._handleUnmuteBound = this._handleUnmute.bind(this);
 			this._handleExtendedIceConnectionStateChangeBound = this._handleExtendedIceConnectionStateChange.bind(this);
 
 			this._webRtc.on('peerStreamAdded', this._handlePeerStreamAddedBound);
 			this._webRtc.on('nick', this._handleNickBound);
+			this._webRtc.on('mute', this._handleMuteBound);
+			this._webRtc.on('unmute', this._handleUnmuteBound);
 		},
 
 		_handlePeerStreamAdded: function(peer) {
@@ -85,6 +91,30 @@
 			this.set('name', data.name || null);
 		},
 
+		_handleMute: function(data) {
+			if (!this._peer || this._peer.id !== data.id) {
+				return;
+			}
+
+			if (data.name === 'video') {
+				this.set('videoAvailable', false);
+			} else {
+				this.set('audioAvailable', false);
+			}
+		},
+
+		_handleUnmute: function(data) {
+			if (!this._peer || this._peer.id !== data.id) {
+				return;
+			}
+
+			if (data.name === 'video') {
+				this.set('videoAvailable', true);
+			} else {
+				this.set('audioAvailable', true);
+			}
+		},
+
 		setPeer: function(peer) {
 			if (peer && this.get('peerId') !== peer.id) {
 				console.warn('Mismatch between stored peer ID and ID of given peer: ', this.get('peerId'), peer.id);
@@ -99,6 +129,8 @@
 			// Special case when the participant has no streams.
 			if (!this._peer) {
 				this.set('connectionState', ConnectionState.COMPLETED);
+				this.set('audioAvailable', false);
+				this.set('videoAvailable', false);
 
 				return;
 			}
@@ -122,9 +154,13 @@
 			switch (extendedIceConnectionState) {
 				case 'new':
 					this.set('connectionState', ConnectionState.NEW);
+					this.set('audioAvailable', undefined);
+					this.set('videoAvailable', undefined);
 					break;
 				case 'checking':
 					this.set('connectionState', ConnectionState.CHECKING);
+					this.set('audioAvailable', undefined);
+					this.set('videoAvailable', undefined);
 					break;
 				case 'connected':
 					this.set('connectionState', ConnectionState.CONNECTED);
diff --git a/js/views/videoview.js b/js/views/videoview.js
index 531e17852..c4b9d9d9b 100644
--- a/js/views/videoview.js
+++ b/js/views/videoview.js
@@ -75,6 +75,8 @@
 			'change:name': function(model, name) {
 				this._setParticipant(this.model.get('userId'), name);
 			},
+			'change:audioAvailable': '_setAudioAvailable',
+			'change:videoAvailable': '_setVideoAvailable',
 		},
 
 		initialize: function() {
@@ -88,13 +90,14 @@
 
 		onRender: function() {
 			this.getUI('hideRemoteVideoButton').attr('data-original-title', t('spreed', 'Disable video'));
-			this.getUI('hideRemoteVideoButton').addClass('hidden');
 
 			this.getUI('screenSharingIndicator').attr('data-original-title', t('spreed', 'Show screen'));
 
 			// Match current model state.
 			this._setConnectionState(this.model.get('connectionState'));
 			this._setParticipant(this.model.get('userId'), this.model.get('name'));
+			this._setAudioAvailable(this.model, this.model.get('audioAvailable'));
+			this._setVideoAvailable(this.model, this.model.get('videoAvailable'));
 
 			this.getUI('hideRemoteVideoButton').tooltip({
 				placement: 'top',
@@ -202,7 +205,17 @@
 			this.getUI('audio').addClass('hidden');
 		},
 
-		setAudioAvailable: function(audioAvailable) {
+		_setAudioAvailable: function(model, audioAvailable) {
+			if (audioAvailable === undefined) {
+				this.getUI('muteIndicator')
+						.removeClass('audio-on')
+						.removeClass('audio-off');
+
+				OCA.SpreedMe.speakers.updateVideoContainerDummyIfLatestSpeaker(this.model.get('peerId'));
+
+				return;
+			}
+
 			if (!audioAvailable) {
 				this.getUI('muteIndicator')
 						.removeClass('audio-on')
@@ -249,7 +262,7 @@
 			this.getUI('video').addClass('hidden');
 		},
 
-		setVideoAvailable: function(videoAvailable) {
+		_setVideoAvailable: function(model, videoAvailable) {
 			if (!videoAvailable) {
 				this.getUI('avatarContainer').removeClass('hidden');
 				this.getUI('video').addClass('hidden');
diff --git a/js/webrtc.js b/js/webrtc.js
index 6c7b85c95..e91a4d635 100644
--- a/js/webrtc.js
+++ b/js/webrtc.js
@@ -494,8 +494,6 @@ var spreedPeerConnectionTable = [];
 				if ((signaling.hasFeature('mcu') && user && !userHasStreams(user)) ||
 						(!signaling.hasFeature('mcu') && user && !userHasStreams(user) && !hasLocalMedia)) {
 					callParticipantModel.setPeer(null);
-					videoView.setAudioAvailable(false);
-					videoView.setVideoAvailable(false);
 				}
 
 				videoView.setScreenAvailable(!!spreedListofSharedScreens[id]);
@@ -1339,34 +1337,6 @@ var spreedPeerConnectionTable = [];
 				guestNamesTable[data.id] = data.name || null;
 			}
 		});
-
-		// Peer is muted
-		OCA.SpreedMe.webrtc.on('mute', function(data) {
-			var videoView = OCA.SpreedMe.videos.videoViews[data.id];
-			if (!videoView) {
-				return;
-			}
-
-			if (data.name === 'video') {
-				videoView.setVideoAvailable(false);
-			} else {
-				videoView.setAudioAvailable(false);
-			}
-		});
-
-		// Peer is umuted
-		OCA.SpreedMe.webrtc.on('unmute', function(data) {
-			var videoView = OCA.SpreedMe.videos.videoViews[data.id];
-			if (!videoView) {
-				return;
-			}
-
-			if (data.name === 'video') {
-				videoView.setVideoAvailable(true);
-			} else {
-				videoView.setAudioAvailable(true);
-			}
-		});
 	}
 
 	OCA.SpreedMe.initWebRTC = initWebRTC;