From e101ea28e592fb98444266c18c37117a7a41da08 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 25 Jul 2024 15:16:17 -0300
Subject: [PATCH] video-player-widget: Split status messages with `\\n`, to
 improve text formatting.

---
 src/components/widgets/VideoPlayer.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/widgets/VideoPlayer.vue b/src/components/widgets/VideoPlayer.vue
index 1d22cf323..2d2e71258 100644
--- a/src/components/widgets/VideoPlayer.vue
+++ b/src/components/widgets/VideoPlayer.vue
@@ -24,11 +24,17 @@
       <div class="no-video-alert">
         <p>
           <span class="text-xl font-bold">Server status: </span>
-          <span>{{ serverStatus }}</span>
+          <span v-for="(statusParagraph, i) in serverStatus.toString().split('\\n')" :key="i">
+            {{ statusParagraph }}
+            <br />
+          </span>
         </p>
         <p>
           <span class="text-xl font-bold">Stream status: </span>
-          <span>{{ streamStatus }}</span>
+          <span v-for="(statusParagraph, i) in streamStatus.toString().split('\\n')" :key="i">
+            {{ statusParagraph }}
+            <br />
+          </span>
         </p>
       </div>
     </div>
@@ -206,7 +212,7 @@ const streamStatus = computed(() => {
   const availableSources = videoStore.availableIceIps
   if (!availableSources.isEmpty() && !availableSources.find((ip) => videoStore.allowedIceIps.includes(ip))) {
     return `Stream is coming from IPs [${availableSources.join(', ')}], which are not in the list of allowed sources
-    [${videoStore.allowedIceIps.join(', ')}]. Please check your configuration.`
+      [${videoStore.allowedIceIps.join(', ')}].\\n Please check your configuration.`
   }
   return videoStore.getStreamData(nameSelectedStream.value)?.webRtcManager.streamStatus ?? 'Unknown.'
 })