From 51bcd82ea75d35f25ec7821ff670a628e4759f83 Mon Sep 17 00:00:00 2001
From: 0x6d61726b <0x6d61726b@gmail.com>
Date: Sun, 3 Mar 2024 15:48:56 +0100
Subject: [PATCH] Fixed human-readable file size representation (#137)

(as it follows units of IEC 60027-2 A.2 )
---
 frontend/src/components/DownloadCard.tsx       |  4 ++--
 frontend/src/components/DownloadsListView.tsx  |  4 ++--
 frontend/src/components/FreeSpaceIndicator.tsx |  4 ++--
 frontend/src/utils.ts                          | 17 ++++++++++++-----
 frontend/src/views/Archive.tsx                 |  4 ++--
 5 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/DownloadCard.tsx b/frontend/src/components/DownloadCard.tsx
index 9789ba8..9f47a90 100644
--- a/frontend/src/components/DownloadCard.tsx
+++ b/frontend/src/components/DownloadCard.tsx
@@ -17,7 +17,7 @@ import {
 } from '@mui/material'
 import { useCallback } from 'react'
 import { RPCResult } from '../types'
-import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'
+import { ellipsis, formatSpeedMiB, mapProcessStatus, formatSize } from '../utils'
 
 type Props = {
   download: RPCResult
@@ -86,7 +86,7 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
               {!isCompleted() ? formatSpeedMiB(download.progress.speed) : ''}
             </Typography>
             <Typography>
-              {roundMiB(download.info.filesize_approx ?? 0)}
+              {formatSize(download.info.filesize_approx ?? 0)}
             </Typography>
             <Resolution resolution={download.info.resolution} />
           </Stack>
diff --git a/frontend/src/components/DownloadsListView.tsx b/frontend/src/components/DownloadsListView.tsx
index a4d070c..84b0602 100644
--- a/frontend/src/components/DownloadsListView.tsx
+++ b/frontend/src/components/DownloadsListView.tsx
@@ -14,7 +14,7 @@ import {
 import { useRecoilValue } from 'recoil'
 import { activeDownloadsState } from '../atoms/downloads'
 import { useRPC } from '../hooks/useRPC'
-import { ellipsis, formatSpeedMiB, roundMiB } from "../utils"
+import { ellipsis, formatSpeedMiB, formatSize } from "../utils"
 
 
 const DownloadsListView: React.FC = () => {
@@ -74,7 +74,7 @@ const DownloadsListView: React.FC = () => {
                       />
                     </TableCell>
                     <TableCell>{formatSpeedMiB(download.progress.speed)}</TableCell>
-                    <TableCell>{roundMiB(download.info.filesize_approx ?? 0)}</TableCell>
+                    <TableCell>{formatSize(download.info.filesize_approx ?? 0)}</TableCell>
                     <TableCell>
                       <Button
                         variant="contained"
diff --git a/frontend/src/components/FreeSpaceIndicator.tsx b/frontend/src/components/FreeSpaceIndicator.tsx
index 1426ef2..46dd979 100644
--- a/frontend/src/components/FreeSpaceIndicator.tsx
+++ b/frontend/src/components/FreeSpaceIndicator.tsx
@@ -1,7 +1,7 @@
 import StorageIcon from '@mui/icons-material/Storage'
 import { useRecoilValue } from 'recoil'
 import { freeSpaceBytesState } from '../atoms/status'
-import { formatGiB } from '../utils'
+import { formatSize } from '../utils'
 
 const FreeSpaceIndicator = () => {
   const freeSpace = useRecoilValue(freeSpaceBytesState)
@@ -15,7 +15,7 @@ const FreeSpaceIndicator = () => {
     }}>
       <StorageIcon />
       <span>
-        {formatGiB(freeSpace)}
+        {formatSize(freeSpace)}
       </span>
     </div>
   )
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index acfc6ac..2afc0df 100644
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -42,14 +42,21 @@ export function toFormatArgs(codes: string[]): string {
   return ''
 }
 
-export const formatGiB = (bytes: number) =>
-  `${(bytes / 1_000_000_000).toFixed(0)}GiB`
+export function formatSize(bytes: number): string {
+  const threshold = 1024
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
 
-export const roundMiB = (bytes: number) =>
-  `${(bytes / 1_000_000).toFixed(2)} MiB`
+  let i = 0
+  while (bytes >= threshold) {
+    bytes /= threshold
+    i = i + 1
+  }
+
+  return `${bytes.toFixed(i == 0 ? 0 : 2)} ${units.at(i)}`
+}
 
 export const formatSpeedMiB = (val: number) =>
-  `${roundMiB(val)}/s`
+  `${(val / 1_048_576).toFixed(2)} MiB/s`
 
 export const datetimeCompareFunc = (a: string, b: string) =>
   new Date(a).getTime() - new Date(b).getTime()
diff --git a/frontend/src/views/Archive.tsx b/frontend/src/views/Archive.tsx
index 1d62fff..863007d 100644
--- a/frontend/src/views/Archive.tsx
+++ b/frontend/src/views/Archive.tsx
@@ -41,7 +41,7 @@ import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
 import { DirectoryEntry } from '../types'
-import { base64URLEncode, roundMiB } from '../utils'
+import { base64URLEncode, formatSize } from '../utils'
 
 export default function Downloaded() {
   const [menuPos, setMenuPos] = useState({ x: 0, y: 0 })
@@ -237,7 +237,7 @@ export default function Downloaded() {
                     variant="caption"
                     component="span"
                   >
-                    {roundMiB(file.size)}
+                    {formatSize(file.size)}
                   </Typography>
                   }
                   {!file.isDirectory && <>