show connection status

6 files changed, 46 insertions, 16 deletions

diff --git a/client-web/source/user/local.ts b/client-web/source/user/local.ts
index a1d43bd..a2a2908 100644
--- a/client-web/source/user/local.ts
+++ b/client-web/source/user/local.ts
@@ -21,6 +21,7 @@ export class LocalUser extends User {
     constructor(room: Room, id: number) {
         super(room, id)
         this.el.classList.add("local")
+        this.status_el.textContent = "Local"
         this.name = PREFS.username
         log("usermodel", `added local user: ${this.display_name}`)
         this.add_initial_tracks()
diff --git a/client-web/source/user/mod.ts b/client-web/source/user/mod.ts
index 67b3cd5..267c216 100644
--- a/client-web/source/user/mod.ts
+++ b/client-web/source/user/mod.ts
@@ -15,6 +15,7 @@ export class User {
     get display_name() { return this.name ?? "Unknown" }
 
     name_el = e("span", {}, this.display_name)
+    status_el = e("span", { class: ["connection-status", "status-neutral"] }, "")
     stats_el = e("pre", {})
     el = e("div", { class: "user" })
 
@@ -22,8 +23,8 @@ export class User {
         const info_el = e("div", { class: "info" })
         this.name_el.textContent = this.display_name
         this.name_el.classList.add("name")
-        info_el.append(this.name_el, this.stats_el)
+        info_el.append(this.name_el, this.stats_el, this.status_el)
         this.el.append(info_el)
         room.element.append(this.el)
     }
-}
\ No newline at end of file
+}
diff --git a/client-web/source/user/remote.ts b/client-web/source/user/remote.ts
index b1b7fb4..bfae1c5 100644
--- a/client-web/source/user/remote.ts
+++ b/client-web/source/user/remote.ts
@@ -32,7 +32,7 @@ export class RemoteUser extends User {
             if (!ev.candidate) return
             room.signaling.send_relay({ ice_candidate: ev.candidate.toJSON() }, this.id)
             log("webrtc", `ICE candidate set`, ev.candidate)
-            this.update_stats()
+            this.update_status()
         }
         this.pc.ontrack = ev => {
             const t = ev.track
@@ -45,7 +45,7 @@ export class RemoteUser extends User {
                 ev.transceiver.stop()
             })
             log("media", `remote track: ${this.display_name}`, t)
-            this.update_stats()
+            this.update_status()
         }
         this.pc.ondatachannel = ({ channel }) => {
             const id = channel.label
@@ -56,23 +56,23 @@ export class RemoteUser extends User {
                 channel.close()
             })
             log("media", `remote channel: ${this.display_name}`, channel)
-            this.update_stats()
+            this.update_status()
         }
         this.pc.onnegotiationneeded = () => {
             log("webrtc", `negotiation needed: ${this.display_name}`)
             // if (this.pc.signalingState != "stable") return
             this.offer()
-            this.update_stats()
+            this.update_status()
         }
         this.pc.onicecandidateerror = () => {
             log({ scope: "webrtc", warn: true }, "ICE error")
-            this.update_stats()
+            this.update_status()
         }
-        this.pc.oniceconnectionstatechange = () => { this.update_stats() }
-        this.pc.onicegatheringstatechange = () => { this.update_stats() }
-        this.pc.onsignalingstatechange = () => { this.update_stats() }
-        this.pc.onconnectionstatechange = () => { this.update_stats() }
-        this.update_stats()
+        this.pc.oniceconnectionstatechange = () => { this.update_status() }
+        this.pc.onicegatheringstatechange = () => { this.update_status() }
+        this.pc.onsignalingstatechange = () => { this.update_status() }
+        this.pc.onconnectionstatechange = () => { this.update_status() }
+        this.update_status()
     }
     leave() {
         log("usermodel", `remove remote user: ${this.display_name}`)
@@ -132,7 +132,7 @@ export class RemoteUser extends User {
 
     add_ice_candidate(candidate: RTCIceCandidateInit) {
         this.pc.addIceCandidate(new RTCIceCandidate(candidate))
-        this.update_stats()
+        this.update_status()
     }
     async offer() {
         this.negotiation_busy = true
@@ -162,7 +162,21 @@ export class RemoteUser extends User {
         this.negotiation_busy = false
     }
 
-    async update_stats() {
+    async update_status() {
+
+        const states: { [key in RTCIceConnectionState]: [string, string] } = {
+            new: ["Not connected", "neutral"],
+            checking: ["Checking...", "neutral"],
+            failed: ["Connection failed", "fail"],
+            closed: ["Disconnected", "neutral"],
+            completed: ["Connected", "good"],
+            connected: ["Connected", "good"],
+            disconnected: ["Disconnected", "neutral"]
+        }
+        this.status_el.classList.value = ""
+        this.status_el.classList.add("connection-status", "status-" + states[this.pc.iceConnectionState][1])
+        this.status_el.textContent = states[this.pc.iceConnectionState][0]
+
         if (!PREFS.webrtc_debug) return
         try {
             const stats = await this.pc.getStats()
diff --git a/client-web/style/master.sass b/client-web/style/master.sass
index 0863129..8b82f27 100644
--- a/client-web/style/master.sass
+++ b/client-web/style/master.sass
@@ -14,6 +14,11 @@
 @import url("/assets/font/include.css")
 @import url("/overrides.css")
 
+:root
+    --green: rgb(146, 243, 73)
+    --red: #cf3f3f
+    --textgrey: #bbbbbb
+
 *
     font-family: "Ubuntu", sans-serif
     font-weight: 300
diff --git a/client-web/style/room.sass b/client-web/style/room.sass
index d7ffbf9..92d751d 100644
--- a/client-web/style/room.sass
+++ b/client-web/style/room.sass
@@ -63,3 +63,12 @@
 
 .resource-track>div.audio-active
     border: 2px solid var(--ac-light)
+
+.connection-status
+    font-size: small
+.status-neutral
+    color: var(--textgrey)
+.status-good
+    color: var(--green)
+.status-fail
+    color: var(--red)
diff --git a/client-web/style/watches.sass b/client-web/style/watches.sass
index ee45f5d..4408cb8 100644
--- a/client-web/style/watches.sass
+++ b/client-web/style/watches.sass
@@ -20,7 +20,7 @@
             width: 1em
             height: 1em
             border-radius: 3px
-            background-color: rgb(146, 243, 73)
+            background-color: var(--green)
         span
             display: inline-block
-            color: #bbbbbb
+            color: var(--textgrey)