Use Vuejs for web UI

webroot/js/Message.js

@@ -1,29 +0,0 @@
-define(
-	"Message",
-	[],
-	function() {
-
-		function Message(model) {
-			if (model !== undefined) {
-				this.author = ko.observable(model.author);
-				this.body = ko.observable(model.body);
-			} else {
-				const storedAuthor = localStorage.author || "Viewer" + (Math.floor(Math.random() * 42) + 1)
-				this.author = ko.observable(storedAuthor);
-				this.body = ko.observable("");
-			}
-			this.image = ko.observable("https://robohash.org/" + this.author() + "?set=set3&size=50x50")
-
-
-			this.toModel = function() {
-				return {
-					author: this.author(),
-					body: this.body(),
-					image: this.image()
-				};
-			}
-		}
-
-		return Message;
-	}
-);

webroot/js/MessageList.js

@@ -1,46 +0,0 @@
-define(
-	"MessageList",
-	[
-		"Message"
-	],
-	function(Message) {
-
-		function MessageList(ws) {
-			var that = this;
-			this.messages = ko.observableArray();
-
-			this.editingMessage = ko.observable(new Message());
-
-			this.send = function() {
-				var model = this.editingMessage().toModel();
-				ws.send($.toJSON(model));
-				var message = new Message();
-				message.author(model.author);
-				message.image("https://robohash.org/" + model.author);
-				this.editingMessage(message);
-
-				localStorage.author = model.author
-				console.log(model.author)
-			};
-
-			ws.onmessage = function (e) {
-				var model = $.evalJSON(e.data);
-				var msg = new Message(model);
-				that.messages.push(msg);
-
-				// Scroll DIV to the bottom
-				scrollSmoothToBottom("messages-container")
-			};
-		}
-		
-		return MessageList;
-	}
-);
-
-
-function scrollSmoothToBottom(id) {
-	var div = document.getElementById(id);
-	$('#' + id).animate({
-		scrollTop: div.scrollHeight - div.clientHeight
-	}, 500);
-}

webroot/js/app.js

@@ -0,0 +1,105 @@
+function setupApp() {
+  window.app = new Vue({
+    el: "#app",
+    data: {
+      streamStatus: "",
+    },
+  });
+
+  window.messagesContainer = new Vue({
+    el: "#messages-container",
+    data: {
+      messages: []
+    }
+  })
+
+  window.chatForm = new Vue({
+    el: "#chatForm",
+    data: {
+      message: {
+        author: localStorage.author || "Viewer" + (Math.floor(Math.random() * 42) + 1),
+        body: ""
+      }
+    },
+    methods: {
+      submitChatForm: function (e) {
+        const message = new Message(this.message)
+        const messageJSON = JSON.stringify(message)
+        window.ws.send(messageJSON)
+        e.preventDefault()
+
+        this.message.body = ""
+      }
+    }
+  });
+}
+
+
+async function getStatus() {
+  let url = "/status";
+  try {
+    let response = await fetch(url);
+    let status = await response.json(); // read response body and parse as JSON
+    app.streamStatus = status.online
+      ? "Stream is online."
+      : "Stream is offline."
+
+  } catch (e) {
+    app.streamStatus = "Stream server is offline."
+  }
+
+  setInterval(getStatus, 5000)
+}
+
+function setupWebsocket() {
+  const protocol = location.protocol == "https:" ? "wss" : "ws"
+  var ws = new WebSocket(protocol + "://" + location.host + "/entry")
+  ws.onmessage = (e) => {
+    var model = JSON.parse(e.data)
+    var message = new Message(model);
+    this.messagesContainer.messages.push(message)
+    scrollSmoothToBottom("messages-container")
+  }
+  window.ws = ws
+}
+
+setupApp()
+getStatus();
+setupWebsocket()
+
+var video = document.getElementById("video")
+var videoSrc = "hls/stream.m3u8"
+if (Hls.isSupported()) {
+  var hls = new Hls()
+  hls.loadSource(videoSrc)
+  hls.attachMedia(video)
+  hls.on(Hls.Events.MANIFEST_PARSED, function () {
+    video.play()
+  });
+}
+// hls.js is not supported on platforms that do not have Media Source
+// Extensions (MSE) enabled.
+//
+// When the browser has built-in HLS support (check using `canPlayType`),
+// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
+// element through the `src` property. This is using the built-in support
+// of the plain video element, without using hls.js.
+//
+// Note: it would be more normal to wait on the 'canplay' event below however
+// on Safari (where you are most likely to find built-in HLS support) the
+// video.src URL must be on the user-driven white-list before a 'canplay'
+// event will be emitted; the last video event that can be reliably
+// listened-for when the URL is not on the white-list is 'loadedmetadata'.
+else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+  video.src = videoSrc
+  video.addEventListener("loadedmetadata", function () {
+    video.play()
+  });
+}
+
+function scrollSmoothToBottom(id) {
+  var div = document.getElementById(id)
+  $('#' + id).animate({
+    scrollTop: div.scrollHeight - div.clientHeight
+  }, 500)
+}

webroot/js/main.js

@@ -1,11 +0,0 @@
-define(
-	"main",
-	[
-		"MessageList"
-	],
-	function(MessageList) {
-		var ws = new WebSocket("ws://" + location.host + "/entry");
-		var list = new MessageList(ws);
-		ko.applyBindings(list);
-	}
-);

webroot/js/message.js

@@ -0,0 +1,15 @@
+class Message {
+	constructor(model) {
+		this.author = model.author
+		this.body = model.body
+		this.image = "https://robohash.org/" + model.author
+	}
+
+	toModel() {
+		return {
+			author: this.author(),
+			body: this.body(),
+			image: this.image()
+		}
+	}
+}