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

[Update] Plugins: Show enabled plugins compatibility when update modal is opened.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-04-17 17:30:30 +09:00
parent ee4bbf772f
commit 1c56167dba
5 changed files with 160 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
import clsx from "clsx";
import styles from "./UpdateModal.module.scss";
import { useTranslation } from "react-i18next";
import { useStore_OpenedQuickSetting } from "@store";
@@ -9,7 +10,7 @@ import {
useSoftwareVersion,
} from "@logics_common";
import clsx from "clsx";
import { PluginCompatibilityList } from "./plugins_compatibility_list/PluginCompatibilityList";
export const UpdateModal = () => {
const { t } = useTranslation();
@@ -44,31 +45,34 @@ export const UpdateModal = () => {
return (
<div className={styles.container}>
<div className={styles.wrapper}>
{isAnyPluginEnabled() && <PluginUpdateNotification />}
<div className={styles.update_section}>
<div className={styles.cpu_section}>
<div className={styles.button_wrapper}>
<button className={cpu_accept_button_class_name} onClick={onClickUpdateSoftware}>CPU</button>
{is_cpu_version ? <CurrentVersionLabel is_latest_version_already={is_latest_version_already} /> : null}
<div className={styles.update_section_wrapper}>
{isAnyPluginEnabled() && <PluginCompatibilityList />}
<div className={styles.update_section}>
<div className={styles.cpu_section}>
<div className={styles.button_wrapper}>
<button className={cpu_accept_button_class_name} onClick={onClickUpdateSoftware}>CPU</button>
{is_cpu_version ? <CurrentVersionLabel is_latest_version_already={is_latest_version_already} /> : null}
</div>
<div className={styles.version_desc_container}>
<VersionDescComponent desc={t("update_modal.cpu_desc")} />
</div>
</div>
<div className={styles.version_desc_container}>
<VersionDescComponent desc={t("update_modal.cpu_desc")} />
<div className={styles.cuda_section}>
<div className={styles.button_wrapper}>
<button className={cuda_accept_button_class_name} onClick={onClickUpdateSoftware_CUDA}>CUDA (GPU)</button>
{!is_cpu_version ? <CurrentVersionLabel is_latest_version_already={is_latest_version_already} is_cuda={true}/> : null}
</div>
<div className={styles.version_desc_container}>
<VersionDescComponent desc={t("update_modal.cuda_desc")} />
<VersionDescComponent desc={t("update_modal.cuda_compare_cpu_desc")} />
<VersionDescComponent desc={t("update_modal.cuda_disk_space_desc", {size: "5GB"})} />
</div>
</div>
</div>
<div className={styles.cuda_section}>
<div className={styles.button_wrapper}>
<button className={cuda_accept_button_class_name} onClick={onClickUpdateSoftware_CUDA}>CUDA (GPU)</button>
{!is_cpu_version ? <CurrentVersionLabel is_latest_version_already={is_latest_version_already} is_cuda={true}/> : null}
</div>
<div className={styles.version_desc_container}>
<VersionDescComponent desc={t("update_modal.cuda_desc")} />
<VersionDescComponent desc={t("update_modal.cuda_compare_cpu_desc")} />
<VersionDescComponent desc={t("update_modal.cuda_disk_space_desc", {size: "5GB"})} />
</div>
</div>
<p className={styles.update_desc}>{t("update_modal.download_latest_and_restart")}</p>
<p className={styles.update_desc}>{t("update_modal.download_latest_and_restart")}</p>
</div>
</div>
<div className={styles.button_wrapper}>
<button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("update_modal.close_modal")}</button>
</div>
@@ -94,22 +98,3 @@ const CurrentVersionLabel = (props) => {
}
return <p className={clsx(styles.current_version_label, {[styles.is_cuda]: props.is_cuda})}>{t("update_modal.is_current_compute_device")}</p>;
};
const PluginUpdateNotification = () => {
const { enabledPluginsList } = usePlugins();
// ダウンロード済みのもの 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 => {
const target_data = plugin.downloaded_plugin_info;
return <p key={plugin.plugin_id} >{target_data.title}</p>
})}
</div>
);
};

10
src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
View File

@@ -3,7 +3,7 @@
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: safe center;
align-items: center;
gap: 2.4rem;
}
@@ -16,6 +16,14 @@
gap: 8rem;
}
.update_section_wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4rem;
}
.update_section {
border: 0.1rem solid var(--dark_600_color);
border-radius: 0.4rem;

61
src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx Normal file
View File

@@ -0,0 +1,61 @@
import styles from "./PluginCompatibilityList.module.scss";
import { usePlugins } from "@logics_configs";
import CheckMarkSvg from "@images/check_mark.svg?react";
import XSvg from "@images/x_mark.svg?react";
import WarningSvg from "@images/warning.svg?react";
export const PluginCompatibilityList = () => {
const { enabledPluginsList } = usePlugins();
// ダウンロード済みのもの
const downloaded_plugin = enabledPluginsList().filter(p => p.is_downloaded);
// プラグイン最新版が、VRCT最新版（VRCTアプデ後）に非対応のもの
const compatible_plugins_list = [];
const incompatible_plugins_list = [];
for (const p of downloaded_plugin) {
if (!p.downloaded_plugin_info?.is_plugin_supported_latest_vrct || !p.latest_plugin_info?.is_plugin_supported_latest_vrct) {
incompatible_plugins_list.push(p);
} else {
compatible_plugins_list.push(p);
}
}
const is_any_compatible_plugin = incompatible_plugins_list.length > 0;
return (
<div className={styles.container}>
<p className={styles.title}>使用中プラグインの互換性チェック</p>
<div className={styles.plugins_compatibility_container}>
{incompatible_plugins_list.map(plugin => {
const target_data = plugin.downloaded_plugin_info;
return <PluginContainer key={target_data.plugin_id} target_data={target_data} is_compatible={false}/>;
})}
{compatible_plugins_list.map(plugin => {
const target_data = plugin.downloaded_plugin_info;
return <PluginContainer key={target_data.plugin_id} target_data={target_data} is_compatible={true} />;
})}
</div>
{is_any_compatible_plugin &&
<div className={styles.warning_container}>
<WarningSvg className={styles.warning_svg}/>
<p className={styles.warning_text}>VRCT最新バージョンで互換性のないプラグインはアップデート後に無効化されます。引き続き使用したい場合は、各プラグインの更新を待ってください。</p>
</div>
}
</div>
);
};
const PluginContainer = ({ target_data, is_compatible }) => {
console.log(target_data.plugin_id);
return (
<div className={styles.plugin_box}>
<p className={clsx(styles.plugin_label, {[styles.is_compatible]: is_compatible})} >{target_data.title}</p>
{is_compatible
? <CheckMarkSvg className={styles.check_mark_svg}/>
: <XSvg className={styles.x_svg}/>
}
</div>
);
};

63
src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.module.scss Normal file
View File

@@ -0,0 +1,63 @@
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 1rem;
}
.title {
font-size: 1.6rem;
}
.plugins_compatibility_container {
display: flex;
justify-content: center;
align-items: center;
gap: 0.2rem 1rem;
flex-wrap: wrap;
}
.plugin_box {
display: flex;
justify-content: center;
align-items: center;
padding: 0.4rem 0.6rem;
gap: 0.6rem;
}
.plugin_label {
font-size: 1.4rem;
color: var(--error_bc_color);
&.is_compatible {
color: var(--primary_300_color);
}
}
.check_mark_svg {
width: 1.8rem;
color: var(--primary_300_color);
}
.x_svg {
width: 1.8rem;
color: var(--error_bc_color);
}
.warning_container {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.warning_svg {
padding-bottom: 0.4rem;
width: 2.4rem;
color: var(--waring_color);
flex-shrink: 0;
}
.warning_text {
font-size: 1.2rem;
}

1
src-ui/assets/x_mark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 217 B