[TMP] Plugins system.

src-ui/app/App.jsx

@@ -9,6 +9,7 @@ import {
     UiSizeController,
     FontFamilyController,
     TransparencyController,
+    PluginsController,
 } from "./_app_controllers/index.js";
 
 import { WindowTitleBar } from "./window_title_bar/WindowTitleBar";
@@ -40,6 +41,7 @@ export const App = () => {
             <FontFamilyController />
             <TransparencyController />
             <WindowGeometryController />
+            <PluginsController />
 
             {(currentIsBackendReady.data === false || currentIsVrctAvailable.data === false)
                 ? <SplashComponent />

src-ui/app/_app_controllers/PluginsController.jsx

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import { usePlugins } from "@logics_configs";
+
+// ホスト側でReactやjotaiをグローバル変数として提供
+import ReactModule from "react";
+if (typeof window !== "undefined") {
+    window.React = ReactModule;
+}
+
+export const PluginsController = () => {
+    const { loadAllPlugins } = usePlugins();
+    useEffect(() => {
+        loadAllPlugins();
+    }, []);
+
+    return null;
+};

src-ui/app/_app_controllers/index.js

@@ -5,4 +5,5 @@ export { UiLanguageController } from "./UiLanguageController";
 export { ConfigPageCloseTriggerController } from "./ConfigPageCloseTriggerController";
 export { UiSizeController } from "./UiSizeController";
 export { FontFamilyController } from "./FontFamilyController";
-export { TransparencyController } from "./TransparencyController";
+export { TransparencyController } from "./TransparencyController";
+export { PluginsController } from "./PluginsController";

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

src-ui/app/config_page/sidebar_section/SidebarSection.jsx

@@ -12,6 +12,7 @@ export const SidebarSection = () => {
                     <Tab tab_id="vr" />
                     <Tab tab_id="others" />
                     <Tab tab_id="hotkeys" />
+                    <Tab tab_id="plugins" />
                     <Tab tab_id="advanced_settings" />
                 </div>
                 <div className={styles.separated_tabs_wrapper}>

src-ui/app/main_page/main_section/MainSection.jsx

@@ -9,12 +9,16 @@ import { useStore_IsOpenedLanguageSelector } from "@store";
 import { useLanguageSettings } from "@logics_main";
 import { useEffect } from "react";
 import { SubtitleSystemContainer } from "./subtitle_system_container/SubtitleSystemContainer";
+
+import { PluginHost } from "./PluginHost";
+
 export const MainSection = () => {
 
     return (
         <div className={styles.container}>
             <TopBar />
-            <SubtitleSystemContainer />
+            {/* <SubtitleSystemContainer /> */}
+            <PluginHost />
             {/* <MessageContainer /> */}
             <HandleLanguageSelector />
         </div>

src-ui/app/main_page/main_section/PluginHost.jsx

@@ -0,0 +1,20 @@
+// PluginHost.jsx
+import React from "react";
+import { useStore_LoadedPluginsList } from "@store";
+
+// export const PluginHost = ({ location }) => {
+export const PluginHost = () => {
+    const { currentLoadedPluginsList } = useStore_LoadedPluginsList();
+    console.log(currentLoadedPluginsList.data);
+
+    return (
+        <div>
+            {currentLoadedPluginsList.data
+                .filter((plugin) => plugin.location === "main_section")
+                .map((plugin, index) => {
+                    const PluginComponent = plugin.component;
+                    return PluginComponent ? <PluginComponent key={index} /> : null;
+                })}
+        </div>
+    );
+};