[Update] Plugins: Add notifications.

locales/en.yml

@@ -244,3 +244,17 @@ config_page:
             label: "Open Config File"
         switch_compute_device:
             label: "Switch VRCT To CPU/GPU Version"
+
+plugin_notifications:
+    downloading: Downloading the plugin.
+    downloaded_success: Downloaded successfully.
+    downloaded_error: Download failed.
+
+    updating: Updating the plugin.
+    updated_success: Updated successfully.
+    updated_error: Update failed.
+
+    disabled_out_of_support: THe plugin has been disabled. It's not supported on this VRCT version.
+
+    is_enabled: The plugin has enabled.
+    is_disabled: The plugin has disabled.

src-ui/app/_app_controllers/plugins_controllers/MergePluginsController.jsx

@@ -1,13 +1,15 @@
 import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { store } from "@store";
 import { usePlugins } from "@logics_configs";
 import { useSoftwareVersion } from "@logics_common";
+import { useNotificationStatus } from "@logics_common";
 
 export const MergePluginsController = () => {
+    const { t } = useTranslation();
     const {
         currentLoadedPlugins,
         updatePluginsData,
-        updateTargetPluginData,
         currentPluginsData,
         currentFetchedPluginsInfo,
         currentSavedPluginsStatus,
@@ -15,6 +17,7 @@ export const MergePluginsController = () => {
         setTargetSavedPluginsStatus_Init,
     } = usePlugins();
     const { checkVrctVerCompatibility } = useSoftwareVersion();
+    const { showNotification_Success, showNotification_Error } = useNotificationStatus();
 
     // downloaded, fetched, saved の各情報をまとめてマージ
     useEffect(() => {
@@ -148,16 +151,19 @@ export const MergePluginsController = () => {
                 plugin.is_latest_version_available
             ) {
                 if (!downloadingRef.current.has(plugin.plugin_id)) {
+                    showNotification_Success(t("plugin_notifications.updating"));
                     downloadingRef.current.add(plugin.plugin_id);
                     const target_plugin_id = plugin.plugin_id;
                     downloadAndExtractPlugin(plugin)
                         .then(() => {
                             console.log(`Plugin ${target_plugin_id} updated successfully`);
                             downloadingRef.current.delete(target_plugin_id);
+                            showNotification_Success(t("plugin_notifications.updated_success"));
                         })
                         .catch((error) => {
                             console.error(`Plugin ${target_plugin_id} update failed`, error);
                             downloadingRef.current.delete(target_plugin_id);
+                            showNotification_Error(t("plugin_notifications.updated_error"));
                         });
                 }
             }
@@ -176,6 +182,7 @@ export const MergePluginsController = () => {
                             plugin.latest_plugin_info &&
                             !plugin.latest_plugin_info?.is_plugin_supported
                         ) {
+                            showNotification_Error(t("plugin_notifications.disabled_out_of_support"));
                             plugin.is_enabled = false;
                             setTargetSavedPluginsStatus_Init(plugin.plugin_id, false);
                         }
@@ -184,6 +191,7 @@ export const MergePluginsController = () => {
                             !plugin.downloaded_plugin_info.is_plugin_supported &&
                             plugin.is_outdated
                         ) {
+                            showNotification_Error(t("plugin_notifications.disabled_out_of_support"));
                             plugin.is_enabled = false;
                             setTargetSavedPluginsStatus_Init(plugin.plugin_id, false);
                         }

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

@@ -1,7 +1,9 @@
 import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { usePlugins } from "@logics_configs";
 import styles from "./Plugins.module.scss";
 import { PluginsControlComponent } from "../_components/plugins_control_component/PluginsControlComponent";
+import { useNotificationStatus } from "@logics_common";
 
 export const Plugins = () => {
     const {
@@ -24,6 +26,7 @@ export const Plugins = () => {
 };
 
 const PluginDownloadContainer = () => {
+    const { t } = useTranslation();
     const {
         downloadAndExtractPlugin,
         currentPluginsData,
@@ -31,16 +34,22 @@ const PluginDownloadContainer = () => {
         toggleSavedPluginsStatus,
         handlePendingPlugin,
     } = usePlugins();
+    const { showNotification_Success, showNotification_Error } = useNotificationStatus();
 
     // ダウンロード開始時の状態更新処理
     const downloadStartFunction = async (target_plugin_id) => {
         handlePendingPlugin(target_plugin_id, true);
+        showNotification_Success(t("plugin_notifications.downloading"));
 
         const target_plugin_info = currentPluginsData.data.find(
             (d) => d.plugin_id === target_plugin_id
         );
         downloadAndExtractPlugin(target_plugin_info).then(() => {
             handlePendingPlugin(target_plugin_id, false);
+            showNotification_Success(t("plugin_notifications.downloaded_success"));
+        }).catch(error => {
+            console.error(error);
+            showNotification_Error(t("plugin_notifications.downloaded_error"));
         });
     };
 

src-ui/logics/configs/plugins/usePlugins.js

@@ -1,4 +1,5 @@
 import { invoke } from "@tauri-apps/api/tauri";
+import { useTranslation } from "react-i18next";
 import { IS_PLUGIN_PATH_DEV_MODE, getPluginsList } from "@ui_configs";
 import {
     store,
@@ -25,17 +26,18 @@ dev_plugins.forEach(async ({entry_path}) => {
 
 import JSZip from "jszip";
 
-import { useFetch, useSoftwareVersion } from "@logics_common";
+import { useFetch, useSoftwareVersion, useNotificationStatus } from "@logics_common";
 
 import * as logics_configs from "@logics_configs";
 import * as logics_main from "@logics_main";
 import * as logics_common from "@logics_common";
 
-
 // PLUGIN_LIST_URL は中央リポジトリにある、各プラグインの plugin_info.json への URL の配列を保持する JSON の URL
 const PLUGIN_LIST_URL = getPluginsList();
 
 export const usePlugins = () => {
+    const { t } = useTranslation();
+    const { showNotification_Success, showNotification_Error } = useNotificationStatus();
     const { asyncStdoutToPython } = useStdoutToPython();
 
     const { currentFetchedPluginsInfo, updateFetchedPluginsInfo, pendingFetchedPluginsInfo } = useStore_FetchedPluginsInfo();
@@ -308,6 +310,9 @@ export const usePlugins = () => {
             new_value = currentSavedPluginsStatus.data.map((d) => {
                 if (d.plugin_id === target_plugin_id) {
                     d.is_enabled = !d.is_enabled;
+                    (d.is_enabled)
+                        ? showNotification_Success(t("plugin_notifications.is_enabled"))
+                        : showNotification_Success(t("plugin_notifications.is_disabled"));
                 }
                 return d;
             });
@@ -317,6 +322,7 @@ export const usePlugins = () => {
                 plugin_id: target_plugin_id,
                 is_enabled: true,
             });
+            showNotification_Success(t("plugin_notifications.is_enabled"))
         }
 
         // 「currentPluginsData.data」でis_downloadedがtrueのものだけ残す