[Refactor/TMP1] Unify Slider components. (Appearance, Transcription.) VR section is commented out temporally.

src-ui/logics/configs/config_page_setter/useSettingsLogics.js

@@ -212,17 +212,26 @@ export const useSliderLogic = ({
     min,
     max,
     step = 1,
-    show_label_values
+    show_label_values = [],
+    marks_step,
 }) => {
+    if (marks_step === undefined) {
+        marks_step = step;
+    }
+
     const [ui_value, setUiValue] = useState(current_value.data);
+    const decimalPlaces = marks_step.toString().includes('.')
+        ? marks_step.toString().split('.')[1].length
+        : 0;
 
     const labelFormatter = useCallback((value) => {
-        return (show_label_values && show_label_values.includes(value)) ? value : "";
+        if (show_label_values && show_label_values.length > 0) {
-    }, [show_label_values]);
+            return show_label_values.includes(value) ? value : "";
+        }
+        return value.toFixed(decimalPlaces);
+    }, [show_label_values, decimalPlaces]);
 
-    const marks = useMemo(() => {
+    const marks = createMarks(min, max, marks_step, labelFormatter);
-        return createMarks(min, max, step, labelFormatter);
-    }, [min, max, step, labelFormatter]);
 
     const onchangeFunction = useCallback((value) => {
         setUiValue(value);
@@ -239,7 +248,7 @@ export const useSliderLogic = ({
         if (postUpdateAction) {
             postUpdateAction();
         }
-    }, [current_value.data]);
+    }, [current_value.data, postUpdateAction]);
 
     return {
         ui_value,
@@ -249,14 +258,11 @@ export const useSliderLogic = ({
     };
 };
 
-const createMarks = (min, max, step = 1, labelFormatter = (value) => value) => {
+const createMarks = (min, max, marks_step = 1, labelFormatter = (value) => value) => {
     const marks = [];
-    let current_value = min;
+    for (let value = min; value <= max; value += marks_step) {
-    while (current_value <= max) {
+        value = parseFloat(value.toFixed(1));
-        const fixedValue = parseFloat(current_value.toFixed(1));
+        marks.push({ value, label: `${labelFormatter(value)}` });
-        const label = labelFormatter(fixedValue);
-        marks.push({ value: fixedValue, label: `${label}` });
-        current_value += step;
     }
     return marks;
 };

src-ui/views/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx

@@ -3,9 +3,27 @@ import styles from "./Slider.module.scss";
 import MUI_Slider from "@mui/material/Slider";
 import clsx from "clsx";
 
+import { useSliderLogic } from "@logics_configs";
+
 export const Slider = (props) => {
     const location = props.valueLabelDisplayLocation || "top";
 
+    const {
+        ui_value,
+        onchangeFunction,
+        onchangeCommittedFunction,
+        marks
+    } = useSliderLogic({
+        current_value: props.current_value,
+        setterFunction: props.setterFunction,
+        min: props.min,
+        max: props.max,
+        step: props.step,
+        show_label_values: props.show_label_values,
+        marks_step: props.marks_step,
+    });
+
+
     const sliderSx = {
         color: "var(--dark_700_color)",
         "& .MuiSlider-thumb": {
@@ -86,13 +104,13 @@ export const Slider = (props) => {
                 aria-label="Default"
                 // valueLabelDisplay="on"
                 valueLabelDisplay={props.valueLabelDisplay ? props.valueLabelDisplay : "auto"}
-                value={props.variable}
+                value={ui_value}
-                step={props.step}
+                step={props.step == null ? null : Number(props.step)}
                 min={Number(props.min)}
                 max={Number(props.max)}
-                onChange={(_e, value) => props.onchangeFunction(value)}
+                onChange={(_e, value) => onchangeFunction(value)}
                 onChangeCommitted={(_e, value) =>
-                    props.onchangeCommittedFunction ? props.onchangeCommittedFunction(value) : null
+                    onchangeCommittedFunction ? onchangeCommittedFunction(value) : null
                 }
                 onMouseEnter={(event) =>
                     props.onMouseEnterFunction ? props.onMouseEnterFunction(event) : null
@@ -100,10 +118,10 @@ export const Slider = (props) => {
                 onMouseLeave={(event) =>
                     props.onMouseLeaveFunction ? props.onMouseLeaveFunction(event) : null
                 }
-                marks={props.marks}
+                marks={marks}
-                track={props.track}
+                track={props.track === undefined ? false : props.track}
                 orientation={props.orientation}
-                valueLabelFormat={`${props.valueLabelFormat ? props.valueLabelFormat : props.variable}`}
+                valueLabelFormat={`${props.valueLabelFormat ? props.valueLabelFormat : ui_value}`}
                 sx={sliderSx}
             />
         </div>

src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -58,32 +58,16 @@ const UiScalingContainer = () => {
     const { currentUiScaling, setUiScaling } = useAppearance();
     const { asyncUpdateBreakPoint } = useWindow();
 
-    const {
-        ui_value,
-        onchangeFunction,
-        onchangeCommittedFunction,
-        marks
-    } = useSliderLogic({
-        current_value: currentUiScaling,
-        setterFunction: setUiScaling,
-        postUpdateAction: asyncUpdateBreakPoint,
-        min: 40,
-        max: 200,
-        step: 10,
-        show_label_values: [40, 60, 80, 100, 120, 140, 160, 180, 200],
-    });
-
     return (
         <SliderContainer
             label={t("config_page.appearance.ui_size.label") + " (%)"}
-            min="40"
+            current_value={currentUiScaling}
-            max="200"
+            setterFunction={setUiScaling}
-            onchangeCommittedFunction={onchangeCommittedFunction}
+            postUpdateAction={asyncUpdateBreakPoint}
-            onchangeFunction={onchangeFunction}
+            min={40}
-            variable={ui_value}
+            max={200}
-            marks={marks}
+            step={10}
-            step={null}
+            show_label_values={[40, 60, 80, 100, 120, 140, 160, 180, 200]}
-            track={false}
         />
     );
 };
@@ -93,31 +77,15 @@ export const MessageLogUiScalingContainer = () => {
     const { t } = useI18n();
     const { currentMessageLogUiScaling, setMessageLogUiScaling } = useAppearance();
 
-    const {
-        ui_value,
-        onchangeFunction,
-        onchangeCommittedFunction,
-        marks
-    } = useSliderLogic({
-        current_value: currentMessageLogUiScaling,
-        setterFunction: setMessageLogUiScaling,
-        min: 40,
-        max: 200,
-        step: 10,
-        show_label_values: [40, 60, 80, 100, 120, 140, 160, 180, 200],
-    });
-
     return (
         <SliderContainer
             label={t("config_page.appearance.textbox_ui_size.label") + " (%)"}
-            min="40"
+            current_value={currentMessageLogUiScaling}
-            max="200"
+            setterFunction={setMessageLogUiScaling}
-            onchangeCommittedFunction={onchangeCommittedFunction}
+            min={40}
-            onchangeFunction={onchangeFunction}
+            max={200}
-            variable={ui_value}
+            step={10}
-            marks={marks}
+            show_label_values={[40, 60, 80, 100, 120, 140, 160, 180, 200]}
-            step={null}
-            track={false}
         />
     );
 };
@@ -180,40 +148,16 @@ const FontFamilyContainer = () => {
 const TransparencyContainer = () => {
     const { t } = useI18n();
     const { currentTransparency, setTransparency } = useAppearance();
-    const [ui_message_log_ui_scaling, setUiTransparency] = useState(currentTransparency.data);
-
-    const onchangeFunction = (value) => {
-        setUiTransparency(value);
-    };
-    const onchangeCommittedFunction = (value) => {
-        setTransparency(value);
-    };
-    useEffect(() => {
-        setUiTransparency(currentTransparency.data);
-    }, [currentTransparency.data]);
-
-    // [Duplicated]
-    const createMarks = (min, max) => {
-        const marks = [];
-        for (let value = min; value <= max; value += 10) {
-            marks.push({ value, label: `${value}` });
-        }
-        return marks;
-    };
-
-    const marks = createMarks(40, 100);
 
     return (
         <SliderContainer
             label={t("config_page.appearance.transparency.label") + " (%)"}
-            min="40"
+            current_value={currentTransparency}
-            max="100"
+            setterFunction={setTransparency}
-            onchangeCommittedFunction={onchangeCommittedFunction}
+            min={40}
-            onchangeFunction={onchangeFunction}
+            max={100}
-            variable={ui_message_log_ui_scaling}
+            step={10}
-            marks={marks}
+            show_label_values={[40, 60, 80, 100, 120, 140, 160, 180, 200]}
-            step={null}
-            track={false}
         />
     );
 };

src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx

@@ -460,7 +460,7 @@ const Advanced_Container = () => {
     return (
         <div>
             <SectionLabelComponent label="Advanced Settings (Whisper Model)" />
-            {/* <SectionLabelComponent label={t("config_page.transcription.section_label_transcription_engines")} /> */}
+            <SectionLabelComponent label={t("config_page.transcription.section_label_transcription_engines")} />
             <MicAvgLogprobContainer />
             <MicNoSpeechProbContainer />
             <SpeakerAvgLogprobContainer />
@@ -472,42 +472,16 @@ const Advanced_Container = () => {
 export const MicAvgLogprobContainer = () => {
     const { t } = useI18n();
     const { currentMicAvgLogprob, setMicAvgLogprob } = useTranscription();
-    const [ui_mic_avg_logprob, setUiMicAvgLogprob] = useState(currentMicAvgLogprob.data);
-
-    const onchangeFunction = (value) => {
-        setUiMicAvgLogprob(value);
-    };
-    const onchangeCommittedFunction = (value) => {
-        setMicAvgLogprob(value);
-    };
-    useEffect(() => {
-        setUiMicAvgLogprob(currentMicAvgLogprob.data);
-    }, [currentMicAvgLogprob.data]);
-
-    // [Duplicated]
-    const createMarks = (min, max) => {
-        const marks = [];
-        for (let value = min; value <= max; value += 0.2) {
-            value = parseFloat(value.toFixed(1));
-            marks.push({ value, label: `${value}` });
-        }
-        return marks;
-    };
-
-    const marks = createMarks(-2, 0);
-
     return (
         <SliderContainer
             label="Mic Avg Logprob"
             desc="Default: -0.8"
-            min="-2"
+            current_value={currentMicAvgLogprob}
-            max="0"
+            setterFunction={setMicAvgLogprob}
-            onchangeCommittedFunction={onchangeCommittedFunction}
+            min={-2}
-            onchangeFunction={onchangeFunction}
+            max={0}
-            variable={ui_mic_avg_logprob}
-            marks={marks}
             step={0.1}
-            track={false}
+            marks_step={0.2}
         />
     );
 };
@@ -515,42 +489,16 @@ export const MicAvgLogprobContainer = () => {
 export const MicNoSpeechProbContainer = () => {
     const { t } = useI18n();
     const { currentMicNoSpeechProb, setMicNoSpeechProb } = useTranscription();
-    const [ui_mic_no_speech_prob, setUiMicNoSpeechProb] = useState(currentMicNoSpeechProb.data);
-
-    const onchangeFunction = (value) => {
-        setUiMicNoSpeechProb(value);
-    };
-    const onchangeCommittedFunction = (value) => {
-        setMicNoSpeechProb(value);
-    };
-    useEffect(() => {
-        setUiMicNoSpeechProb(currentMicNoSpeechProb.data);
-    }, [currentMicNoSpeechProb.data]);
-
-    // [Duplicated]
-    const createMarks = (min, max) => {
-        const marks = [];
-        for (let value = min; value <= max; value += 0.1) {
-            value = parseFloat(value.toFixed(1));
-            marks.push({ value, label: `${value}` });
-        }
-        return marks;
-    };
-
-    const marks = createMarks(0, 1);
 
     return (
         <SliderContainer
             label="Mic No Speech Prob"
             desc="Default: 0.6"
-            min="0"
+            current_value={currentMicNoSpeechProb}
-            max="1"
+            setterFunction={setMicNoSpeechProb}
-            onchangeCommittedFunction={onchangeCommittedFunction}
+            min={0}
-            onchangeFunction={onchangeFunction}
+            max={1}
-            variable={ui_mic_no_speech_prob}
-            marks={marks}
             step={0.1}
-            track={false}
         />
     );
 };
@@ -558,42 +506,17 @@ export const MicNoSpeechProbContainer = () => {
 export const SpeakerAvgLogprobContainer = () => {
     const { t } = useI18n();
     const { currentSpeakerAvgLogprob, setSpeakerAvgLogprob } = useTranscription();
-    const [ui_speaker_avg_logprob, setUiSpeakerAvgLogprob] = useState(currentSpeakerAvgLogprob.data);
-
-    const onchangeFunction = (value) => {
-        setUiSpeakerAvgLogprob(value);
-    };
-    const onchangeCommittedFunction = (value) => {
-        setSpeakerAvgLogprob(value);
-    };
-    useEffect(() => {
-        setUiSpeakerAvgLogprob(currentSpeakerAvgLogprob.data);
-    }, [currentSpeakerAvgLogprob.data]);
-
-    // [Duplicated]
-    const createMarks = (min, max) => {
-        const marks = [];
-        for (let value = min; value <= max; value += 0.2) {
-            value = parseFloat(value.toFixed(1));
-            marks.push({ value, label: `${value}` });
-        }
-        return marks;
-    };
-
-    const marks = createMarks(-2, 0);
 
     return (
         <SliderContainer
             label="Speaker Avg Logprob"
             desc="Default: -0.8"
-            min="-2"
+            current_value={currentSpeakerAvgLogprob}
-            max="0"
+            setterFunction={setSpeakerAvgLogprob}
-            onchangeCommittedFunction={onchangeCommittedFunction}
+            min={-2}
-            onchangeFunction={onchangeFunction}
+            max={0}
-            variable={ui_speaker_avg_logprob}
-            marks={marks}
             step={0.1}
-            track={false}
+            marks_step={0.2}
         />
     );
 };
@@ -601,42 +524,16 @@ export const SpeakerAvgLogprobContainer = () => {
 export const SpeakerNoSpeechProbContainer = () => {
     const { t } = useI18n();
     const { currentSpeakerNoSpeechProb, setSpeakerNoSpeechProb } = useTranscription();
-    const [ui_speaker_no_speech_prob, setUiSpeakerNoSpeechProb] = useState(currentSpeakerNoSpeechProb.data);
-
-    const onchangeFunction = (value) => {
-        setUiSpeakerNoSpeechProb(value);
-    };
-    const onchangeCommittedFunction = (value) => {
-        setSpeakerNoSpeechProb(value);
-    };
-    useEffect(() => {
-        setUiSpeakerNoSpeechProb(currentSpeakerNoSpeechProb.data);
-    }, [currentSpeakerNoSpeechProb.data]);
-
-    // [Duplicated]
-    const createMarks = (min, max) => {
-        const marks = [];
-        for (let value = min; value <= max; value += 0.1) {
-            value = parseFloat(value.toFixed(1));
-            marks.push({ value, label: `${value}` });
-        }
-        return marks;
-    };
-
-    const marks = createMarks(0, 1);
 
     return (
         <SliderContainer
             label="Speaker No Speech Prob"
             desc="Default: 0.6"
-            min="0"
+            current_value={currentSpeakerNoSpeechProb}
-            max="1"
+            setterFunction={setSpeakerNoSpeechProb}
-            onchangeCommittedFunction={onchangeCommittedFunction}
+            min={0}
-            onchangeFunction={onchangeFunction}
+            max={1}
-            variable={ui_speaker_no_speech_prob}
-            marks={marks}
             step={0.1}
-            track={false}
         />
     );
 };

src-ui/views/app/config_page/setting_section/setting_box/vr/Vr.jsx

@@ -25,6 +25,7 @@ import TriangleSvg from "@images/triangle.svg?react";
 import { randomIntMinMax } from "@utils";
 
 export const Vr = () => {
+    return null;
     const { t } = useI18n();
     const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true);
     const toggleIsOpenedSmallSettings = () => {