From 1bdea275dc7beebd8bd97c9b86d0a309a3dd79e1 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sat, 8 Nov 2025 06:46:52 +0900
Subject: [PATCH] [Refactor] Improve slider logic flexibility.(Adjust to Vr
 section)

---
 .../config_page_setter/useSettingsLogics.js   | 55 +++++++++++++------
 .../setting_box/_components/slider/Slider.jsx |  4 +-
 .../setting_box/appearance/Appearance.jsx     |  8 +--
 .../transcription/Transcription.jsx           |  8 +--
 .../setting_section/setting_box/vr/Vr.jsx     | 51 ++++++++++-------
 5 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/src-ui/logics/configs/config_page_setter/useSettingsLogics.js b/src-ui/logics/configs/config_page_setter/useSettingsLogics.js
index c70e22b5..a00d816b 100644
--- a/src-ui/logics/configs/config_page_setter/useSettingsLogics.js
+++ b/src-ui/logics/configs/config_page_setter/useSettingsLogics.js
@@ -206,20 +206,21 @@ export const useConfigFunctions = (Category) => {
 import { useState, useEffect, useCallback, useMemo } from "react";
 
 export const useSliderLogic = ({
-    current_value,
+    variable,
     setterFunction,
     postUpdateAction,
     min,
     max,
     step = 1,
-    show_label_values = [],
+    show_label_values = null,
     marks_step,
+    setter_timing = "on_change_committed",
 }) => {
     if (marks_step === undefined) {
         marks_step = step;
     }
 
-    const [ui_value, setUiValue] = useState(current_value.data);
+    const [ui_value, setUiValue] = useState(variable);
 
     const decimalPlaces = marks_step.toString().includes('.')
         ? marks_step.toString().split('.')[1].length
@@ -234,25 +235,43 @@ export const useSliderLogic = ({
     }, [show_label_values, decimalPlaces]);
 
     const marks = useMemo(() => {
+        if (show_label_values === null) {
+            return null;
+        }
         return createMarks(min, max, marks_step, labelFormatter);
-    }, [min, max, marks_step, labelFormatter]);
+    }, [min, max, marks_step, labelFormatter, show_label_values]);
 
-    const onchangeFunction = useCallback((value) => {
-        setUiValue(value);
-    }, []);
+    let onchangeFunction;
+    let onchangeCommittedFunction;
 
-    const onchangeCommittedFunction = useCallback((value) => {
-        setterFunction(value);
-    }, [setterFunction]);
+    if (setter_timing === "on_change") {
+        onchangeFunction = useCallback((value) => {
+            setUiValue(value);
+            setterFunction(value);
+        }, [setterFunction]);
+
+        onchangeCommittedFunction = null;
+
+    } else if (setter_timing === "on_change_committed") {
+        onchangeFunction = useCallback((value) => {
+            setUiValue(value);
+        }, []);
+
+        onchangeCommittedFunction = useCallback((value) => {
+            setterFunction(value);
+        }, [setterFunction]);
+    } else {
+        console.error(`Invalid 'setter_timing' value provided to useSliderLogic. Expected 'on_change' or 'on_change_committed'. Received: ${setter_timing}`);
+    }
 
     useEffect(() => {
-        if (current_value.data !== ui_value) {
-            setUiValue(current_value.data);
+        if (variable !== ui_value) {
+            setUiValue(variable);
         }
         if (postUpdateAction) {
             postUpdateAction();
         }
-    }, [current_value.data]);
+    }, [variable]);
 
     return {
         ui_value,
@@ -264,15 +283,15 @@ export const useSliderLogic = ({
 
 const createMarks = (min, max, marks_step = 1, labelFormatter = (value) => value) => {
     const marks = [];
-    let current_value = min;
+    let variable = min;
 
-    for (let i = 0; current_value <= max; i++) {
-        const fixedValue = parseFloat(current_value.toFixed(10));
+    for (let i = 0; variable <= max; i++) {
+        const fixedValue = parseFloat(variable.toFixed(10));
 
         marks.push({ value: fixedValue, label: `${labelFormatter(fixedValue)}` });
 
-        current_value += marks_step;
-        current_value = parseFloat(current_value.toFixed(10));
+        variable += marks_step;
+        variable = parseFloat(variable.toFixed(10));
 
         if (i > 1000) {
             console.error("Loop limit exceeded (1000 iterations). createMarks()");
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
index ea2d7a15..5cd7fe68 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
@@ -7,15 +7,15 @@ 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,
+        variable: props.variable,
         setterFunction: props.setterFunction,
+        setter_timing: props.setter_timing,
         postUpdateAction: props.postUpdateAction,
         min: props.min,
         max: props.max,
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index c827a91c..a35f0941 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
@@ -11,8 +11,6 @@ import {
 
 import {
     useAppearance,
-
-    useSliderLogic,
 } from "@logics_configs";
 
 import {
@@ -61,7 +59,7 @@ const UiScalingContainer = () => {
     return (
         <SliderContainer
             label={t("config_page.appearance.ui_size.label") + " (%)"}
-            current_value={currentUiScaling}
+            variable={currentUiScaling.data}
             setterFunction={setUiScaling}
             postUpdateAction={asyncUpdateBreakPoint}
             min={40}
@@ -80,7 +78,7 @@ export const MessageLogUiScalingContainer = () => {
     return (
         <SliderContainer
             label={t("config_page.appearance.textbox_ui_size.label") + " (%)"}
-            current_value={currentMessageLogUiScaling}
+            variable={currentMessageLogUiScaling.data}
             setterFunction={setMessageLogUiScaling}
             min={40}
             max={200}
@@ -152,7 +150,7 @@ const TransparencyContainer = () => {
     return (
         <SliderContainer
             label={t("config_page.appearance.transparency.label") + " (%)"}
-            current_value={currentTransparency}
+            variable={currentTransparency.data}
             setterFunction={setTransparency}
             min={40}
             max={100}
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx b/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
index 30788440..255183a8 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
@@ -476,7 +476,7 @@ export const MicAvgLogprobContainer = () => {
         <SliderContainer
             label="Mic Avg Logprob"
             desc="Default: -0.8"
-            current_value={currentMicAvgLogprob}
+            variable={currentMicAvgLogprob.data}
             setterFunction={setMicAvgLogprob}
             min={-2}
             max={0}
@@ -494,7 +494,7 @@ export const MicNoSpeechProbContainer = () => {
         <SliderContainer
             label="Mic No Speech Prob"
             desc="Default: 0.6"
-            current_value={currentMicNoSpeechProb}
+            variable={currentMicNoSpeechProb.data}
             setterFunction={setMicNoSpeechProb}
             min={0}
             max={1}
@@ -511,7 +511,7 @@ export const SpeakerAvgLogprobContainer = () => {
         <SliderContainer
             label="Speaker Avg Logprob"
             desc="Default: -0.8"
-            current_value={currentSpeakerAvgLogprob}
+            variable={currentSpeakerAvgLogprob.data}
             setterFunction={setSpeakerAvgLogprob}
             min={-2}
             max={0}
@@ -529,7 +529,7 @@ export const SpeakerNoSpeechProbContainer = () => {
         <SliderContainer
             label="Speaker No Speech Prob"
             desc="Default: 0.6"
-            current_value={currentSpeakerNoSpeechProb}
+            variable={currentSpeakerNoSpeechProb.data}
             setterFunction={setSpeakerNoSpeechProb}
             min={0}
             max={1}
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/vr/Vr.jsx b/src-ui/views/app/config_page/setting_section/setting_box/vr/Vr.jsx
index b7319d9f..f8e6173c 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/vr/Vr.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/vr/Vr.jsx
@@ -25,7 +25,6 @@ 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 = () => {
@@ -64,7 +63,7 @@ export const Vr = () => {
                         ui_configs={ui_configs.overlay_small_log}
                         default_ui_configs={ui_configs.overlay_small_log_default_settings}
                         current_overlay_settings={currentOverlaySmallLogSettings.data}
-                        set_overlay_settings={setOverlaySmallLogSettings}
+                        setOverlaySettings={setOverlaySmallLogSettings}
                         current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
                         toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
                     />
@@ -74,7 +73,7 @@ export const Vr = () => {
                         ui_configs={ui_configs.overlay_large_log}
                         default_ui_configs={ui_configs.overlay_large_log_default_settings}
                         current_overlay_settings={currentOverlayLargeLogSettings.data}
-                        set_overlay_settings={setOverlayLargeLogSettings}
+                        setOverlaySettings={setOverlayLargeLogSettings}
                         current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
                         toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
                     />
@@ -93,21 +92,21 @@ export const Vr = () => {
 
 const OverlaySettingsContainer = ({
     current_overlay_settings,
-    set_overlay_settings,
+    setOverlaySettings,
     current_is_enabled_overlay,
     toggle_is_enabled_overlay,
     ui_configs,
     default_ui_configs,
     id
 }) => {
-
     const { t } = useI18n();
+    const [settings, setSettings] = useState(current_overlay_settings);
+    const [timeout_id, setTimeoutId] = useState(null);
+
     useEffect(() => {
         setSettings(current_overlay_settings);
     }, [current_overlay_settings]);
 
-    const [settings, setSettings] = useState(current_overlay_settings);
-    const [timeout_id, setTimeoutId] = useState(null);
 
     const [is_opened_position_controller, setIsOpenedPositionController] = useState(true);
     const togglePositionRotationController = () => {
@@ -119,17 +118,17 @@ const OverlaySettingsContainer = ({
 
         if (timeout_id) clearTimeout(timeout_id);
 
-        const newTimeoutId = setTimeout(() => {
+        const new_timeout_id = setTimeout(() => {
             const new_data = { ...settings, [key]: value };
-            set_overlay_settings(new_data);
+            setOverlaySettings(new_data);
         }, 50);
 
-        setTimeoutId(newTimeoutId);
+        setTimeoutId(new_timeout_id);
     };
 
     const selectFunction = (key, value) => {
         const new_data = { ...settings, [key]: value };
-        set_overlay_settings(new_data);
+        setOverlaySettings(new_data);
     };
 
 
@@ -235,7 +234,8 @@ export const PositionControls = ({ settings, onchangeFunction, selectFunction, u
                     step={ui_configs.x_pos.step}
                     min={ui_configs.x_pos.min}
                     max={ui_configs.x_pos.max}
-                    onchangeFunction={(value) => onchangeFunction("x_pos", value)}
+                    setterFunction={(value) => onchangeFunction("x_pos", value)}
+                    setter_timing="on_change"
                     valueLabelDisplay={x_variable_display}
                     valueLabelDisplayLocation="top"
                 />
@@ -260,7 +260,8 @@ export const PositionControls = ({ settings, onchangeFunction, selectFunction, u
                     step={ui_configs.y_pos.step}
                     min={ui_configs.y_pos.min}
                     max={ui_configs.y_pos.max}
-                    onchangeFunction={(value) => onchangeFunction("y_pos", value)}
+                    setterFunction={(value) => onchangeFunction("y_pos", value)}
+                    setter_timing="on_change"
                     orientation="vertical"
                     valueLabelDisplay={y_variable_display}
                     valueLabelDisplayLocation="right"
@@ -286,7 +287,8 @@ export const PositionControls = ({ settings, onchangeFunction, selectFunction, u
                     step={ui_configs.z_pos.step}
                     min={ui_configs.z_pos.min}
                     max={ui_configs.z_pos.max}
-                    onchangeFunction={(value) => onchangeFunction("z_pos", value)}
+                    setterFunction={(value) => onchangeFunction("z_pos", value)}
+                    setter_timing="on_change"
                     orientation="vertical"
                     valueLabelDisplay={z_variable_display}
                     valueLabelDisplayLocation="left"
@@ -345,7 +347,8 @@ export const RotationControls = ({ settings, onchangeFunction, selectFunction, u
                     step={ui_configs.x_rotation.step}
                     min={ui_configs.x_rotation.min}
                     max={ui_configs.x_rotation.max}
-                    onchangeFunction={(value) => onchangeFunction("x_rotation", -value)}
+                    setterFunction={(value) => onchangeFunction("x_rotation", -value)}
+                    setter_timing="on_change"
                     orientation="vertical"
                     valueLabelDisplay={x_variable_display}
                     valueLabelDisplayLocation="right"
@@ -371,7 +374,8 @@ export const RotationControls = ({ settings, onchangeFunction, selectFunction, u
                     step={ui_configs.y_rotation.step}
                     min={ui_configs.y_rotation.min}
                     max={ui_configs.y_rotation.max}
-                    onchangeFunction={(value) => onchangeFunction("y_rotation", value)}
+                    setterFunction={(value) => onchangeFunction("y_rotation", value)}
+                    setter_timing="on_change"
                     valueLabelDisplay={y_variable_display}
                     valueLabelDisplayLocation="top"
                 />
@@ -396,7 +400,8 @@ export const RotationControls = ({ settings, onchangeFunction, selectFunction, u
                     step={ui_configs.z_rotation.step}
                     min={ui_configs.z_rotation.min}
                     max={ui_configs.z_rotation.max}
-                    onchangeFunction={(value) => onchangeFunction("z_rotation", value)}
+                    setterFunction={(value) => onchangeFunction("z_rotation", value)}
+                    setter_timing="on_change"
                     orientation="vertical"
                     valueLabelDisplay={z_variable_display}
                     valueLabelDisplayLocation="left"
@@ -464,7 +469,8 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                     step={5}
                     min={10}
                     max={100}
-                    onchangeFunction={(value) => onchangeFunction("opacity", value / 100)}
+                    setterFunction={(value) => onchangeFunction("opacity", value / 100)}
+                    setter_timing="on_change"
                 />
             </div>
             <div className={styles.other_controls_wrapper}>
@@ -479,7 +485,8 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                     step={ui_configs.ui_scaling.step}
                     min={ui_configs.ui_scaling.min}
                     max={ui_configs.ui_scaling.max}
-                    onchangeFunction={(value) => onchangeFunction("ui_scaling", value / 100)}
+                    setterFunction={(value) => onchangeFunction("ui_scaling", value / 100)}
+                    setter_timing="on_change"
                 />
             </div>
             <div className={styles.other_controls_wrapper}>
@@ -492,7 +499,8 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                     step={1}
                     min={1}
                     max={60}
-                    onchangeFunction={(value) => onchangeFunction("display_duration", value)}
+                    setterFunction={(value) => onchangeFunction("display_duration", value)}
+                    setter_timing="on_change"
                 />
             </div>
             <div className={styles.other_controls_wrapper}>
@@ -505,7 +513,8 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                     step={1}
                     min={0}
                     max={5}
-                    onchangeFunction={(value) => onchangeFunction("fadeout_duration", value)}
+                    setterFunction={(value) => onchangeFunction("fadeout_duration", value)}
+                    setter_timing="on_change"
                 />
             </div>
         </div>