From 819783ea0909addaaa9e7d955564ac3497262654 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sat, 26 Apr 2025 01:55:28 +0900
Subject: [PATCH] [Update] Plugins: Add localization system.

---
 src-ui/app/_app_controllers/PluginsController.jsx  |  2 ++
 src-ui/logics/configs/plugins/usePlugins.js        |  4 +++-
 src-ui/plugins/dev_plugin_subtitles/index.jsx      |  7 +++++--
 src-ui/plugins/dev_plugin_subtitles/locales/en.yml |  2 ++
 .../dev_plugin_subtitles/locales/initI18n.js       | 14 ++++++++++++++
 src-ui/plugins/dev_plugin_subtitles/locales/ja.yml |  2 ++
 .../locales/usePluginTranslation.jsx               |  7 +++++++
 .../plugins/dev_plugin_subtitles/plugin_configs.js |  2 ++
 .../plugins/dev_plugin_subtitles/plugin_info.json  |  6 +++---
 .../SubtitleSystemContainer.jsx                    |  6 +++++-
 10 files changed, 45 insertions(+), 7 deletions(-)
 create mode 100644 src-ui/plugins/dev_plugin_subtitles/locales/en.yml
 create mode 100644 src-ui/plugins/dev_plugin_subtitles/locales/initI18n.js
 create mode 100644 src-ui/plugins/dev_plugin_subtitles/locales/ja.yml
 create mode 100644 src-ui/plugins/dev_plugin_subtitles/locales/usePluginTranslation.jsx

diff --git a/src-ui/app/_app_controllers/PluginsController.jsx b/src-ui/app/_app_controllers/PluginsController.jsx
index 0abeb5cb..9980f080 100644
--- a/src-ui/app/_app_controllers/PluginsController.jsx
+++ b/src-ui/app/_app_controllers/PluginsController.jsx
@@ -1,9 +1,11 @@
 import React from "react";
 import clsx from "clsx";
+import * as reactI18next from "react-i18next";
 
 if (typeof window !== "undefined") {
     window.React = React;
     window.clsx = clsx;
+    window.reactI18next = reactI18next;
 }
 
 import { LoadPluginsController } from "./plugins_controllers/LoadPluginsController";
diff --git a/src-ui/logics/configs/plugins/usePlugins.js b/src-ui/logics/configs/plugins/usePlugins.js
index 309c012c..7e4e3be9 100644
--- a/src-ui/logics/configs/plugins/usePlugins.js
+++ b/src-ui/logics/configs/plugins/usePlugins.js
@@ -50,6 +50,7 @@ export const usePlugins = () => {
     const { asyncTauriFetchGithub } = useFetch();
 
 
+    const { i18n } = useTranslation();
 
     const generatePluginContext = (downloaded_plugin_info) => {
         const plugin_context = {
@@ -69,7 +70,8 @@ export const usePlugins = () => {
 
             },
             createAtomWithHook: (...args) => createAtomWithHook(...args),
-            logics: { ...logics_common, ...logics_configs, ...logics_main }
+            logics: { ...logics_common, ...logics_configs, ...logics_main },
+            i18n: i18n,
         };
         return plugin_context;
     }
diff --git a/src-ui/plugins/dev_plugin_subtitles/index.jsx b/src-ui/plugins/dev_plugin_subtitles/index.jsx
index 1b8942d4..fc496275 100644
--- a/src-ui/plugins/dev_plugin_subtitles/index.jsx
+++ b/src-ui/plugins/dev_plugin_subtitles/index.jsx
@@ -1,10 +1,13 @@
 import { initStore, StoreContext } from "@plugin_store";
+import { initI18n } from "@initI18n";
 import { SubtitleSystemContainer } from "./subtitle_system_container/SubtitleSystemContainer";
 import { SubtitlesController } from "./subtitle_system_container/_controllers/SubtitlesController.jsx";
 
 export const init = (plugin_context) => {
-    initStore(plugin_context.createAtomWithHook);
-    const { logics } = plugin_context;
+    const { createAtomWithHook, i18n, logics } = plugin_context;
+
+    initStore(createAtomWithHook);
+    initI18n(i18n);
 
     const EntryComponents = () => {
         return (
diff --git a/src-ui/plugins/dev_plugin_subtitles/locales/en.yml b/src-ui/plugins/dev_plugin_subtitles/locales/en.yml
new file mode 100644
index 00000000..6a5ae6e1
--- /dev/null
+++ b/src-ui/plugins/dev_plugin_subtitles/locales/en.yml
@@ -0,0 +1,2 @@
+main_page:
+    title: "VRCT Subtitles"
\ No newline at end of file
diff --git a/src-ui/plugins/dev_plugin_subtitles/locales/initI18n.js b/src-ui/plugins/dev_plugin_subtitles/locales/initI18n.js
new file mode 100644
index 00000000..8154ded5
--- /dev/null
+++ b/src-ui/plugins/dev_plugin_subtitles/locales/initI18n.js
@@ -0,0 +1,14 @@
+import en from "./en.yml";
+import ja from "./ja.yml";
+import plugin_info from "../plugin_info.json";
+
+export const initI18n = (i18n) => {
+    const ns = plugin_info.plugin_id;
+    // parse once
+    const en_res = en;
+    const ja_res = ja;
+
+    // addResourceBundle will merge into i18n’s store
+    i18n.addResourceBundle("en", ns, en_res, /* deep = */ true, /* overwrite = */ true);
+    i18n.addResourceBundle("ja", ns, ja_res, /* deep = */ true, /* overwrite = */ true);
+};
\ No newline at end of file
diff --git a/src-ui/plugins/dev_plugin_subtitles/locales/ja.yml b/src-ui/plugins/dev_plugin_subtitles/locales/ja.yml
new file mode 100644
index 00000000..3862be1e
--- /dev/null
+++ b/src-ui/plugins/dev_plugin_subtitles/locales/ja.yml
@@ -0,0 +1,2 @@
+main_page:
+    title: "字幕プレイヤー"
\ No newline at end of file
diff --git a/src-ui/plugins/dev_plugin_subtitles/locales/usePluginTranslation.jsx b/src-ui/plugins/dev_plugin_subtitles/locales/usePluginTranslation.jsx
new file mode 100644
index 00000000..2e9e8d79
--- /dev/null
+++ b/src-ui/plugins/dev_plugin_subtitles/locales/usePluginTranslation.jsx
@@ -0,0 +1,7 @@
+import { useTranslation } from "react-i18next";
+import plugin_info from "../plugin_info.json";
+
+export const usePluginTranslation = () => {
+    const ns = plugin_info.plugin_id;
+    return useTranslation(ns);
+};
\ No newline at end of file
diff --git a/src-ui/plugins/dev_plugin_subtitles/plugin_configs.js b/src-ui/plugins/dev_plugin_subtitles/plugin_configs.js
index 0944d0b6..36f116d1 100644
--- a/src-ui/plugins/dev_plugin_subtitles/plugin_configs.js
+++ b/src-ui/plugins/dev_plugin_subtitles/plugin_configs.js
@@ -1,5 +1,7 @@
 export const configs = {
     alias: {
         "@plugin_store": "store/store.js",
+        "@initI18n": "locales/initI18n.js",
+        "@usePluginTranslation": "locales/usePluginTranslation.jsx",
     }
 }
\ No newline at end of file
diff --git a/src-ui/plugins/dev_plugin_subtitles/plugin_info.json b/src-ui/plugins/dev_plugin_subtitles/plugin_info.json
index 3bb37720..c5e3023a 100644
--- a/src-ui/plugins/dev_plugin_subtitles/plugin_info.json
+++ b/src-ui/plugins/dev_plugin_subtitles/plugin_info.json
@@ -3,7 +3,7 @@
     "plugin_id": "vrct_plugin_subtitles",
     "asset_name": "vrct_plugin_subtitles.zip",
     "location": "main_section",
-    "plugin_version": "0.0.0",
-    "min_supported_vrct_version": "3.0.4",
-    "max_supported_vrct_version": "3.0.6"
+    "plugin_version": "0.0.4",
+    "min_supported_vrct_version": "3.0.5",
+    "max_supported_vrct_version": "3.0.5"
 }
\ No newline at end of file
diff --git a/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/SubtitleSystemContainer.jsx b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/SubtitleSystemContainer.jsx
index 144aefb0..8a1874f9 100644
--- a/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/SubtitleSystemContainer.jsx
+++ b/src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/SubtitleSystemContainer.jsx
@@ -4,8 +4,10 @@ import { ModeSelectorContainer } from "./mode_selector_container/ModeSelectorCon
 import { PlayControlContainer } from "./play_control_container/PlayControlContainer";
 import { CountdownContainer } from "./countdown_container/CountdownContainer";
 import { SubtitlesListContainer } from "./subtitles_list_container/SubtitlesListContainer";
+import { usePluginTranslation } from "@usePluginTranslation";
 
 export const SubtitleSystemContainer = () => {
+    const { t } = usePluginTranslation();
     // const [srtContent, setSrtContent] = useState("");
     // const [cues, setCues] = useState([]);
     // const [isPlaying, setIsPlaying] = useState(false);
@@ -31,9 +33,11 @@ export const SubtitleSystemContainer = () => {
     // // カウントダウンタイマー専用の ref
     // const countdownIntervalRef = useRef(null);
 
+    console.log(t("main_page.title"));
+
     return (
         <div className={styles.container}>
-            <h1 className={styles.title}>字幕プレイヤー</h1>
+            <h1 className={styles.title}>{t("main_page.title")}</h1>
             <InputFileContainer />
             <ModeSelectorContainer />
             <PlayControlContainer />