[Update] Add Transcription Tab. Mix/Speaker, record timeout, phrase timeout, max words.

src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx

@@ -2,6 +2,7 @@ import { useStore_SelectedConfigTabId } from "@store";
 
 import { Device } from "./device/Device";
 import { Appearance } from "./appearance/Appearance";
+import { Transcription } from "./transcription/Transcription";
 // import { Others } from "./others/Others";
 // import { AboutVrct } from "./about_vrct/AboutVrct";
 
@@ -14,6 +15,8 @@ export const SettingBox = () => {
         //     return <Others />;
         case "appearance":
             return <Appearance />;
+        case "transcription":
+            return <Transcription />;
         // case "about_vrct":
         //     return <AboutVrct />;
 

src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx

@@ -1,17 +1,9 @@
-import React, { useState, useRef, forwardRef, useImperativeHandle } from "react";
+import React, { useRef, forwardRef, useImperativeHandle } from "react";
 import styles from "./_Entry.module.scss";
 
-const _Entry = forwardRef(({ width, onChange, initialValue = "" }, ref) => {
-    const [input_value, setInputValue] = useState(initialValue);
+const _Entry = forwardRef((props, ref) => {
     const inputRef = useRef();
 
-    const onChangeFunction = (e) => {
-        setInputValue(e.currentTarget.value);
-        if (onChange) {
-            onChange(e);
-        }
-    };
-
     useImperativeHandle(ref, () => ({
         focus: () => {
             inputRef.current.focus();
@@ -22,13 +14,13 @@ const _Entry = forwardRef(({ width, onChange, initialValue = "" }, ref) => {
         <div className={styles.entry_container}>
             <div
                 className={styles.entry_wrapper}
-                style={{ width }}
+                style={{width: props.width }}
             >
                 <input
                     ref={inputRef}
                     className={styles.entry_input_area}
-                    value={input_value}
-                    onChange={onChangeFunction}
+                    value={props.ui_variable}
+                    onChange={(e) => props.onChange(e)}
                 />
             </div>
         </div>

src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.jsx

@@ -1,15 +1,10 @@
 import styles from "./Entry.module.scss";
 import { _Entry } from "../_atoms/_entry/_Entry";
 
-export const Entry = ({width}) => {
-
-    const handleInputChange = (e) => {
-        console.log(e.currentTarget.value);
-    };
-
+export const Entry = (props) => {
     return (
         <div className={styles.entry_container}>
-            <_Entry width={width} onChange={handleInputChange} initialValue="" />
+            <_Entry {...props} />
         </div>
     );
 };

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

@@ -0,0 +1,215 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./Transcription.module.scss";
+
+import {
+    useMicRecordTimeout,
+    useMicPhraseTimeout,
+    useMicMaxWords,
+
+    useSpeakerRecordTimeout,
+    useSpeakerPhraseTimeout,
+    useSpeakerMaxWords,
+} from "@logics_configs";
+
+import {
+    EntryContainer,
+} from "../_templates/Templates";
+
+export const Transcription = () => {
+    return (
+        <>
+            <Mic_Container />
+            <Speaker_Container />
+        </>
+    );
+};
+
+
+const Mic_Container = () => {
+    return (
+        <>
+            <MicRecordTimeout_Box />
+            <MicPhraseTimeout_Box />
+            <MicMaxWords_Box />
+        </>
+    );
+};
+
+const MicRecordTimeout_Box = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentMicRecordTimeout, setMicRecordTimeout } = useMicRecordTimeout();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setMicRecordTimeout(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentMicRecordTimeout.data);
+    }, [currentMicRecordTimeout]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.mic_record_timeout.label")}
+            desc={t("config_page.mic_record_timeout.desc")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+const MicPhraseTimeout_Box = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentMicPhraseTimeout, setMicPhraseTimeout } = useMicPhraseTimeout();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setMicPhraseTimeout(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentMicPhraseTimeout.data);
+    }, [currentMicPhraseTimeout]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.mic_phrase_timeout.label")}
+            desc={t("config_page.mic_phrase_timeout.desc")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+const MicMaxWords_Box = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentMicMaxWords, setMicMaxWords } = useMicMaxWords();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setMicMaxWords(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentMicMaxWords.data);
+    }, [currentMicMaxWords]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.mic_max_phrase.label")}
+            desc={t("config_page.mic_max_phrase.desc")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+
+
+
+
+
+const Speaker_Container = () => {
+    return (
+        <>
+            <SpeakerRecordTimeout_Box />
+            <SpeakerPhraseTimeout_Box />
+            <SpeakerMaxWords_Box />
+        </>
+    );
+};
+
+const SpeakerRecordTimeout_Box = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentSpeakerRecordTimeout, setSpeakerRecordTimeout } = useSpeakerRecordTimeout();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setSpeakerRecordTimeout(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentSpeakerRecordTimeout.data);
+    }, [currentSpeakerRecordTimeout]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.speaker_record_timeout.label")}
+            desc={t("config_page.speaker_record_timeout.desc")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+const SpeakerPhraseTimeout_Box = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentSpeakerPhraseTimeout, setSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setSpeakerPhraseTimeout(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentSpeakerPhraseTimeout.data);
+    }, [currentSpeakerPhraseTimeout]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.speaker_phrase_timeout.label")}
+            desc={t("config_page.speaker_phrase_timeout.desc")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+const SpeakerMaxWords_Box = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentSpeakerMaxWords, setSpeakerMaxWords } = useSpeakerMaxWords();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setSpeakerMaxWords(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentSpeakerMaxWords.data);
+    }, [currentSpeakerMaxWords]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.speaker_max_phrase.label")}
+            desc={t("config_page.speaker_max_phrase.desc")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};