reload player on error

components/PlayerControl.vue

@@ -6,7 +6,7 @@
                     <div class="w-full aspect-video">
                         <video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls />
                         <VideoPlayer
-                            v-else-if="configStore.configChannel[configStore.configID]"
+                            v-else-if="configStore.showPlayer && configStore.configChannel[configStore.configID]"
                             :key="configStore.configID"
                             class="live-player"
                             reference="httpStream"
@@ -245,9 +245,9 @@ watch([status, error], async () => {
 
         if (errorCounter.value > 11) {
             await authStore.obtainUuid()
-            streamUrl.value = `/data/event/${configStore.configChannel[configStore.configID].id}?endpoint=playout&uuid=${
+            streamUrl.value = `/data/event/${
-                authStore.uuid
+                configStore.configChannel[configStore.configID].id
-            }`
+            }?endpoint=playout&uuid=${authStore.uuid}`
             errorCounter.value = 0
         }
     }
@@ -309,7 +309,7 @@ function resetStatus() {
 
 async function controlProcess(state: string) {
     /*
-        Control playout systemd service (start, stop, restart)
+        Control playout (start, stop, restart)
     */
     const channel = configStore.configChannel[configStore.configID].id
 

components/VideoPlayer.vue

@@ -15,6 +15,8 @@
 import videojs from 'video.js'
 import 'video.js/dist/video-js.css'
 
+const configStore = useConfig()
+
 const player = ref()
 
 const props = defineProps({
@@ -42,6 +44,16 @@ onMounted(() => {
     player.value.on('volumechange', () => {
         localStorage.setItem('volume', player.value.volume())
     })
+
+    player.value.on('error', () => {
+        setTimeout(() => {
+            configStore.showPlayer = false
+
+            nextTick(() => {
+                configStore.showPlayer = true
+            })
+        }, 2000)
+    })
 })
 
 onBeforeUnmount(() => {
@@ -53,13 +65,13 @@ onBeforeUnmount(() => {
 
 <style>
 .video-js .vjs-volume-panel.vjs-volume-panel-horizontal {
-  width: 10em;
+    width: 10em;
 }
 
 .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
-  width: 5em;
+    width: 5em;
-  height: 3em;
+    height: 3em;
-  margin-right: 0;
+    margin-right: 0;
-  opacity: 1;
+    opacity: 1;
 }
 </style>

stores/config.ts

@@ -15,6 +15,7 @@ export const useConfig = defineStore('config', {
         configUser: {} as User,
         utcOffset: 0,
         onetimeInfo: true,
+        showPlayer: true,
     }),
 
     getters: {},