Lightemerald/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2026-01-11 13:56:16 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor: simplify downloader sorting and enhance availability indicators in DownloadSettingsModal

Browse Source
This commit is contained in:
Moyasee
2026-01-03 23:34:19 +02:00
parent fe6553bcdc
commit 01938f8905
2 changed files with 98 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/renderer/src/pages/game-details/modals/download-settings-modal.scss
View File

@@ -52,11 +52,6 @@
}
}
&__recommendation-badge {
margin-left: calc(globals.$spacing-unit);
font-size: 10px;
}
&__downloader-item {
display: flex;
align-items: center;

191
src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
View File

@@ -119,6 +119,17 @@ export function DownloadSettingsModal({
(value) => typeof value === "number"
) as Downloader[];
const getDownloaderPriority = (option: {
isAvailable: boolean;
canHandle: boolean;
isAvailableButNotConfigured: boolean;
}) => {
if (option.isAvailable) return 0;
if (option.canHandle && !option.isAvailableButNotConfigured) return 1;
if (option.isAvailableButNotConfigured) return 2;
return 3;
};
return allDownloaders
.filter((downloader) => downloader !== Downloader.Hydra) // Temporarily comment out Nimbus
.map((downloader) => {
@@ -146,41 +157,7 @@ export function DownloadSettingsModal({
isAvailableButNotConfigured,
};
})
.sort((a, b) => {
if (a.isAvailable && !b.isAvailable) return -1;
if (!a.isAvailable && b.isAvailable) return 1;
if (
a.canHandle &&
!a.isAvailable &&
!a.isAvailableButNotConfigured &&
!b.canHandle
)
return -1;
if (
!a.canHandle &&
b.canHandle &&
!b.isAvailable &&
!b.isAvailableButNotConfigured
)
return 1;
if (a.isAvailableButNotConfigured && !b.canHandle) return -1;
if (!a.canHandle && b.isAvailableButNotConfigured) return 1;
if (
a.isAvailableButNotConfigured &&
b.canHandle &&
!b.isAvailable &&
!b.isAvailableButNotConfigured
)
return 1;
if (
!a.isAvailableButNotConfigured &&
a.canHandle &&
!a.isAvailable &&
b.isAvailableButNotConfigured
)
return -1;
return 0;
});
.sort((a, b) => getDownloaderPriority(a) - getDownloaderPriority(b));
}, [
repack,
userPreferences?.realDebridApiToken,
@@ -292,6 +269,90 @@ export function DownloadSettingsModal({
!option.canHandle ||
(!option.isAvailable && !option.isAvailableButNotConfigured);
const getAvailabilityIndicator = () => {
if (option.isAvailable) {
return (
<Indicator
className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--available download-settings-modal__availability-indicator--pulsating`}
animate={{
scale: [1, 1.1, 1],
opacity: [1, 0.7, 1],
}}
transition={{
duration: 2,
repeat: Infinity,
ease: "easeInOut",
}}
data-tooltip-id={tooltipId}
data-tooltip-content={t("downloader_online")}
/>
);
}
if (option.isAvailableButNotConfigured) {
return (
<span
className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--warning`}
data-tooltip-id={tooltipId}
data-tooltip-content={t("downloader_not_configured")}
/>
);
}
if (option.canHandle) {
return (
<span
className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--unavailable`}
data-tooltip-id={tooltipId}
data-tooltip-content={t("downloader_offline")}
/>
);
}
return (
<span
className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--not-present`}
data-tooltip-id={tooltipId}
data-tooltip-content={t("downloader_not_available")}
/>
);
};
const getRightContent = () => {
if (isSelected) {
return (
<motion.div
className="download-settings-modal__check-icon-wrapper"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{
type: "spring",
stiffness: 300,
damping: 20,
}}
>
<CheckCircleFillIcon
size={16}
className="download-settings-modal__check-icon"
/>
</motion.div>
);
}
if (
option.downloader === Downloader.RealDebrid &&
option.canHandle
) {
return (
<div className="download-settings-modal__recommendation-badge">
<Badge>{t("recommended")}</Badge>
</div>
);
}
return null;
};
return (
<div
key={option.downloader}
@@ -324,66 +385,10 @@ export function DownloadSettingsModal({
{DOWNLOADER_NAME[option.downloader]}
</span>
<div className="download-settings-modal__availability-indicator-wrapper">
{option.isAvailable ? (
<Indicator
className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--available download-settings-modal__availability-indicator--pulsating`}
animate={{
scale: [1, 1.1, 1],
opacity: [1, 0.7, 1],
}}
transition={{
duration: 2,
repeat: Infinity,
ease: "easeInOut",
}}
data-tooltip-id={tooltipId}
data-tooltip-content={t("downloader_online")}
/>
) : option.isAvailableButNotConfigured ? (
<span
className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--warning`}
data-tooltip-id={tooltipId}
data-tooltip-content={t(
"downloader_not_configured"
)}
/>
) : option.canHandle ? (
<span
className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--unavailable`}
data-tooltip-id={tooltipId}
data-tooltip-content={t("downloader_offline")}
/>
) : (
<span
className={`download-settings-modal__availability-indicator download-settings-modal__availability-indicator--not-present`}
data-tooltip-id={tooltipId}
data-tooltip-content={t("downloader_not_available")}
/>
)}
{getAvailabilityIndicator()}
</div>
<Tooltip id={tooltipId} />
{isSelected ? (
<motion.div
className="download-settings-modal__check-icon-wrapper"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{
type: "spring",
stiffness: 300,
damping: 20,
}}
>
<CheckCircleFillIcon
size={16}
className="download-settings-modal__check-icon"
/>
</motion.div>
) : option.downloader === Downloader.RealDebrid &&
option.canHandle ? (
<div className="download-settings-modal__recommendation-badge">
<Badge>{t("recommended")}</Badge>
</div>
) : null}
{getRightContent()}
</button>
</div>
);