Merge pull request #1969 from nextcloud/update-videoview-on-ice-disconnected-failed-with-mcu

Update VideoView on ICE disconnected/failed with MCU

3 files changed, 36 insertions, 22 deletions

diff --git a/css/video.scss b/css/video.scss
index e858a7c77..8a0d909a4 100644
--- a/css/video.scss
+++ b/css/video.scss
@@ -60,6 +60,13 @@ video {
 	filter: none;
 }
 
+#videos .videoContainer.not-connected {
+	video,
+	.avatar {
+		opacity: 0.5;
+	}
+}
+
 #videos .videoContainer:not(.promoted) video {
 	max-height: 200px;
 	max-width: 100%;
diff --git a/js/views/videoview.js b/js/views/videoview.js
index 21340d01d..64db0196d 100644
--- a/js/views/videoview.js
+++ b/js/views/videoview.js
@@ -80,8 +80,9 @@
 
 			this.render();
 
+			this.$el.addClass('not-connected');
+
 			this.getUI('avatar').addClass('icon-loading');
-			this.getUI('avatar').css('opacity', '0.5');
 
 			this.getUI('hideRemoteVideoButton').attr('data-original-title', t('spreed', 'Disable video'));
 			this.getUI('hideRemoteVideoButton').addClass('hidden');
@@ -145,7 +146,8 @@
 		setConnectionStatus: function(connectionStatus) {
 			this._connectionStatus = connectionStatus;
 
-			this.getUI('avatar').removeClass('icon-loading');
+			this.$el.addClass('not-connected');
+
 			this.getUI('iceFailedIndicator').addClass('not-failed');
 
 			if (connectionStatus === ConnectionStatus.CHECKING ||
@@ -156,9 +158,11 @@
 				return;
 			}
 
+			this.getUI('avatar').removeClass('icon-loading');
+
 			if (connectionStatus === ConnectionStatus.CONNECTED ||
 					connectionStatus === ConnectionStatus.COMPLETED) {
-				this.getUI('avatar').css('opacity', '1');
+				this.$el.removeClass('not-connected');
 
 				return;
 			}
diff --git a/js/webrtc.js b/js/webrtc.js
index ad73e5cab..3049ff7d8 100644
--- a/js/webrtc.js
+++ b/js/webrtc.js
@@ -539,37 +539,40 @@ var spreedPeerConnectionTable = [];
 						case 'disconnected':
 							console.log('Disconnected.');
 
-							if (!signaling.hasFeature("mcu")) {
-								// ICE failures will be handled in "iceFailed"
-								// below for MCU installations.
-								videoView.setConnectionStatus(OCA.Talk.Views.VideoView.ConnectionStatus.DISCONNECTED);
+							videoView.setConnectionStatus(OCA.Talk.Views.VideoView.ConnectionStatus.DISCONNECTED);
+
+							setTimeout(function() {
+								if (peer.pc.iceConnectionState !== 'disconnected') {
+									return;
+								}
+
+								videoView.setConnectionStatus(OCA.Talk.Views.VideoView.ConnectionStatus.DISCONNECTED_LONG);
+
+								if (!signaling.hasFeature("mcu")) {
+									// ICE failures will be handled in "iceFailed"
+									// below for MCU installations.
 
-								setTimeout(function() {
 									// If the peer is still disconnected after 5 seconds we try ICE restart.
-									if(peer.pc.iceConnectionState === 'disconnected') {
-										videoView.setConnectionStatus(OCA.Talk.Views.VideoView.ConnectionStatus.DISCONNECTED_LONG);
-
-										if (spreedPeerConnectionTable[peer.id] < 5) {
-											if (peer.pc.localDescription.type === 'offer' &&
-												peer.pc.signalingState === 'stable') {
-												spreedPeerConnectionTable[peer.id] ++;
-												console.log('ICE restart.');
-												peer.icerestart();
-											}
+									if (spreedPeerConnectionTable[peer.id] < 5) {
+										if (peer.pc.localDescription.type === 'offer' &&
+											peer.pc.signalingState === 'stable') {
+											spreedPeerConnectionTable[peer.id] ++;
+											console.log('ICE restart.');
+											peer.icerestart();
 										}
 									}
-								}, 5000);
-							}
+								}
+							}, 5000);
 							break;
 						case 'failed':
 							console.log('Connection failed.');
 
+							videoView.setConnectionStatus(OCA.Talk.Views.VideoView.ConnectionStatus.FAILED);
+
 							if (!signaling.hasFeature("mcu")) {
 								// ICE failures will be handled in "iceFailed"
 								// below for MCU installations.
 								if (spreedPeerConnectionTable[peer.id] < 5) {
-									videoView.setConnectionStatus(OCA.Talk.Views.VideoView.ConnectionStatus.FAILED);
-
 									if (peer.pc.localDescription.type === 'offer' &&
 										peer.pc.signalingState === 'stable') {
 										spreedPeerConnectionTable[peer.id] ++;