From 7060f9e8d63ec010093c301921b009b7228efcc7 Mon Sep 17 00:00:00 2001
From: Alex P <dtk077@gmail.com>
Date: Sun, 21 Sep 2025 21:11:30 +0000
Subject: [PATCH] [WIP] Improvements, Bugfixes: Improve audio experience when
 running in HTTP mode

---
 .../popovers/AudioControlPopover.tsx          |  8 +++----
 ui/src/hooks/useAudioDevices.ts               | 21 +++++++++++++++----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/popovers/AudioControlPopover.tsx b/ui/src/components/popovers/AudioControlPopover.tsx
index 3bd9a528..49d1ed87 100644
--- a/ui/src/components/popovers/AudioControlPopover.tsx
+++ b/ui/src/components/popovers/AudioControlPopover.tsx
@@ -353,9 +353,9 @@ export default function AudioControlPopover({ microphone }: AudioControlPopoverP
           {/* HTTPS requirement notice */}
           {isHttpsRequired && (
             <div className="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 p-2 rounded-md">
-              <p className="font-medium mb-1">HTTPS Required for Microphone</p>
+              <p className="font-medium mb-1">HTTPS Required for Microphone Input</p>
               <p>
-                Microphone access requires a secure connection. Please access this device using HTTPS instead of HTTP to enable audio input features.
+                Microphone access requires a secure connection due to browser security policies. Audio output works fine on HTTP, but microphone input needs HTTPS.
               </p>
               <p className="mt-1">
                 <span className="font-medium">Current:</span> {window.location.protocol + '//' + window.location.host}
@@ -417,7 +417,7 @@ export default function AudioControlPopover({ microphone }: AudioControlPopoverP
             <select
               value={selectedOutputDevice}
               onChange={(e) => handleAudioOutputDeviceChange(e.target.value)}
-              disabled={devicesLoading || isHttpsRequired}
+              disabled={devicesLoading}
               className="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:bg-slate-50 disabled:text-slate-500 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-300 dark:focus:border-blue-400 dark:disabled:bg-slate-800"
             >
               {audioOutputDevices.map((device) => (
@@ -430,7 +430,7 @@ export default function AudioControlPopover({ microphone }: AudioControlPopoverP
           
           <button
             onClick={refreshDevices}
-            disabled={devicesLoading || isHttpsRequired}
+            disabled={devicesLoading}
             className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700"
           >
             <MdRefresh className={cx("h-4 w-4", devicesLoading && "animate-spin")} />
diff --git a/ui/src/hooks/useAudioDevices.ts b/ui/src/hooks/useAudioDevices.ts
index 7422df02..bd9aa39d 100644
--- a/ui/src/hooks/useAudioDevices.ts
+++ b/ui/src/hooks/useAudioDevices.ts
@@ -39,11 +39,24 @@ export function useAudioDevices(): UseAudioDevicesReturn {
         setAudioInputDevices([
           { deviceId: 'https-required', label: 'HTTPS Required for Microphone Access', kind: 'audioinput' }
         ]);
-        setAudioOutputDevices([
-          { deviceId: 'https-required', label: 'HTTPS Required for Speaker Selection', kind: 'audiooutput' }
-        ]);
+        // Speakers still work on HTTP, so enumerate them normally
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const outputDevices: AudioDevice[] = [
+          { deviceId: 'default', label: 'Default Speaker', kind: 'audiooutput' }
+        ];
+        
+        devices.forEach(device => {
+          if (device.kind === 'audiooutput' && device.deviceId !== 'default') {
+            outputDevices.push({
+              deviceId: device.deviceId,
+              label: device.label || `Speaker ${device.deviceId.slice(0, 8)}`,
+              kind: 'audiooutput'
+            });
+          }
+        });
+        
+        setAudioOutputDevices(outputDevices);
         setSelectedInputDevice('https-required');
-        setSelectedOutputDevice('https-required');
         throw new Error('Microphone access requires HTTPS connection. Please use HTTPS to access audio features.');
       }