[Update] Plugins: Add localization system.

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 (

src-ui/plugins/dev_plugin_subtitles/locales/en.yml

@@ -0,0 +1,2 @@
+main_page:
+    title: "VRCT Subtitles"

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);
+};

src-ui/plugins/dev_plugin_subtitles/locales/ja.yml

@@ -0,0 +1,2 @@
+main_page:
+    title: "字幕プレイヤー"

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);
+};

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",
     }
 }

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"
 }

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 />