Fixed human-readable file size representation (#137)

(as it follows units of IEC 60027-2 A.2 )

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>

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"

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>
   )

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()

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 && <>