From 5d576723985ff2287ed86db46d871ae89f1387bb Mon Sep 17 00:00:00 2001
From: Rick Staa <rick.staa@outlook.com>
Date: Tue, 18 Feb 2025 17:31:43 +0100
Subject: [PATCH] fix(ui): ensure video error handling is working

This commit fixes some UI bugs that were introduced in #10, which caused the
app to throw an error on video device discovery.
---
 ui/src/components/settings.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/settings.tsx b/ui/src/components/settings.tsx
index 0fbe8f3c..a530c5f5 100644
--- a/ui/src/components/settings.tsx
+++ b/ui/src/components/settings.tsx
@@ -158,14 +158,14 @@ function ConfigForm({ config, onSubmit }: ConfigFormProps) {
       const videoDevices = [
         { deviceId: "none", label: "No Video" },
         ...devices
-          .filter((device) => device.kind === "videoinput")
+          .filter((device) => device.kind === "videoinput" && device.deviceId)
           .map((device) => ({
             deviceId: device.deviceId,
             label: device.label || `Camera ${device.deviceId.slice(0, 5)}...`,
           }))
       ];
-
       setVideoDevices(videoDevices);
+
       // Set default to first available camera if no selection yet
       if (!selectedDevice && videoDevices.length > 1) {
         setSelectedDevice(videoDevices[1].deviceId); // Index 1 because 0 is "No Video"
@@ -173,35 +173,39 @@ function ConfigForm({ config, onSubmit }: ConfigFormProps) {
     } catch (err) {
       console.error("Failed to get video devices");
       // If we can't access video devices, still provide the None option
-      const videoDevices = [{ deviceId: "none", label: "No Video" }];
-      setVideoDevices(videoDevices);
+      setVideoDevices([{ deviceId: "none", label: "No Video" }]);
       setSelectedDevice("none");
     }
   }, [selectedDevice]);
 
+  /**
+   * Retrieves the list of audio devices available on the user's device.
+   */
   const getAudioDevices = useCallback(async () => {
     try {
       const devices = await navigator.mediaDevices.enumerateDevices();
       const audioDevices = [
         { deviceId: "none", label: "No Audio" },
         ...devices
-          .filter((device) => device.kind === "audioinput")
+          .filter((device) => device.kind === "audioinput" && device.deviceId)
           .map((device) => ({
             deviceId: device.deviceId,
             label: device.label || `Microphone ${device.deviceId.slice(0, 5)}...`,
           }))
       ];
-
       setAudioDevices(audioDevices);
+
       // Set default to first available microphone if no selection yet
       if (!selectedAudioDevice && audioDevices.length > 1) {
         setSelectedAudioDevice(audioDevices[0].deviceId); // Default to "No Audio" for now
+      } else {
+        setAudioDevices([{ deviceId: "none", label: "No Audio" }]);
+        setSelectedAudioDevice("none");
       }
     } catch (err) {
       console.error("Failed to get audio devices");
       // If we can't access audio devices, still provide the None option
-      const audioDevices = [{ deviceId: "none", label: "No Audio" }];
-      setAudioDevices(audioDevices);
+      setAudioDevices([{ deviceId: "none", label: "No Audio" }]);
       setSelectedAudioDevice("none");
     }
   }, [selectedAudioDevice]);
@@ -346,6 +350,7 @@ function ConfigForm({ config, onSubmit }: ConfigFormProps) {
             accept=".json"
             multiple
             onChange={handlePromptsChange}
+            required={true}
           />
         </div>