From 0b3fb87fa2006d5603c701e18ce342f73d4da790 Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Tue, 20 Oct 2020 21:59:07 +0200
Subject: [PATCH] Working javascript modules

---
 web/static/js/main.js    | 122 +++++++++++++++++++++------------------
 web/template/player.html |  15 +++--
 2 files changed, 73 insertions(+), 64 deletions(-)

diff --git a/web/static/js/main.js b/web/static/js/main.js
index e20bc3d..365731a 100644
--- a/web/static/js/main.js
+++ b/web/static/js/main.js
@@ -1,65 +1,75 @@
-import { GSWebSocket } from "./modules/websocket.js";
+import { GsWebSocket } from "./modules/websocket.js";
 import { ViewerCounter } from "./modules/viewerCounter.js";
 
-// Some variables that need to be fixed by web page
-const ViewersCounterRefreshPeriod = 1000;
-const stream = "demo";
-let quality = "source";
+/**
+ * Initialize viewer page
+ * 
+ * @param {String} stream 
+ * @param {List} stunServers 
+ * @param {Number} viewersCounterRefreshPeriod 
+ */
+export function initViewerPage(stream, stunServers, viewersCounterRefreshPeriod) {
+    // Default quality
+    let quality = "source";
 
-// Create WebSocket
-const s = new GSWebSocket();
-s.open();
+    // Create WebSocket
+    const s = new GsWebSocket();
+    s.open();
 
-// Register keyboard events
-const viewer = document.getElementById("viewer");
-window.addEventListener("keydown", (event) => {
-    switch (event.key) {
-    case "f":
-        // F key put player in fullscreen
-        if (document.fullscreenElement !== null) {
-            document.exitFullscreen();
-        } else {
-            viewer.requestFullscreen();
+    // Create WebRTC
+    // FIXME startPeerConnection() with stunServers
+
+    // Register keyboard events
+    const viewer = document.getElementById("viewer");
+    window.addEventListener("keydown", (event) => {
+        switch (event.key) {
+        case "f":
+            // F key put player in fullscreen
+            if (document.fullscreenElement !== null) {
+                document.exitFullscreen();
+            } else {
+                viewer.requestFullscreen();
+            }
+            break;
+        case "m":
+        case " ":
+            // M and space key mute player
+            viewer.muted = !viewer.muted;
+            event.preventDefault();
+            viewer.play();
+            break;
         }
-        break;
-    case "m":
-    case " ":
-        // M and space key mute player
-        viewer.muted = !viewer.muted;
-        event.preventDefault();
-        viewer.play();
-        break;
+    });
+
+    // Create viewer counter
+    const viewerCounter = new ViewerCounter(
+        document.getElementById("connected-people"),
+        stream,
+    );
+    viewerCounter.regularUpdate(viewersCounterRefreshPeriod);
+
+    // Side widget toggler
+    const sideWidgetToggle = document.getElementById("sideWidgetToggle");
+    const sideWidget = document.getElementById("sideWidget");
+    if (sideWidgetToggle !== null && sideWidget !== null) {
+        // On click, toggle side widget visibility
+        sideWidgetToggle.addEventListener("click", function () {
+            if (sideWidget.style.display === "none") {
+                sideWidget.style.display = "block";
+                sideWidgetToggle.textContent = "»";
+            } else {
+                sideWidget.style.display = "none";
+                sideWidgetToggle.textContent = "«";
+            }
+        });
     }
-});
 
-// Create viewer counter
-const viewerCounter = new ViewerCounter(
-    document.getElementById("connected-people"),
-    stream,
-);
-viewerCounter.regularUpdate(ViewersCounterRefreshPeriod);
+    // Video quality toggler
+    document.getElementById("quality").addEventListener("change", (event) => {
+        quality = event.target.value;
+        console.log(`Stream quality changed to ${quality}`);
 
-// Side widget toggler
-const sideWidgetToggle = document.getElementById("sideWidgetToggle");
-const sideWidget = document.getElementById("sideWidget");
-if (sideWidgetToggle !== null && sideWidget !== null) {
-    // On click, toggle side widget visibility
-    sideWidgetToggle.addEventListener("click", function () {
-        if (sideWidget.style.display === "none") {
-            sideWidget.style.display = "block";
-            sideWidgetToggle.textContent = "»";
-        } else {
-            sideWidget.style.display = "none";
-            sideWidgetToggle.textContent = "«";
-        }
-    });   
+        // Restart the connection with a new quality
+        // FIXME
+    });
 }
-
-// Video quality toggler
-document.getElementById("quality").addEventListener("change", (event) => {
-    quality = event.target.value;
-    console.log(`Stream quality changed to ${quality}`);
-
-    // Restart the connection with a new quality
-    // FIXME
-});
diff --git a/web/template/player.html b/web/template/player.html
index 20d6125..61cd7b1 100644
--- a/web/template/player.html
+++ b/web/template/player.html
@@ -34,18 +34,17 @@
   {{end}}
 </div>
 
-<script type="module" src="/static/js/main.js"></script>
-<script>
+<script type="module">
+  import { initViewerPage } from "/static/js/main.js";
+
+  // Some variables that need to be fixed by web page
+  const viewersCounterRefreshPeriod = Number("{{.Cfg.ViewersCounterRefreshPeriod}}");
+  const stream = "{{.Path}}";
   const stunServers = [
     {{range $id, $value := .Cfg.STUNServers}}
     "{{$value}}",
     {{end}}
   ]
-  startPeerConnection()
-
-  // Wait a bit before pulling viewers counter for the first time
-  setTimeout(() => {
-      refreshViewersCounter("{{.Path}}", {{.Cfg.ViewersCounterRefreshPeriod}})
-  }, 1000)
+  initViewerPage(stream, stunServers, viewersCounterRefreshPeriod)
 </script>
 {{end}}