[Update/bugfix] Plugins: Add localization system to plugins list(plugin_info.json).

Fix the issue that the i18n didn't work in development environment.

src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx

@@ -26,7 +26,7 @@ export const Plugins = () => {
 };
 
 const PluginDownloadContainer = () => {
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const {
         downloadAndExtractPlugin,
         currentPluginsData,
@@ -74,35 +74,49 @@ const PluginDownloadContainer = () => {
         <div className={styles.plugins_list_container}>
             {is_failed_to_fetch && <p>Failed to fetch plugins data</p>}
             {is_fetching && <p>Fetching plugins data...</p>}
-            {sorted_plugins_data.map((plugin) => (
-                <div key={plugin.plugin_id} className={styles.plugin_wrapper}>
-                    <p className={styles.title}>
-                        {plugin.is_downloaded
-                            ? plugin.downloaded_plugin_info?.title
-                            : plugin.latest_plugin_info?.title}
-                    </p>
-                    <p className={styles.plugin_id}>{plugin.plugin_id}</p>
-                    {plugin.is_error ? (
-                        <p style={{ color: "red" }}>Error: {plugin.error_message}</p>
-                    ) : (
-                        <div className={styles.plugin_info_wrapper}>
-                            <div className={styles.plugin_info}>
-                                <p>
-                                    {plugin.is_downloaded
-                                        ? `現在のバージョン: ${plugin.downloaded_plugin_info?.plugin_version}`
-                                        : null}
-                                </p>
+            {sorted_plugins_data.map((plugin) => {
+                const target_info = plugin.is_downloaded
+                    ? plugin.downloaded_plugin_info
+                    : plugin.latest_plugin_info;
+
+                const target_locale = target_info.locales && target_info.locales[i18n.language]
+                ? target_info.locales[i18n.language]
+                : {
+                    title: target_info.title,
+                    desc: target_info.desc || null,
+                };
+
+                return (
+                    <div key={plugin.plugin_id} className={styles.plugin_wrapper}>
+                        <p className={styles.title}>
+                            {target_locale.title}
+                        </p>
+                        <p className={styles.plugin_id}>{plugin.plugin_id}</p>
+                        <p className={styles.desc}>
+                            {target_locale.desc}
+                        </p>
+                        {plugin.is_error ? (
+                            <p style={{ color: "red" }}>Error: {plugin.error_message}</p>
+                        ) : (
+                            <div className={styles.plugin_info_wrapper}>
+                                <div className={styles.plugin_info}>
+                                    <p>
+                                        {plugin.is_downloaded
+                                            ? `現在のバージョン: ${plugin.downloaded_plugin_info?.plugin_version}`
+                                            : null}
+                                    </p>
+                                </div>
+                                <PluginsControlComponent
+                                    variable_state={variable_state}
+                                    toggleFunction={toggleFunction}
+                                    downloadStartFunction={downloadStartFunction}
+                                    plugin_status={plugin}
+                                />
                             </div>
-                            <PluginsControlComponent
-                                variable_state={variable_state}
-                                toggleFunction={toggleFunction}
-                                downloadStartFunction={downloadStartFunction}
-                                plugin_status={plugin}
-                            />
-                        </div>
-                    )}
-                </div>
-            ))}
+                        )}
+                    </div>
+                );
+            })}
         </div>
     );
 };

src-ui/plugins/dev_plugin_subtitles/locales/initI18n.js

@@ -4,11 +4,8 @@ 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);
+    i18n.addResourceBundle("en", ns, en, /* deep = */ true, /* overwrite = */ true);
+    i18n.addResourceBundle("ja", ns, ja, /* deep = */ true, /* overwrite = */ true);
 };

src-ui/plugins/dev_plugin_subtitles/plugin_info.json

@@ -1,9 +1,20 @@
 {
     "title": "VRCT Subtitles",
+    "desc": "No description",
     "plugin_id": "vrct_plugin_subtitles",
     "asset_name": "vrct_plugin_subtitles.zip",
     "location": "main_section",
-    "plugin_version": "0.0.4",
+    "plugin_version": "0.0.5",
     "min_supported_vrct_version": "3.0.5",
-    "max_supported_vrct_version": "3.0.5"
+    "max_supported_vrct_version": "3.0.5",
+    "locales": {
+        "en": {
+            "title": "VRCT Subtitles",
+            "desc": "No description"
+        },
+        "ja": {
+            "title": "VRCT 字幕表示機能",
+            "desc": "VRCTのオーバーレイ機能を使い、目の前に字幕としてテキストを表示する機能です。ワールドギミックの開始タイミングに合わせて字幕を設定し、同時に表示しているだけではあります。"
+        }
+    }
 }

src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/SubtitleSystemContainer.jsx

@@ -33,8 +33,6 @@ export const SubtitleSystemContainer = () => {
     // // カウントダウンタイマー専用の ref
     // const countdownIntervalRef = useRef(null);
 
-    console.log(t("main_page.title"));
-
     return (
         <div className={styles.container}>
             <h1 className={styles.title}>{t("main_page.title")}</h1>