Merge 14b741c3dd into 1d1e58f036

scripts/build_utils.sh

@@ -41,7 +41,6 @@ BUILD_IN_DOCKER=${BUILD_IN_DOCKER:-false}
 function prepare_docker_build_context() {
     msg_info "▶ Preparing docker build context ..."
     cp .devcontainer/install-deps.sh \
-        .devcontainer/install_audio_deps.sh \
         go.mod \
         go.sum \
         Dockerfile.build \

ui/localization/messages/da.json

@@ -64,12 +64,6 @@
     "audio_output_failed_enable": "Kunne ikke aktivere lydudgang: {error}",
     "audio_output_title": "Lydudgang",
     "audio_popover_title": "Lyd",
-    "audio_popover_description": "Hurtige lydkontroller til højttalere og mikrofon",
-    "audio_speakers_title": "Højttalere",
-    "audio_speakers_description": "Lyd fra mål til højttalere",
-    "audio_microphone_title": "Mikrofon",
-    "audio_microphone_description": "Mikrofonindgang til mål",
-    "audio_https_only": "Kun HTTPS",
     "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",

ui/localization/messages/de.json

@@ -64,12 +64,6 @@
     "audio_output_failed_enable": "Fehler beim Aktivieren des Audioausgangs: {error}",
     "audio_output_title": "Audioausgang",
     "audio_popover_title": "Audio",
-    "audio_popover_description": "Schnelle Audiosteuerung für Lautsprecher und Mikrofon",
-    "audio_speakers_title": "Lautsprecher",
-    "audio_speakers_description": "Audio vom Ziel zu Lautsprechern",
-    "audio_microphone_title": "Mikrofon",
-    "audio_microphone_description": "Mikrofoneingang zum Ziel",
-    "audio_https_only": "Nur HTTPS",
     "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",

ui/localization/messages/en.json

@@ -64,12 +64,6 @@
     "audio_output_failed_enable": "Failed to enable audio output: {error}",
     "audio_output_title": "Audio Output",
     "audio_popover_title": "Audio",
-    "audio_popover_description": "Quick audio controls for speakers and microphone",
-    "audio_speakers_title": "Speakers",
-    "audio_speakers_description": "Audio from target to speakers",
-    "audio_microphone_title": "Microphone",
-    "audio_microphone_description": "Microphone input to target",
-    "audio_https_only": "HTTPS only",
     "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",

ui/localization/messages/es.json

@@ -64,12 +64,6 @@
     "audio_output_failed_enable": "Error al activar la salida de audio: {error}",
     "audio_output_title": "Salida de audio",
     "audio_popover_title": "Audio",
-    "audio_popover_description": "Controles de audio rápidos para altavoces y micrófono",
-    "audio_speakers_title": "Altavoces",
-    "audio_speakers_description": "Audio del objetivo a los altavoces",
-    "audio_microphone_title": "Micrófono",
-    "audio_microphone_description": "Entrada de micrófono al objetivo",
-    "audio_https_only": "Solo HTTPS",
     "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",

ui/localization/messages/fr.json

@@ -64,12 +64,6 @@
     "audio_output_failed_enable": "Échec de l'activation de la sortie audio : {error}",
     "audio_output_title": "Sortie audio",
     "audio_popover_title": "Audio",
-    "audio_popover_description": "Contrôles audio rapides pour haut-parleurs et microphone",
-    "audio_speakers_title": "Haut-parleurs",
-    "audio_speakers_description": "Audio de la cible vers les haut-parleurs",
-    "audio_microphone_title": "Microphone",
-    "audio_microphone_description": "Entrée microphone vers la cible",
-    "audio_https_only": "HTTPS uniquement",
     "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",

ui/localization/messages/it.json

@@ -64,12 +64,6 @@
     "audio_output_failed_enable": "Impossibile abilitare l'uscita audio: {error}",
     "audio_output_title": "Uscita audio",
     "audio_popover_title": "Audio",
-    "audio_popover_description": "Controlli audio rapidi per altoparlanti e microfono",
-    "audio_speakers_title": "Altoparlanti",
-    "audio_speakers_description": "Audio dal target agli altoparlanti",
-    "audio_microphone_title": "Microfono",
-    "audio_microphone_description": "Ingresso microfono al target",
-    "audio_https_only": "Solo HTTPS",
     "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",

ui/localization/messages/nb.json

@@ -64,12 +64,6 @@
     "audio_output_failed_enable": "Kunne ikke aktivere lydutgang: {error}",
     "audio_output_title": "Lydutgang",
     "audio_popover_title": "Lyd",
-    "audio_popover_description": "Raske lydkontroller for høyttalere og mikrofon",
-    "audio_speakers_title": "Høyttalere",
-    "audio_speakers_description": "Lyd fra mål til høyttalere",
-    "audio_microphone_title": "Mikrofon",
-    "audio_microphone_description": "Mikrofoninngang til mål",
-    "audio_https_only": "Kun HTTPS",
     "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",

ui/localization/messages/sv.json

@@ -64,12 +64,6 @@
     "audio_output_failed_enable": "Det gick inte att aktivera ljudutgången: {error}",
     "audio_output_title": "Ljudutgång",
     "audio_popover_title": "Ljud",
-    "audio_popover_description": "Snabba ljudkontroller för högtalare och mikrofon",
-    "audio_speakers_title": "Högtalare",
-    "audio_speakers_description": "Ljud från mål till högtalare",
-    "audio_microphone_title": "Mikrofon",
-    "audio_microphone_description": "Mikrofoningång till mål",
-    "audio_https_only": "Endast HTTPS",
     "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",

ui/localization/messages/zh.json

@@ -64,12 +64,6 @@
     "audio_output_failed_enable": "启用音频输出失败：{error}",
     "audio_output_title": "音频输出",
     "audio_popover_title": "音频",
-    "audio_popover_description": "扬声器和麦克风的快速音频控制",
-    "audio_speakers_title": "扬声器",
-    "audio_speakers_description": "从目标设备到扬声器的音频",
-    "audio_microphone_title": "麦克风",
-    "audio_microphone_description": "麦克风输入到目标设备",
-    "audio_https_only": "仅限 HTTPS",
     "audio_settings_description": "配置 JetKVM 设备的音频输入和输出设置",
     "audio_settings_hdmi_label": "HDMI",
     "audio_settings_input_description": "启用或禁用到远程计算机的麦克风音频",

ui/src/components/SettingsItem.tsx

@@ -1,45 +1,17 @@
-import { Link } from "react-router";
-
-import { cva, cx } from "@/cva.config";
+import { cx } from "@/cva.config";
 import LoadingSpinner from "@components/LoadingSpinner";
 
-const badgeVariants = cva({
-  base: "ml-2 rounded-full px-2 py-1 text-[10px] font-medium leading-none text-white dark:border",
-  variants: {
-    variant: {
-      error: "bg-red-500 dark:border-red-700 dark:bg-red-800 dark:text-red-50",
-      info: "bg-blue-500 dark:border-blue-600 dark:bg-blue-700 dark:text-blue-50",
-    },
-  },
-});
-
 interface SettingsItemProps {
   readonly title: string;
   readonly description: string | React.ReactNode;
   readonly badge?: string;
-  readonly badgeVariant?: "error" | "info";
-  readonly badgeLink?: string;
   readonly className?: string;
   readonly loading?: boolean;
   readonly children?: React.ReactNode;
 }
 
 export function SettingsItem(props: SettingsItemProps) {
-  const { title, description, badge, badgeVariant = "error", badgeLink, children, className, loading } = props;
-
-  const badgeClasses = badgeVariants({ variant: badgeVariant });
-
-  const badgeContent = badge && (
-    badgeLink ? (
-      <Link to={badgeLink} className={cx(badgeClasses, "hover:opacity-80 transition-opacity cursor-pointer")}>
-        {badge}
-      </Link>
-    ) : (
-      <span className={badgeClasses}>
-        {badge}
-      </span>
-    )
-  );
+  const { title, description, badge, children, className, loading } = props;
 
   return (
     <label
@@ -52,7 +24,11 @@ export function SettingsItem(props: SettingsItemProps) {
         <div className="flex items-center gap-x-2">
           <div className="flex items-center text-base font-semibold text-black dark:text-white">
             {title}
-            {badgeContent}
+            {badge && (
+              <span className="ml-2 rounded-full bg-red-500 px-2 py-1 text-[10px] font-medium leading-none text-white dark:border dark:border-red-700 dark:bg-red-800 dark:text-red-50">
+                {badge}
+              </span>
+            )}
           </div>
           {loading && <LoadingSpinner className="h-4 w-4 text-blue-500" />}
         </div>

ui/src/components/popovers/AudioPopover.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
+import { LuVolume2 } from "react-icons/lu";
 
 import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
 import { GridCard } from "@components/Card";
 import { SettingsItem } from "@components/SettingsItem";
-import { SettingsPageHeader } from "@components/SettingsPageheader";
-import Checkbox from "@components/Checkbox";
+import { Button } from "@components/Button";
 import notifications from "@/notifications";
 import { m } from "@localizations/messages.js";
 
@@ -14,7 +14,6 @@ export default function AudioPopover() {
   const [audioInputEnabled, setAudioInputEnabled] = useState<boolean>(true);
   const [usbAudioEnabled, setUsbAudioEnabled] = useState<boolean>(false);
   const [loading, setLoading] = useState(false);
-  const isHttps = window.location.protocol === "https:" || window.location.hostname === "localhost";
 
   useEffect(() => {
     send("getAudioOutputEnabled", {}, (resp: JsonRpcResponse) => {
@@ -43,7 +42,8 @@ export default function AudioPopover() {
     });
   }, [send]);
 
-  const handleAudioOutputEnabledToggle = useCallback((enabled: boolean) => {
+  const handleAudioOutputEnabledToggle = useCallback(() => {
+    const enabled = !audioOutputEnabled;
     setLoading(true);
     send("setAudioOutputEnabled", { enabled }, (resp: JsonRpcResponse) => {
       setLoading(false);
@@ -58,9 +58,10 @@ export default function AudioPopover() {
         notifications.success(successMsg);
       }
     });
-  }, [send]);
+  }, [send, audioOutputEnabled]);
 
-  const handleAudioInputEnabledToggle = useCallback((enabled: boolean) => {
+  const handleAudioInputEnabledToggle = useCallback(() => {
+    const enabled = !audioInputEnabled;
     setLoading(true);
     send("setAudioInputEnabled", { enabled }, (resp: JsonRpcResponse) => {
       setLoading(false);
@@ -75,26 +76,28 @@ export default function AudioPopover() {
         notifications.success(successMsg);
       }
     });
-  }, [send]);
+  }, [send, audioInputEnabled]);
 
   return (
     <GridCard>
       <div className="space-y-4 p-4 py-3">
         <div className="space-y-4">
-          <SettingsPageHeader
-            title={m.audio_popover_title()}
-            description={m.audio_popover_description()}
-          />
+          <div className="flex items-center gap-2 text-slate-900 dark:text-slate-100">
+            <LuVolume2 className="h-5 w-5" />
+            <h3 className="font-semibold">{m.audio_popover_title()}</h3>
+          </div>
 
           <div className="space-y-3">
             <SettingsItem
               loading={loading}
-              title={m.audio_speakers_title()}
-              description={m.audio_speakers_description()}
+              title={m.audio_output_title()}
+              description={m.audio_output_description()}
             >
-              <Checkbox
-                checked={audioOutputEnabled}
-                onChange={(e) => handleAudioOutputEnabledToggle(e.target.checked)}
+              <Button
+                size="SM"
+                theme={audioOutputEnabled ? "light" : "primary"}
+                text={audioOutputEnabled ? m.audio_disable() : m.audio_enable()}
+                onClick={handleAudioOutputEnabledToggle}
               />
             </SettingsItem>
 
@@ -104,16 +107,14 @@ export default function AudioPopover() {
 
                 <SettingsItem
                   loading={loading}
-                  title={m.audio_microphone_title()}
-                  description={m.audio_microphone_description()}
-                  badge={!isHttps ? m.audio_https_only() : undefined}
-                  badgeVariant="info"
-                  badgeLink={!isHttps ? "settings/access" : undefined}
+                  title={m.audio_input_title()}
+                  description={m.audio_input_description()}
                 >
-                  <Checkbox
-                    checked={audioInputEnabled}
-                    disabled={!isHttps}
-                    onChange={(e) => handleAudioInputEnabledToggle(e.target.checked)}
+                  <Button
+                    size="SM"
+                    theme={audioInputEnabled ? "light" : "primary"}
+                    text={audioInputEnabled ? m.audio_disable() : m.audio_enable()}
+                    onClick={handleAudioInputEnabledToggle}
                   />
                 </SettingsItem>
               </>