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

Merge branch 'main' of https://github.com/hydralauncher/hydra

Browse source
This commit is contained in:
lilezek 2024-05-04 19:35:49 +02:00
commit 2033951505
31 changed files with 1447 additions and 1484 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/index.html
View file

@ -6,7 +6,7 @@
<title>Hydra</title>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: hydra: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com;"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com;"
/>
</head>
<body style="background-color: #1c1c1c">

29
src/renderer/src/components/async-image/async-image.tsx
View file

@ -1,29 +0,0 @@
import { forwardRef, useEffect, useState } from "react";
export interface AsyncImageProps
extends React.DetailedHTMLProps<
React.ImgHTMLAttributes<HTMLImageElement>,
HTMLImageElement
> {
onSettled?: (url: string) => void;
}
export const AsyncImage = forwardRef<HTMLImageElement, AsyncImageProps>(
({ onSettled, ...props }, ref) => {
const [source, setSource] = useState<string | null>(null);
useEffect(() => {
if (props.src && props.src.startsWith("http")) {
window.electron.getOrCacheImage(props.src).then((url) => {
setSource(url);
if (onSettled) onSettled(url);
});
}
}, [props.src, onSettled]);
return <img ref={ref} {...props} src={source ?? props.src} />;
}
);
AsyncImage.displayName = "AsyncImage";

8
src/renderer/src/components/game-card/game-card.tsx
View file

@ -4,8 +4,6 @@ import type { CatalogueEntry } from "@types";
import SteamLogo from "@renderer/assets/steam-logo.svg?react";
import EpicGamesLogo from "@renderer/assets/epic-games-logo.svg?react";
import { AsyncImage } from "../async-image/async-image";
import * as styles from "./game-card.css";
import { useAppSelector } from "@renderer/hooks";
import { useTranslation } from "react-i18next";
@ -43,11 +41,7 @@ export function GameCard({ game, disabled, ...props }: GameCardProps) {
disabled={disabled}
>
<div className={styles.backdrop}>
<AsyncImage
src={game.cover}
alt={game.title}
className={styles.cover}
/>
<img src={game.cover} alt={game.title} className={styles.cover} />
<div className={styles.content}>
<div className={styles.titleContainer}>

5
src/renderer/src/components/hero/hero.tsx
View file

@ -1,5 +1,4 @@
import { useNavigate } from "react-router-dom";
import { AsyncImage } from "@renderer/components";
import * as styles from "./hero.css";
import { useEffect, useState } from "react";
import { ShopDetails } from "@types";
@ -35,14 +34,14 @@ export function Hero() {
className={styles.hero}
>
<div className={styles.backdrop}>
<AsyncImage
<img
src="https://cdn2.steamgriddb.com/hero/4ef10445b952a8b3c93a9379d581146a.jpg"
alt={featuredGameDetails?.name}
className={styles.heroMedia}
/>
<div className={styles.content}>
<AsyncImage
<img
src={steamUrlBuilder.logo(FEATURED_GAME_ID)}
width="250px"
alt={featuredGameDetails?.name}

1
src/renderer/src/components/index.ts
View file

@ -5,6 +5,5 @@ export * from "./header/header";
export * from "./hero/hero";
export * from "./modal/modal";
export * from "./sidebar/sidebar";
export * from "./async-image/async-image";
export * from "./text-field/text-field";
export * from "./checkbox-field/checkbox-field";

6
src/renderer/src/components/sidebar/sidebar.css.ts
View file

@ -74,7 +74,6 @@ export const menuItem = recipe({
active: {
true: {
backgroundColor: "rgba(255, 255, 255, 0.1)",
fontWeight: "bold",
},
},
muted: {
@ -97,11 +96,6 @@ export const menuItemButton = style({
overflow: "hidden",
width: "100%",
padding: `9px ${SPACING_UNIT}px`,
selectors: {
[`${menuItem({ active: true }).split(" ")[1]} &`]: {
fontWeight: "bold",
},
},
});
export const menuItemButtonLabel = style({

8
src/renderer/src/components/sidebar/sidebar.tsx
View file

@ -4,7 +4,7 @@ import { useLocation, useNavigate } from "react-router-dom";
import type { Game } from "@types";
import { AsyncImage, TextField } from "@renderer/components";
import { TextField } from "@renderer/components";
import { useDownload, useLibrary } from "@renderer/hooks";
import { routes } from "./routes";
@ -214,7 +214,11 @@ export function Sidebar() {
)
}
>
<AsyncImage className={styles.gameIcon} src={game.iconUrl} />
<img
className={styles.gameIcon}
src={game.iconUrl}
alt={game.title}
/>
<span className={styles.menuItemButtonLabel}>
{getGameTitle(game)}
</span>

3
src/renderer/src/declaration.d.ts vendored
View file

@ -56,7 +56,7 @@ declare global {
objectID: string,
title: string,
shop: GameShop,
executablePath: string
executablePath: string | null
) => Promise<void>;
getLibrary: () => Promise<Game[]>;
getRepackersFriendlyNames: () => Promise<Record<string, string>>;
@ -79,7 +79,6 @@ declare global {
getDiskFreeSpace: (path: string) => Promise<DiskSpace>;
/* Misc */
getOrCacheImage: (url: string) => Promise<string>;
openExternal: (src: string) => Promise<void>;
getVersion: () => Promise<string>;
ping: () => string;

2
src/renderer/src/helpers.ts
View file

@ -24,5 +24,7 @@ export const getSteamLanguage = (language: string) => {
if (language.startsWith("ru")) return "russian";
if (language.startsWith("it")) return "italian";
if (language.startsWith("hu")) return "hungarian";
if (language.startsWith("pl")) return "polish";
return "english";
};

16
src/renderer/src/pages/downloads/downloads.tsx
View file

@ -1,7 +1,7 @@
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { AsyncImage, Button, TextField } from "@renderer/components";
import { Button, TextField } from "@renderer/components";
import { formatDownloadProgress, steamUrlBuilder } from "@renderer/helpers";
import { useDownload, useLibrary } from "@renderer/hooks";
import type { Game } from "@types";
@ -116,6 +116,8 @@ export function Downloads() {
</>
);
}
return null;
};
const openDeleteModal = (gameId: number) => {
@ -211,6 +213,12 @@ export function Downloads() {
);
};
const handleDeleteGame = () => {
if (gameToBeDeleted.current) {
deleteGame(gameToBeDeleted.current).then(updateLibrary);
}
};
return (
<section className={styles.downloadsContainer}>
<BinaryNotFoundModal
@ -220,9 +228,7 @@ export function Downloads() {
<DeleteModal
visible={showDeleteModal}
onClose={() => setShowDeleteModal(false)}
deleteGame={() =>
deleteGame(gameToBeDeleted.current).then(updateLibrary)
}
deleteGame={handleDeleteGame}
/>
<TextField placeholder={t("filter")} onChange={handleFilter} />
@ -236,7 +242,7 @@ export function Downloads() {
cancelled: game.status === GameStatus.Cancelled,
})}
>
<AsyncImage
<img
src={steamUrlBuilder.library(game.objectID)}
className={styles.downloadCover}
alt={game.title}

18
src/renderer/src/pages/game-details/game-details.tsx
View file

@ -12,7 +12,7 @@ import type {
SteamAppDetails,
} from "@types";
import { AsyncImage, Button } from "@renderer/components";
import { Button } from "@renderer/components";
import { setHeaderTitle } from "@renderer/features";
import { getSteamLanguage, steamUrlBuilder } from "@renderer/helpers";
import { useAppDispatch, useDownload } from "@renderer/hooks";
@ -69,14 +69,16 @@ export function GameDetails() {
const { game: gameDownloading, startDownload, isDownloading } = useDownload();
const handleImageSettled = useCallback((url: string) => {
average(url, { amount: 1, format: "hex" })
const heroImage = steamUrlBuilder.libraryHero(objectID!);
const handleHeroLoad = () => {
average(heroImage, { amount: 1, format: "hex" })
.then((color) => {
const darkColor = new Color(color).darken(0.6).toString() as string;
setColor({ light: color as string, dark: darkColor });
})
.catch(() => {});
}, []);
};
const getGame = useCallback(() => {
window.electron
@ -218,15 +220,15 @@ export function GameDetails() {
) : (
<section className={styles.container}>
<div className={styles.hero}>
<AsyncImage
src={steamUrlBuilder.libraryHero(objectID!)}
<img
src={heroImage}
className={styles.heroImage}
alt={game?.title}
onSettled={handleImageSettled}
onLoad={handleHeroLoad}
/>
<div className={styles.heroBackdrop}>
<div className={styles.heroContent}>
<AsyncImage
<img
src={steamUrlBuilder.logo(objectID!)}
style={{ width: 300, alignSelf: "flex-end" }}
/>

43
src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx
View file

@ -69,7 +69,7 @@ export function HeroPanelActions({
try {
if (game) {
await removeGameFromLibrary(game.id);
} else {
} else if (gameDetails) {
const gameExecutablePath = await selectGameExecutable();
await window.electron.addGameToLibrary(
@ -88,30 +88,37 @@ export function HeroPanelActions({
};
const openGameInstaller = () => {
window.electron.openGameInstaller(game.id).then((isBinaryInPath) => {
if (!isBinaryInPath) openBinaryNotFoundModal();
updateLibrary();
});
if (game) {
window.electron.openGameInstaller(game.id).then((isBinaryInPath) => {
if (!isBinaryInPath) openBinaryNotFoundModal();
updateLibrary();
});
}
};
const openGame = async () => {
if (game.executablePath) {
window.electron.openGame(game.id, game.executablePath);
return;
}
if (game) {
if (game.executablePath) {
window.electron.openGame(game.id, game.executablePath);
return;
}
if (game?.executablePath) {
window.electron.openGame(game.id, game.executablePath);
return;
}
if (game?.executablePath) {
window.electron.openGame(game.id, game.executablePath);
return;
}
const gameExecutablePath = await selectGameExecutable();
window.electron.openGame(game.id, gameExecutablePath);
const gameExecutablePath = await selectGameExecutable();
if (gameExecutablePath)
window.electron.openGame(game.id, gameExecutablePath);
}
};
const closeGame = () => window.electron.closeGame(game.id);
const closeGame = () => {
if (game) window.electron.closeGame(game.id);
};
const deleting = isGameDeleting(game?.id);
const deleting = game ? isGameDeleting(game?.id) : false;
const toggleGameOnLibraryButton = (
<Button
@ -125,7 +132,7 @@ export function HeroPanelActions({
</Button>
);
if (isGameDownloading) {
if (game && isGameDownloading) {
return (
<>
<Button

10
src/renderer/src/pages/game-details/hero/hero-panel.tsx
View file

@ -99,7 +99,7 @@ export function HeroPanel({
return <p>{t("deleting")}</p>;
}
if (isGameDownloading) {
if (isGameDownloading && gameDownloading?.status) {
return (
<>
<p className={styles.downloadDetailsRow}>
@ -107,14 +107,14 @@ export function HeroPanel({
{eta && <small>{t("eta", { eta })}</small>}
</p>
{gameDownloading?.status !== GameStatus.Downloading ? (
{gameDownloading.status !== GameStatus.Downloading ? (
<>
<p>{t(gameDownloading?.status)}</p>
<p>{t(gameDownloading.status)}</p>
{eta && <small>{t("eta", { eta })}</small>}
</>
) : (
<p className={styles.downloadDetailsRow}>
{formatBytes(gameDownloading?.bytesDownloaded)} /{" "}
{formatBytes(gameDownloading.bytesDownloaded)} /{" "}
{finalDownloadSize}
<small>
{numPeers} peers / {numSeeds} seeds
@ -149,7 +149,7 @@ export function HeroPanel({
<>
<p>
{t("play_time", {
amount: formatPlayTime(game.playTimeInMilliseconds),
amount: formatPlayTime(),
})}
</p>

4
src/renderer/src/pages/game-details/repacks-modal.tsx
View file

@ -89,7 +89,9 @@ export function RepacksModal({
<p style={{ color: "#DADBE1" }}>{repack.title}</p>
<p style={{ fontSize: "12px" }}>
{repack.fileSize} - {repackersFriendlyNames[repack.repacker]} -{" "}
{format(repack.uploadDate, "dd/MM/yyyy")}
{repack.uploadDate
? format(repack.uploadDate, "dd/MM/yyyy")
: ""}
</p>
</Button>
))}