Merge pull request #40 from hydralauncher/refactor/game-download-information

refactor: remove pretty bytes

package.json

@@ -86,7 +86,6 @@
     "lodash": "^4.17.21",
     "lottie-react": "^2.4.0",
     "parse-torrent": "9.1.5",
-    "pretty-bytes": "^6.1.1",
     "ps-list": "^8.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/renderer/hooks/use-download.ts

@@ -1,5 +1,4 @@
 import { addMilliseconds } from "date-fns";
-import prettyBytes from "pretty-bytes";
 
 import { formatDownloadProgress } from "@renderer/helpers";
 import { useLibrary } from "./use-library";
@@ -12,6 +11,7 @@ import {
 } from "@renderer/features";
 import type { GameShop, TorrentProgress } from "@types";
 import { useDate } from "./use-date";
+import { formatBytes } from "@renderer/utils";
 
 export function useDownload() {
   const { updateLibrary } = useLibrary();
@@ -113,9 +113,7 @@ export function useDownload() {
     fileSize: lastPacket?.game.fileSize,
     isVerifying,
     gameId: lastPacket?.game.id,
-    downloadSpeed: `${prettyBytes(lastPacket?.downloadSpeed ?? 0, {
-      bits: true,
-    })}/s`,
+    downloadSpeed: `${formatBytes(lastPacket?.downloadSpeed ?? 0)}/s`,
     isDownloading: Boolean(lastPacket),
     progress: getProgress(),
     numPeers: lastPacket?.numPeers,

src/renderer/pages/downloads/downloads.tsx

@@ -1,4 +1,3 @@
-import prettyBytes from "pretty-bytes";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -11,6 +10,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
 import * as styles from "./downloads.css";
 import { DeleteModal } from "./delete-modal";
+import { formatBytes } from "@renderer/utils";
 
 export function Downloads() {
   const { library, updateLibrary } = useLibrary();
@@ -61,10 +61,10 @@ export function Downloads() {
     const isGameDownloading = isDownloading && gameDownloading?.id === game?.id;
 
     if (!game) return "N/A";
-    if (game.fileSize) return prettyBytes(game.fileSize);
+    if (game.fileSize) return formatBytes(game.fileSize);
 
     if (gameDownloading?.fileSize && isGameDownloading)
-      return prettyBytes(gameDownloading.fileSize);
+      return formatBytes(gameDownloading.fileSize);
 
     return game.repack?.fileSize ?? "N/A";
   };
@@ -87,7 +87,7 @@ export function Downloads() {
           ) : (
             <>
               <p>
-                {prettyBytes(gameDownloading?.bytesDownloaded)} /{" "}
+                {formatBytes(gameDownloading?.bytesDownloaded)} /{" "}
                 {finalDownloadSize}
               </p>
               <p>

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

@@ -1,5 +1,4 @@
 import { format } from "date-fns";
-import prettyBytes from "pretty-bytes";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -12,6 +11,7 @@ import { NoEntryIcon, PlusCircleIcon } from "@primer/octicons-react";
 import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
 import * as styles from "./hero-panel.css";
 import { useDate } from "@renderer/hooks/use-date";
+import { formatBytes } from "@renderer/utils";
 
 export interface HeroPanelProps {
   game: Game | null;
@@ -120,10 +120,10 @@ export function HeroPanel({
 
   const finalDownloadSize = useMemo(() => {
     if (!game) return "N/A";
-    if (game.fileSize) return prettyBytes(game.fileSize);
+    if (game.fileSize) return formatBytes(game.fileSize);
 
     if (gameDownloading?.fileSize && isGameDownloading)
-      return prettyBytes(gameDownloading.fileSize);
+      return formatBytes(gameDownloading.fileSize);
 
     return game.repack?.fileSize ?? "N/A";
   }, [game, isGameDownloading, gameDownloading]);
@@ -170,7 +170,7 @@ export function HeroPanel({
             </>
           ) : (
             <p className={styles.downloadDetailsRow}>
-              {prettyBytes(gameDownloading?.bytesDownloaded)} /{" "}
+              {formatBytes(gameDownloading?.bytesDownloaded)} /{" "}
               {finalDownloadSize}
               <small>
                 {numPeers} peers / {numSeeds} seeds
@@ -190,7 +190,7 @@ export function HeroPanel({
             })}
           </p>
           <p>
-            {prettyBytes(game.bytesDownloaded)} / {finalDownloadSize}
+            {formatBytes(game.bytesDownloaded)} / {finalDownloadSize}
           </p>
         </>
       );

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

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import prettyBytes from "pretty-bytes";
 
 import { Button, Modal, TextField } from "@renderer/components";
 import type { GameRepack, ShopDetails } from "@types";
@@ -10,6 +9,7 @@ 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";
 
 export interface RepacksModalProps {
   visible: boolean;
@@ -66,7 +66,7 @@ export function RepacksModal({
       visible={visible}
       title={`${gameDetails.name} Repacks`}
       description={t("space_left_on_disk", {
-        space: prettyBytes(diskFreeSpace?.free ?? 0),
+        space: formatBytes(diskFreeSpace?.free ?? 0),
       })}
       onClose={onClose}
     >

src/renderer/utils/format-bytes.ts

@@ -0,0 +1,15 @@
+const FORMAT = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+export const formatBytes = (bytes: number): string => {
+  if (!Number.isFinite(bytes) || isNaN(bytes) || bytes < 0) {
+    return `N/A ${FORMAT[0]}`;
+  }
+
+  const byteKBase = 1024;
+
+  const base = Math.floor(Math.log(bytes) / Math.log(byteKBase));
+
+  const formatedByte = bytes / byteKBase ** base;
+
+  return `${Math.trunc(formatedByte * 10) / 10} ${FORMAT[base]}`;
+};

src/renderer/utils/index.ts

@@ -0,0 +1 @@
+export * from "./format-bytes";