Lightemerald/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2026-01-20 09:43:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'feat/migration-to-scss-3-remake' of https://github.com/hydralauncher/hydra into feat/migration-to-scss-3-remake

Browse Source
This commit is contained in:
Hachi-R
2025-02-02 13:39:20 -03:00
parent 4ae52fb4da 6a3930c36e
commit 2e85363966
204 changed files with 2887 additions and 2988 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/renderer/src/app.tsx
View File

@@ -1,5 +1,5 @@
import { useCallback, useEffect, useRef } from "react";
import achievementSound from "@renderer/assets/audio/achievement.wav";
import { Sidebar, BottomPanel, Header, Toast } from "@renderer/components";
import {
@@ -84,7 +84,7 @@ export function App() {
useEffect(() => {
const unsubscribe = window.electron.onDownloadProgress(
(downloadProgress) => {
if (downloadProgress.game.progress === 1) {
if (downloadProgress.progress === 1) {
clearDownload();
updateLibrary();
return;
@@ -212,27 +212,43 @@ export function App() {
const id = crypto.randomUUID();
const channel = new BroadcastChannel(`download_sources:sync:${id}`);
channel.onmessage = (event: MessageEvent<number>) => {
channel.onmessage = async (event: MessageEvent<number>) => {
const newRepacksCount = event.data;
window.electron.publishNewRepacksNotification(newRepacksCount);
updateRepacks();
downloadSourcesTable.toArray().then((downloadSources) => {
downloadSources
.filter((source) => !source.fingerprint)
.forEach((downloadSource) => {
window.electron
.putDownloadSource(downloadSource.objectIds)
.then(({ fingerprint }) => {
downloadSourcesTable.update(downloadSource.id, { fingerprint });
});
});
});
const downloadSources = await downloadSourcesTable.toArray();
downloadSources
.filter((source) => !source.fingerprint)
.forEach(async (downloadSource) => {
const { fingerprint } = await window.electron.putDownloadSource(
downloadSource.objectIds
);
downloadSourcesTable.update(downloadSource.id, { fingerprint });
});
};
downloadSourcesWorker.postMessage(["SYNC_DOWNLOAD_SOURCES", id]);
}, [updateRepacks]);
const playAudio = useCallback(() => {
const audio = new Audio(achievementSound);
audio.volume = 0.2;
audio.play();
}, []);
useEffect(() => {
const unsubscribe = window.electron.onAchievementUnlocked(() => {
playAudio();
});
return () => {
unsubscribe();
};
}, [playAudio]);
const handleToastClose = useCallback(() => {
dispatch(closeToast());
}, [dispatch]);
@@ -252,9 +268,11 @@ export function App() {
<Toast
visible={toast.visible}
title={toast.title}
message={toast.message}
type={toast.type}
onClose={handleToastClose}
duration={toast.duration}
/>
<HydraCloudModal

BIN
src/renderer/src/assets/audio/achievement.wav Normal file
View File

Binary file not shown.

BIN
src/renderer/src/assets/icons/torbox.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

1
src/renderer/src/components/badge/badge.scss
View File

@@ -7,5 +7,6 @@
border: solid 1px globals.$muted-color;
border-radius: 4px;
display: flex;
gap: 4px;
align-items: center;
}

10
src/renderer/src/components/bottom-panel/bottom-panel.scss
View File

@@ -21,4 +21,14 @@
cursor: pointer;
}
}
&__version-button {
color: globals.$body-color;
border-bottom: solid 1px transparent;
&:hover {
border-bottom: solid 1px globals.$body-color;
cursor: pointer;
}
}
}

40
src/renderer/src/components/bottom-panel/bottom-panel.tsx
View File

@@ -1,7 +1,7 @@
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDownload, useUserDetails } from "@renderer/hooks";
import { useDownload, useLibrary, useUserDetails } from "@renderer/hooks";
import "./bottom-panel.scss";
@@ -15,9 +15,11 @@ export function BottomPanel() {
const { userDetails } = useUserDetails();
const { library } = useLibrary();
const { lastPacket, progress, downloadSpeed, eta } = useDownload();
const isGameDownloading = !!lastPacket?.game;
const isGameDownloading = !!lastPacket;
const [version, setVersion] = useState("");
const [sessionHash, setSessionHash] = useState<null | string>("");
@@ -32,27 +34,29 @@ export function BottomPanel() {
const status = useMemo(() => {
if (isGameDownloading) {
const game = library.find((game) => game.id === lastPacket?.gameId)!;
if (lastPacket?.isCheckingFiles)
return t("checking_files", {
title: lastPacket?.game.title,
title: game.title,
percentage: progress,
});
if (lastPacket?.isDownloadingMetadata)
return t("downloading_metadata", {
title: lastPacket?.game.title,
title: game.title,
percentage: progress,
});
if (!eta) {
return t("calculating_eta", {
title: lastPacket?.game.title,
title: game.title,
percentage: progress,
});
}
return t("downloading", {
title: lastPacket?.game.title,
title: game.title,
percentage: progress,
eta,
speed: downloadSpeed,
@@ -60,16 +64,7 @@ export function BottomPanel() {
}
return t("no_downloads_in_progress");
}, [
t,
isGameDownloading,
lastPacket?.game,
lastPacket?.isDownloadingMetadata,
lastPacket?.isCheckingFiles,
progress,
eta,
downloadSpeed,
]);
}, [t, isGameDownloading, library, lastPacket, progress, eta, downloadSpeed]);
return (
<footer className="bottom-panel">
@@ -81,10 +76,15 @@ export function BottomPanel() {
<small>{status}</small>
</button>
<small>
{sessionHash ? `${sessionHash} -` : ""} v{version} &quot;
{VERSION_CODENAME}&quot;
</small>
<button
data-featurebase-changelog
className="bottom-panel__version-button"
>
<small data-featurebase-changelog>
{sessionHash ? `${sessionHash} -` : ""} v{version} &quot;
{VERSION_CODENAME}&quot;
</small>
</button>
</footer>
);
}

5
src/renderer/src/components/checkbox-field/checkbox-field.scss
View File

@@ -15,6 +15,8 @@
&__checkbox {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
border-radius: 4px;
background-color: globals.$dark-background-color;
display: flex;
@@ -45,6 +47,9 @@
&__label {
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
&:has(+ input:disabled) {
cursor: not-allowed;

2
src/renderer/src/components/dropdown-menu/dropdown-menu.tsx
View File

@@ -29,7 +29,7 @@ export function DropdownMenu({
loop = true,
align = "center",
alignOffset = 0,
}: DropdownMenuProps) {
}: Readonly<DropdownMenuProps>) {
return (
<DropdownMenuPrimitive.Root>
<DropdownMenuPrimitive.Trigger asChild>

1
src/renderer/src/components/modal/modal.tsx
View File

@@ -53,6 +53,7 @@ export function Modal({
)
)
return false;
const openModals = document.querySelectorAll("[role=dialog]");
return (

21
src/renderer/src/components/sidebar/sidebar.tsx
View File

@@ -58,7 +58,7 @@ export function Sidebar() {
useEffect(() => {
updateLibrary();
}, [lastPacket?.game.id, updateLibrary]);
}, [lastPacket?.gameId, updateLibrary]);
const sidebarRef = useRef<HTMLElement>(null);
@@ -120,18 +120,17 @@ export function Sidebar() {
}, [isResizing]);
const getGameTitle = (game: LibraryGame) => {
if (lastPacket?.game.id === game.id) {
if (lastPacket?.gameId === game.id) {
return t("downloading", {
title: game.title,
percentage: progress,
});
}
if (game.downloadQueue !== null) {
return t("queued", { title: game.title });
}
if (game.download?.queued) return t("queued", { title: game.title });
if (game.status === "paused") return t("paused", { title: game.title });
if (game.download?.status === "paused")
return t("paused", { title: game.title });
return game.title;
};
@@ -148,7 +147,7 @@ export function Sidebar() {
) => {
const path = buildGameDetailsPath({
...game,
objectId: game.objectID,
objectId: game.objectId,
});
if (path !== location.pathname) {
navigate(path);
@@ -157,7 +156,8 @@ export function Sidebar() {
if (event.detail === 2) {
if (game.executablePath) {
window.electron.openGame(
game.id,
game.shop,
game.objectId,
game.executablePath,
game.launchOptions
);
@@ -223,8 +223,9 @@ export function Sidebar() {
className={cn("sidebar__menu-item", {
"sidebar__menu-item--active":
location.pathname ===
`/game/${game.shop}/${game.objectID}`,
"sidebar__menu-item--muted": game.status === "removed",
`/game/${game.shop}/${game.objectId}`,
"sidebar__menu-item--muted":
game.download?.status === "removed",
})}
>
<button

6
src/renderer/src/components/text-field/text-field.tsx
View File

@@ -55,11 +55,9 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
}, [props.type, isPasswordVisible]);
const hintContent = useMemo(() => {
if (error && typeof error === "object" && "message" in error)
if (error)
return (
<small className="text-field-container__error-label">
{error.message as string}
</small>
<small className="text-field-container__error-label">{error}</small>
);
if (hint) return <small>{hint}</small>;

64
src/renderer/src/components/toast/toast.scss
View File

@@ -1,30 +1,26 @@
@use "../../scss/globals.scss";
$toast-height: 80px;
.toast {
animation-duration: 0.2s;
animation-timing-function: ease-in-out;
max-height: $toast-height;
position: fixed;
background-color: globals.$background-color;
position: absolute;
background-color: globals.$dark-background-color;
border-radius: 4px;
border: solid 1px globals.$border-color;
right: calc(globals.$spacing-unit * 2);
//bottom panel height + 16px
bottom: calc(26px + #{globals.$spacing-unit * 2});
right: 16px;
bottom: 26px + globals.$spacing-unit;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: globals.$toast-z-index;
max-width: 500px;
animation-name: slide-in;
max-width: 420px;
animation-name: enter;
transform: translateY(0);
&--closing {
animation-name: slide-out;
transform: translateY(calc($toast-height + #{globals.$spacing-unit * 2}));
animation-name: exit;
transform: translateY(100%);
}
&__content {
@@ -38,6 +34,7 @@ $toast-height: 80px;
&__message-container {
display: flex;
gap: globals.$spacing-unit;
flex-direction: column;
}
&__message {
@@ -62,37 +59,38 @@ $toast-height: 80px;
cursor: pointer;
padding: 0;
margin: 0;
transition: color 0.2s ease-in-out;
&:hover {
color: globals.$muted-color;
}
}
&__success-icon {
color: globals.$success-color;
}
&__icon {
&--success {
color: globals.$success-color;
}
&__error-icon {
color: globals.$danger-color;
}
&--error {
color: globals.$danger-color;
}
&__warning-icon {
color: globals.$warning-color;
&--warning {
color: globals.$warning-color;
}
}
}
@keyframes slide-in {
@keyframes enter {
0% {
transform: translateY(calc($toast-height + #{globals.$spacing-unit * 2}));
opacity: 0;
transform: translateY(100%);
}
}
100% {
@keyframes exit {
0% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slide-out {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc($toast-height + #{globals.$spacing-unit * 2}));
}
}

72
src/renderer/src/components/toast/toast.tsx
View File

@@ -11,14 +11,23 @@ import cn from "classnames";
export interface ToastProps {
visible: boolean;
message: string;
title: string;
message?: string;
type: "success" | "error" | "warning";
duration?: number;
onClose: () => void;
}
const INITIAL_PROGRESS = 100;
export function Toast({ visible, message, type, onClose }: ToastProps) {
export function Toast({
visible,
title,
message,
type,
duration = 2500,
onClose,
}: Readonly<ToastProps>) {
const [isClosing, setIsClosing] = useState(false);
const [progress, setProgress] = useState(INITIAL_PROGRESS);
@@ -31,7 +40,7 @@ export function Toast({ visible, message, type, onClose }: ToastProps) {
closingAnimation.current = requestAnimationFrame(
function animateClosing(time) {
if (time - zero <= 200) {
if (time - zero <= 150) {
closingAnimation.current = requestAnimationFrame(animateClosing);
} else {
onClose();
@@ -43,17 +52,13 @@ export function Toast({ visible, message, type, onClose }: ToastProps) {
useEffect(() => {
if (visible) {
const zero = performance.now();
progressAnimation.current = requestAnimationFrame(
function animateProgress(time) {
const elapsed = time - zero;
const progress = Math.min(elapsed / 2500, 1);
const progress = Math.min(elapsed / duration, 1);
const currentValue =
INITIAL_PROGRESS + (0 - INITIAL_PROGRESS) * progress;
setProgress(currentValue);
if (progress < 1) {
progressAnimation.current = requestAnimationFrame(animateProgress);
} else {
@@ -70,9 +75,8 @@ export function Toast({ visible, message, type, onClose }: ToastProps) {
setIsClosing(false);
};
}
return () => {};
}, [startAnimateClosing, visible]);
}, [startAnimateClosing, duration, visible]);
if (!visible) return null;
@@ -84,26 +88,40 @@ export function Toast({ visible, message, type, onClose }: ToastProps) {
>
<div className="toast__content">
<div className="toast__message-container">
{type === "success" && (
<CheckCircleFillIcon className="toast__success-icon" />
)}
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: `8px`,
}}
>
{type === "success" && (
<CheckCircleFillIcon className="toast__icon--success" />
)}
{type === "error" && (
<XCircleFillIcon className="toast__error-icon" />
)}
{type === "error" && (
<XCircleFillIcon className="toast__icon--error" />
)}
{type === "warning" && <AlertIcon className="toast__warning-icon" />}
<span className="toast__message">{message}</span>
{type === "warning" && (
<AlertIcon className="toast__icon--warning" />
)}
<span style={{ fontWeight: "bold", flex: 1 }}>{title}</span>
<button
type="button"
className="toast__close-button"
onClick={startAnimateClosing}
aria-label="Close toast"
>
<XIcon />
</button>
</div>
{message && <p>{message}</p>}
</div>
<button
type="button"
className="toast__close-button"
onClick={startAnimateClosing}
aria-label="Close toast"
>
<XIcon />
</button>
</div>
<progress className="toast__progress" value={progress} max={100} />

2
src/renderer/src/constants.ts
View File

@@ -9,6 +9,8 @@ export const DOWNLOADER_NAME = {
[Downloader.PixelDrain]: "PixelDrain",
[Downloader.Qiwi]: "Qiwi",
[Downloader.Datanodes]: "Datanodes",
[Downloader.Mediafire]: "Mediafire",
[Downloader.TorBox]: "TorBox",
};
export const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;

30
src/renderer/src/context/game-details/game-details.context.tsx
View File

@@ -18,9 +18,9 @@ import {
} from "@renderer/hooks";
import type {
Game,
GameShop,
GameStats,
LibraryGame,
ShopDetails,
UserAchievement,
} from "@types";
@@ -68,12 +68,12 @@ export function GameDetailsContextProvider({
objectId,
gameTitle,
shop,
}: GameDetailsContextProps) {
}: Readonly<GameDetailsContextProps>) {
const [shopDetails, setShopDetails] = useState<ShopDetails | null>(null);
const [achievements, setAchievements] = useState<UserAchievement[] | null>(
null
);
const [game, setGame] = useState<Game | null>(null);
const [game, setGame] = useState<LibraryGame | null>(null);
const [hasNSFWContentBlocked, setHasNSFWContentBlocked] = useState(false);
const abortControllerRef = useRef<AbortController | null>(null);
@@ -81,7 +81,7 @@ export function GameDetailsContextProvider({
const [isLoading, setIsLoading] = useState(false);
const [gameColor, setGameColor] = useState("");
const [isGameRunning, setisGameRunning] = useState(false);
const [isGameRunning, setIsGameRunning] = useState(false);
const [showRepacksModal, setShowRepacksModal] = useState(false);
const [showGameOptionsModal, setShowGameOptionsModal] = useState(false);
@@ -101,15 +101,16 @@ export function GameDetailsContextProvider({
const updateGame = useCallback(async () => {
return window.electron
.getGameByObjectId(objectId!)
.getGameByObjectId(shop, objectId)
.then((result) => setGame(result));
}, [setGame, objectId]);
}, [setGame, shop, objectId]);
const isGameDownloading = lastPacket?.game.id === game?.id;
const isGameDownloading =
lastPacket?.gameId === game?.id && game?.download?.status === "active";
useEffect(() => {
updateGame();
}, [updateGame, isGameDownloading, lastPacket?.game.status]);
}, [updateGame, isGameDownloading, lastPacket?.gameId]);
useEffect(() => {
if (abortControllerRef.current) abortControllerRef.current.abort();
@@ -167,7 +168,7 @@ export function GameDetailsContextProvider({
setShopDetails(null);
setGame(null);
setIsLoading(true);
setisGameRunning(false);
setIsGameRunning(false);
setAchievements(null);
dispatch(setHeaderTitle(gameTitle));
}, [objectId, gameTitle, dispatch]);
@@ -182,17 +183,18 @@ export function GameDetailsContextProvider({
updateGame();
}
setisGameRunning(updatedIsGameRunning);
setIsGameRunning(updatedIsGameRunning);
});
return () => {
unsubscribe();
};
}, [game?.id, isGameRunning, updateGame]);
const lastDownloadedOption = useMemo(() => {
if (game?.uri) {
if (game?.download) {
const repack = repacks.find((repack) =>
repack.uris.some((uri) => uri.includes(game.uri!))
repack.uris.some((uri) => uri.includes(game.download!.uri))
);
if (!repack) return null;
@@ -200,7 +202,7 @@ export function GameDetailsContextProvider({
}
return null;
}, [game?.uri, repacks]);
}, [game?.download, repacks]);
useEffect(() => {
const unsubscribe = window.electron.onUpdateAchievements(
@@ -250,7 +252,7 @@ export function GameDetailsContextProvider({
value={{
game,
shopDetails,
shop: shop as GameShop,
shop,
repacks,
gameTitle,
isGameRunning,

4
src/renderer/src/context/game-details/game-details.context.types.ts
View File

@@ -1,14 +1,14 @@
import type {
Game,
GameRepack,
GameShop,
GameStats,
LibraryGame,
ShopDetails,
UserAchievement,
} from "@types";
export interface GameDetailsContext {
game: Game | null;
game: LibraryGame | null;
shopDetails: ShopDetails | null;
repacks: GameRepack[];
shop: GameShop;

68
src/renderer/src/declaration.d.ts vendored
View File

@@ -1,8 +1,6 @@
import type { AuthPage, CatalogueCategory } from "@shared";
import type {
AppUpdaterEvent,
Game,
LibraryGame,
GameShop,
HowLongToBeatCategory,
ShopDetails,
@@ -23,12 +21,14 @@ import type {
UserStats,
UserDetails,
FriendRequestSync,
GameAchievement,
GameArtifact,
LudusaviBackup,
UserAchievement,
ComparedAchievements,
CatalogueSearchPayload,
LibraryGame,
GameRunning,
TorBoxUser,
} from "@types";
import type { AxiosProgressEvent } from "axios";
import type disk from "diskusage";
@@ -41,12 +41,14 @@ declare global {
interface Electron {
/* Torrenting */
startGameDownload: (payload: StartGameDownloadPayload) => Promise<void>;
cancelGameDownload: (gameId: number) => Promise<void>;
pauseGameDownload: (gameId: number) => Promise<void>;
resumeGameDownload: (gameId: number) => Promise<void>;
pauseGameSeed: (gameId: number) => Promise<void>;
resumeGameSeed: (gameId: number) => Promise<void>;
startGameDownload: (
payload: StartGameDownloadPayload
) => Promise<{ ok: boolean; error?: string }>;
cancelGameDownload: (shop: GameShop, objectId: string) => Promise<void>;
pauseGameDownload: (shop: GameShop, objectId: string) => Promise<void>;
resumeGameDownload: (shop: GameShop, objectId: string) => Promise<void>;
pauseGameSeed: (shop: GameShop, objectId: string) => Promise<void>;
resumeGameSeed: (shop: GameShop, objectId: string) => Promise<void>;
onDownloadProgress: (
cb: (value: DownloadProgress) => void
) => () => Electron.IpcRenderer;
@@ -77,52 +79,62 @@ declare global {
onUpdateAchievements: (
objectId: string,
shop: GameShop,
cb: (achievements: GameAchievement[]) => void
cb: (achievements: UserAchievement[]) => void
) => () => Electron.IpcRenderer;
getPublishers: () => Promise<string[]>;
getDevelopers: () => Promise<string[]>;
/* Library */
addGameToLibrary: (
shop: GameShop,
objectId: string,
title: string,
shop: GameShop
title: string
) => Promise<void>;
createGameShortcut: (id: number) => Promise<boolean>;
createGameShortcut: (shop: GameShop, objectId: string) => Promise<boolean>;
updateExecutablePath: (
id: number,
shop: GameShop,
objectId: string,
executablePath: string | null
) => Promise<void>;
updateLaunchOptions: (
id: number,
shop: GameShop,
objectId: string,
launchOptions: string | null
) => Promise<void>;
selectGameWinePrefix: (
id: number,
shop: GameShop,
objectId: string,
winePrefixPath: string | null
) => Promise<void>;
verifyExecutablePathInUse: (executablePath: string) => Promise<Game>;
getLibrary: () => Promise<LibraryGame[]>;
openGameInstaller: (gameId: number) => Promise<boolean>;
openGameInstallerPath: (gameId: number) => Promise<boolean>;
openGameExecutablePath: (gameId: number) => Promise<void>;
openGameInstaller: (shop: GameShop, objectId: string) => Promise<boolean>;
openGameInstallerPath: (
shop: GameShop,
objectId: string
) => Promise<boolean>;
openGameExecutablePath: (shop: GameShop, objectId: string) => Promise<void>;
openGame: (
gameId: number,
shop: GameShop,
objectId: string,
executablePath: string,
launchOptions: string | null
launchOptions?: string | null
) => Promise<void>;
closeGame: (gameId: number) => Promise<boolean>;
removeGameFromLibrary: (gameId: number) => Promise<void>;
removeGame: (gameId: number) => Promise<void>;
deleteGameFolder: (gameId: number) => Promise<unknown>;
getGameByObjectId: (objectId: string) => Promise<Game | null>;
closeGame: (shop: GameShop, objectId: string) => Promise<boolean>;
removeGameFromLibrary: (shop: GameShop, objectId: string) => Promise<void>;
removeGame: (shop: GameShop, objectId: string) => Promise<void>;
deleteGameFolder: (shop: GameShop, objectId: string) => Promise<unknown>;
getGameByObjectId: (
shop: GameShop,
objectId: string
) => Promise<LibraryGame | null>;
onGamesRunning: (
cb: (
gamesRunning: Pick<GameRunning, "id" | "sessionDurationInMillis">[]
) => void
) => () => Electron.IpcRenderer;
onLibraryBatchComplete: (cb: () => void) => () => Electron.IpcRenderer;
resetGameAchievements: (gameId: number) => Promise<void>;
resetGameAchievements: (shop: GameShop, objectId: string) => Promise<void>;
/* User preferences */
getUserPreferences: () => Promise<UserPreferences | null>;
updateUserPreferences: (
@@ -133,6 +145,8 @@ declare global {
minimized: boolean;
}) => Promise<void>;
authenticateRealDebrid: (apiToken: string) => Promise<RealDebridUser>;
authenticateTorBox: (apiToken: string) => Promise<TorBoxUser>;
onAchievementUnlocked: (cb: () => void) => () => Electron.IpcRenderer;
/* Download sources */
putDownloadSource: (

10
src/renderer/src/features/download-slice.ts
View File

@@ -4,8 +4,8 @@ import type { DownloadProgress } from "@types";
export interface DownloadState {
lastPacket: DownloadProgress | null;
gameId: number | null;
gamesWithDeletionInProgress: number[];
gameId: string | null;
gamesWithDeletionInProgress: string[];
}
const initialState: DownloadState = {
@@ -20,13 +20,13 @@ export const downloadSlice = createSlice({
reducers: {
setLastPacket: (state, action: PayloadAction<DownloadProgress>) => {
state.lastPacket = action.payload;
if (!state.gameId) state.gameId = action.payload.game.id;
if (!state.gameId) state.gameId = action.payload.gameId;
},
clearDownload: (state) => {
state.lastPacket = null;
state.gameId = null;
},
setGameDeleting: (state, action: PayloadAction<number>) => {
setGameDeleting: (state, action: PayloadAction<string>) => {
if (
!state.gamesWithDeletionInProgress.includes(action.payload) &&
action.payload
@@ -34,7 +34,7 @@ export const downloadSlice = createSlice({
state.gamesWithDeletionInProgress.push(action.payload);
}
},
removeGameFromDeleting: (state, action: PayloadAction<number>) => {
removeGameFromDeleting: (state, action: PayloadAction<string>) => {
const index = state.gamesWithDeletionInProgress.indexOf(action.payload);
if (index >= 0) state.gamesWithDeletionInProgress.splice(index, 1);
},

2
src/renderer/src/features/running-game-slice.ts → src/renderer/src/features/game-running.slice.ts
View File

@@ -10,7 +10,7 @@ const initialState: GameRunningState = {
};
export const gameRunningSlice = createSlice({
name: "running-game",
name: "game-running",
initialState,
reducers: {
setGameRunning: (state, action: PayloadAction<GameRunning | null>) => {

2
src/renderer/src/features/index.ts
View File

@@ -4,7 +4,7 @@ export * from "./download-slice";
export * from "./window-slice";
export * from "./toast-slice";
export * from "./user-details-slice";
export * from "./running-game-slice";
export * from "./game-running.slice";
export * from "./subscription-slice";
export * from "./repacks-slice";
export * from "./catalogue-search";

8
src/renderer/src/features/toast-slice.ts
View File

@@ -3,14 +3,18 @@ import type { PayloadAction } from "@reduxjs/toolkit";
import { ToastProps } from "@renderer/components/toast/toast";
export interface ToastState {
message: string;
title: string;
message?: string;
type: ToastProps["type"];
duration?: number;
visible: boolean;
}
const initialState: ToastState = {
title: "",
message: "",
type: "success",
duration: 5000,
visible: false,
};
@@ -19,8 +23,10 @@ export const toastSlice = createSlice({
initialState,
reducers: {
showToast: (state, action: PayloadAction<Omit<ToastState, "visible">>) => {
state.title = action.payload.title;
state.message = action.payload.message;
state.type = action.payload.type;
state.duration = action.payload.duration ?? 5000;
state.visible = true;
},
closeToast: (state) => {

51
src/renderer/src/hooks/use-download.ts
View File

@@ -9,7 +9,11 @@ import {
setGameDeleting,
removeGameFromDeleting,
} from "@renderer/features";
import type { DownloadProgress, StartGameDownloadPayload } from "@types";
import type {
DownloadProgress,
GameShop,
StartGameDownloadPayload,
} from "@types";
import { useDate } from "./use-date";
import { formatBytes } from "@shared";
@@ -25,54 +29,55 @@ export function useDownload() {
const startDownload = async (payload: StartGameDownloadPayload) => {
dispatch(clearDownload());
const game = await window.electron.startGameDownload(payload);
const response = await window.electron.startGameDownload(payload);
await updateLibrary();
return game;
if (response.ok) updateLibrary();
return response;
};
const pauseDownload = async (gameId: number) => {
await window.electron.pauseGameDownload(gameId);
const pauseDownload = async (shop: GameShop, objectId: string) => {
await window.electron.pauseGameDownload(shop, objectId);
await updateLibrary();
dispatch(clearDownload());
};
const resumeDownload = async (gameId: number) => {
await window.electron.resumeGameDownload(gameId);
const resumeDownload = async (shop: GameShop, objectId: string) => {
await window.electron.resumeGameDownload(shop, objectId);
return updateLibrary();
};
const removeGameInstaller = async (gameId: number) => {
dispatch(setGameDeleting(gameId));
const removeGameInstaller = async (shop: GameShop, objectId: string) => {
dispatch(setGameDeleting(objectId));
try {
await window.electron.deleteGameFolder(gameId);
await window.electron.deleteGameFolder(shop, objectId);
updateLibrary();
} finally {
dispatch(removeGameFromDeleting(gameId));
dispatch(removeGameFromDeleting(objectId));
}
};
const cancelDownload = async (gameId: number) => {
await window.electron.cancelGameDownload(gameId);
const cancelDownload = async (shop: GameShop, objectId: string) => {
await window.electron.cancelGameDownload(shop, objectId);
dispatch(clearDownload());
updateLibrary();
removeGameInstaller(gameId);
removeGameInstaller(shop, objectId);
};
const removeGameFromLibrary = (gameId: number) =>
window.electron.removeGameFromLibrary(gameId).then(() => {
const removeGameFromLibrary = (shop: GameShop, objectId: string) =>
window.electron.removeGameFromLibrary(shop, objectId).then(() => {
updateLibrary();
});
const pauseSeeding = async (gameId: number) => {
await window.electron.pauseGameSeed(gameId);
const pauseSeeding = async (shop: GameShop, objectId: string) => {
await window.electron.pauseGameSeed(shop, objectId);
await updateLibrary();
};
const resumeSeeding = async (gameId: number) => {
await window.electron.resumeGameSeed(gameId);
const resumeSeeding = async (shop: GameShop, objectId: string) => {
await window.electron.resumeGameSeed(shop, objectId);
await updateLibrary();
};
@@ -90,8 +95,8 @@ export function useDownload() {
}
};
const isGameDeleting = (gameId: number) => {
return gamesWithDeletionInProgress.includes(gameId);
const isGameDeleting = (objectId: string) => {
return gamesWithDeletionInProgress.includes(objectId);
};
return {

12
src/renderer/src/hooks/use-toast.ts
View File

@@ -6,11 +6,13 @@ export function useToast() {
const dispatch = useAppDispatch();
const showSuccessToast = useCallback(
(message: string) => {
(title: string, message?: string, duration?: number) => {
dispatch(
showToast({
title,
message,
type: "success",
duration,
})
);
},
@@ -18,11 +20,13 @@ export function useToast() {
);
const showErrorToast = useCallback(
(message: string) => {
(title: string, message?: string, duration?: number) => {
dispatch(
showToast({
title,
message,
type: "error",
duration,
})
);
},
@@ -30,11 +34,13 @@ export function useToast() {
);
const showWarningToast = useCallback(
(message: string) => {
(title: string, message?: string, duration?: number) => {
dispatch(
showToast({
title,
message,
type: "warning",
duration,
})
);
},

8
src/renderer/src/hooks/use-user-details.ts
View File

@@ -78,9 +78,15 @@ export function useUserDetails() {
...response,
username: userDetails?.username || "",
subscription: userDetails?.subscription || null,
featurebaseJwt: userDetails?.featurebaseJwt || "",
});
},
[updateUserDetails, userDetails?.username, userDetails?.subscription]
[
updateUserDetails,
userDetails?.username,
userDetails?.subscription,
userDetails?.featurebaseJwt,
]
);
const syncFriendRequests = useCallback(async () => {

1
src/renderer/src/main.tsx
View File

@@ -45,6 +45,7 @@ Sentry.init({
tracesSampleRate: 1.0,
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
release: await window.electron.getVersion(),
});
console.log = logger.log;

4
src/renderer/src/pages/achievements/achievement-list.tsx
View File

@@ -10,7 +10,9 @@ interface AchievementListProps {
achievements: UserAchievement[];
}
export function AchievementList({ achievements }: AchievementListProps) {
export function AchievementList({
achievements,
}: Readonly<AchievementListProps>) {
const { t } = useTranslation("achievement");
const { showHydraCloudModal } = useSubscription();
const { formatDateTime } = useDate();

2
src/renderer/src/pages/achievements/achievements.tsx
View File

@@ -43,7 +43,7 @@ export default function Achievements() {
.getComparedUnlockedAchievements(objectId, shop as GameShop, userId)
.then(setComparedAchievements);
}
}, [objectId, shop, userId]);
}, [objectId, shop, userDetails?.id, userId]);
const otherUserId = userDetails?.id === userId ? null : userId;

122
src/renderer/src/pages/downloads/download-group.tsx
View File

@@ -1,6 +1,6 @@
import { useNavigate } from "react-router-dom";
import type { LibraryGame, SeedingStatus } from "@types";
import type { GameShop, LibraryGame, SeedingStatus } from "@types";
import { Badge, Button } from "@renderer/components";
import {
@@ -30,11 +30,12 @@ import {
XCircleIcon,
} from "@primer/octicons-react";
import torBoxLogo from "@renderer/assets/icons/torbox.webp";
export interface DownloadGroupProps {
library: LibraryGame[];
title: string;
openDeleteGameModal: (gameId: number) => void;
openGameInstaller: (gameId: number) => void;
openDeleteGameModal: (shop: GameShop, objectId: string) => void;
openGameInstaller: (shop: GameShop, objectId: string) => void;
seedingStatus: SeedingStatus[];
}
@@ -44,7 +45,7 @@ export function DownloadGroup({
openDeleteGameModal,
openGameInstaller,
seedingStatus,
}: DownloadGroupProps) {
}: Readonly<DownloadGroupProps>) {
const navigate = useNavigate();
const { t } = useTranslation("downloads");
@@ -65,18 +66,19 @@ export function DownloadGroup({
} = useDownload();
const getFinalDownloadSize = (game: LibraryGame) => {
const isGameDownloading = lastPacket?.game.id === game.id;
const download = game.download!;
const isGameDownloading = lastPacket?.gameId === game.id;
if (game.fileSize) return formatBytes(game.fileSize);
if (download.fileSize) return formatBytes(download.fileSize);
if (lastPacket?.game.fileSize && isGameDownloading)
return formatBytes(lastPacket?.game.fileSize);
if (lastPacket?.download.fileSize && isGameDownloading)
return formatBytes(lastPacket.download.fileSize);
return "N/A";
};
const seedingMap = useMemo(() => {
const map = new Map<number, SeedingStatus>();
const map = new Map<string, SeedingStatus>();
seedingStatus.forEach((seed) => {
map.set(seed.gameId, seed);
@@ -86,7 +88,9 @@ export function DownloadGroup({
}, [seedingStatus]);
const getGameInfo = (game: LibraryGame) => {
const isGameDownloading = lastPacket?.game.id === game.id;
const download = game.download!;
const isGameDownloading = lastPacket?.gameId === game.id;
const finalDownloadSize = getFinalDownloadSize(game);
const seedingStatus = seedingMap.get(game.id);
@@ -113,11 +117,11 @@ export function DownloadGroup({
<p>{progress}</p>
<p>
{formatBytes(lastPacket?.game.bytesDownloaded)} /{" "}
{formatBytes(lastPacket.download.bytesDownloaded)} /{" "}
{finalDownloadSize}
</p>
{game.downloader === Downloader.Torrent && (
{download.downloader === Downloader.Torrent && (
<small>
{lastPacket?.numPeers} peers / {lastPacket?.numSeeds} seeds
</small>
@@ -126,11 +130,11 @@ export function DownloadGroup({
);
}
if (game.progress === 1) {
if (download.progress === 1) {
const uploadSpeed = formatBytes(seedingStatus?.uploadSpeed ?? 0);
return game.status === "seeding" &&
game.downloader === Downloader.Torrent ? (
return download.status === "seeding" &&
download.downloader === Downloader.Torrent ? (
<>
<p>{t("seeding")}</p>
{uploadSpeed && <p>{uploadSpeed}/s</p>}
@@ -140,41 +144,44 @@ export function DownloadGroup({
);
}
if (game.status === "paused") {
if (download.status === "paused") {
return (
<>
<p>{formatDownloadProgress(game.progress)}</p>
<p>{t(game.downloadQueue && lastPacket ? "queued" : "paused")}</p>
<p>{formatDownloadProgress(download.progress)}</p>
<p>{t(download.queued ? "queued" : "paused")}</p>
</>
);
}
if (game.status === "active") {
if (download.status === "active") {
return (
<>
<p>{formatDownloadProgress(game.progress)}</p>
<p>{formatDownloadProgress(download.progress)}</p>
<p>
{formatBytes(game.bytesDownloaded)} / {finalDownloadSize}
{formatBytes(download.bytesDownloaded)} / {finalDownloadSize}
</p>
</>
);
}
return <p>{t(game.status as string)}</p>;
return <p>{t(download.status as string)}</p>;
};
const getGameActions = (game: LibraryGame): DropdownMenuItem[] => {
const isGameDownloading = lastPacket?.game.id === game.id;
const download = lastPacket?.download;
const isGameDownloading = lastPacket?.gameId === game.id;
const deleting = isGameDeleting(game.id);
if (game.progress === 1) {
if (download?.progress === 1) {
return [
{
label: t("install"),
disabled: deleting,
onClick: () => openGameInstaller(game.id),
onClick: () => {
openGameInstaller(game.shop, game.objectId);
},
icon: <DownloadIcon />,
},
{
@@ -182,53 +189,73 @@ export function DownloadGroup({
disabled: deleting,
icon: <UnlinkIcon />,
show:
game.status === "seeding" && game.downloader === Downloader.Torrent,
onClick: () => pauseSeeding(game.id),
download.status === "seeding" &&
download.downloader === Downloader.Torrent,
onClick: () => {
pauseSeeding(game.shop, game.objectId);
},
},
{
label: t("resume_seeding"),
disabled: deleting,
icon: <LinkIcon />,
show:
game.status !== "seeding" && game.downloader === Downloader.Torrent,
onClick: () => resumeSeeding(game.id),
download.status !== "seeding" &&
download.downloader === Downloader.Torrent,
onClick: () => {
resumeSeeding(game.shop, game.objectId);
},
},
{
label: t("delete"),
disabled: deleting,
icon: <TrashIcon />,
onClick: () => openDeleteGameModal(game.id),
onClick: () => {
openDeleteGameModal(game.shop, game.objectId);
},
},
];
}
if (isGameDownloading || game.status === "active") {
if (isGameDownloading || download?.status === "active") {
return [
{
label: t("pause"),
onClick: () => pauseDownload(game.id),
onClick: () => {
pauseDownload(game.shop, game.objectId);
},
icon: <ColumnsIcon />,
},
{
label: t("cancel"),
onClick: () => cancelDownload(game.id),
onClick: () => {
cancelDownload(game.shop, game.objectId);
},
icon: <XCircleIcon />,
},
];
}
const isResumeDisabled =
(download?.downloader === Downloader.RealDebrid &&
!userPreferences?.realDebridApiToken) ||
(download?.downloader === Downloader.TorBox &&
!userPreferences?.torBoxApiToken);
return [
{
label: t("resume"),
disabled:
game.downloader === Downloader.RealDebrid &&
!userPreferences?.realDebridApiToken,
onClick: () => resumeDownload(game.id),
disabled: isResumeDisabled,
onClick: () => {
resumeDownload(game.shop, game.objectId);
},
icon: <PlayIcon />,
},
{
label: t("cancel"),
onClick: () => cancelDownload(game.id),
onClick: () => {
cancelDownload(game.shop, game.objectId);
},
icon: <XCircleIcon />,
},
];
@@ -251,13 +278,26 @@ export function DownloadGroup({
<div className="download-group__cover">
<div className="download-group__cover-backdrop">
<img
src={steamUrlBuilder.library(game.objectID)}
src={steamUrlBuilder.library(game.objectId)}
className="download-group__cover-image"
alt={game.title}
/>
<div className="download-group__cover-content">
<Badge>{DOWNLOADER_NAME[game.downloader]}</Badge>
{game.download?.downloader === Downloader.TorBox ? (
<Badge>
<img
src={torBoxLogo}
alt="TorBox"
style={{ width: 13 }}
/>
<span>TorBox</span>
</Badge>
) : (
<Badge>
{DOWNLOADER_NAME[game.download!.downloader]}
</Badge>
)}
</div>
</div>
</div>
@@ -271,7 +311,7 @@ export function DownloadGroup({
navigate(
buildGameDetailsPath({
...game,
objectId: game.objectID,
objectId: game.objectId,
})
)
}

58
src/renderer/src/pages/downloads/downloads.tsx
View File

@@ -7,8 +7,8 @@ import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
import "./downloads.scss";
import { DeleteGameModal } from "./delete-game-modal";
import { DownloadGroup } from "./download-group";
import type { LibraryGame, SeedingStatus } from "@types";
import { orderBy } from "lodash-es";
import type { GameShop, LibraryGame, SeedingStatus } from "@types";
import { orderBy, sortBy } from "lodash-es";
import { ArrowDownIcon } from "@primer/octicons-react";
export default function Downloads() {
@@ -16,7 +16,7 @@ export default function Downloads() {
const { t } = useTranslation("downloads");
const gameToBeDeleted = useRef<number | null>(null);
const gameToBeDeleted = useRef<[GameShop, string] | null>(null);
const [showBinaryNotFoundModal, setShowBinaryNotFoundModal] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
@@ -25,8 +25,10 @@ export default function Downloads() {
const handleDeleteGame = async () => {
if (gameToBeDeleted.current) {
await pauseSeeding(gameToBeDeleted.current);
await removeGameInstaller(gameToBeDeleted.current);
const [shop, objectId] = gameToBeDeleted.current;
await pauseSeeding(shop, objectId);
await removeGameInstaller(shop, objectId);
}
};
@@ -38,14 +40,14 @@ export default function Downloads() {
window.electron.onSeedingStatus((value) => setSeedingStatus(value));
}, []);
const handleOpenGameInstaller = (gameId: number) =>
window.electron.openGameInstaller(gameId).then((isBinaryInPath) => {
const handleOpenGameInstaller = (shop: GameShop, objectId: string) =>
window.electron.openGameInstaller(shop, objectId).then((isBinaryInPath) => {
if (!isBinaryInPath) setShowBinaryNotFoundModal(true);
updateLibrary();
});
const handleOpenDeleteGameModal = (gameId: number) => {
gameToBeDeleted.current = gameId;
const handleOpenDeleteGameModal = (shop: GameShop, objectId: string) => {
gameToBeDeleted.current = [shop, objectId];
setShowDeleteModal(true);
};
@@ -56,29 +58,31 @@ export default function Downloads() {
complete: [],
};
const result = library.reduce((prev, next) => {
/* Game has been manually added to the library or has been canceled */
if (!next.status || next.status === "removed") return prev;
const result = sortBy(library, (game) => game.download?.timestamp).reduce(
(prev, next) => {
/* Game has been manually added to the library or has been canceled */
if (!next.download?.status || next.download?.status === "removed")
return prev;
/* Is downloading */
if (lastPacket?.game.id === next.id)
return { ...prev, downloading: [...prev.downloading, next] };
/* Is downloading */
if (lastPacket?.gameId === next.id)
return { ...prev, downloading: [...prev.downloading, next] };
/* Is either queued or paused */
if (next.downloadQueue || next.status === "paused")
return { ...prev, queued: [...prev.queued, next] };
/* Is either queued or paused */
if (next.download.queued || next.download?.status === "paused")
return { ...prev, queued: [...prev.queued, next] };
return { ...prev, complete: [...prev.complete, next] };
}, initialValue);
const queued = orderBy(
result.queued,
(game) => game.downloadQueue?.id ?? -1,
["desc"]
return { ...prev, complete: [...prev.complete, next] };
},
initialValue
);
const queued = orderBy(result.queued, (game) => game.download?.timestamp, [
"desc",
]);
const complete = orderBy(result.complete, (game) =>
game.progress === 1 ? 0 : 1
game.download?.progress === 1 ? 0 : 1
);
return {
@@ -86,7 +90,7 @@ export default function Downloads() {
queued,
complete,
};
}, [library, lastPacket?.game.id]);
}, [library, lastPacket?.gameId]);
const downloadGroups = [
{

8
src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.tsx
View File

@@ -189,14 +189,6 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) {
</Button>
</div>
{uploadingBackup && (
<progress
className="cloud-sync-modal__progress"
value={backupDownloadProgress?.progress ?? 0}
max={100}
/>
)}
<div className="cloud-sync-modal__backups-header">
<h2>{t("backups")}</h2>
<small>

1
src/renderer/src/pages/game-details/game-details-content.tsx
View File

@@ -139,6 +139,7 @@ export function GameDetailsContent() {
className="game-details__hero-backdrop"
style={{
backgroundColor: gameColor,
flex: 1,
opacity: Math.min(1, 1 - backdropOpactiy),
}}
/>

19
src/renderer/src/pages/game-details/game-details.tsx
View File

@@ -100,19 +100,23 @@ export default function GameDetails() {
downloader: Downloader,
downloadPath: string
) => {
await startDownload({
const response = await startDownload({
repackId: repack.id,
objectId: objectId!,
title: gameTitle,
downloader,
shop: shop as GameShop,
shop,
downloadPath,
uri: selectRepackUri(repack, downloader),
});
await updateGame();
setShowRepacksModal(false);
setShowGameOptionsModal(false);
if (response.ok) {
await updateGame();
setShowRepacksModal(false);
setShowGameOptionsModal(false);
}
return response;
};
const handleNSFWContentRefuse = () => {
@@ -121,10 +125,7 @@ export default function GameDetails() {
};
return (
<CloudSyncContextProvider
objectId={objectId!}
shop={shop! as GameShop}
>
<CloudSyncContextProvider objectId={objectId!} shop={shop}>
<CloudSyncContextConsumer>
{({
showCloudSyncModal,

13
src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx
View File

@@ -21,6 +21,7 @@ export function HeroPanelActions() {
game,
repacks,
isGameRunning,
shop,
objectId,
gameTitle,
setShowGameOptionsModal,
@@ -32,7 +33,7 @@ export function HeroPanelActions() {
const { lastPacket } = useDownload();
const isGameDownloading =
game?.status === "active" && lastPacket?.game.id === game?.id;
game?.download?.status === "active" && lastPacket?.gameId === game?.id;
const { updateLibrary } = useLibrary();
@@ -42,7 +43,7 @@ export function HeroPanelActions() {
setToggleLibraryGameDisabled(true);
try {
await window.electron.addGameToLibrary(objectId!, gameTitle, "steam");
await window.electron.addGameToLibrary(shop, objectId!, gameTitle);
updateLibrary();
updateGame();
@@ -55,7 +56,8 @@ export function HeroPanelActions() {
if (game) {
if (game.executablePath) {
window.electron.openGame(
game.id,
game.shop,
game.objectId,
game.executablePath,
game.launchOptions
);
@@ -65,7 +67,8 @@ export function HeroPanelActions() {
const gameExecutablePath = await selectGameExecutable();
if (gameExecutablePath)
window.electron.openGame(
game.id,
game.shop,
game.objectId,
gameExecutablePath,
game.launchOptions
);
@@ -73,7 +76,7 @@ export function HeroPanelActions() {
};
const closeGame = () => {
if (game) window.electron.closeGame(game.id);
if (game) window.electron.closeGame(game.shop, game.objectId);
};
const deleting = game ? isGameDeleting(game?.id) : false;

11
src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx
View File

@@ -43,21 +43,24 @@ export function HeroPanelPlaytime() {
if (!game) return null;
const hasDownload =
["active", "paused"].includes(game.status as string) && game.progress !== 1;
["active", "paused"].includes(game.download?.status as string) &&
game.download?.progress !== 1;
const isGameDownloading =
game.status === "active" && lastPacket?.game.id === game.id;
game.download?.status === "active" && lastPacket?.gameId === game.id;
const downloadInProgressInfo = (
<div className="hero-panel-playtime__download-details">
<Link to="/downloads" className="hero-panel-playtime__downloads-link">
{game.status === "active"
{game.download?.status === "active"
? t("download_in_progress")
: t("download_paused")}
</Link>
<small>
{isGameDownloading ? progress : formatDownloadProgress(game.progress)}
{isGameDownloading
? progress
: formatDownloadProgress(game.download?.progress)}
</small>
</div>
);

12
src/renderer/src/pages/game-details/hero/hero-panel.tsx
View File

@@ -23,7 +23,7 @@ export function HeroPanel({ isHeaderStuck }: HeroPanelProps) {
const { lastPacket } = useDownload();
const isGameDownloading =
game?.status === "active" && lastPacket?.game.id === game?.id;
game?.download?.status === "active" && lastPacket?.gameId === game?.id;
const getInfo = () => {
if (!game) {
@@ -50,8 +50,8 @@ export function HeroPanel({ isHeaderStuck }: HeroPanelProps) {
};
const showProgressBar =
(game?.status === "active" && game?.progress < 1) ||
game?.status === "paused";
(game?.download?.status === "active" && game?.download?.progress < 1) ||
game?.download?.status === "paused";
return (
<div
@@ -66,9 +66,11 @@ export function HeroPanel({ isHeaderStuck }: HeroPanelProps) {
{showProgressBar && (
<progress
max={1}
value={isGameDownloading ? lastPacket?.game.progress : game?.progress}
value={
isGameDownloading ? lastPacket?.progress : game?.download?.progress
}
className={`hero-panel__progress-bar ${
game?.status === "paused"
game?.download?.status === "paused"
? "hero-panel__progress-bar--disabled"
: ""
}`}

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

@@ -15,7 +15,7 @@ export interface DownloadSettingsModalProps {
repack: GameRepack,
downloader: Downloader,
downloadPath: string
) => Promise<void>;
) => Promise<{ ok: boolean; error?: string }>;
repack: GameRepack | null;
}
@@ -24,7 +24,7 @@ export function DownloadSettingsModal({
onClose,
startDownload,
repack,
}: DownloadSettingsModalProps) {
}: Readonly<DownloadSettingsModalProps>) {
const { t } = useTranslation("game_details");
const { showErrorToast } = useToast();
@@ -85,19 +85,17 @@ export function DownloadSettingsModal({
const filteredDownloaders = downloaders.filter((downloader) => {
if (downloader === Downloader.RealDebrid)
return userPreferences?.realDebridApiToken;
if (downloader === Downloader.TorBox)
return userPreferences?.torBoxApiToken;
return true;
});
/* Gives preference to Real Debrid */
const selectedDownloader = filteredDownloaders.includes(
Downloader.RealDebrid
)
? Downloader.RealDebrid
/* Gives preference to TorBox */
const selectedDownloader = filteredDownloaders.includes(Downloader.TorBox)
? Downloader.TorBox
: filteredDownloaders[0];
setSelectedDownloader(
selectedDownloader === undefined ? null : selectedDownloader
);
setSelectedDownloader(selectedDownloader ?? null);
}, [
userPreferences?.downloadsPath,
downloaders,
@@ -116,20 +114,30 @@ export function DownloadSettingsModal({
}
};
const handleStartClick = () => {
const handleStartClick = async () => {
if (repack) {
setDownloadStarting(true);
startDownload(repack, selectedDownloader!, selectedPath)
.then(() => {
try {
const response = await startDownload(
repack,
selectedDownloader!,
selectedPath
);
if (response.ok) {
onClose();
})
.catch(() => {
showErrorToast(t("download_error"));
})
.finally(() => {
setDownloadStarting(false);
});
return;
} else if (response.error) {
showErrorToast(t("download_error"), t(response.error), 4_000);
}
} catch (error) {
if (error instanceof Error) {
showErrorToast(t("download_error"), error.message, 4_000);
}
} finally {
setDownloadStarting(false);
}
}
};

112
src/renderer/src/pages/game-details/modals/game-options-modal.tsx
View File

@@ -1,7 +1,7 @@
import { useContext, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Button, Modal, TextField } from "@renderer/components";
import type { Game } from "@types";
import type { LibraryGame } from "@types";
import { gameDetailsContext } from "@renderer/context";
import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal";
import { useDownload, useToast, useUserDetails } from "@renderer/hooks";
@@ -13,7 +13,7 @@ import "./game-options-modal.scss";
export interface GameOptionsModalProps {
visible: boolean;
game: Game;
game: LibraryGame;
onClose: () => void;
}
@@ -21,7 +21,7 @@ export function GameOptionsModal({
visible,
game,
onClose,
}: GameOptionsModalProps) {
}: Readonly<GameOptionsModalProps>) {
const { t } = useTranslation("game_details");
const { showSuccessToast, showErrorToast } = useToast();
@@ -59,21 +59,25 @@ export function GameOptionsModal({
const { lastPacket } = useDownload();
const isGameDownloading =
game.status === "active" && lastPacket?.game.id === game.id;
game.download?.status === "active" && lastPacket?.gameId === game.id;
const debounceUpdateLaunchOptions = useRef(
debounce(async (value: string) => {
await window.electron.updateLaunchOptions(game.id, value);
await window.electron.updateLaunchOptions(
game.shop,
game.objectId,
value
);
updateGame();
}, 1000)
).current;
const handleRemoveGameFromLibrary = async () => {
if (isGameDownloading) {
await cancelDownload(game.id);
await cancelDownload(game.shop, game.objectId);
}
await removeGameFromLibrary(game.id);
await removeGameFromLibrary(game.shop, game.objectId);
updateGame();
onClose();
};
@@ -92,35 +96,39 @@ export function GameOptionsModal({
return;
}
window.electron.updateExecutablePath(game.id, path).then(updateGame);
window.electron
.updateExecutablePath(game.shop, game.objectId, path)
.then(updateGame);
}
};
const handleCreateShortcut = async () => {
window.electron.createGameShortcut(game.id).then((success) => {
if (success) {
showSuccessToast(t("create_shortcut_success"));
} else {
showErrorToast(t("create_shortcut_error"));
}
});
window.electron
.createGameShortcut(game.shop, game.objectId)
.then((success) => {
if (success) {
showSuccessToast(t("create_shortcut_success"));
} else {
showErrorToast(t("create_shortcut_error"));
}
});
};
const handleOpenDownloadFolder = async () => {
await window.electron.openGameInstallerPath(game.id);
await window.electron.openGameInstallerPath(game.shop, game.objectId);
};
const handleDeleteGame = async () => {
await removeGameInstaller(game.id);
await removeGameInstaller(game.shop, game.objectId);
updateGame();
};
const handleOpenGameExecutablePath = async () => {
await window.electron.openGameExecutablePath(game.id);
await window.electron.openGameExecutablePath(game.shop, game.objectId);
};
const handleClearExecutablePath = async () => {
await window.electron.updateExecutablePath(game.id, null);
await window.electron.updateExecutablePath(game.shop, game.objectId, null);
updateGame();
};
@@ -130,13 +138,17 @@ export function GameOptionsModal({
});
if (filePaths && filePaths.length > 0) {
await window.electron.selectGameWinePrefix(game.id, filePaths[0]);
await window.electron.selectGameWinePrefix(
game.shop,
game.objectId,
filePaths[0]
);
await updateGame();
}
};
const handleClearWinePrefixPath = async () => {
await window.electron.selectGameWinePrefix(game.id, null);
await window.electron.selectGameWinePrefix(game.shop, game.objectId, null);
updateGame();
};
@@ -150,7 +162,9 @@ export function GameOptionsModal({
const handleClearLaunchOptions = async () => {
setLaunchOptions("");
window.electron.updateLaunchOptions(game.id, null).then(updateGame);
window.electron
.updateLaunchOptions(game.shop, game.objectId, null)
.then(updateGame);
};
const shouldShowWinePrefixConfiguration =
@@ -159,7 +173,7 @@ export function GameOptionsModal({
const handleResetAchievements = async () => {
setIsDeletingAchievements(true);
try {
await window.electron.resetGameAchievements(game.id);
await window.electron.resetGameAchievements(game.shop, game.objectId);
await updateGame();
showSuccessToast(t("reset_achievements_success"));
} catch (error) {
@@ -169,8 +183,6 @@ export function GameOptionsModal({
}
};
const shouldShowLaunchOptionsConfiguration = false;
return (
<>
<DeleteGameModal
@@ -178,12 +190,14 @@ export function GameOptionsModal({
onClose={() => setShowDeleteModal(false)}
deleteGame={handleDeleteGame}
/>
<RemoveGameFromLibraryModal
visible={showRemoveGameModal}
onClose={() => setShowRemoveGameModal(false)}
removeGameFromLibrary={handleRemoveGameFromLibrary}
game={game}
/>
<ResetAchievementsModal
visible={showResetAchievementsModal}
onClose={() => setShowResetAchievementsModal(false)}
@@ -290,29 +304,27 @@ export function GameOptionsModal({
</div>
)}
{shouldShowLaunchOptionsConfiguration && (
<div className="game-options-modal__launch-options">
<div className="game-options-modal__header">
<h2>{t("launch_options")}</h2>
<h4 className="game-options-modal__header-description">
{t("launch_options_description")}
</h4>
</div>
<TextField
value={launchOptions}
theme="dark"
placeholder={t("launch_options_placeholder")}
onChange={handleChangeLaunchOptions}
rightContent={
game.launchOptions && (
<Button onClick={handleClearLaunchOptions} theme="outline">
{t("clear")}
</Button>
)
}
/>
<div className="game-options-modal__launch-options">
<div className="game-options-modal__header">
<h2>{t("launch_options")}</h2>
<h4 className="game-options-modal__header-description">
{t("launch_options_description")}
</h4>
</div>
)}
<TextField
value={launchOptions}
theme="dark"
placeholder={t("launch_options_placeholder")}
onChange={handleChangeLaunchOptions}
rightContent={
game.launchOptions && (
<Button onClick={handleClearLaunchOptions} theme="outline">
{t("clear")}
</Button>
)
}
/>
</div>
<div className="game-options-modal__downloads">
<div className="game-options-modal__header">
@@ -330,7 +342,7 @@ export function GameOptionsModal({
>
{t("open_download_options")}
</Button>
{game.downloadPath && (
{game.download?.downloadPath && (
<Button
onClick={handleOpenDownloadFolder}
theme="outline"
@@ -377,7 +389,9 @@ export function GameOptionsModal({
setShowDeleteModal(true);
}}
theme="danger"
disabled={isGameDownloading || deleting || !game.downloadPath}
disabled={
isGameDownloading || deleting || !game.download?.downloadPath
}
>
{t("remove_files")}
</Button>

10
src/renderer/src/pages/game-details/modals/repacks-modal.tsx
View File

@@ -17,7 +17,7 @@ export interface RepacksModalProps {
repack: GameRepack,
downloader: Downloader,
downloadPath: string
) => Promise<void>;
) => Promise<{ ok: boolean; error?: string }>;
onClose: () => void;
}
@@ -25,7 +25,7 @@ export function RepacksModal({
visible,
startDownload,
onClose,
}: RepacksModalProps) {
}: Readonly<RepacksModalProps>) {
const [filteredRepacks, setFilteredRepacks] = useState<GameRepack[]>([]);
const [repack, setRepack] = useState<GameRepack | null>(null);
const [showSelectFolderModal, setShowSelectFolderModal] = useState(false);
@@ -65,8 +65,8 @@ export function RepacksModal({
};
const checkIfLastDownloadedOption = (repack: GameRepack) => {
if (!game) return false;
return repack.uris.some((uri) => uri.includes(game.uri!));
if (!game?.download) return false;
return repack.uris.some((uri) => uri.includes(game.download!.uri));
};
return (
@@ -107,7 +107,7 @@ export function RepacksModal({
<p className="repacks-modal__repack-info">
{repack.fileSize} - {repack.repacker} -{" "}
{repack.uploadDate ? formatDate(repack.uploadDate!) : ""}
{repack.uploadDate ? formatDate(repack.uploadDate) : ""}
</p>
</Button>
);

5
src/renderer/src/pages/game-details/sidebar/sidebar.tsx
View File

@@ -164,8 +164,8 @@ export function Sidebar() {
</button>
)}
{achievements.slice(0, 4).map((achievement, index) => (
<li key={index}>
{achievements.slice(0, 4).map((achievement) => (
<li key={achievement.displayName}>
<Link
to={buildGameAchievementPath({
shop: shop,
@@ -194,7 +194,6 @@ export function Sidebar() {
))}
<Link
style={{ textAlign: "center" }}
to={buildGameAchievementPath({
shop: shop,
objectId: objectId!,

7
src/renderer/src/pages/profile/profile-content/profile-content.tsx
View File

@@ -5,7 +5,6 @@ import { useAppDispatch, useFormat } from "@renderer/hooks";
import { setHeaderTitle } from "@renderer/features";
import { TelescopeIcon } from "@primer/octicons-react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { LockedProfile } from "./locked-profile";
import { ReportProfile } from "../report-profile/report-profile";
import { FriendsBox } from "./friends-box";
@@ -65,8 +64,6 @@ export function ProfileContent() {
const { numberFormatter } = useFormat();
const navigate = useNavigate();
const usersAreFriends = useMemo(() => {
return userProfile?.relation?.status === "ACCEPTED";
}, [userProfile]);
@@ -83,6 +80,7 @@ export function ProfileContent() {
}
const hasGames = userProfile?.libraryGames.length > 0;
const shouldShowRightContent = hasGames || userProfile.friends.length > 0;
return (
@@ -102,6 +100,7 @@ export function ProfileContent() {
<>
<div className="profile-content__section-header">
<h2>{t("library")}</h2>
{userStats && (
<span>{numberFormatter.format(userStats.libraryCount)}</span>
)}
@@ -139,13 +138,13 @@ export function ProfileContent() {
userStats,
numberFormatter,
t,
navigate,
statsIndex,
]);
return (
<div>
<ProfileHero />
{content}
</div>
);

2
src/renderer/src/pages/profile/profile-content/recent-games-box.tsx
View File

@@ -11,7 +11,9 @@ import "./recent-games-box.scss";
export function RecentGamesBox() {
const { userProfile } = useContext(userProfileContext);
const { t } = useTranslation("user_profile");
const { numberFormatter } = useFormat();
const formatPlayTime = useCallback(

2
src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx
View File

@@ -61,7 +61,9 @@ export function UserLibraryGameCard({
const formatAchievementPoints = (number: number) => {
if (number < 100_000) return numberFormatter.format(number);
if (number < 1_000_000) return `${(number / 1000).toFixed(1)}K`;
return `${(number / 1_000_000).toFixed(1)}M`;
};

4
src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
View File

@@ -196,7 +196,7 @@ export function ProfileHero() {
<Button
theme="outline"
onClick={() =>
handleFriendAction(userProfile.relation!.AId, "CANCEL")
handleFriendAction(userProfile.relation!.BId, "CANCEL")
}
disabled={isPerformingAction}
className="profile-hero__button--outline"
@@ -249,7 +249,7 @@ export function ProfileHero() {
if (gameRunning)
return {
...gameRunning,
objectId: gameRunning.objectID,
objectId: gameRunning.objectId,
sessionDurationInSeconds: gameRunning.sessionDurationInMillis / 1000,
};

3
src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.tsx
View File

@@ -10,9 +10,12 @@ export function UploadBackgroundImageButton() {
const [isUploadingBackgroundImage, setIsUploadingBackgorundImage] =
useState(false);
const { hasActiveSubscription } = useUserDetails();
const { t } = useTranslation("user_profile");
const { isMe, setSelectedBackgroundImage } = useContext(userProfileContext);
const { patchUser, fetchUserDetails } = useUserDetails();
const { showSuccessToast } = useToast();
const handleChangeCoverClick = async () => {

2
src/renderer/src/pages/settings/settings-account.tsx
View File

@@ -63,7 +63,7 @@ export function SettingsAccount() {
return () => {
unsubscribe();
};
}, [fetchUserDetails, updateUserDetails]);
}, [fetchUserDetails, updateUserDetails, showSuccessToast]);
const visibilityOptions = [
{ value: "PUBLIC", label: t("public") },

15
src/renderer/src/pages/settings/settings-behavior.tsx
View File

@@ -29,13 +29,15 @@ export function SettingsBehavior() {
useEffect(() => {
if (userPreferences) {
setForm({
preferQuitInsteadOfHiding: userPreferences.preferQuitInsteadOfHiding,
runAtStartup: userPreferences.runAtStartup,
startMinimized: userPreferences.startMinimized,
disableNsfwAlert: userPreferences.disableNsfwAlert,
seedAfterDownloadComplete: userPreferences.seedAfterDownloadComplete,
preferQuitInsteadOfHiding:
userPreferences.preferQuitInsteadOfHiding ?? false,
runAtStartup: userPreferences.runAtStartup ?? false,
startMinimized: userPreferences.startMinimized ?? false,
disableNsfwAlert: userPreferences.disableNsfwAlert ?? false,
seedAfterDownloadComplete:
userPreferences.seedAfterDownloadComplete ?? false,
showHiddenAchievementsDescription:
userPreferences.showHiddenAchievementsDescription,
userPreferences.showHiddenAchievementsDescription ?? false,
});
}
}, [userPreferences]);
@@ -83,6 +85,7 @@ export function SettingsBehavior() {
>
<CheckboxField
label={t("launch_minimized")}
style={{ cursor: form.runAtStartup ? "pointer" : "not-allowed" }}
checked={form.runAtStartup && form.startMinimized}
disabled={!form.runAtStartup}
onChange={() => {

55
src/renderer/src/pages/settings/settings-general.tsx
View File

@@ -60,10 +60,32 @@ export function SettingsGeneral() {
);
}, []);
useEffect(updateFormWithUserPreferences, [
userPreferences,
defaultDownloadsPath,
]);
useEffect(() => {
if (userPreferences) {
const languageKeys = Object.keys(languageResources);
const language =
languageKeys.find(
(language) => language === userPreferences.language
) ??
languageKeys.find((language) => {
return language.startsWith(
userPreferences.language?.split("-")[0] ?? "en"
);
});
setForm((prev) => ({
...prev,
downloadsPath: userPreferences.downloadsPath ?? defaultDownloadsPath,
downloadNotificationsEnabled:
userPreferences.downloadNotificationsEnabled ?? false,
repackUpdatesNotificationsEnabled:
userPreferences.repackUpdatesNotificationsEnabled ?? false,
achievementNotificationsEnabled:
userPreferences.achievementNotificationsEnabled ?? false,
language: language ?? "en",
}));
}
}, [userPreferences, defaultDownloadsPath]);
const handleLanguageChange = (event) => {
const value = event.target.value;
@@ -89,31 +111,6 @@ export function SettingsGeneral() {
}
};
function updateFormWithUserPreferences() {
if (userPreferences) {
const languageKeys = Object.keys(languageResources);
const language =
languageKeys.find((language) => {
return language === userPreferences.language;
}) ??
languageKeys.find((language) => {
return language.startsWith(userPreferences.language.split("-")[0]);
});
setForm((prev) => ({
...prev,
downloadsPath: userPreferences.downloadsPath ?? defaultDownloadsPath,
downloadNotificationsEnabled:
userPreferences.downloadNotificationsEnabled,
repackUpdatesNotificationsEnabled:
userPreferences.repackUpdatesNotificationsEnabled,
achievementNotificationsEnabled:
userPreferences.achievementNotificationsEnabled,
language: language ?? "en",
}));
}
}
return (
<div className="settings-general">
<TextField

9
src/renderer/src/pages/settings/settings-real-debrid.tsx
View File

@@ -56,7 +56,8 @@ export function SettingsRealDebrid() {
return;
} else {
showSuccessToast(
t("real_debrid_linked_message", { username: user.username })
t("real_debrid_account_linked"),
t("debrid_linked_message", { username: user.username })
);
}
} else {
@@ -67,7 +68,7 @@ export function SettingsRealDebrid() {
realDebridApiToken: form.useRealDebrid ? form.realDebridApiToken : null,
});
} catch (err) {
showErrorToast(t("real_debrid_invalid_token"));
showErrorToast(t("debrid_invalid_token"));
} finally {
setIsLoading(false);
}
@@ -95,7 +96,7 @@ export function SettingsRealDebrid() {
{form.useRealDebrid && (
<TextField
label={t("real_debrid_api_token")}
label={t("api_token")}
value={form.realDebridApiToken ?? ""}
type="password"
onChange={(event) =>
@@ -108,7 +109,7 @@ export function SettingsRealDebrid() {
}
placeholder="API Token"
hint={
<Trans i18nKey="real_debrid_api_token_hint" ns="settings">
<Trans i18nKey="debrid_api_token_hint" ns="settings">
<Link to={REAL_DEBRID_API_TOKEN_URL} />
</Trans>
}

18
src/renderer/src/pages/settings/settings-torbox.scss Normal file
View File

@@ -0,0 +1,18 @@
@use "../../scss/globals.scss";
.settings-torbox {
&__form {
display: flex;
flex-direction: column;
gap: globals.$spacing-unit;
}
&__description {
margin-bottom: calc(globals.$spacing-unit * 2);
}
&__submit-button {
align-self: flex-end;
width: 100%;
}
}

110
src/renderer/src/pages/settings/settings-torbox.tsx Normal file
View File

@@ -0,0 +1,110 @@
import { useContext, useEffect, useState } from "react";
import { Trans, useTranslation } from "react-i18next";
import { Button, CheckboxField, Link, TextField } from "@renderer/components";
import "./settings-torbox.scss";
import { useAppSelector, useToast } from "@renderer/hooks";
import { settingsContext } from "@renderer/context";
const TORBOX_API_TOKEN_URL = "https://torbox.app/settings";
export function SettingsTorbox() {
const userPreferences = useAppSelector(
(state) => state.userPreferences.value
);
const { updateUserPreferences } = useContext(settingsContext);
const [isLoading, setIsLoading] = useState(false);
const [form, setForm] = useState({
useTorBox: false,
torBoxApiToken: null as string | null,
});
const { showSuccessToast, showErrorToast } = useToast();
const { t } = useTranslation("settings");
useEffect(() => {
if (userPreferences) {
setForm({
useTorBox: Boolean(userPreferences.torBoxApiToken),
torBoxApiToken: userPreferences.torBoxApiToken ?? null,
});
}
}, [userPreferences]);
const handleFormSubmit: React.FormEventHandler<HTMLFormElement> = async (
event
) => {
setIsLoading(true);
event.preventDefault();
try {
if (form.useTorBox) {
const user = await window.electron.authenticateTorBox(
form.torBoxApiToken!
);
showSuccessToast(
t("torbox_account_linked"),
t("debrid_linked_message", { username: user.email })
);
} else {
showSuccessToast(t("changes_saved"));
}
updateUserPreferences({
torBoxApiToken: form.useTorBox ? form.torBoxApiToken : null,
});
} catch (err) {
showErrorToast(t("debrid_invalid_token"));
} finally {
setIsLoading(false);
}
};
const isButtonDisabled =
(form.useTorBox && !form.torBoxApiToken) || isLoading;
return (
<form className="settings-torbox__form" onSubmit={handleFormSubmit}>
<p className="settings-torbox__description">{t("torbox_description")}</p>
<CheckboxField
label={t("enable_torbox")}
checked={form.useTorBox}
onChange={() =>
setForm((prev) => ({
...prev,
useTorBox: !form.useTorBox,
}))
}
/>
{form.useTorBox && (
<TextField
label={t("api_token")}
value={form.torBoxApiToken ?? ""}
type="password"
onChange={(event) =>
setForm({ ...form, torBoxApiToken: event.target.value })
}
placeholder="API Token"
rightContent={
<Button type="submit" disabled={isButtonDisabled}>
{t("save_changes")}
</Button>
}
hint={
<Trans i18nKey="debrid_api_token_hint" ns="settings">
<Link to={TORBOX_API_TOKEN_URL} />
</Trans>
}
/>
)}
</form>
);
}

36
src/renderer/src/pages/settings/settings.tsx
View File

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
import { SettingsRealDebrid } from "./settings-real-debrid";
import { SettingsGeneral } from "./settings-general";
import { SettingsBehavior } from "./settings-behavior";
import torBoxLogo from "@renderer/assets/icons/torbox.webp";
import { SettingsDownloadSources } from "./settings-download-sources";
import {
SettingsContextConsumer,
@@ -12,20 +13,35 @@ import { SettingsAccount } from "./settings-account";
import { useUserDetails } from "@renderer/hooks";
import { useMemo } from "react";
import "./settings.scss";
import { SettingsTorbox } from "./settings-torbox";
export default function Settings() {
const { t } = useTranslation("settings");
const { userDetails } = useUserDetails();
const categories = useMemo(() => {
const categories = [
t("general"),
t("behavior"),
t("download_sources"),
"Real-Debrid",
{ tabLabel: t("general"), contentTitle: t("general") },
{ tabLabel: t("behavior"), contentTitle: t("behavior") },
{ tabLabel: t("download_sources"), contentTitle: t("download_sources") },
{
tabLabel: (
<>
<img src={torBoxLogo} alt="TorBox" style={{ width: 13 }} />
Torbox
</>
),
contentTitle: "TorBox",
},
{ tabLabel: "Real-Debrid", contentTitle: "Real-Debrid" },
];
if (userDetails) return [...categories, t("account")];
if (userDetails)
return [
...categories,
{ tabLabel: t("account"), contentTitle: t("account") },
];
return categories;
}, [userDetails, t]);
@@ -47,6 +63,10 @@ export default function Settings() {
}
if (currentCategoryIndex === 3) {
return <SettingsTorbox />;
}
if (currentCategoryIndex === 4) {
return <SettingsRealDebrid />;
}
@@ -59,18 +79,18 @@ export default function Settings() {
<section className="settings__categories">
{categories.map((category, index) => (
<Button
key={category}
key={index}
theme={
currentCategoryIndex === index ? "primary" : "outline"
}
onClick={() => setCurrentCategoryIndex(index)}
>
{category}
{category.tabLabel}
</Button>
))}
</section>
<h2>{categories[currentCategoryIndex]}</h2>
<h2>{categories[currentCategoryIndex].contentTitle}</h2>
{renderCategory()}
</div>
</section>

6
src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
View File

@@ -30,9 +30,10 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
const getRequestDescription = () => {
if (type === "ACCEPTED" || type === null) return null;
return (
<small>
{type === "SENT" ? t("request_sent") : t("request_received")}
{type == "SENT" ? t("request_sent") : t("request_received")}
</small>
);
};
@@ -105,10 +106,12 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
<div className="user-friend-item__container">
<div className="user-friend-item__button">
<Avatar size={35} src={profileImageUrl} alt={displayName} />
<div className="user-friend-item__button__content">
<p className="user-friend-item__display-name">{displayName}</p>
</div>
</div>
<div className="user-friend-item__button__actions">
{getRequestActions()}
</div>
@@ -130,6 +133,7 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
{getRequestDescription()}
</div>
</button>
<div className="user-friend-item__button__actions">
{getRequestActions()}
</div>

4
src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx
View File

@@ -26,11 +26,15 @@ export const UserFriendModal = ({
userId,
}: UserFriendsModalProps) => {
const { t } = useTranslation("user_profile");
const tabs = [t("friends_list"), t("add_friends")];
const [currentTab, setCurrentTab] = useState(
initialTab || UserFriendModalTab.FriendsList
);
const { showSuccessToast } = useToast();
const { userDetails } = useUserDetails();
const isMe = userDetails?.id == userId;