[Refactor] Put together device-related logic into useDevice.

src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/ThresholdComponent.jsx

@@ -7,8 +7,7 @@ import { useVolume } from "@logics_common";
 import MicSvg from "@images/mic.svg?react";
 import HeadphonesSvg from "@images/headphones.svg?react";
 import {
-    useMicThreshold,
-    useSpeakerThreshold,
+    useDevice,
 } from "@logics_configs";
 
 export const ThresholdComponent = (props) => {
@@ -27,7 +26,7 @@ const MicComponent = (props) => {
         currentMicThreshold,
         setMicThreshold,
         currentEnableAutomaticMicThreshold,
-    } = useMicThreshold();
+    } = useDevice();
     const [ui_threshold, setUiThreshold] = useState(currentMicThreshold.data);
     const {
         volumeCheckStart_Mic,
@@ -84,7 +83,7 @@ const SpeakerComponent = (props) => {
         currentSpeakerThreshold,
         setSpeakerThreshold,
         currentEnableAutomaticSpeakerThreshold,
-    } = useSpeakerThreshold();
+    } = useDevice();
     const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold.data);
     const {
         volumeCheckStart_Speaker,

src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/slider_and_meter/SliderAndMeter.jsx

@@ -4,8 +4,7 @@ import {
     useStore_SpeakerVolume,
 } from "@store";
 import {
-    useMicThreshold,
-    useSpeakerThreshold,
+    useDevice,
 } from "@logics_configs";
 
 export const SliderAndMeter = (props) => {
@@ -24,7 +23,7 @@ export const SliderAndMeter = (props) => {
 const ThresholdVolumeMeter_Mic = (props) => {
     const { currentMicVolume } = useStore_MicVolume();
 
-    const { currentEnableAutomaticMicThreshold } = useMicThreshold();
+    const { currentEnableAutomaticMicThreshold } = useDevice();
 
     const currentVolumeVariable = Math.min(currentMicVolume.data, props.max);
     const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
@@ -50,7 +49,7 @@ const ThresholdVolumeMeter_Mic = (props) => {
 const ThresholdVolumeMeter_Speaker = (props) => {
     const { currentSpeakerVolume } = useStore_SpeakerVolume();
 
-    const { currentEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
+    const { currentEnableAutomaticSpeakerThreshold } = useDevice();
 
     const currentVolumeVariable = Math.min(currentSpeakerVolume.data, props.max);
     const volume_width_percentage = (currentVolumeVariable / props.max) * 100;

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -4,16 +4,7 @@ import clsx from "clsx";
 import { useStore_IsBreakPoint } from "@store";
 import { ui_configs } from "@ui_configs";
 import {
-    useEnableAutoMicSelect,
-    useMicHostList,
-    useSelectedMicHost,
-    useMicDeviceList,
-    useSelectedMicDevice,
-    useMicThreshold,
-    useEnableAutoSpeakerSelect,
-    useSpeakerDeviceList,
-    useSelectedSpeakerDevice,
-    useSpeakerThreshold,
+    useDevice,
 } from "@logics_configs";
 
 import {
@@ -38,13 +29,21 @@ export const Device = () => {
 
 const Mic_Container = () => {
     const { t } = useTranslation();
-    const { currentEnableAutoMicSelect, toggleEnableAutoMicSelect } = useEnableAutoMicSelect();
-    const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
-    const { currentMicHostList } = useMicHostList();
-    const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
-    const { currentMicDeviceList } = useMicDeviceList();
+    const {
+        currentEnableAutoMicSelect,
+        toggleEnableAutoMicSelect,
+        currentMicDeviceList,
+        currentMicHostList,
+
+        currentSelectedMicHost,
+        setSelectedMicHost,
+        currentSelectedMicDevice,
+        setSelectedMicDevice,
+
+        currentEnableAutomaticMicThreshold,
+        toggleEnableAutomaticMicThreshold,
+    } = useDevice();
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-    const { currentEnableAutomaticMicThreshold, toggleEnableAutomaticMicThreshold } = useMicThreshold();
 
     const selectFunction_host = (selected_data) => {
         setSelectedMicHost(selected_data.selected_id);
@@ -139,11 +138,16 @@ const Mic_Container = () => {
 
 const Speaker_Container = () => {
     const { t } = useTranslation();
-    const { currentEnableAutoSpeakerSelect, toggleEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
-    const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-    const { currentSpeakerDeviceList } = useSpeakerDeviceList();
+    const {
+        currentEnableAutoSpeakerSelect,
+        toggleEnableAutoSpeakerSelect,
+        currentSpeakerDeviceList,
+        currentSelectedSpeakerDevice,
+        setSelectedSpeakerDevice,
+        currentEnableAutomaticSpeakerThreshold,
+        toggleEnableAutomaticSpeakerThreshold,
+    } = useDevice();
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-    const { currentEnableAutomaticSpeakerThreshold, toggleEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
 
     const selectFunction = (selected_data) => {
         setSelectedSpeakerDevice(selected_data.selected_id);