Chat API endpoint

pkg/controller/chat/chat.go

@@ -80,7 +80,9 @@ func Landing() http.HandlerFunc {
 			return
 		}
 
-		var vars = map[string]interface{}{}
+		var vars = map[string]interface{}{
+			"ChatAPI": strings.TrimSuffix(config.Current.BareRTC.URL, "/") + "/api/statistics",
+		}
 		if err := tmpl.Execute(w, r, vars); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return

web/templates/chat.html

@@ -33,6 +33,12 @@
             to watch yours, and you can open one or multiple videos broadcasted by the other chatters.
         </p>
 
+        <div class="notification is-success is-light" id="chatStatsBanner" style="display: none">
+            <span id="usersOnline"></span>
+            <a id="whoLink" href="#" style="visibility: hidden">Who?</a>
+            <span id="whoList" style="visibility: hidden"></span>
+        </div>
+
         <p>
             This chat room is currently ready for <strong>beta</strong> testing. It's a very new app built
             specifically for {{PrettyTitle}} and may still be lacking in some features and may be rough around
@@ -88,4 +94,40 @@
     </div>
 
 </div>
+
+<script>
+window.addEventListener("DOMContentLoaded", () => {
+    let url = "{{.ChatAPI}}",
+        $banner = document.querySelector("#chatStatsBanner"),
+        $whoLink = document.querySelector("#whoLink"),
+        $whoList = document.querySelector("#whoList"),
+        $usersOnline = document.querySelector("#usersOnline");
+
+    $whoLink.addEventListener("click", (e) => {
+        e.preventDefault();
+        $whoLink.style.display = "none";
+        $whoList.style.visibility = "visible";
+    });
+
+    fetch(url, {
+        mode: 'cors',
+        cache: 'no-cache',
+    }).then(resp => resp.json()).then(result => {
+        $banner.style.display = "block";
+        console.log(result);
+        let people = result.UserCount === 1 ? 'person' : 'people';
+        let isAre = result.UserCount === 1 ? 'is' : 'are';
+        $usersOnline.innerHTML = `There ${isAre} currently <strong>${result.UserCount}</strong> ${people}</span> in the chat room`;
+        $whoList.innerHTML = result.Usernames.join(", ");
+
+        // Show the "Who?" link if there's anybody.
+        if (result.UserCount > 0) {
+            $usersOnline.innerHTML += ":";
+            $whoLink.style.visibility = "visible";
+        } else {
+            $usersOnline.innerHTML += ".";
+        }
+    }).catch(console.error);
+});
+</script>
 {{end}}