Use Vuejs for web UI

webroot/index.html

@@ -7,19 +7,22 @@
     rel="stylesheet"
   />
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
   <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 
+  <!-- Used for animating the scrolling of the chat div.  Can that be done other ways? -->
   <script src="vendor/jquery-2.1.4.min.js"></script>
-  <script src="vendor/knockout-3.4.0.js"></script>
-  <script src="vendor/jquery.json-2.5.1.min.js"></script>
-  <script data-main="js/main" src="vendor/require.js"></script>
 </head>
 
 <div>
   <div class="flex">
     <div class="w-4/6">
-      <video id="video" controls style="width: 100%;"></video>
+      <video
+        id="video"
+        preload="auto"
+        autoplay
+        controls
+        style="width: 100%;"
+      ></video>
       <div id="app">
         {{ streamStatus }}
       </div>
@@ -31,35 +34,37 @@
         class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
         style="height: 60vh; overflow-y: scroll;"
       >
-        <div data-bind="foreach: messages">
+        <div v-for="(message, index) in messages">
           <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
             <div class="flex items-center">
               <img
-                data-bind="attr:{src: image}"
+                v-bind:src="message.image"
                 class="w-10 h-10 rounded-full mr-4 border-black-500"
                 style="padding: 5px; background-color: #ececec;"
               />
 
               <div class="text-sm">
-                <p class="text-700" data-bind="text:author"></p>
-                <p class="text-gray-600" data-bind="text:body"></p>
+                <p class="text-700">{{ message.author }}</p>
+                <p class="text-gray-600">{{ message.body }}</p>
               </div>
             </div>
           </div>
         </div>
       </div>
+
       <form
+        id="chatForm"
+        @submit="submitChatForm"
         class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
-        data-bind="with: editingMessage"
       >
         <!-- Author -->
         <label class="control-label" for="inputAuthor">Author</label>
         <input
           id="inputAuthor"
           type="text"
-          data-bind="value: author"
           class="appearance-none bg-gray-200 text-gray-700 border border-black-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
           placeholder="Name"
+          v-model="message.author"
         />
 
         <!-- Body -->
@@ -68,8 +73,8 @@
           <div class="controls">
             <textarea
               id="inputBody"
-              data-bind="value: body"
               placeholder="Message"
+              v-model="message.body"
               class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
             >
             </textarea>
@@ -78,12 +83,11 @@
 
         <div class="control-group">
           <div class="controls">
-            <a
-              href="#"
+            <button
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-              data-bind="click: $parent.send.bind($parent)"
-              >Send</a
             >
+              Send
+            </button>
           </div>
         </div>
       </form>
@@ -91,66 +95,5 @@
   </div>
 </div>
 
-<script>
-  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 () {
-      document.getElementById('video').muted = true;
-      document.getElementById('video').play();
-      document.getElementById('video').muted = false;
-    });
-  }
-</script>
-
-<script>
-  var app = new Vue({
-    el: "#app",
-    data: {
-      streamStatus: "",
-    },
-  });
-</script>
-
-<script>
-    setInterval(getStatus, 5000);
-
-  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."
-    }
-
-  }
-
-  getStatus();
-</script>
+<script src="js/message.js"></script>
+<script src="js/app.js"></script>