From 2085d13c0d6df6d97b79fcca684c2ca10d681ca9 Mon Sep 17 00:00:00 2001
From: Yohann D'ANELLO <yohann.danello@gmail.com>
Date: Mon, 9 Nov 2020 16:15:23 +0100
Subject: [PATCH] Export ovenplayer in a separate file

---
 web/static/js/ovenplayer.js | 72 +++++++++++++++++++++++++++++++++++++
 web/template/player.html    | 65 +++++----------------------------
 2 files changed, 80 insertions(+), 57 deletions(-)
 create mode 100644 web/static/js/ovenplayer.js

diff --git a/web/static/js/ovenplayer.js b/web/static/js/ovenplayer.js
new file mode 100644
index 0000000..3a53d4d
--- /dev/null
+++ b/web/static/js/ovenplayer.js
@@ -0,0 +1,72 @@
+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/{{.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 || 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);
+        }
+    });
+}
diff --git a/web/template/player.html b/web/template/player.html
index 4d24c5c..8e7b145 100644
--- a/web/template/player.html
+++ b/web/template/player.html
@@ -34,8 +34,13 @@
   {{end}}
 </div>
 
-<!-- <script type="module">
-  import { initViewerPage } from "/static/js/viewer.js";
+
+<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+<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}}");
@@ -45,60 +50,6 @@
     "{{$value}}",
     {{end}}
   ]
-  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);
-    }
-  });
+  initViewerPage(stream, /*stunServers,*/ viewersCounterRefreshPeriod, {{.Cfg.PlayerPoster}})
 </script>
 {{end}}