Optionally show a video when there was no new command for a certain time

Author: g3force

frontend/src/App.vue

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