From a47330e36c68de3edf0889d7e4c4b7a650739515 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 24 Nov 2023 18:27:09 -0300
Subject: [PATCH 1/2] Allow `availableIceIps` variable to be undefined when it
 was not yet explicitly set

This allows one to track when it is was already populated, and react to that.
---
 src/components/widgets/VideoPlayer.vue | 2 +-
 src/stores/video.ts                    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/widgets/VideoPlayer.vue b/src/components/widgets/VideoPlayer.vue
index 89771dd14..b8539f29f 100644
--- a/src/components/widgets/VideoPlayer.vue
+++ b/src/components/widgets/VideoPlayer.vue
@@ -150,7 +150,7 @@ watch(selectedICEIPsField, () => {
 })
 
 setInterval(() => {
-  const combinedIps = [...videoStore.availableIceIps, ...availableICEIPs.value]
+  const combinedIps = [...(videoStore.availableIceIps ?? []), ...availableICEIPs.value]
   const uniqueIps = combinedIps.filter((value, index, array) => array.indexOf(value) === index)
   videoStore.availableIceIps = uniqueIps
 }, 1000)
diff --git a/src/stores/video.ts b/src/stores/video.ts
index 0d534fd93..9184eece2 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -3,10 +3,10 @@ import { saveAs } from 'file-saver'
 import localforage from 'localforage'
 import { defineStore } from 'pinia'
 import Swal from 'sweetalert2'
-import { reactive } from 'vue'
+import { ref } from 'vue'
 
 export const useVideoStore = defineStore('video', () => {
-  const availableIceIps = reactive<string[]>([])
+  const availableIceIps = ref<string[] | undefined>(undefined)
   const allowedIceIps = useStorage<string[]>('cockpit-allowed-stream-ips', [])
 
   // Offer download of backuped videos

From 39a81d5eb43d598a08e199971c5a5dbafd80156b Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 24 Nov 2023 18:27:51 -0300
Subject: [PATCH 2/2] Create routine to warn the user if the allowed IPs for
 the WebRTC ICE candidates were not yet defined

---
 src/stores/video.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/stores/video.ts b/src/stores/video.ts
index 9184eece2..b4c0b44ce 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -48,5 +48,33 @@ export const useVideoStore = defineStore('video', () => {
     })
   })
 
+  // Routine to make sure the user has chosen the allowed ICE candidate IPs, so the stream works as expected
+  const iceIpCheckInterval = setInterval(() => {
+    // Pass if there are no available IPs yet or if the user has already set the allowed ones
+    if (availableIceIps.value === undefined || !allowedIceIps.value.isEmpty()) {
+      return
+    }
+    // If there's more than one IP candidate available, send a warning an clear the check routine
+    if (availableIceIps.value.length >= 1) {
+      Swal.fire({
+        html: `
+          <p>Cockpit detected more than one IP being used to route the video streaming. This situation often leads to
+          video stuterring, specially if one of the IPs is from a non-wired connection.</p>
+          </br>
+          <p>To prevent issues and archieve an optimum streaming experience, please:</p>
+          <ol>
+            <li>1. Open the configuration of one of your video widgets.</li>
+            <li>2. Choose the IP that should be used for the video streaming.</li>
+          </ol>
+        `,
+        icon: 'warning',
+        customClass: {
+          htmlContainer: 'text-left',
+        },
+      })
+      clearInterval(iceIpCheckInterval)
+    }
+  }, 5000)
+
   return { availableIceIps, allowedIceIps }
 })