Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Alex P 2025-11-04 08:52:27 +02:00
parent 925b14da1e
commit 3448663afa
9 changed files with 184 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
audio.go
View File

@ -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")

4
config.go
View File

@ -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,
}
}

21
jsonrpc.go
View File

@ -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"}},

19
ui/src/components/popovers/AudioPopover.tsx
View File

@ -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>
</>

5
ui/src/hooks/stores.ts
View File

@ -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",

22
ui/src/routes/devices.$id.settings.audio.tsx
View File

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

43
ui/src/routes/devices.$id.tsx
View File

@ -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
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
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) => {
console.warn("Microphone access denied or unavailable:", err.message);
}).catch(() => {
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

3
ui/src/routes/login-local.tsx
View File

@ -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>);

6
ui/src/routes/login.tsx
View File

@ -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