Make url configurable

Author: g3force

frontend/src/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="app">
         <iframe
-            src="https://www.youtube.com/embed/364zEAsOclU?start=0&autoplay=1&mute=1&loop=1&playlist=364zEAsOclU"
+            :src="url"
             title="Video"
             :width="showVideo ? '100%' : '0'"
             :height="showVideo ? '100%' : '0'"
@@ -25,7 +25,7 @@
                 return packetTimestamp / 1000 / 1000
             },
             showVideo() {
-                if (this.showVideoAfter) {
+                if (this.showVideoAfter && this.url) {
                     const packetTimestamp = this.$store.state.refereeMsg.packetTimestamp;
                     const commandTimestamp = this.$store.state.refereeMsg.commandTimestamp;
                     const timeSinceLastCommand = (packetTimestamp - commandTimestamp) / 1000 / 1000;
@@ -37,6 +37,10 @@
                 let urlParams = new URLSearchParams(window.location.search);
                 return urlParams.get('showVideoAfter')
             },
+            url() {
+                let urlParams = new URLSearchParams(window.location.search);
+                return urlParams.get('url')
+            }
         }
     }
 </script>

rpi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssl-status-board",
-  "main": "http://localhost:8082?showVideoAfter=300",
+  "main": "http://localhost:8082?showVideoAfter=300&url=https%3A%2F%2Fwww.youtube.com%2Fembed%2F364zEAsOclU%3Fstart%3D0%26autoplay%3D1%26mute%3D1%26loop%3D1%26playlist%3D364zEAsOclU",
   "window": {
     "kiosk": true,
     "width": 1920,