From 881c78f57638cc8909addb8cf3fe7fa14110b883 Mon Sep 17 00:00:00 2001
From: Yohann D'ANELLO <yohann.danello@gmail.com>
Date: Tue, 29 Sep 2020 18:25:38 +0200
Subject: [PATCH] Refresh viewer counter every 20 seconds

---
 web/static/js/viewersCounter.js | 18 ++++++++++++++++++
 web/template/viewer.html        |  8 ++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 web/static/js/viewersCounter.js

diff --git a/web/static/js/viewersCounter.js b/web/static/js/viewersCounter.js
new file mode 100644
index 0000000..a8311a3
--- /dev/null
+++ b/web/static/js/viewersCounter.js
@@ -0,0 +1,18 @@
+function refreshViewersCounter() {
+    let xhr = new XMLHttpRequest()
+    xhr.open("GET", "/_stats/", true)
+    xhr.onload = function () {
+        console.log(xhr.response)
+        if (xhr.status === 200) {
+            let data = JSON.parse(xhr.response)
+            document.getElementById("connected-people").innerText = data.ConnectedViewers
+        }
+        else
+            console.log("WARNING: status code " + xhr.status + " was returned while fetching connected viewers.")
+    }
+    xhr.send()
+
+    setTimeout(refreshViewersCounter, 20000)
+}
+
+refreshViewersCounter()
diff --git a/web/template/viewer.html b/web/template/viewer.html
index de38b13..b4b8f4f 100644
--- a/web/template/viewer.html
+++ b/web/template/viewer.html
@@ -17,6 +17,13 @@
       </svg>
       <code>rtmps://{{.Cfg.Hostname}}:1935/play/{{.Path}}</code>-->
 
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+        <g fill="#d7d7d7">
+          <path d="M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z"/>
+          <circle cx="10" cy="5.5" r="4.5"/>
+        </g>
+      </svg> <span id="connected-people">0</span>
+
       <svg id="connectionIndicator" width="1em" height="1em" viewBox="0 0 16 16" fill="#dc3545" xmlns="http://www.w3.org/2000/svg">
         <rect width="4" height="5" x="1" y="10" rx="1"/>
         <rect width="4" height="9" x="6" y="6" rx="1"/>
@@ -36,6 +43,7 @@
 
 <script src="/static/js/sideWidget.js"></script>
 <script src="/static/js/viewer.js"></script>
+<script src="/static/js/viewersCounter.js"></script>
 <script>
   const stunServers = [
     {{range $id, $value := .Cfg.STUNServers}}