external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add menu with download options on download page

Browse source
This commit is contained in:
Hachi-R 2024-11-12 04:12:22 -03:00
parent ca953de464
commit 94ef1679a9
3 changed files with 79 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/locales/en/translation.json
View file

@ -202,7 +202,8 @@
"checking_files": "Checking files…", "checking_files": "Checking files…",
"seeding": "Seeding", "seeding": "Seeding",
"stop_seeding": "Stop seeding", "stop_seeding": "Stop seeding",
"resume_seeding": "Resume seeding" "resume_seeding": "Resume seeding",
"options": "Manage"
}, },
"settings": { "settings": {
"downloads_path": "Downloads path", "downloads_path": "Downloads path",

3
src/locales/pt-BR/translation.json
View file

@ -198,7 +198,8 @@
"checking_files": "Verificando arquivos…", "checking_files": "Verificando arquivos…",
"seeding": "Semeando", "seeding": "Semeando",
"stop_seeding": "Parar semeio", "stop_seeding": "Parar semeio",
"resume_seeding": "Retomar semeio" "resume_seeding": "Retomar semeio",
"options": "Gerenciar"
}, },
"settings": { "settings": {
"downloads_path": "Diretório dos downloads", "downloads_path": "Diretório dos downloads",

145
src/renderer/src/pages/downloads/download-group.tsx
View file

@ -15,8 +15,11 @@ import { useAppSelector, useDownload } from "@renderer/hooks";
import * as styles from "./download-group.css"; import * as styles from "./download-group.css";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { SPACING_UNIT, vars } from "@renderer/theme.css"; import { SPACING_UNIT, vars } from "@renderer/theme.css";
import { XCircleIcon } from "@primer/octicons-react";
import { useMemo } from "react"; import { useMemo } from "react";
import DropdownMenu, {
DropdownMenuItem,
} from "@renderer/components/dropdown-menu/dropdown-menu";
import { ThreeBarsIcon } from "@primer/octicons-react";
export interface DownloadGroupProps { export interface DownloadGroupProps {
library: LibraryGame[]; library: LibraryGame[];
@ -152,65 +155,64 @@ export function DownloadGroup({
return <p>{t(game.status as string)}</p>; return <p>{t(game.status as string)}</p>;
}; };
const getGameActions = (game: LibraryGame) => { const getGameActions = (game: LibraryGame): DropdownMenuItem[] => {
const isGameDownloading = lastPacket?.game.id === game.id; const isGameDownloading = lastPacket?.game.id === game.id;
const deleting = isGameDeleting(game.id); const deleting = isGameDeleting(game.id);
if (game.progress === 1) { if (game.progress === 1) {
return ( return [
<> {
<Button label: t("install"),
onClick={() => openGameInstaller(game.id)} disabled: deleting,
theme="outline" onClick: () => openGameInstaller(game.id),
disabled={deleting} },
> {
{t("install")} label: t("stop_seeding"),
</Button> disabled: deleting,
show: game.status === "seeding",
{game.status === "seeding" ? ( onClick: () => pauseSeeding(game.id),
<Button onClick={() => pauseSeeding(game.id)} theme="outline"> },
{t("stop_seeding")} {
</Button> label: t("resume_seeding"),
) : ( disabled: deleting,
<Button onClick={() => resumeSeeding(game.id)} theme="outline"> show: game.status !== "seeding",
{t("resume_seeding")} onClick: () => resumeSeeding(game.id),
</Button> },
)} {
</> label: t("delete"),
); disabled: deleting,
onClick: () => openDeleteGameModal(game.id),
},
];
} }
if (isGameDownloading || game.status === "active") { if (isGameDownloading || game.status === "active") {
return ( return [
<> {
<Button onClick={() => pauseDownload(game.id)} theme="outline"> label: t("pause"),
{t("pause")} onClick: () => pauseDownload(game.id),
</Button> },
<Button onClick={() => cancelDownload(game.id)} theme="outline"> {
{t("cancel")} label: t("cancel"),
</Button> onClick: () => cancelDownload(game.id),
</> },
); ];
} }
return ( return [
<> {
<Button label: t("resume"),
onClick={() => resumeDownload(game.id)} disabled:
theme="outline" game.downloader === Downloader.RealDebrid &&
disabled={ !userPreferences?.realDebridApiToken,
game.downloader === Downloader.RealDebrid && onClick: () => resumeDownload(game.id),
!userPreferences?.realDebridApiToken },
} {
> label: t("cancel"),
{t("resume")} onClick: () => cancelDownload(game.id),
</Button> },
<Button onClick={() => cancelDownload(game.id)} theme="outline"> ];
{t("cancel")}
</Button>
</>
);
}; };
if (!library.length) return null; if (!library.length) return null;
@ -280,26 +282,29 @@ export function DownloadGroup({
{getGameInfo(game)} {getGameInfo(game)}
</div> </div>
<div className={styles.downloadActions}> {getGameActions(game) !== null && (
{getGameActions(game)} <DropdownMenu
</div> title={t("options")}
<Button align="end"
style={{ items={getGameActions(game)}
position: "absolute", sideOffset={-70}
right: 0, >
top: 0, <Button
padding: 8, style={{
margin: 6, position: "absolute",
border: "none", top: "12px",
minHeight: "unset", right: "12px",
borderRadius: "50%", borderRadius: "50%",
color: vars.color.danger, border: "none",
}} padding: "8px",
onClick={() => openDeleteGameModal(game.id)} minHeight: "unset",
theme="outline" }}
> theme="outline"
<XCircleIcon /> >
</Button> <ThreeBarsIcon />
</Button>
</DropdownMenu>
)}
</div> </div>
</li> </li>
); );