Improve embedding of video

Author: g3force

Makefile

@@ -24,7 +24,7 @@ test: frontend
 	go test ./...
 
 run: frontend
-	go run ./cmd/$(word 1,$(CMDS))
+	go run ./cmd/$(word 1,$(CMDS)) -refereeAddress 224.5.24.1:11003
 
 proto: frontend
 	cd frontend && npm run genProto

README.md

@@ -26,6 +26,9 @@ By default, the UI is available at http://localhost:8082
 
 A configuration file will be generated to `config/board-config.yaml` and can be tweaked.
 
+A website (like Youtube) can be displayed when there is no activity.
+Pass the URL like this: `http://localhost:8082??showVideoAfter=420&url=https%3A%2F%2Fwww.youtube.com%2Fembed%2F364zEAsOclU%3Fstart%3D0%26autoplay%3D1%26mute%3D1%26loop%3D1%26playlist%3D364zEAsOclU`
+
 ### Runtime Requirements
  * No software dependencies (except for development, see below)
  * 64bit Linux, Windows, OSX (build your 32bit binaries yourself...)

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRefereeStore } from '@/stores/referee'
+import {computed} from 'vue'
+import {useRefereeStore} from '@/stores/referee'
 import StatusBoard from '@/components/StatusBoard.vue'
 
 const refereeStore = useRefereeStore()
@@ -30,25 +30,36 @@ const showVideo = computed(() => {
 <template>
   <div id="app">
     <iframe
-      v-if="showVideo"
+      :class="{hidden: !showVideo}"
       :src="url || ''"
       title="Video"
       :width="showVideo ? '100%' : '0'"
       :height="showVideo ? '100%' : '0'"
       allow="autoplay"
     />
-    <StatusBoard v-if="!showVideo" />
+    <StatusBoard :class="{hidden: showVideo}"/>
   </div>
 </template>
 
 <style>
-    #app {
-        font-family: 'Avenir', Helvetica, Arial, sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-align: center;
-        color: aliceblue;
-        height: 100%;
-        background-color: #353535;
-    }
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: aliceblue;
+  height: 100%;
+  background-color: #353535;
+}
+
+iframe {
+  border: 0;
+  overflow:hidden;
+  display:block;
+  position: absolute;
+}
+
+.hidden {
+  display: none;
+}
 </style>