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

feat: add translations and fix audio settings page 

Added comprehensive translations for audio settings page:
- Page title and description
- Audio output/input settings
- Audio source selector (HDMI/USB labels)
- Success/error messages for all operations
- Translations added for all 9 languages

Updated devices.$id.settings.audio.tsx:
- Import and use translation keys (m.audio_settings_*)
- Use existing audio_output_* and audio_input_* keys for notifications
- Fix dropdown not updating: update UI optimistically, revert on error
- This prevents the dropdown from appearing stuck after source change

The optimistic update pattern improves UX by immediately reflecting
the user's choice while the backend processes the change.
This commit is contained in:
Alex P 2025-10-23 23:56:15 +03:00
parent f75f5eb58d
commit 47782856f3
10 changed files with 142 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/localization/messages/da.json
View File

@ -64,6 +64,18 @@
"audio_output_failed_enable": "Kunne ikke aktivere lydudgang: {error}",
"audio_output_title": "Lydudgang",
"audio_popover_title": "Lyd",
"audio_settings_description": "Konfigurer lydindgangs- og lydudgangsindstillinger for din JetKVM-enhed",
"audio_settings_hdmi_label": "HDMI",
"audio_settings_input_description": "Aktiver eller deaktiver mikrofon lyd til fjerncomputeren",
"audio_settings_input_title": "Lydindgang",
"audio_settings_output_description": "Aktiver eller deaktiver lyd fra fjerncomputeren",
"audio_settings_output_source_description": "Vælg lydoptagelsesenheden (HDMI eller USB)",
"audio_settings_output_source_failed": "Kunne ikke indstille lydudgangskilde: {error}",
"audio_settings_output_source_success": "Lydudgangskilde opdateret med succes",
"audio_settings_output_source_title": "Lydudgangskilde",
"audio_settings_output_title": "Lydudgang",
"audio_settings_title": "Lyd",
"audio_settings_usb_label": "USB",
"action_bar_extension": "Udvidelse",
"action_bar_fullscreen": "Fuldskærm",
"action_bar_settings": "Indstillinger",

12
ui/localization/messages/de.json
View File

@ -64,6 +64,18 @@
"audio_output_failed_enable": "Fehler beim Aktivieren des Audioausgangs: {error}",
"audio_output_title": "Audioausgang",
"audio_popover_title": "Audio",
"audio_settings_description": "Konfigurieren Sie Audio-Eingangs- und Ausgangseinstellungen für Ihr JetKVM-Gerät",
"audio_settings_hdmi_label": "HDMI",
"audio_settings_input_description": "Mikrofonaudio zum entfernten Computer aktivieren oder deaktivieren",
"audio_settings_input_title": "Audioeingang",
"audio_settings_output_description": "Audio vom entfernten Computer aktivieren oder deaktivieren",
"audio_settings_output_source_description": "Wählen Sie das Audioaufnahmegerät (HDMI oder USB)",
"audio_settings_output_source_failed": "Fehler beim Festlegen der Audioausgabequelle: {error}",
"audio_settings_output_source_success": "Audioausgabequelle erfolgreich aktualisiert",
"audio_settings_output_source_title": "Audioausgabequelle",
"audio_settings_output_title": "Audioausgang",
"audio_settings_title": "Audio",
"audio_settings_usb_label": "USB",
"action_bar_extension": "Verlängerung",
"action_bar_fullscreen": "Vollbild",
"action_bar_settings": "Einstellungen",

12
ui/localization/messages/en.json
View File

@ -64,6 +64,18 @@
"audio_output_failed_enable": "Failed to enable audio output: {error}",
"audio_output_title": "Audio Output",
"audio_popover_title": "Audio",
"audio_settings_description": "Configure audio input and output settings for your JetKVM device",
"audio_settings_hdmi_label": "HDMI",
"audio_settings_input_description": "Enable or disable microphone audio to the remote computer",
"audio_settings_input_title": "Audio Input",
"audio_settings_output_description": "Enable or disable audio from the remote computer",
"audio_settings_output_source_description": "Select the audio capture device (HDMI or USB)",
"audio_settings_output_source_failed": "Failed to set audio output source: {error}",
"audio_settings_output_source_success": "Audio output source updated successfully",
"audio_settings_output_source_title": "Audio Output Source",
"audio_settings_output_title": "Audio Output",
"audio_settings_title": "Audio",
"audio_settings_usb_label": "USB",
"action_bar_extension": "Extension",
"action_bar_fullscreen": "Fullscreen",
"action_bar_settings": "Settings",

12
ui/localization/messages/es.json
View File

@ -64,6 +64,18 @@
"audio_output_failed_enable": "Error al activar la salida de audio: {error}",
"audio_output_title": "Salida de audio",
"audio_popover_title": "Audio",
"audio_settings_description": "Configure los ajustes de entrada y salida de audio para su dispositivo JetKVM",
"audio_settings_hdmi_label": "HDMI",
"audio_settings_input_description": "Habilitar o deshabilitar el audio del micrófono a la computadora remota",
"audio_settings_input_title": "Entrada de audio",
"audio_settings_output_description": "Habilitar o deshabilitar el audio de la computadora remota",
"audio_settings_output_source_description": "Seleccione el dispositivo de captura de audio (HDMI o USB)",
"audio_settings_output_source_failed": "Error al configurar la fuente de salida de audio: {error}",
"audio_settings_output_source_success": "Fuente de salida de audio actualizada correctamente",
"audio_settings_output_source_title": "Fuente de salida de audio",
"audio_settings_output_title": "Salida de audio",
"audio_settings_title": "Audio",
"audio_settings_usb_label": "USB",
"action_bar_extension": "Extensión",
"action_bar_fullscreen": "Pantalla completa",
"action_bar_settings": "Ajustes",

12
ui/localization/messages/fr.json
View File

@ -64,6 +64,18 @@
"audio_output_failed_enable": "Échec de l'activation de la sortie audio : {error}",
"audio_output_title": "Sortie audio",
"audio_popover_title": "Audio",
"audio_settings_description": "Configurez les paramètres d'entrée et de sortie audio pour votre appareil JetKVM",
"audio_settings_hdmi_label": "HDMI",
"audio_settings_input_description": "Activer ou désactiver l'audio du microphone vers l'ordinateur distant",
"audio_settings_input_title": "Entrée audio",
"audio_settings_output_description": "Activer ou désactiver l'audio de l'ordinateur distant",
"audio_settings_output_source_description": "Sélectionnez le périphérique de capture audio (HDMI ou USB)",
"audio_settings_output_source_failed": "Échec de la configuration de la source de sortie audio : {error}",
"audio_settings_output_source_success": "Source de sortie audio mise à jour avec succès",
"audio_settings_output_source_title": "Source de sortie audio",
"audio_settings_output_title": "Sortie audio",
"audio_settings_title": "Audio",
"audio_settings_usb_label": "USB",
"action_bar_extension": "Extension",
"action_bar_fullscreen": "Plein écran",
"action_bar_settings": "Paramètres",

12
ui/localization/messages/it.json
View File

@ -64,6 +64,18 @@
"audio_output_failed_enable": "Impossibile abilitare l'uscita audio: {error}",
"audio_output_title": "Uscita audio",
"audio_popover_title": "Audio",
"audio_settings_description": "Configura le impostazioni di ingresso e uscita audio per il tuo dispositivo JetKVM",
"audio_settings_hdmi_label": "HDMI",
"audio_settings_input_description": "Abilita o disabilita l'audio del microfono al computer remoto",
"audio_settings_input_title": "Ingresso audio",
"audio_settings_output_description": "Abilita o disabilita l'audio dal computer remoto",
"audio_settings_output_source_description": "Seleziona il dispositivo di acquisizione audio (HDMI o USB)",
"audio_settings_output_source_failed": "Impossibile impostare la sorgente di uscita audio: {error}",
"audio_settings_output_source_success": "Sorgente di uscita audio aggiornata con successo",
"audio_settings_output_source_title": "Sorgente di uscita audio",
"audio_settings_output_title": "Uscita audio",
"audio_settings_title": "Audio",
"audio_settings_usb_label": "USB",
"action_bar_extension": "Estensione",
"action_bar_fullscreen": "A schermo intero",
"action_bar_settings": "Impostazioni",

12
ui/localization/messages/nb.json
View File

@ -64,6 +64,18 @@
"audio_output_failed_enable": "Kunne ikke aktivere lydutgang: {error}",
"audio_output_title": "Lydutgang",
"audio_popover_title": "Lyd",
"audio_settings_description": "Konfigurer lydinngangs- og lydutgangsinnstillinger for JetKVM-enheten din",
"audio_settings_hdmi_label": "HDMI",
"audio_settings_input_description": "Aktiver eller deaktiver mikrofonlyd til den eksterne datamaskinen",
"audio_settings_input_title": "Lydinngang",
"audio_settings_output_description": "Aktiver eller deaktiver lyd fra den eksterne datamaskinen",
"audio_settings_output_source_description": "Velg lydopptaksenhet (HDMI eller USB)",
"audio_settings_output_source_failed": "Kunne ikke angi lydutgangskilde: {error}",
"audio_settings_output_source_success": "Lydutgangskilde oppdatert vellykket",
"audio_settings_output_source_title": "Lydutgangskilde",
"audio_settings_output_title": "Lydutgang",
"audio_settings_title": "Lyd",
"audio_settings_usb_label": "USB",
"action_bar_extension": "Forlengelse",
"action_bar_fullscreen": "Fullskjerm",
"action_bar_settings": "Innstillinger",

12
ui/localization/messages/sv.json
View File

@ -64,6 +64,18 @@
"audio_output_failed_enable": "Det gick inte att aktivera ljudutgången: {error}",
"audio_output_title": "Ljudutgång",
"audio_popover_title": "Ljud",
"audio_settings_description": "Konfigurera ljudinmatnings- och ljudutgångsinställningar för din JetKVM-enhet",
"audio_settings_hdmi_label": "HDMI",
"audio_settings_input_description": "Aktivera eller inaktivera mikrofonljud till fjärrdatorn",
"audio_settings_input_title": "Ljudingång",
"audio_settings_output_description": "Aktivera eller inaktivera ljud från fjärrdatorn",
"audio_settings_output_source_description": "Välj ljudinspelningsenhet (HDMI eller USB)",
"audio_settings_output_source_failed": "Det gick inte att ställa in ljudutgångskälla: {error}",
"audio_settings_output_source_success": "Ljudutgångskälla uppdaterades framgångsrikt",
"audio_settings_output_source_title": "Ljudutgångskälla",
"audio_settings_output_title": "Ljudutgång",
"audio_settings_title": "Ljud",
"audio_settings_usb_label": "USB",
"action_bar_extension": "Förlängning",
"action_bar_fullscreen": "Helskärm",
"action_bar_settings": "Inställningar",

12
ui/localization/messages/zh.json
View File

@ -64,6 +64,18 @@
"audio_output_failed_enable": "启用音频输出失败：{error}",
"audio_output_title": "音频输出",
"audio_popover_title": "音频",
"audio_settings_description": "配置 JetKVM 设备的音频输入和输出设置",
"audio_settings_hdmi_label": "HDMI",
"audio_settings_input_description": "启用或禁用到远程计算机的麦克风音频",
"audio_settings_input_title": "音频输入",
"audio_settings_output_description": "启用或禁用来自远程计算机的音频",
"audio_settings_output_source_description": "选择音频捕获设备（HDMI 或 USB）",
"audio_settings_output_source_failed": "设置音频输出源失败：{error}",
"audio_settings_output_source_success": "音频输出源更新成功",
"audio_settings_output_source_title": "音频输出源",
"audio_settings_output_title": "音频输出",
"audio_settings_title": "音频",
"audio_settings_usb_label": "USB",
"action_bar_extension": "扩展",
"action_bar_fullscreen": "全屏",
"action_bar_settings": "设置",

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

@ -6,6 +6,7 @@ import { useSettingsStore } from "@/hooks/stores";
import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
import { SelectMenuBasic } from "@components/SelectMenuBasic";
import Checkbox from "@components/Checkbox";
import { m } from "@localizations/messages.js";
import notifications from "../notifications";
@ -39,54 +40,66 @@ export default function SettingsAudioRoute() {
}, [send]);
const handleAudioOutputSourceChange = (source: string) => {
// Update UI immediately for better responsiveness
settings.setAudioOutputSource(source);
send("setAudioOutputSource", { source }, (resp: JsonRpcResponse) => {
if ("error" in resp) {
// Revert on error by fetching current value from backend
send("getAudioOutputSource", {}, (getResp: JsonRpcResponse) => {
if ("result" in getResp) {
settings.setAudioOutputSource(getResp.result as string);
}
});
notifications.error(
`Failed to set audio output source: ${resp.error.data || "Unknown error"}`,
m.audio_settings_output_source_failed({ error: String(resp.error.data || m.unknown_error()) }),
);
return;
}
settings.setAudioOutputSource(source);
notifications.success("Audio output source updated successfully");
notifications.success(m.audio_settings_output_source_success());
});
};
const handleAudioOutputEnabledChange = (enabled: boolean) => {
send("setAudioOutputEnabled", { enabled }, (resp: JsonRpcResponse) => {
if ("error" in resp) {
notifications.error(
`Failed to ${enabled ? "enable" : "disable"} audio output: ${resp.error.data || "Unknown error"}`,
);
const errorMsg = enabled
? m.audio_output_failed_enable({ error: String(resp.error.data || m.unknown_error()) })
: m.audio_output_failed_disable({ error: String(resp.error.data || m.unknown_error()) });
notifications.error(errorMsg);
return;
}
settings.setAudioOutputEnabled(enabled);
notifications.success(`Audio output ${enabled ? "enabled" : "disabled"} successfully`);
const successMsg = enabled ? m.audio_output_enabled() : m.audio_output_disabled();
notifications.success(successMsg);
});
};
const handleAudioInputEnabledChange = (enabled: boolean) => {
send("setAudioInputEnabled", { enabled }, (resp: JsonRpcResponse) => {
if ("error" in resp) {
notifications.error(
`Failed to ${enabled ? "enable" : "disable"} audio input: ${resp.error.data || "Unknown error"}`,
);
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);
return;
}
settings.setAudioInputEnabled(enabled);
notifications.success(`Audio input ${enabled ? "enabled" : "disabled"} successfully`);
const successMsg = enabled ? m.audio_input_enabled() : m.audio_input_disabled();
notifications.success(successMsg);
});
};
return (
<div className="space-y-4">
<SettingsPageHeader
title="Audio"
description="Configure audio input and output settings for your JetKVM device"
title={m.audio_settings_title()}
description={m.audio_settings_description()}
/>
<div className="space-y-4">
<SettingsItem
title="Audio Output"
description="Enable or disable audio from the remote computer"
title={m.audio_settings_output_title()}
description={m.audio_settings_output_description()}
>
<Checkbox
checked={settings.audioOutputEnabled || false}
@ -96,16 +109,16 @@ export default function SettingsAudioRoute() {
{settings.audioOutputEnabled && (
<SettingsItem
title="Audio Output Source"
description="Select the audio capture device (HDMI or USB)"
title={m.audio_settings_output_source_title()}
description={m.audio_settings_output_source_description()}
>
<SelectMenuBasic
size="SM"
label=""
value={settings.audioOutputSource || "usb"}
options={[
{ value: "hdmi", label: "HDMI" },
{ value: "usb", label: "USB" },
{ value: "hdmi", label: m.audio_settings_hdmi_label() },
{ value: "usb", label: m.audio_settings_usb_label() },
]}
onChange={e => {
handleAudioOutputSourceChange(e.target.value);
@ -115,8 +128,8 @@ export default function SettingsAudioRoute() {
)}
<SettingsItem
title="Audio Input"
description="Enable or disable microphone audio to the remote computer"
title={m.audio_settings_input_title()}
description={m.audio_settings_input_description()}
>
<Checkbox
checked={settings.audioInputEnabled || false}