web/static/js/ovenplayer.js

@@ -1,105 +0,0 @@
-import { ViewerCounter } from "./modules/viewerCounter.js";
-
-/**
- * Initialize viewer page
- *
- * @param {String} stream
- * @param {Number} viewersCounterRefreshPeriod
- * @param {String} posterUrl
- */
-export function initViewerPage(stream, viewersCounterRefreshPeriod, posterUrl) {
-    // Create viewer counter
-    const viewerCounter = new ViewerCounter(
-        document.getElementById("connected-people"),
-        stream,
-    );
-    viewerCounter.regularUpdate(viewersCounterRefreshPeriod);
-    viewerCounter.refreshViewersCounter();
-
-    // 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 player
-    let player = OvenPlayer.create("viewer", {
-        title: stream,
-        image: posterUrl,
-        autoStart: true,
-        mute: true,
-        expandFullScreenUI: true,
-        sources: [
-            {
-                "file": "wss://" + window.location.host + "/app/" + stream,
-                "type": "webrtc",
-                "label": " WebRTC - Source"
-            },
-            {
-                "type": "hls",
-                "file": "https://" + window.location.host + "/app/" + stream + "_bypass/playlist.m3u8",
-                "label": " HLS"
-            }
-        ]
-    });
-    player.on("stateChanged", function (data) {
-        if (data.newstate === "loading") {
-            document.getElementById("connectionIndicator").style.fill = '#ffc107'
-        }
-        if (data.newstate === "playing") {
-            document.getElementById("connectionIndicator").style.fill = '#28a745'
-        }
-        if (data.newstate === "idle") {
-            document.getElementById("connectionIndicator").style.fill = '#dc3545'
-        }
-    })
-    player.on("error", function (error) {
-        document.getElementById("connectionIndicator").style.fill = '#dc3545'
-        if (error.code === 501 || error.code === 406) {
-            // Clear messages
-            const errorMsg = document.getElementsByClassName("op-message-text")[0]
-            errorMsg.textContent = ""
-
-            const warningIcon = document.getElementsByClassName("op-message-icon")[0]
-            warningIcon.textContent = ""
-
-            // Reload in 30s
-            setTimeout(function () {
-                player.load()
-            }, 30000)
-        } else {
-            console.log(error);
-        }
-    });
-
-    // Register keyboard events
-    window.addEventListener("keydown", (event) => {
-        switch (event.key) {
-            case "f":
-                // F key put player in fullscreen
-                if (document.fullscreenElement !== null) {
-                    document.exitFullscreen()
-                } else {
-                    document.getElementsByTagName("video")[0].requestFullscreen()
-                }
-                break;
-            case "m":
-            case " ":
-                // M and space key mute player
-                player.setMute(!player.getMute())
-                event.preventDefault()
-                player.play()
-                break;
-        }
-    });
-}

web/template/player.html

@@ -34,13 +34,8 @@
   {{end}}
 </div>
 
-
+<!-- <script type="module">
-<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+  import { initViewerPage } from "/static/js/viewer.js";
-<script src="/static/ovenplayer/ovenplayer.js"></script>
-<script src="/static/js/ovenplayer.js"></script>
-<script type="module">
-  // import { initViewerPage } from "/static/js/viewer.js";
-  import { initViewerPage } from "/static/js/ovenplayer.js";
 
   // Some variables that need to be fixed by web page
   const viewersCounterRefreshPeriod = Number("{{.Cfg.ViewersCounterRefreshPeriod}}");
@@ -50,6 +45,60 @@
     "{{$value}}",
     {{end}}
   ]
-  initViewerPage(stream, /*stunServers,*/ viewersCounterRefreshPeriod, {{.Cfg.PlayerPoster}})
+  initViewerPage(stream, stunServers, viewersCounterRefreshPeriod)
+</script> -->
+
+<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+<script src="/static/ovenplayer/ovenplayer.js"></script>
+<script>
+  {{if .WidgetURL}}
+    // Toggle chat
+    const chatToggle = document.getElementById("sideWidgetToggle")
+    chatToggle.addEventListener("click", function () {
+      const chatCol = document.getElementById("sideWidget")
+      if (chatCol.style.display === "none") {
+        chatCol.style.display = "block"
+        chatToggle.textContent = "»"
+      } else {
+        chatCol.style.display = "none"
+        chatToggle.textContent = "«"
+      }
+    })
+  {{end}}
+
+  // Create player
+  player = OvenPlayer.create("viewer", {
+    title: "Parlons-Maths",
+    image: "{{.Cfg.PlayerPoster}}",
+    autoStart: true,
+    mute: false,
+    expandFullScreenUI: true,
+    sources: [
+      {
+        "file": "wss://" + window.location.host + "/app/{{.Path}}",
+        "type": "webrtc",
+        "label": " WebRTC - Source"
+      },
+      {
+        "type": "hls",
+        "file": "https://" + window.location.host + "/app/{{.Path}}_bypass/playlist.m3u8",
+        "label": " HLS"
+      }
+    ]
+  });
+  player.on("error", function(error){
+    if (error.code === 501) {
+      // Change message
+      const errorMsg = document.getElementsByClassName("op-message-text")[0]
+      errorMsg.textContent = "Le stream semble inactif. Cette page se rafraîchit toutes les 30 secondes."
+
+      // Reload in 5s
+      setTimeout(function () {
+        player.load()
+      }, 30000)
+    } else {
+      console.log(error);
+    }
+  });
 </script>
 {{end}}