From 18518dd53acb2b78c2bf7f3ac199f038fc225fd9 Mon Sep 17 00:00:00 2001
From: jb-alvarado <jb@pixelcrusher.de>
Date: Thu, 4 Jul 2024 16:41:32 +0200
Subject: [PATCH] reload player on error

---
 components/PlayerControl.vue | 10 +++++-----
 components/VideoPlayer.vue   | 22 +++++++++++++++++-----
 stores/config.ts             |  1 +
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/components/PlayerControl.vue b/components/PlayerControl.vue
index dabf766d..b72ed918 100644
--- a/components/PlayerControl.vue
+++ b/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=${
-                authStore.uuid
-            }`
+            streamUrl.value = `/data/event/${
+                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
 
diff --git a/components/VideoPlayer.vue b/components/VideoPlayer.vue
index 8312e58b..0004d355 100644
--- a/components/VideoPlayer.vue
+++ b/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;
-  height: 3em;
-  margin-right: 0;
-  opacity: 1;
+    width: 5em;
+    height: 3em;
+    margin-right: 0;
+    opacity: 1;
 }
 </style>
diff --git a/stores/config.ts b/stores/config.ts
index 2fe175b3..4a446d24 100644
--- a/stores/config.ts
+++ b/stores/config.ts
@@ -15,6 +15,7 @@ export const useConfig = defineStore('config', {
         configUser: {} as User,
         utcOffset: 0,
         onetimeInfo: true,
+        showPlayer: true,
     }),
 
     getters: {},