every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Refactor/bugfix/TMP] TMP:

Browse Source 
Separate plugins controller.
Add ui pattern for outdated plugins and the plugin that is not supported current vrct version but supported in newest vrct version.
This commit is contained in:
Sakamoto Shiina
2025-04-15 16:48:50 +09:00
parent ddc6408828
commit 379ca86b45
10 changed files with 251 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src-ui/app/App.jsx
View File

@@ -29,7 +29,10 @@ export const App = () => {
const { currentIsBackendReady } = useIsBackendReady();
const { WindowGeometryController } = useWindow();
const { i18n } = useTranslation();
const fetchPluginsHasRunRef = useRef(false);
const fetchPluginsHasRunRef = useRef({
is_initialized_load_plugin: false,
is_fetched_plugins_info: false,
});
return (
<div className={styles.container}>

151
src-ui/app/_app_controllers/PluginsController.jsx
View File

@@ -1,142 +1,15 @@
import React, { useEffect, useRef } from "react";
import { usePlugins } from "@logics_configs";
import clsx from "clsx";
import React, { useEffect } from "react";
import { LoadPluginsController } from "./plugins_controllers/LoadPluginsController";
import { FetchLatestPluginsDataController } from "./plugins_controllers/FetchLatestPluginsDataController";
import { MergeSavedPluginsStatusController } from "./plugins_controllers/MergeSavedPluginsStatusController";
if (typeof window !== "undefined") {
window.React = React;
window.clsx = clsx;
}
export const PluginsController = () => {
export const PluginsController = ({ fetchPluginsHasRunRef }) => {
const {
asyncLoadAllPlugins,
asyncFetchPluginsInfo,
currentPluginsData,
updatePluginsData,
currentSavedPluginsStatus,
updateIsPluginsInitialized,
downloadAndExtractPlugin,
} = usePlugins();
useEffect(() => {
const loadPlugins = async () => {
try {
await asyncLoadAllPlugins();
const info_array = await asyncFetchPluginsInfo();
updatePluginsData(prev => {
// Map を利用してそれぞれの配列を plugin_id で参照できるようにする
const info_map = new Map(info_array.map(info => [info.plugin_id, info]));
const prev_map = new Map(prev.data.map(item => [item.plugin_id, item]));
const new_data = [];
for (const info of info_array) {
let new_plugin_info = {};
if (prev_map.has(info.plugin_id)) { // plugin_id 登録済み
const target_downloaded_plugin = prev_map.get(info.plugin_id);
if (target_downloaded_plugin.is_downloaded) { // 既にダウンロード済み
const is_latest_version_available = !(target_downloaded_plugin.plugin_version === info.plugin_version);
new_plugin_info = {
...target_downloaded_plugin,
is_downloaded: true,
latest_plugin_info: { ...info },
is_latest_version_available: is_latest_version_available,
is_latest_version_already: (target_downloaded_plugin.downloaded_plugin_info?.plugin_version === info.plugin_version),
};
} else { // infoにもあり登録済みだがダウンロードされていない
new_plugin_info = {
...target_downloaded_plugin,
is_downloaded: false,
is_latest_version_already: false,
is_latest_version_available: info.is_latest_version_available,
latest_plugin_info: { ...info },
}
}
} else { // 未ダウンロード
new_plugin_info = {
plugin_id: info.plugin_id,
is_downloaded: false,
is_latest_version_already: false,
latest_plugin_info: { ...info },
};
}
new_data.push(new_plugin_info);
}
// prev.data にのみ存在するアイテム = latest plugin infoには存在しない
// を追加し、is_outdated: true を付与
prev.data.forEach(item => {
if (!info_map.has(item.plugin_id)) {
new_data.push({ ...item, is_outdated: true });
}
});
new_data.forEach(plugin => {
if (!plugin.is_outdated) {
plugin.is_latest_version_available = (plugin.latest_plugin_info.is_plugin_supported);
}
});
// ダウンロード済みで最新版じゃない場合、自動的にアップデート
// is_latest_version_supported: true のみ。
// 失敗した場合、現在のバージョンが非対応の場合はdisabledにする。
new_data.forEach(async plugin => {
if (plugin.is_enabled) {
if (!plugin.is_latest_version_already && plugin.is_latest_version_available) {
await downloadAndExtractPlugin(plugin);
}
}
});
new_data.forEach(async plugin => {
if (plugin.is_enabled) {
if (!plugin.downloaded_plugin_info?.is_plugin_supported) {
plugin.is_enabled = false
}
}
});
return new_data;
});
} catch (error) {
console.error(error);
}
};
if (!fetchPluginsHasRunRef.current) {
loadPlugins();
updateIsPluginsInitialized(true);
}
return () => fetchPluginsHasRunRef.current = true;
}, []);
useEffect(() => {
updatePluginsData(prev => {
// currentSavedPluginsStatus.data の各要素を Map 化して plugin_id で参照
const saved_map = new Map(currentSavedPluginsStatus.data.map(saved => [saved.plugin_id, saved]));
const prev_map = new Map(prev.data.map(item => [item.plugin_id, item]));
// prev.data にある各アイテムについて、保存済みの状態情報があればマージ
const merged = prev.data.map(item => {
if (saved_map.has(item.plugin_id)) {
return { ...item, is_enabled: saved_map.get(item.plugin_id).is_enabled };
}
return item;
});
// currentSavedPluginsStatus.data にのみ存在する項目があれば追加
currentSavedPluginsStatus.data.forEach(saved => {
if (!prev_map.has(saved.plugin_id)) {
merged.push({ plugin_id: saved.plugin_id, is_enabled: saved.is_enabled });
}
});
return merged;
});
}, [currentSavedPluginsStatus]);
return null;
return (
<>
<LoadPluginsController />
<FetchLatestPluginsDataController />
<MergeSavedPluginsStatusController />
</>
);
};

115
src-ui/app/_app_controllers/plugins_controllers/FetchLatestPluginsDataController.jsx Normal file
View File

@@ -0,0 +1,115 @@
import { useEffect } from "react";
import { usePlugins } from "@logics_configs";
export const FetchLatestPluginsDataController = () => {
const {
asyncFetchPluginsInfo,
updatePluginsData,
downloadAndExtractPlugin,
currentIsInitializedLoadPlugin,
currentIsFetchedPluginsInfo,
updateIsFetchedPluginsInfo,
} = usePlugins();
const asyncUpdateLatestPluginsData = async () => {
try {
const info_array = await asyncFetchPluginsInfo();
updatePluginsData(prev => {
// Map を利用してそれぞれの配列を plugin_id で参照できるようにする
const info_map = new Map(info_array.map(info => [info.plugin_id, info]));
const prev_map = new Map(prev.data.map(item => [item.plugin_id, item]));
console.log(prev_map);
const new_data = [];
for (const info of info_array) {
let new_plugin_info = {};
if (prev_map.has(info.plugin_id)) { // plugin_id 登録済み
const target_downloaded_plugin = prev_map.get(info.plugin_id);
if (target_downloaded_plugin.is_downloaded) { // 既にダウンロード済み
const is_latest_version_available = !(target_downloaded_plugin.plugin_version === info.plugin_version);
new_plugin_info = {
...target_downloaded_plugin,
is_downloaded: true,
latest_plugin_info: { ...info },
is_latest_version_available: is_latest_version_available,
is_latest_version_already: (target_downloaded_plugin.downloaded_plugin_info?.plugin_version === info.plugin_version),
};
} else { // infoにもあり登録済みだがダウンロードされていない
new_plugin_info = {
...target_downloaded_plugin,
is_downloaded: false,
is_latest_version_already: false,
is_latest_version_available: info.is_latest_version_available,
latest_plugin_info: { ...info },
}
}
} else { // 未ダウンロード
new_plugin_info = {
plugin_id: info.plugin_id,
is_downloaded: false,
is_latest_version_already: false,
latest_plugin_info: { ...info },
};
}
new_data.push(new_plugin_info);
}
// prev.data にのみ存在するアイテム = latest plugin infoには存在しない
// を追加し、is_outdated: true を付与
prev.data.forEach(item => {
if (!info_map.has(item.plugin_id)) {
new_data.push({ ...item, is_outdated: true });
}
});
new_data.forEach(plugin => {
if (!plugin.is_outdated) {
plugin.is_latest_version_available = (plugin.latest_plugin_info.is_plugin_supported);
}
});
// ダウンロード済みで最新版じゃない場合、自動的にアップデート
// is_latest_version_supported: true のみ。
// 失敗した場合、現在のバージョンが非対応の場合はdisabledにする。
new_data.forEach(async plugin => {
if (plugin.is_enabled) {
console.log(plugin);
if (!plugin.is_latest_version_already && plugin.is_latest_version_available) {
await downloadAndExtractPlugin(plugin);
}
}
});
new_data.forEach(async plugin => {
if (plugin.is_downloaded && plugin.is_enabled) {
if (!plugin.downloaded_plugin_info?.is_plugin_supported && !plugin.latest_plugin_info?.is_plugin_supported) {
plugin.is_enabled = false
}
}
});
return new_data;
});
} catch (error) {
console.error(error);
}
};
useEffect(() => {
console.log(currentIsInitializedLoadPlugin.data);
if (currentIsInitializedLoadPlugin.data && !currentIsFetchedPluginsInfo.data) {
asyncUpdateLatestPluginsData().then(() => {
updateIsFetchedPluginsInfo(true);
});
}
}, [currentIsInitializedLoadPlugin.data]);
return null;
};

36
src-ui/app/_app_controllers/plugins_controllers/LoadPluginsController.jsx Normal file
View File

@@ -0,0 +1,36 @@
import React, { useEffect } from "react";
import { usePlugins } from "@logics_configs";
import clsx from "clsx";
if (typeof window !== "undefined") {
window.React = React;
window.clsx = clsx;
}
export const LoadPluginsController = () => {
const {
asyncLoadAllPlugins,
currentIsInitializedLoadPlugin,
updateIsInitializedLoadPlugin,
} = usePlugins();
const asyncInitLoadPlugins = async () => {
try {
await asyncLoadAllPlugins();
} catch (error) {
console.error(error);
}
};
useEffect(() => {
if (!currentIsInitializedLoadPlugin.data) {
asyncInitLoadPlugins().then(() => {
updateIsInitializedLoadPlugin(true);
});
}
}, []);
return null;
};

35
src-ui/app/_app_controllers/plugins_controllers/MergeSavedPluginsStatusController.jsx Normal file
View File

@@ -0,0 +1,35 @@
import { useEffect } from "react";
import { usePlugins } from "@logics_configs";
export const MergeSavedPluginsStatusController = () => {
const {
updatePluginsData,
currentSavedPluginsStatus,
} = usePlugins();
useEffect(() => {
updatePluginsData(prev => {
// currentSavedPluginsStatus.data の各要素を Map 化して plugin_id で参照
const saved_map = new Map(currentSavedPluginsStatus.data.map(saved => [saved.plugin_id, saved]));
const prev_map = new Map(prev.data.map(item => [item.plugin_id, item]));
// prev.data にある各アイテムについて、保存済みの状態情報があればマージ
const merged = prev.data.map(item => {
if (saved_map.has(item.plugin_id)) {
return { ...item, is_enabled: saved_map.get(item.plugin_id).is_enabled };
}
return item;
});
// currentSavedPluginsStatus.data にのみ存在する項目があれば追加
currentSavedPluginsStatus.data.forEach(saved => {
if (!prev_map.has(saved.plugin_id)) {
merged.push({ plugin_id: saved.plugin_id, is_enabled: saved.is_enabled });
}
});
return merged;
});
}, [currentSavedPluginsStatus]);
return null;
};

16
src-ui/app/config_page/setting_section/setting_box/_components/plugins_control_component/PluginsControlComponent.jsx
View File

@@ -54,11 +54,27 @@ const DownloadedPluginControl = ({
if (!plugin_status.downloaded_plugin_info.is_plugin_supported) {
if (plugin_status.is_latest_version_available) {
return (
<div className={styles.container}>
<p>最新のバージョン: {latest_version}</p>
<p>最新版にアップデート後 利用可能</p>
<_DownloadButton option={option} downloadStartFunction={downloadStartFunction} />
</div>
);
}
return (
<div className={styles.container}>
<p>現在利用不可 使用中VRCTバージョンとの互換性なし</p>
</div>
);
} else if (plugin_status.is_outdated) {
return (
<div className={styles.container}>
<p>最新情報が取得できません</p>
<SwitchBox variable={option} toggleFunction={togglePlugin} />
</div>
);
} else if (plugin_status.is_latest_version_already) {
return (
<div className={styles.container}>

14
src-ui/app/modal_controller/update_modal/UpdateModal.jsx
View File

@@ -20,9 +20,6 @@ export const UpdateModal = () => {
const { currentLatestSoftwareVersionInfo } = useSoftwareVersion();
const { isAnyPluginEnabled } = usePlugins();
console.log(isAnyPluginEnabled());
const is_latest_version_already = currentLatestSoftwareVersionInfo.data.is_update_available === false;
const is_cpu_version = currentComputeMode.data === "cpu";
@@ -101,14 +98,17 @@ const CurrentVersionLabel = (props) => {
const PluginUpdateNotification = () => {
const { enabledPluginsList } = usePlugins();
const incompatible_plugins_list = enabledPluginsList();
// ダウンロード済みのもの or プラグイン最新版が、VRCT最新版（VRCTアプデ後）に非対応のもの
const incompatible_plugins_list = enabledPluginsList().filter(plugin => {
if (!plugin.is_downloaded) return false;
if (!plugin.downloaded_plugin_info?.is_plugin_supported_latest_vrct || !plugin.latest_plugin_info.is_plugin_supported_latest_vrct) return true;
});
return (
<div>
{incompatible_plugins_list.map(plugin => {
console.log(plugin);
return <p>{plugin.title}</p>
const target_data = plugin.downloaded_plugin_info;
return <p key={plugin.plugin_id} >{target_data.title}</p>
})}
</div>
);

16
src-ui/logics/configs/plugins/usePlugins.js
View File

@@ -5,6 +5,8 @@ import {
useStore_SavedPluginsStatus,
useStore_PluginsData,
useStore_IsPluginsInitialized,
useStore_IsInitializedLoadPlugin,
useStore_IsFetchedPluginsInfo,
} from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
@@ -33,6 +35,11 @@ const PLUGIN_LIST_URL = getPluginsList();
export const usePlugins = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentIsInitializedLoadPlugin, updateIsInitializedLoadPlugin, pendingIsInitializedLoadPlugin } = useStore_IsInitializedLoadPlugin();
const { currentIsFetchedPluginsInfo, updateIsFetchedPluginsInfo, pendingIsFetchedPluginsInfo } = useStore_IsFetchedPluginsInfo();
const { currentSavedPluginsStatus, updateSavedPluginsStatus, pendingSavedPluginsStatus } = useStore_SavedPluginsStatus();
const { currentPluginsData, updatePluginsData, pendingPluginsData } = useStore_PluginsData();
const { currentIsPluginsInitialized, updateIsPluginsInitialized, pendingIsPluginsInitialized } = useStore_IsPluginsInitialized();
@@ -47,6 +54,8 @@ export const usePlugins = () => {
return console.error("An invalid plugin was detected.", downloaded_plugin_info.plugin_id, downloaded_plugin_info.location, component);
}
updatePluginsData(prev => {
console.log("-----updated downloaded plugin info----");
const prev_map = new Map(prev.data.map(item => [item.plugin_id, item]));
const new_data = [];
let new_value = {};
@@ -74,7 +83,7 @@ export const usePlugins = () => {
if (old_plugin_data.plugin_id === downloaded_plugin_info.plugin_id) { // ダウンロード済み or 登録済 アップデート
const target_prev_plugin = prev_map.get(downloaded_plugin_info.plugin_id);
const is_latest_version_available = (target_prev_plugin.is_downloaded) && !(downloaded_plugin_info.plugin_version === target_prev_plugin.latest_plugin_info.plugin_version);
const is_latest_version_available = (target_prev_plugin.is_downloaded) && (target_prev_plugin.latest_plugin_info?.plugin_version) && !(downloaded_plugin_info.plugin_version === target_prev_plugin.latest_plugin_info?.plugin_version);
new_value = {
...target_prev_plugin,
@@ -357,6 +366,11 @@ export const usePlugins = () => {
currentIsPluginsInitialized,
updateIsPluginsInitialized,
currentIsInitializedLoadPlugin,
updateIsInitializedLoadPlugin,
currentIsFetchedPluginsInfo,
updateIsFetchedPluginsInfo,
setSavedPluginsStatus,
handlePendingPlugin,

8
src-ui/logics/useReceiveRoutes.js
View File

@@ -206,7 +206,13 @@ export const useReceiveRoutes = () => {
"/set/data/main_window_geometry": () => {},
"/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
"/run/open_filepath_config_file": () => console.log("Opened Directory, Config File"),
"/run/software_update_info": updateLatestSoftwareVersionInfo,
"/run/software_update_info": () => {
updateLatestSoftwareVersionInfo({
is_update_available: true,
new_version: "3.0.3",
})
},
// "/run/software_update_info": updateLatestSoftwareVersionInfo,
"/run/connected_network": handleNetworkConnection,
// Main Page

3
src-ui/store.js
View File

@@ -279,6 +279,9 @@ export const { atomInstance: Atom_Hotkeys, useHook: useStore_Hotkeys } = createA
// Plugins
export const { atomInstance: Atom_IsPluginsInitialized, useHook: useStore_IsPluginsInitialized } = createAtomWithHook(false, "IsPluginsInitialized");
export const { atomInstance: Atom_IsInitializedLoadPlugin, useHook: useStore_IsInitializedLoadPlugin } = createAtomWithHook(false, "IsInitializedLoadPlugin");
export const { atomInstance: Atom_IsFetchedPluginsInfo, useHook: useStore_IsFetchedPluginsInfo } = createAtomWithHook(false, "IsFetchedPluginsInfo");
export const { atomInstance: Atom_FetchedPluginsInfo, useHook: useStore_FetchedPluginsInfo } = createAtomWithHook(false, "FetchedPluginsInfo");
export const { atomInstance: Atom_SavedPluginsStatus, useHook: useStore_SavedPluginsStatus } = createAtomWithHook([], "SavedPluginsStatus");
export const { atomInstance: Atom_PluginsData, useHook: useStore_PluginsData } = createAtomWithHook([], "PluginsData");