[TMP] Plugins system.

src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx

@@ -9,6 +9,7 @@ import {
     AdvancedSettings,
     Vr,
     Hotkeys,
+    Plugins,
     Supporters,
     AboutVrct,
 } from "@setting_box";
@@ -32,6 +33,8 @@ export const SettingBox = () => {
             return <Hotkeys />;
         case "advanced_settings":
             return <AdvancedSettings />;
+        case "plugins":
+            return <Plugins />;
         case "supporters":
             return <Supporters />;
         case "about_vrct":

src-ui/app/config_page/setting_section/setting_box/index.js

@@ -6,5 +6,6 @@ export { Others, VrcMicMuteSyncContainer } from "./others/Others";
 export { AdvancedSettings } from "./advanced_settings/AdvancedSettings";
 export { Vr } from "./vr/Vr";
 export { Hotkeys } from "./hotkeys/Hotkeys";
+export { Plugins } from "./plugins/Plugins";
 export { AboutVrct } from "./about_vrct/AboutVrct";
 export { Supporters } from "./supporters/Supporters";

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

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from "react";
+import { usePlugins } from "@logics_configs";
+import styles from "./Plugins.module.scss";
+
+export const Plugins = () => {
+    return (
+        <div className={styles.container}>
+            <PluginDownloadContainer />
+        </div>
+    );
+};
+
+const PluginDownloadContainer = () => {
+    const [plugin_list, set_plugin_list] = useState([]);
+    const [download_progress, set_download_progress] = useState({});
+
+    const { downloadAndExtractPlugin } = usePlugins();
+
+    useEffect(() => {
+        // GitHub上のJSONファイルからプラグインリストを取得
+        const fetchPluginList = async () => {
+            try {
+                const response = await fetch(
+                    "https://raw.githubusercontent.com/ShiinaSakamoto/vrct_plugins_list/main/vrct_plugins_list.json"
+                );
+                if (!response.ok) {
+                    throw new Error("Failed to fetch plugin list");
+                }
+                const data = await response.json();
+                set_plugin_list(data);
+            } catch (error) {
+                console.error("Error fetching plugin list:", error);
+            }
+        };
+        fetchPluginList();
+    }, []);
+
+    const handleDownload = async (plugin) => {
+        await downloadAndExtractPlugin(plugin);
+    };
+
+    return (
+        <div>
+            {plugin_list.map((plugin) => (
+                <div key={plugin.plugin_id}>
+                    <h3>{plugin.title}</h3>
+                    <button onClick={() => handleDownload(plugin)}>
+                        Download and Load Plugin
+                    </button>
+                    {download_progress[plugin.plugin_id] !== undefined && (
+                        <div>
+                            Download Progress: {download_progress[plugin.plugin_id].toFixed(0)}%
+                        </div>
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+};
+

src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.module.scss

@@ -0,0 +1,5 @@
+.container {
+    display: flex;
+    gap: 6.4rem;
+    flex-direction: column;
+}