Merge branch 'main' into main

forge.config.ts

@@ -20,7 +20,7 @@ const linuxPkgConfig = {
   icon: "images/icon.png",
   genericName: "Games Launcher",
   name: "hydra-launcher",
-  productName: "Hydra"
+  productName: "Hydra",
 };
 
 const config: ForgeConfig = {
@@ -50,10 +50,10 @@ const config: ForgeConfig = {
     }),
     new MakerZIP({}, ["darwin", "linux"]),
     new MakerRpm({
-      options: linuxPkgConfig
+      options: linuxPkgConfig,
     }),
     new MakerDeb({
-      options: linuxPkgConfig
+      options: linuxPkgConfig,
     }),
   ],
   publishers: [

src/locales/en/translation.json

@@ -77,7 +77,13 @@
     "play": "Play",
     "deleting": "Deleting installer…",
     "close": "Close",
-    "playing_now": "Playing now"
+    "playing_now": "Playing now",
+    "change": "Change",
+    "repacks_modal_description": "Choose the repack you want to download",
+    "downloads_path": "Downloads path",
+    "select_folder_hint": "To change the default folder, access the",
+    "hydra_settings": "Hydra settings",
+    "download_now": "Download now"
   },
   "activation": {
     "title": "Activate Hydra",

src/locales/pt/translation.json

@@ -73,7 +73,13 @@
     "not_played_yet": "Você ainda não jogou {{title}}",
     "close": "Fechar",
     "deleting": "Excluindo instalador…",
-    "playing_now": "Jogando agora"
+    "playing_now": "Jogando agora",
+    "change": "Mudar",
+    "repacks_modal_description": "Escolha o repack do jogo que deseja baixar",
+    "downloads_path": "Diretório do download",
+    "select_folder_hint": "Para trocar a pasta padrão, acesse as ",
+    "hydra_settings": "Configurações do Hydra",
+    "download_now": "Baixe agora"
   },
   "activation": {
     "title": "Ativação",

src/main/events/hardware/get-disk-free-space.ts

@@ -1,10 +1,11 @@
 import checkDiskSpace from "check-disk-space";
 
 import { registerEvent } from "../register-event";
-import { getDownloadsPath } from "../helpers/get-downloads-path";
 
-const getDiskFreeSpace = async (_event: Electron.IpcMainInvokeEvent) =>
+const getDiskFreeSpace = async (
-  checkDiskSpace(await getDownloadsPath());
+  _event: Electron.IpcMainInvokeEvent,
+  path: string
+) => checkDiskSpace(path);
 
 registerEvent(getDiskFreeSpace, {
   name: "getDiskFreeSpace",

src/main/events/torrenting/start-game-download.ts

@@ -5,7 +5,6 @@ import { GameStatus } from "@main/constants";
 import { registerEvent } from "../register-event";
 
 import type { GameShop } from "@types";
-import { getDownloadsPath } from "../helpers/get-downloads-path";
 import { getImageBase64 } from "@main/helpers";
 import { In } from "typeorm";
 
@@ -14,7 +13,8 @@ const startGameDownload = async (
   repackId: number,
   objectID: string,
   title: string,
-  gameShop: GameShop
+  gameShop: GameShop,
+  downloadPath: string
 ) => {
   const [game, repack] = await Promise.all([
     gameRepository.findOne({
@@ -37,8 +37,6 @@ const startGameDownload = async (
 
   writePipe.write({ action: "pause" });
 
-  const downloadsPath = game?.downloadPath ?? (await getDownloadsPath());
-
   await gameRepository.update(
     {
       status: In([
@@ -57,7 +55,7 @@ const startGameDownload = async (
       },
       {
         status: GameStatus.DownloadingMetadata,
-        downloadPath: downloadsPath,
+        downloadPath: downloadPath,
         repack: { id: repackId },
       }
     );
@@ -66,7 +64,7 @@ const startGameDownload = async (
       action: "start",
       game_id: game.id,
       magnet: repack.magnet,
-      save_path: downloadsPath,
+      save_path: downloadPath,
     });
 
     game.status = GameStatus.DownloadingMetadata;
@@ -75,7 +73,7 @@ const startGameDownload = async (
       action: "start",
       game_id: game.id,
       magnet: repack.magnet,
-      save_path: downloadsPath,
+      save_path: downloadPath,
     });
 
     return game;
@@ -88,7 +86,7 @@ const startGameDownload = async (
       objectID,
       shop: gameShop,
       status: GameStatus.DownloadingMetadata,
-      downloadPath: downloadsPath,
+      downloadPath: downloadPath,
       repack: { id: repackId },
     });
 
@@ -96,7 +94,7 @@ const startGameDownload = async (
       action: "start",
       game_id: createdGame.id,
       magnet: repack.magnet,
-      save_path: downloadsPath,
+      save_path: downloadPath,
     });
 
     const { repack: _, ...rest } = createdGame;

src/preload.ts

@@ -15,8 +15,17 @@ contextBridge.exposeInMainWorld("electron", {
     repackId: number,
     objectID: string,
     title: string,
-    shop: GameShop
+    shop: GameShop,
-  ) => ipcRenderer.invoke("startGameDownload", repackId, objectID, title, shop),
+    downloadPath: string
+  ) =>
+    ipcRenderer.invoke(
+      "startGameDownload",
+      repackId,
+      objectID,
+      title,
+      shop,
+      downloadPath
+    ),
   cancelGameDownload: (gameId: number) =>
     ipcRenderer.invoke("cancelGameDownload", gameId),
   pauseGameDownload: (gameId: number) =>
@@ -90,7 +99,8 @@ contextBridge.exposeInMainWorld("electron", {
   },
 
   /* Hardware */
-  getDiskFreeSpace: () => ipcRenderer.invoke("getDiskFreeSpace"),
+  getDiskFreeSpace: (path: string) =>
+    ipcRenderer.invoke("getDiskFreeSpace", path),
 
   /* Misc */
   getOrCacheImage: (url: string) => ipcRenderer.invoke("getOrCacheImage", url),

src/renderer/components/modal/modal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { XIcon } from "@primer/octicons-react";
 
@@ -23,8 +23,9 @@ export function Modal({
 }: ModalProps) {
   const [isClosing, setIsClosing] = useState(false);
   const dispatch = useAppDispatch();
+  const modalContentRef = useRef<HTMLDivElement | null>(null);
 
-  const handleCloseClick = () => {
+  const handleCloseClick = useCallback(() => {
     setIsClosing(true);
     const zero = performance.now();
 
@@ -36,8 +37,44 @@ export function Modal({
         setIsClosing(false);
       }
     });
+  }, [onClose]);
+
+  const isTopMostModal = () => {
+    const openModals = document.querySelectorAll("[role=modal]");
+    return (
+      openModals.length &&
+      openModals[openModals.length - 1] === modalContentRef.current
+    );
   };
 
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isTopMostModal()) {
+        handleCloseClick();
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [handleCloseClick]);
+
+  useEffect(() => {
+    const onMouseDown = (e: MouseEvent) => {
+      if (!isTopMostModal()) return;
+
+      const clickedOutsideContent = !modalContentRef.current.contains(
+        e.target as Node
+      );
+
+      if (clickedOutsideContent) {
+        handleCloseClick();
+      }
+    };
+
+    window.addEventListener("mousedown", onMouseDown);
+    return () => window.removeEventListener("mousedown", onMouseDown);
+  }, [handleCloseClick]);
+
   useEffect(() => {
     dispatch(toggleDragging(visible));
   }, [dispatch, visible]);
@@ -46,7 +83,11 @@ export function Modal({
 
   return createPortal(
     <div className={styles.backdrop({ closing: isClosing })}>
-      <div className={styles.modal({ closing: isClosing })}>
+      <div
+        className={styles.modal({ closing: isClosing })}
+        role="modal"
+        ref={modalContentRef}
+      >
         <div className={styles.modalHeader}>
           <div style={{ display: "flex", gap: 4, flexDirection: "column" }}>
             <h3>{title}</h3>

src/renderer/declaration.d.ts

@@ -22,7 +22,8 @@ declare global {
       repackId: number,
       objectID: string,
       title: string,
-      shop: GameShop
+      shop: GameShop,
+      downloadPath: string
     ) => Promise<Game>;
     cancelGameDownload: (gameId: number) => Promise<void>;
     pauseGameDownload: (gameId: number) => Promise<void>;
@@ -75,7 +76,7 @@ declare global {
     ) => Promise<void>;
 
     /* Hardware */
-    getDiskFreeSpace: () => Promise<DiskSpace>;
+    getDiskFreeSpace: (path: string) => Promise<DiskSpace>;
 
     /* Misc */
     getOrCacheImage: (url: string) => Promise<string>;

src/renderer/hooks/use-download.ts

@@ -28,10 +28,11 @@ export function useDownload() {
     repackId: number,
     objectID: string,
     title: string,
-    shop: GameShop
+    shop: GameShop,
+    downloadPath: string
   ) =>
     window.electron
-      .startGameDownload(repackId, objectID, title, shop)
+      .startGameDownload(repackId, objectID, title, shop, downloadPath)
       .then((game) => {
         dispatch(clearDownload());
         updateLibrary();

src/renderer/pages/game-details/game-details.tsx

@@ -19,15 +19,15 @@ import { useAppDispatch, useDownload } from "@renderer/hooks";
 import starsAnimation from "@renderer/assets/lottie/stars.json";
 
 import { vars } from "@renderer/theme.css";
+import Lottie from "lottie-react";
 import { useTranslation } from "react-i18next";
 import { SkeletonTheme } from "react-loading-skeleton";
+import { DescriptionHeader } from "./description-header";
 import { GameDetailsSkeleton } from "./game-details-skeleton";
 import * as styles from "./game-details.css";
 import { HeroPanel } from "./hero-panel";
 import { HowLongToBeatSection } from "./how-long-to-beat-section";
 import { RepacksModal } from "./repacks-modal";
-import Lottie from "lottie-react";
-import { DescriptionHeader } from "./description-header";
 
 export function GameDetails() {
   const { objectID, shop } = useParams();
@@ -51,6 +51,7 @@ export function GameDetails() {
   const { t, i18n } = useTranslation("game_details");
 
   const [showRepacksModal, setShowRepacksModal] = useState(false);
+  const [showSelectFolderModal, setShowSelectFolderModal] = useState(false);
 
   const randomGameObjectID = useRef<string | null>(null);
 
@@ -140,15 +141,20 @@ export function GameDetails() {
     };
   }, [game?.id, isGamePlaying, getGame]);
 
-  const handleStartDownload = async (repackId: number) => {
+  const handleStartDownload = async (
+    repackId: number,
+    downloadPath: string
+  ) => {
     return startDownload(
       repackId,
       gameDetails.objectID,
       gameDetails.name,
-      shop as GameShop
+      shop as GameShop,
+      downloadPath
     ).then(() => {
       getGame();
       setShowRepacksModal(false);
+      setShowSelectFolderModal(false);
     });
   };
 
@@ -173,6 +179,8 @@ export function GameDetails() {
           visible={showRepacksModal}
           gameDetails={gameDetails}
           startDownload={handleStartDownload}
+          showSelectFolderModal={showSelectFolderModal}
+          setShowSelectFolderModal={setShowSelectFolderModal}
           onClose={() => setShowRepacksModal(false)}
         />
       )}

src/renderer/pages/game-details/repacks-modal.tsx

@@ -6,28 +6,30 @@ import type { GameRepack, ShopDetails } from "@types";
 
 import * as styles from "./repacks-modal.css";
 
-import type { DiskSpace } from "check-disk-space";
-import { format } from "date-fns";
-import { SPACING_UNIT } from "@renderer/theme.css";
-import { formatBytes } from "@renderer/utils";
 import { useAppSelector } from "@renderer/hooks";
+import { SPACING_UNIT } from "@renderer/theme.css";
+import { format } from "date-fns";
+import { SelectFolderModal } from "./select-folder-modal";
 
 export interface RepacksModalProps {
   visible: boolean;
   gameDetails: ShopDetails;
-  startDownload: (repackId: number) => Promise<void>;
+  showSelectFolderModal: boolean;
+  setShowSelectFolderModal: (value: boolean) => void;
+  startDownload: (repackId: number, downloadPath: string) => Promise<void>;
   onClose: () => void;
 }
 
 export function RepacksModal({
   visible,
   gameDetails,
+  showSelectFolderModal,
+  setShowSelectFolderModal,
   startDownload,
   onClose,
 }: RepacksModalProps) {
-  const [downloadStarting, setDownloadStarting] = useState(false);
-  const [diskFreeSpace, setDiskFreeSpace] = useState<DiskSpace>(null);
   const [filteredRepacks, setFilteredRepacks] = useState<GameRepack[]>([]);
+  const [repack, setRepack] = useState<GameRepack>(null);
 
   const repackersFriendlyNames = useAppSelector(
     (state) => state.repackersFriendlyNames.value
@@ -39,21 +41,9 @@ export function RepacksModal({
     setFilteredRepacks(gameDetails.repacks);
   }, [gameDetails.repacks]);
 
-  const getDiskFreeSpace = () => {
-    window.electron.getDiskFreeSpace().then((result) => {
-      setDiskFreeSpace(result);
-    });
-  };
-
-  useEffect(() => {
-    getDiskFreeSpace();
-  }, [visible]);
-
   const handleRepackClick = (repack: GameRepack) => {
-    setDownloadStarting(true);
+    setRepack(repack);
-    startDownload(repack.id).finally(() => {
+    setShowSelectFolderModal(true);
-      setDownloadStarting(false);
-    });
   };
 
   const handleFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -70,11 +60,16 @@ export function RepacksModal({
     <Modal
       visible={visible}
       title={`${gameDetails.name} Repacks`}
-      description={t("space_left_on_disk", {
+      description={t("repacks_modal_description")}
-        space: formatBytes(diskFreeSpace?.free ?? 0),
-      })}
       onClose={onClose}
     >
+      <SelectFolderModal
+        visible={showSelectFolderModal}
+        onClose={() => setShowSelectFolderModal(false)}
+        gameDetails={gameDetails}
+        startDownload={startDownload}
+        repack={repack}
+      />
       <div style={{ marginBottom: `${SPACING_UNIT * 2}px` }}>
         <TextField placeholder={t("filter")} onChange={handleFilter} />
       </div>
@@ -85,7 +80,6 @@ export function RepacksModal({
             key={repack.id}
             theme="dark"
             onClick={() => handleRepackClick(repack)}
-            disabled={downloadStarting}
             className={styles.repackButton}
           >
             <p style={{ color: "#DADBE1" }}>{repack.title}</p>

src/renderer/pages/game-details/select-folder-modal.css.tsx

@@ -0,0 +1,19 @@
+import { style } from "@vanilla-extract/css";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: `${SPACING_UNIT * 2}px`,
+  width: "100%",
+});
+
+export const downloadsPathField = style({
+  display: "flex",
+  gap: `${SPACING_UNIT * 2}px`,
+});
+
+export const hintText = style({
+  fontSize: 12,
+  color: vars.color.bodyText,
+});

src/renderer/pages/game-details/select-folder-modal.tsx

@@ -0,0 +1,115 @@
+import { Button, Modal, TextField } from "@renderer/components";
+import { GameRepack, ShopDetails } from "@types";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { formatBytes } from "@renderer/utils";
+import { DiskSpace } from "check-disk-space";
+import { Link } from "react-router-dom";
+import * as styles from "./select-folder-modal.css";
+
+export interface SelectFolderModalProps {
+  visible: boolean;
+  gameDetails: ShopDetails;
+  onClose: () => void;
+  startDownload: (repackId: number, downloadPath: string) => Promise<void>;
+  repack: GameRepack;
+}
+
+export function SelectFolderModal({
+  visible,
+  gameDetails,
+  onClose,
+  startDownload,
+  repack,
+}: SelectFolderModalProps) {
+  const { t } = useTranslation("game_details");
+
+  const [diskFreeSpace, setDiskFreeSpace] = useState<DiskSpace>(null);
+  const [selectedPath, setSelectedPath] = useState("");
+  const [downloadStarting, setDownloadStarting] = useState(false);
+
+  useEffect(() => {
+    visible && getDiskFreeSpace(selectedPath);
+  }, [visible, selectedPath]);
+
+  useEffect(() => {
+    Promise.all([
+      window.electron.getDefaultDownloadsPath(),
+      window.electron.getUserPreferences(),
+    ]).then(([path, userPreferences]) => {
+      setSelectedPath(userPreferences?.downloadsPath || path);
+    });
+  }, []);
+
+  const getDiskFreeSpace = (path: string) => {
+    window.electron.getDiskFreeSpace(path).then((result) => {
+      setDiskFreeSpace(result);
+    });
+  };
+
+  const handleChooseDownloadsPath = async () => {
+    const { filePaths } = await window.electron.showOpenDialog({
+      defaultPath: selectedPath,
+      properties: ["openDirectory"],
+    });
+
+    if (filePaths && filePaths.length > 0) {
+      const path = filePaths[0];
+      setSelectedPath(path);
+    }
+  };
+
+  const handleStartClick = () => {
+    setDownloadStarting(true);
+    startDownload(repack.id, selectedPath).finally(() => {
+      setDownloadStarting(false);
+    });
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      title={`${gameDetails.name} Installation folder`}
+      description={t("space_left_on_disk", {
+        space: formatBytes(diskFreeSpace?.free ?? 0),
+      })}
+      onClose={onClose}
+    >
+      <div className={styles.container}>
+        <div className={styles.downloadsPathField}>
+          <TextField
+            label={t("downloads_path")}
+            value={selectedPath}
+            readOnly
+            disabled
+          />
+
+          <Button
+            style={{ alignSelf: "flex-end" }}
+            theme="outline"
+            onClick={handleChooseDownloadsPath}
+            disabled={downloadStarting}
+          >
+            {t("change")}
+          </Button>
+        </div>
+        <p className={styles.hintText}>
+          {t("select_folder_hint")}{" "}
+          <Link
+            to="/settings"
+            style={{
+              textDecoration: "none",
+              color: "#C0C1C7",
+            }}
+          >
+            {t("hydra_settings")}
+          </Link>
+        </p>
+        <Button onClick={handleStartClick} disabled={downloadStarting}>
+          {t("download_now")}
+        </Button>
+      </div>
+    </Modal>
+  );
+}