Working javascript modules

web/static/js/main.js

@@ -1,18 +1,27 @@
-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) => {
+    // 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
@@ -30,19 +39,19 @@ window.addEventListener("keydown", (event) => {
             viewer.play();
             break;
         }
-});
+    });
 
-// Create viewer counter
-const viewerCounter = new ViewerCounter(
+    // Create viewer counter
+    const viewerCounter = new ViewerCounter(
         document.getElementById("connected-people"),
         stream,
-);
-viewerCounter.regularUpdate(ViewersCounterRefreshPeriod);
+    );
+    viewerCounter.regularUpdate(viewersCounterRefreshPeriod);
 
-// Side widget toggler
-const sideWidgetToggle = document.getElementById("sideWidgetToggle");
-const sideWidget = document.getElementById("sideWidget");
-if (sideWidgetToggle !== null && sideWidget !== null) {
+    // 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") {
@@ -53,13 +62,14 @@ if (sideWidgetToggle !== null && sideWidget !== null) {
                 sideWidgetToggle.textContent = "«";
             }
         });
-}
+    }
 
-// Video quality toggler
-document.getElementById("quality").addEventListener("change", (event) => {
+    // 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
-});
+    });
+}

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}}