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