[Update] Plugins: Add localization system.

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

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

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 { createAtomWithHook, i18n, logics } = plugin_context;
-    const { 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",
+    "plugin_version": "0.0.4",
-    "min_supported_vrct_version": "3.0.4",
+    "min_supported_vrct_version": "3.0.5",
-    "max_supported_vrct_version": "3.0.6"
+    "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 />