feat: persist audio preferences to backend config

- Add AudioInputAutoEnable and AudioOutputEnabled fields to backend config
- Implement RPC methods for get/set audio input auto-enable preference
- Load audio output enabled state from config on startup
- Make manual microphone toggle call backend to enable audio pipeline
- Auto-enable preference now persists across incognito sessions
- Reset microphone state to off when reaching login pages
- Fix issue where manual mic toggle required auto-enable to be on

audio.go

@@ -29,7 +29,8 @@ var (
 func initAudio() {
 	audioLogger = logging.GetDefaultLogger().With().Str("component", "audio-manager").Logger()
 
-	audioOutputEnabled.Store(true)
+	ensureConfigLoaded()
+	audioOutputEnabled.Store(config.AudioOutputEnabled)
 	audioInputEnabled.Store(true)
 
 	audioLogger.Debug().Msg("Audio subsystem initialized")

config.go

@@ -107,6 +107,8 @@ type Config struct {
 	DefaultLogLevel      string               `json:"default_log_level"`
 	VideoSleepAfterSec   int                  `json:"video_sleep_after_sec"`
 	VideoQualityFactor   float64              `json:"video_quality_factor"`
+	AudioInputAutoEnable bool                 `json:"audio_input_auto_enable"`
+	AudioOutputEnabled   bool                 `json:"audio_output_enabled"`
 }
 
 func (c *Config) GetDisplayRotation() uint16 {
@@ -180,6 +182,8 @@ func getDefaultConfig() Config {
 		}(),
 		DefaultLogLevel:      "INFO",
 		VideoQualityFactor:   1.0,
+		AudioInputAutoEnable: false,
+		AudioOutputEnabled:   true,
 	}
 }
 

jsonrpc.go

@@ -946,10 +946,16 @@ func rpcSetUsbDeviceState(device string, enabled bool) error {
 }
 
 func rpcGetAudioOutputEnabled() (bool, error) {
-	return audioOutputEnabled.Load(), nil
+	ensureConfigLoaded()
+	return config.AudioOutputEnabled, nil
 }
 
 func rpcSetAudioOutputEnabled(enabled bool) error {
+	ensureConfigLoaded()
+	config.AudioOutputEnabled = enabled
+	if err := SaveConfig(); err != nil {
+		return err
+	}
 	return SetAudioOutputEnabled(enabled)
 }
 
@@ -961,6 +967,17 @@ func rpcSetAudioInputEnabled(enabled bool) error {
 	return SetAudioInputEnabled(enabled)
 }
 
+func rpcGetAudioInputAutoEnable() (bool, error) {
+	ensureConfigLoaded()
+	return config.AudioInputAutoEnable, nil
+}
+
+func rpcSetAudioInputAutoEnable(enabled bool) error {
+	ensureConfigLoaded()
+	config.AudioInputAutoEnable = enabled
+	return SaveConfig()
+}
+
 func rpcSetCloudUrl(apiUrl string, appUrl string) error {
 	currentCloudURL := config.CloudURL
 	config.CloudURL = apiUrl
@@ -1283,6 +1300,8 @@ var rpcHandlers = map[string]RPCHandler{
 	"setAudioOutputEnabled":   {Func: rpcSetAudioOutputEnabled, Params: []string{"enabled"}},
 	"getAudioInputEnabled":    {Func: rpcGetAudioInputEnabled},
 	"setAudioInputEnabled":    {Func: rpcSetAudioInputEnabled, Params: []string{"enabled"}},
+	"getAudioInputAutoEnable": {Func: rpcGetAudioInputAutoEnable},
+	"setAudioInputAutoEnable": {Func: rpcSetAudioInputAutoEnable, Params: []string{"enabled"}},
 	"setCloudUrl":             {Func: rpcSetCloudUrl, Params: []string{"apiUrl", "appUrl"}},
 	"getKeyboardLayout":       {Func: rpcGetKeyboardLayout},
 	"setKeyboardLayout":       {Func: rpcSetKeyboardLayout, Params: []string{"layout"}},

ui/src/components/popovers/AudioPopover.tsx

@@ -16,6 +16,7 @@ export default function AudioPopover() {
   const [audioOutputEnabled, setAudioOutputEnabled] = useState<boolean>(true);
   const [usbAudioEnabled, setUsbAudioEnabled] = useState<boolean>(false);
   const [loading, setLoading] = useState(false);
+  const [micLoading, setMicLoading] = useState(false);
   const isHttps = isSecureContext();
 
   useEffect(() => {
@@ -54,6 +55,21 @@ export default function AudioPopover() {
     });
   }, [send]);
 
+  const handleMicrophoneToggle = useCallback((enabled: boolean) => {
+    setMicLoading(true);
+    send("setAudioInputEnabled", { enabled }, (resp: JsonRpcResponse) => {
+      setMicLoading(false);
+      if ("error" in resp) {
+        const errorMsg = enabled
+          ? m.audio_input_failed_enable({ error: String(resp.error.data || m.unknown_error()) })
+          : m.audio_input_failed_disable({ error: String(resp.error.data || m.unknown_error()) });
+        notifications.error(errorMsg);
+      } else {
+        setMicrophoneEnabled(enabled);
+      }
+    });
+  }, [send, setMicrophoneEnabled]);
+
   return (
     <GridCard>
       <div className="space-y-4 p-4 py-3">
@@ -80,6 +96,7 @@ export default function AudioPopover() {
                 <div className="h-px w-full bg-slate-800/10 dark:bg-slate-300/20" />
 
                 <SettingsItem
+                  loading={micLoading}
                   title={m.audio_microphone_title()}
                   description={m.audio_microphone_description()}
                   badge={!isHttps ? m.audio_https_only() : undefined}
@@ -89,7 +106,7 @@ export default function AudioPopover() {
                   <Checkbox
                     checked={microphoneEnabled}
                     disabled={!isHttps}
-                    onChange={(e) => setMicrophoneEnabled(e.target.checked)}
+                    onChange={(e) => handleMicrophoneToggle(e.target.checked)}
                   />
                 </SettingsItem>
               </>

ui/src/hooks/stores.ts

@@ -382,6 +382,8 @@ export interface SettingsState {
   setMicrophoneEnabled: (enabled: boolean) => void;
   audioInputAutoEnable: boolean;
   setAudioInputAutoEnable: (enabled: boolean) => void;
+
+  resetMicrophoneState: () => void;
 }
 
 export const useSettingsStore = create(
@@ -430,13 +432,14 @@ export const useSettingsStore = create(
       videoContrast: 1.0,
       setVideoContrast: (value: number) => set({ videoContrast: value }),
 
-      // Audio settings with defaults
       audioOutputEnabled: true,
       setAudioOutputEnabled: (enabled: boolean) => set({ audioOutputEnabled: enabled }),
       microphoneEnabled: false,
       setMicrophoneEnabled: (enabled: boolean) => set({ microphoneEnabled: enabled }),
       audioInputAutoEnable: false,
       setAudioInputAutoEnable: (enabled: boolean) => set({ audioInputAutoEnable: enabled }),
+
+      resetMicrophoneState: () => set({ microphoneEnabled: false }),
     }),
     {
       name: "settings",

ui/src/routes/devices.$id.settings.audio.tsx

@@ -16,20 +16,15 @@ export default function SettingsAudioRoute() {
 
   useEffect(() => {
     send("getAudioOutputEnabled", {}, (resp: JsonRpcResponse) => {
-      if ("error" in resp) {
+      if ("error" in resp) return;
-        return;
-      }
       settings.setAudioOutputEnabled(resp.result as boolean);
     });
 
-    send("getAudioInputEnabled", {}, (resp: JsonRpcResponse) => {
+    send("getAudioInputAutoEnable", {}, (resp: JsonRpcResponse) => {
-      if ("error" in resp) {
+      if ("error" in resp) return;
-        return;
-      }
       settings.setAudioInputAutoEnable(resp.result as boolean);
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [send, settings]);
-  }, [send]);
 
   const handleAudioOutputEnabledChange = (enabled: boolean) => {
     send("setAudioOutputEnabled", { enabled }, (resp: JsonRpcResponse) => {
@@ -47,17 +42,12 @@ export default function SettingsAudioRoute() {
   };
 
   const handleAudioInputAutoEnableChange = (enabled: boolean) => {
-    send("setAudioInputEnabled", { enabled }, (resp: JsonRpcResponse) => {
+    send("setAudioInputAutoEnable", { enabled }, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
-        const errorMsg = enabled
+        notifications.error(String(resp.error.data || m.unknown_error()));
-          ? m.audio_input_failed_enable({ error: String(resp.error.data || m.unknown_error()) })
-          : m.audio_input_failed_disable({ error: String(resp.error.data || m.unknown_error()) });
-        notifications.error(errorMsg);
         return;
       }
       settings.setAudioInputAutoEnable(enabled);
-      const successMsg = enabled ? m.audio_input_enabled() : m.audio_input_disabled();
-      notifications.success(successMsg);
     });
   };
 

ui/src/routes/devices.$id.tsx

@@ -538,11 +538,6 @@ export default function KvmIdRoute() {
     const audioTrans = pc.addTransceiver("audio", { direction: "sendrecv" });
     setAudioTransceiver(audioTrans);
 
-    // Enable microphone if auto-enable is on (only works over HTTPS or localhost)
-    if (audioInputAutoEnable && isSecureContext()) {
-      setMicrophoneEnabled(true);
-    }
-
     const rpcDataChannel = pc.createDataChannel("rpc");
     rpcDataChannel.onclose = () => console.log("rpcDataChannel has closed");
     rpcDataChannel.onerror = (ev: Event) => console.error(`Error on DataChannel '${rpcDataChannel.label}': ${ev}`);
@@ -606,14 +601,11 @@ export default function KvmIdRoute() {
     }
   }, [peerConnectionState, cleanupAndStopReconnecting]);
 
-  // Handle dynamic microphone enable/disable
   useEffect(() => {
     if (!audioTransceiver || !peerConnection) return;
 
     if (microphoneEnabled) {
-      // Request microphone access
+      navigator.mediaDevices?.getUserMedia({
-      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-        navigator.mediaDevices.getUserMedia({
         audio: {
           echoCancellation: true,
           noiseSuppression: true,
@@ -624,29 +616,24 @@ export default function KvmIdRoute() {
         const audioTrack = stream.getAudioTracks()[0];
         if (audioTrack && audioTransceiver.sender) {
           audioTransceiver.sender.replaceTrack(audioTrack);
-            console.log("Microphone enabled");
         }
-        }).catch((err) => {
+      }).catch(() => {
-          console.warn("Microphone access denied or unavailable:", err.message);
         setMicrophoneEnabled(false);
       });
-      }
     } else {
-      // Disable microphone by removing the track
       if (audioTransceiver.sender.track) {
         audioTransceiver.sender.track.stop();
         audioTransceiver.sender.replaceTrack(null);
-        console.log("Microphone disabled");
       }
     }
-  }, [microphoneEnabled, audioTransceiver, peerConnection, setMicrophoneEnabled]);
+  }, [microphoneEnabled, audioTransceiver, peerConnection]);
 
-  // Auto-enable microphone when setting is loaded from backend
   useEffect(() => {
-    if (audioInputAutoEnable && audioTransceiver && peerConnection && !microphoneEnabled && isSecureContext()) {
+    if (!audioTransceiver || !peerConnection || !audioInputAutoEnable || microphoneEnabled) return;
+    if (isSecureContext()) {
       setMicrophoneEnabled(true);
     }
-  }, [audioInputAutoEnable, audioTransceiver, peerConnection, microphoneEnabled, setMicrophoneEnabled]);
+  }, [audioInputAutoEnable, audioTransceiver, peerConnection, microphoneEnabled]);
 
   // Cleanup effect
   const { clearInboundRtpStats, clearCandidatePairStats } = useRTCStore();
@@ -806,15 +793,6 @@ export default function KvmIdRoute() {
 
   const { send } = useJsonRpc(onJsonRpcRequest);
 
-  // Load audio input auto-enable setting from backend on mount
-  useEffect(() => {
-    send("getAudioInputEnabled", {}, (resp: JsonRpcResponse) => {
-      if ("error" in resp) {
-        return;
-      }
-      setAudioInputAutoEnable(resp.result as boolean);
-    });
-  }, [send, setAudioInputAutoEnable]);
 
   useEffect(() => {
     if (rpcDataChannel?.readyState !== "open") return;
@@ -827,6 +805,15 @@ export default function KvmIdRoute() {
     });
   }, [rpcDataChannel?.readyState, send, setHdmiState]);
 
+  // Load audio input auto-enable preference from backend
+  useEffect(() => {
+    if (rpcDataChannel?.readyState !== "open") return;
+    send("getAudioInputAutoEnable", {}, (resp: JsonRpcResponse) => {
+      if ("error" in resp) return;
+      setAudioInputAutoEnable(resp.result as boolean);
+    });
+  }, [rpcDataChannel?.readyState, send, setAudioInputAutoEnable]);
+
   const [needLedState, setNeedLedState] = useState(true);
 
   // request keyboard led state from the device

ui/src/routes/login-local.tsx

@@ -16,8 +16,11 @@ import { DeviceStatus } from "@routes/welcome-local";
 import { DEVICE_API } from "@/ui.config";
 import api from "@/api";
 import { m } from "@localizations/messages.js";
+import { useSettingsStore } from "@/hooks/stores";
 
 const loader: LoaderFunction = async () => {
+  useSettingsStore.getState().resetMicrophoneState();
+
   const res = await api
     .GET(`${DEVICE_API}/device/status`)
     .then(res => res.json() as Promise<DeviceStatus>);

ui/src/routes/login.tsx

@@ -1,13 +1,19 @@
+import { useEffect } from "react";
 import { useLocation, useSearchParams } from "react-router";
 
 import { m } from "@localizations/messages.js";
 import AuthLayout from "@components/AuthLayout";
+import { useSettingsStore } from "@/hooks/stores";
 
 export default function LoginRoute() {
   const [sq] = useSearchParams();
   const location = useLocation();
   const deviceId = sq.get("deviceId") || location.state?.deviceId;
 
+  useEffect(() => {
+    useSettingsStore.getState().resetMicrophoneState();
+  }, []);
+
   if (deviceId) {
     return (
       <AuthLayout