diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_download_button/_DownloadButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_download_button/_DownloadButton.module.scss index 59fabfe3..6b42ca5d 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_download_button/_DownloadButton.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_download_button/_DownloadButton.module.scss @@ -13,6 +13,7 @@ background-color: var(--dark_800_color); padding: 0.8rem; flex-shrink: 0; + border-radius: 0.2rem; &:hover { background-color: var(--dark_750_color); } diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/download_plugins/DownloadPlugins.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/download_plugins/DownloadPlugins.jsx index 7c1a17b9..1e66b9c7 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/download_plugins/DownloadPlugins.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/_components/download_plugins/DownloadPlugins.jsx @@ -2,30 +2,32 @@ import { SwitchBox, } from "../index"; import { _DownloadButton } from "../_atoms/_download_button/_DownloadButton"; +import styles from "./DownloadPlugins.module.scss"; -export const DownloadPlugins = ({plugin_info, ...props}) => { - +export const DownloadPlugins = ({plugin_info, plugin_status, ...props}) => { const option = { + id: plugin_info.plugin_id, is_pending: plugin_info.is_pending, is_downloaded: plugin_info.is_downloaded, - } - console.log(plugin_info); + progress: null, + }; return ( -
- {/* */} +
+ {plugin_info.is_downloaded && plugin_info.is_plugin_supported && + } {plugin_info.is_plugin_supported ? <_DownloadButton option={option} downloadStartFunction={props.downloadStartFunction} /> : -
- Unavailable +
+ Downloaded but outdated.
}
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/download_plugins/DownloadPlugins.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/download_plugins/DownloadPlugins.module.scss index e69de29b..99a37516 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/download_plugins/DownloadPlugins.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/_components/download_plugins/DownloadPlugins.module.scss @@ -0,0 +1,7 @@ +.container { +} + +.unavailable_text { + padding: 1rem; + font-size: 1.2rem; +} \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx b/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx index 8201cdd8..ea96223c 100644 --- a/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx @@ -16,31 +16,41 @@ const PluginDownloadContainer = () => { downloadAndExtractPlugin, currentPluginsInfoList, updatePluginsInfoList, + currentSavedPluginsStatus, + updateSavedPluginsStatus, + currentLoadedPluginsList, + // updateLoadedPluginsList, } = usePlugins(); - const downloadStartFunction = async (plugin) => { + const downloadStartFunction = async (target_plugin_id) => { updatePluginsInfoList((old_value) => { const new_value = old_value.data.map(d => { - if (d.plugin_id === plugin.plugin_id) { + if (d.plugin_id === target_plugin_id) { d.is_pending = true; } return d; }); return new_value; }); - await downloadAndExtractPlugin(plugin); - updatePluginsInfoList((old_value) => { - const new_value = old_value.data.map(d => { - if (d.plugin_id === plugin.plugin_id) { - d.is_pending = false; - } - return d; + const target_plugin_info = currentPluginsInfoList.data.find(d => d.plugin_id === target_plugin_id); + downloadAndExtractPlugin(target_plugin_info).then(() => { + updatePluginsInfoList((old_value) => { + const new_value = old_value.data.map(d => { + if (d.plugin_id === target_plugin_id) { + d.is_pending = false; + d.is_downloaded = true; + } + return d; + }); + return new_value; }); - return new_value; - }); + }) }; + // console.log(currentPluginsInfoList.data); - const plugin_list = currentPluginsInfoList.data; + + // const plugin_list = currentPluginsInfoList.data; + const plugin_list = [...currentPluginsInfoList.data, ...currentLoadedPluginsList.data]; // const plugin_list = [ // { // title: "VRCT Example Plugins 1", @@ -64,6 +74,26 @@ const PluginDownloadContainer = () => { // }, // ]; + const getTargetPluginStatus = (target_plugin_id) => { + let plugin_status = currentSavedPluginsStatus.data.find(d => d.plugin_id === target_plugin_id) ?? {}; + const is_downloaded = currentLoadedPluginsList.data.find(d => d.plugin_id === target_plugin_id) ? true : false; + + plugin_status.toggleFunction = () => { + updateSavedPluginsStatus((old_value) => { + const new_value = old_value.data.map(d => { + if (d.plugin_id === target_plugin_id) { + d.data = !d.data; + d.state = "ok"; + } + return d; + }); + return new_value; + }); + } + plugin_status.is_downloaded = is_downloaded; + plugin_status.is_pending = false; + return plugin_status; + }; @@ -85,6 +115,7 @@ const PluginDownloadContainer = () => {
diff --git a/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.module.scss b/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.module.scss index 70eb0860..3320d590 100644 --- a/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.module.scss @@ -20,6 +20,13 @@ } } +.plugin_info_wrapper { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; +} + .title { font-size: 1.6rem; } diff --git a/src-ui/app/main_page/main_section/PluginHost.jsx b/src-ui/app/main_page/main_section/PluginHost.jsx index d4d50774..264bd579 100644 --- a/src-ui/app/main_page/main_section/PluginHost.jsx +++ b/src-ui/app/main_page/main_section/PluginHost.jsx @@ -3,7 +3,7 @@ import { usePlugins } from "@logics_configs"; export const PluginHost = () => { const { currentLoadedPluginsList } = usePlugins(); - console.log(currentLoadedPluginsList.data); + // console.log(currentLoadedPluginsList.data); return (
diff --git a/src-ui/logics/common/useFetch.js b/src-ui/logics/common/useFetch.js index af9c82f6..12ba5def 100644 --- a/src-ui/logics/common/useFetch.js +++ b/src-ui/logics/common/useFetch.js @@ -2,7 +2,7 @@ import { fetch as tauriFetch, ResponseType } from "@tauri-apps/api/http"; export const useFetch = () => { const asyncTauriFetchGithub = async (url) => { - console.log("tauriFetch"); + console.log("tauriFetch", url); const release_response = await tauriFetch(url, { method: "GET", diff --git a/src-ui/logics/configs/plugins/usePlugins.js b/src-ui/logics/configs/plugins/usePlugins.js index 4e385366..c8c18749 100644 --- a/src-ui/logics/configs/plugins/usePlugins.js +++ b/src-ui/logics/configs/plugins/usePlugins.js @@ -4,6 +4,7 @@ import { invoke } from "@tauri-apps/api/tauri"; import { createAtomWithHook, useStore_LoadedPluginsList, + useStore_SavedPluginsStatus, useStore_PluginsInfoList, } from "@store"; @@ -21,6 +22,7 @@ const PLUGIN_LIST_URL = "https://raw.githubusercontent.com/ShiinaSakamoto/vrct_p export const usePlugins = () => { const { currentLoadedPluginsList, updateLoadedPluginsList } = useStore_LoadedPluginsList(); + const { currentSavedPluginsStatus, updateSavedPluginsStatus } = useStore_SavedPluginsStatus(); const { currentPluginsInfoList, updatePluginsInfoList, pendingPluginsInfoList } = useStore_PluginsInfoList(); const { currentSoftwareVersion } = useSoftwareVersion(); @@ -245,6 +247,9 @@ export const usePlugins = () => { currentLoadedPluginsList, updateLoadedPluginsList, + currentSavedPluginsStatus, + updateSavedPluginsStatus, + currentPluginsInfoList, updatePluginsInfoList, }; diff --git a/src-ui/store.js b/src-ui/store.js index d35f02aa..2da4c128 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -276,6 +276,10 @@ export const { atomInstance: Atom_Hotkeys, useHook: useStore_Hotkeys } = createA // Plugins export const { atomInstance: Atom_LoadedPluginsList, useHook: useStore_LoadedPluginsList } = createAtomWithHook([], "LoadedPluginsList"); +export const { atomInstance: Atom_SavedPluginsStatus, useHook: useStore_SavedPluginsStatus } = createAtomWithHook([ + { plugin_id: "vrct_plugin_example_1", is_enabled: true }, + { plugin_id: "vrct_plugin_example_2", is_enabled: false } +], "SavedPluginsStatus"); export const { atomInstance: Atom_PluginsInfoList, useHook: useStore_PluginsInfoList } = createAtomWithHook([], "PluginsInfoList"); // Advanced Settings