From dbd87895ba5ffe608cf646312c8d49ef9bfa7b65 Mon Sep 17 00:00:00 2001
From: Juliusz Chroboczek <jch@irif.fr>
Date: Thu, 11 Jun 2020 19:33:39 +0200
Subject: [PATCH] Add visual feedback for connection status.

---
 static/sfu.css |  4 ++++
 static/sfu.js  | 23 +++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/static/sfu.css b/static/sfu.css
index c5c40f2..930c5a0 100644
--- a/static/sfu.css
+++ b/static/sfu.css
@@ -196,6 +196,10 @@ h1 {
     width: 100%;
 }
 
+.media-failed {
+    opacity: 0.7;
+}
+
 .label {
     text-align: center;
     height: 2em;
diff --git a/static/sfu.js b/static/sfu.js
index 554c1fa..d2b48ed 100644
--- a/static/sfu.js
+++ b/static/sfu.js
@@ -530,6 +530,7 @@ function setMedia(id) {
 
     media.srcObject = c.stream;
     setLabel(id);
+    setMediaStatus(id, false);
 
     resizePeers();
 }
@@ -545,6 +546,19 @@ function delMedia(id) {
     resizePeers();
 }
 
+function setMediaStatus(id, good) {
+    let media = document.getElementById('media-' + id);
+    if(!media) {
+        console.warn('Setting status of unknown media.');
+        return;
+    }
+    if(good)
+        media.classList.remove('media-failed');
+    else
+        media.classList.add('media-failed');
+}
+
+
 function setLabel(id, fallback) {
     let label = document.getElementById('label-' + id);
     if(!label)
@@ -725,6 +739,12 @@ async function gotOffer(id, labels, offer) {
                  });
         };
 
+        pc.oniceconnectionstatechange = e => {
+            setMediaStatus(id,
+                           pc.iceConnectionState === 'connected' ||
+                           pc.iceConnectionState === 'completed');
+        }
+
         c.pc.ontrack = function(e) {
             let label = e.transceiver && c.labelsByMid[e.transceiver.mid];
             if(label) {
@@ -1178,6 +1198,9 @@ async function newUpStream(id) {
     };
 
     pc.oniceconnectionstatechange = e => {
+        setMediaStatus(id,
+                       pc.iceConnectionState === 'connected' ||
+                       pc.iceConnectionState === 'completed');
         if(pc.iceConnectionState === 'failed') {
             try {
                 pc.restartIce();