Working javascript modules

web/static/js/main.js

@@ -1,15 +1,24 @@
-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;
+ * Initialize viewer page
-const stream = "demo";
+ * 
+ * @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();
+    const s = new GsWebSocket();
     s.open();
 
+    // Create WebRTC
+    // FIXME startPeerConnection() with stunServers
+
     // Register keyboard events
     const viewer = document.getElementById("viewer");
     window.addEventListener("keydown", (event) => {
@@ -37,7 +46,7 @@ const viewerCounter = new ViewerCounter(
         document.getElementById("connected-people"),
         stream,
     );
-viewerCounter.regularUpdate(ViewersCounterRefreshPeriod);
+    viewerCounter.regularUpdate(viewersCounterRefreshPeriod);
 
     // Side widget toggler
     const sideWidgetToggle = document.getElementById("sideWidgetToggle");
@@ -63,3 +72,4 @@ document.getElementById("quality").addEventListener("change", (event) => {
         // 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 type="module">
-<script>
+  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()
+  initViewerPage(stream, stunServers, viewersCounterRefreshPeriod)
-
-  // Wait a bit before pulling viewers counter for the first time
-  setTimeout(() => {
-      refreshViewersCounter("{{.Path}}", {{.Cfg.ViewersCounterRefreshPeriod}})
-  }, 1000)
 </script>
 {{end}}