[Update] Add hotkeys main functions

2025-01-17 02:41:27 +09:00
parent 34d221c437
commit bac7bb15d3
11 changed files with 145 additions and 57 deletions
--- a/src-ui/app/_app_controllers/GlobalHotKeyController.jsx
+++ b/src-ui/app/_app_controllers/GlobalHotKeyController.jsx
@@ -3,6 +3,7 @@ import { register, unregisterAll, isRegistered } from "@tauri-apps/api/globalSho
 import { useEffect } from "react";
 import { store } from "@store";
 import { useHotkeys } from "@logics_configs";
+import { useMainFunction } from "@logics_main";

 // 修飾キーのパースを行う関数
 const parseHotkey = (hotkeyString) => {
@@ -22,40 +23,65 @@ const parseHotkey = (hotkeyString) => {
 export const GlobalHotKeyController = () => {
    const { currentHotkeys } = useHotkeys();

+    const {
+        toggleTranslation,
+        toggleTranscriptionSend,
+        toggleTranscriptionReceive,
+    } = useMainFunction();
+
    useEffect(() => {
        const registerShortcuts = async () => {
-            const shortcut_raw = currentHotkeys.data.toggle_active_vrct;
-            console.log(shortcut_raw);
-
-            if (!shortcut_raw) {
-                console.warn("No hotkey defined.");
-                return;
-            }
-
-            const shortcut = parseHotkey(shortcut_raw);
-
            try {
                // 既存のショートカットをすべて解除
                await unregisterAll();

-                // 新しいショートカットを登録
-                const isAlreadyRegistered = await isRegistered(shortcut);
-                if (!isAlreadyRegistered) {
-                    await register(shortcut, async () => {
-                        console.log(`Shortcut "${shortcut}" triggered, setting focus.`);
-                        const minimized = await appWindow.isMinimized();
-                        if (minimized === true) {
-                            appWindow.unminimize();
-                            await appWindow.setFocus();
-                            store.text_area_ref.current?.focus();
-                        } else {
-                            appWindow.minimize();
-                        }
-                    });
-                    console.log(`Registered global shortcut: ${shortcut}`);
+                const hotkeyEntries = Object.entries(currentHotkeys.data);
+
+                for (const [actionKey, hotkeyRaw] of hotkeyEntries) {
+                    if (!hotkeyRaw) continue;
+
+                    const shortcut = parseHotkey(hotkeyRaw);
+                    const isAlreadyRegistered = await isRegistered(shortcut);
+
+                    if (!isAlreadyRegistered) {
+                        await register(shortcut, async () => {
+                            console.log(`Shortcut for "${actionKey}" triggered.`);
+
+                            switch (actionKey) {
+                                case "toggle_vrct_visibility": {
+                                    const minimized = await appWindow.isMinimized();
+                                    if (minimized) {
+                                        appWindow.unminimize();
+                                        await appWindow.setFocus();
+                                        store.text_area_ref.current?.focus();
+                                    } else {
+                                        appWindow.minimize();
+                                    }
+                                    break;
+                                }
+                                case "toggle_translation": {
+                                    toggleTranslation();
+                                    break;
+                                }
+                                case "toggle_transcription_send": {
+                                    toggleTranscriptionSend();
+                                    break;
+                                }
+                                case "toggle_transcription_receive": {
+                                    toggleTranscriptionReceive();
+                                    break;
+                                }
+                                default: {
+                                    console.warn(`No handler defined for action: ${actionKey}`);
+                                    break;
+                                }
+                            }
+                        });
+                        console.log(`Registered global shortcut: ${shortcut} for action: ${actionKey}`);
+                    }
                }
            } catch (error) {
-                console.error("Failed to register global shortcut:", error);
+                console.error("Failed to register global shortcuts:", error);
            }
        };

@@ -67,7 +93,7 @@ export const GlobalHotKeyController = () => {
                console.error("Failed to unregister shortcuts:", error);
            });
        };
-    }, [currentHotkeys.data.toggle_active_vrct]); // 監視対象を明確に指定
+    }, [currentHotkeys.data]); // 監視対象を全体に変更

    return null;
 };
--- a/src-ui/app/config_page/setting_section/setting_box/_components/hotkeys_entry/HotkeysEntry.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/hotkeys_entry/HotkeysEntry.jsx
@@ -17,8 +17,6 @@ export const HotkeysEntry = (props) => {
        const init_display_value = props.value[props.hotkey_id] ? props.value[props.hotkey_id].join(" + ") : "";
        setDisplayValue(init_display_value);
    }, []);
-    console.log(props.value[props.hotkey_id]);
-

    const updateHotkeys = (keys) => {
        entryRef.current.blur();
@@ -35,9 +33,10 @@ export const HotkeysEntry = (props) => {
        const keys = [];
        const nonModifierKeys = [];

-        ["Ctrl", "Shift", "Alt", "Super"].forEach((modKey) => {
+        ["Ctrl", "Shift", "Alt", "Meta"].forEach((modKey) => {
            if (event[`${modKey.toLowerCase()}Key`] && !keys.includes(modKey)) {
-                keys.push(modKey);
+                let register_mod_key =  (modKey === "Meta") ? "Super" : modKey;
+                keys.push(register_mod_key);
            }
        });

@@ -80,6 +79,9 @@ export const HotkeysEntry = (props) => {
            );
            if (hasNonModifierKeys) {
                updateHotkeys(keysRef.current);
+            } else {
+                const display_value = props.value[props.hotkey_id] ? props.value[props.hotkey_id].join(" + ") : "";
+                setDisplayValue(display_value);
            }
        }
    };
--- a/src-ui/app/config_page/setting_section/setting_box/hotkeys/Hotkeys.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/hotkeys/Hotkeys.jsx
@@ -1,7 +1,7 @@
 import { useHotkeys } from "@logics_configs";
 import styles from "./Hotkeys.module.scss";
 import { HotkeysEntryContainer } from "../_templates/Templates";
-
+import { useTranslation } from "react-i18next";
 export const Hotkeys = () => {
    return (
        <div className={styles.container}>
@@ -11,13 +11,35 @@ export const Hotkeys = () => {
 };

 const HotkeysBoxContainer = () => {
+    const { t } = useTranslation();
    const { currentHotkeys, setHotkeys } = useHotkeys();
+
    return (
        <div className={styles.container}>
            <HotkeysEntryContainer
-                // label={t("config_page.appearance.send_message_button_type.label")}
-                label="Toggle active input box"
-                hotkey_id="toggle_active_vrct"
+                label={t("config_page.hotkeys.toggle_vrct_visibility.label")}
+                hotkey_id="toggle_vrct_visibility"
+                value={currentHotkeys.data}
+                state={currentHotkeys.state}
+                setHotkeys={setHotkeys}
+            />
+            <HotkeysEntryContainer
+                label={t("config_page.hotkeys.toggle_translation.label")}
+                hotkey_id="toggle_translation"
+                value={currentHotkeys.data}
+                state={currentHotkeys.state}
+                setHotkeys={setHotkeys}
+            />
+            <HotkeysEntryContainer
+                label={t("config_page.hotkeys.toggle_transcription_send.label")}
+                hotkey_id="toggle_transcription_send"
+                value={currentHotkeys.data}
+                state={currentHotkeys.state}
+                setHotkeys={setHotkeys}
+            />
+            <HotkeysEntryContainer
+                label={t("config_page.hotkeys.toggle_transcription_receive.label")}
+                hotkey_id="toggle_transcription_receive"
                value={currentHotkeys.data}
                state={currentHotkeys.state}
                setHotkeys={setHotkeys}
--- a/src-ui/app/config_page/setting_section/setting_box/hotkeys/Hotkeys.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/hotkeys/Hotkeys.module.scss
@@ -1,5 +1,5 @@
 .container {
    display: flex;
-    gap: 6.4rem;
+    // gap: 6.4rem;
    flex-direction: column;
 }
--- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
+++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
@@ -41,7 +41,7 @@ export const MessageInputBox = () => {

    const onSubmitFunction = (e) => {
        e.preventDefault();
-        appWindow.minimize();
+        // appWindow.minimize();

        if (!currentMessageInputValue.data.trim()) return updateMessageInputValue("");

--- a/src-ui/logics/configs/hotkeys/useHotkeys.js
+++ b/src-ui/logics/configs/hotkeys/useHotkeys.js
@@ -12,7 +12,13 @@ export const useHotkeys = () => {

    const setHotkeys = (hotkeys) => {
        pendingHotkeys();
-        asyncStdoutToPython("/set/data/hotkeys", hotkeys);
+        const send_obj = {
+            ...currentHotkeys.data,
+            ...hotkeys,
+        };
+        asyncStdoutToPython("/set/data/hotkeys", send_obj);
+
+
    };

    return {
--- a/src-ui/logics/main/useMainFunction.js
+++ b/src-ui/logics/main/useMainFunction.js
@@ -6,7 +6,7 @@ import {
    useStore_TranscriptionReceiveStatus,
    useStore_ForegroundStatus,
 } from "@store";
-
+import { useCallback } from "react";
 import { useStdoutToPython } from "@logics/useStdoutToPython";

 export const useMainFunction = () => {
@@ -40,7 +40,11 @@ export const useMainFunction = () => {
            asyncStdoutToPython("/set/disable/translation");
        }
    };
-    const toggleTranslation = () => setTranslation(!currentTranslationStatus.data);
+    const toggleTranslation = () => {
+        updateTranslationStatus(prev_state => {
+            if (prev_state.state === "ok") setTranslation(!prev_state.data);
+        }, { set_state: "pending" });
+    };

    const setTranscriptionSend = (to_enable) => {
        pendingTranscriptionSendStatus();
@@ -50,7 +54,11 @@ export const useMainFunction = () => {
            asyncStdoutToPython("/set/disable/transcription_send");
        }
    };
-    const toggleTranscriptionSend = () => setTranscriptionSend(!currentTranscriptionSendStatus.data);
+    const toggleTranscriptionSend = () => {
+        updateTranscriptionSendStatus(prev_state => {
+            if (prev_state.state === "ok") setTranscriptionSend(!prev_state.data);
+        }, { set_state: "pending" });
+    };

    const setTranscriptionReceive = (to_enable) => {
        pendingTranscriptionReceiveStatus();
@@ -60,7 +68,11 @@ export const useMainFunction = () => {
            asyncStdoutToPython("/set/disable/transcription_receive");
        }
    };
-    const toggleTranscriptionReceive = () => setTranscriptionReceive(!currentTranscriptionReceiveStatus.data);
+    const toggleTranscriptionReceive = () => {
+        updateTranscriptionReceiveStatus(prev_state => {
+            if (prev_state.state === "ok") setTranscriptionReceive(!prev_state.data);
+        }, { set_state: "pending" });
+    };


    const toggleForeground = () => {
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -55,20 +55,20 @@ const createAtomWithHook = (initialValue, base_name, options) => {
            });
        };

-        const updateAtom = (payload) => {
+        const updateAtom = (payload, options = {}) => {
+            const { remain_state = false, set_state } = options;
+
            setAtom((currentValue) => {
-                if (typeof payload === "function") {
-                    const updated_data = payload(currentValue);
-                    return {
-                        state: "ok",
-                        data: updated_data,
-                    };
-                } else {
-                    return {
-                        state: "ok",
-                        data: payload,
-                    };
-                }
+                const new_state = set_state ?? (remain_state ? currentValue.state : "ok");
+
+                const updated_data = typeof payload === "function"
+                    ? payload(currentValue)
+                    : payload;
+
+                return {
+                    state: new_state,
+                    data: updated_data,
+                };
            });
        };

@@ -266,7 +266,10 @@ export const { atomInstance: Atom_EnableSendReceivedMessageToVrc, useHook: useSt

 // Hotkeys
 export const { atomInstance: Atom_Hotkeys, useHook: useStore_Hotkeys } = createAtomWithHook({
-    toggle_active_vrct: null,
+    toggle_vrct_visibility: null,
+    toggle_translation: null,
+    toggle_transcription_send: null,
+    toggle_transcription_receive: null,
 }, "Hotkeys");

 // Advanced Settings