improve downloads dialog

src/ui/components/common/DownloadSection.tsx

@@ -17,7 +17,7 @@ export default class MiniDialog extends React.Component<IProps, never> {
   render() {
     return (
       <div className="DownloadSection">
-        <span>{this.props.downloadName}</span>
+        <span>{this.props.downloadName} - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</span>
         <div className="DownloadSectionInner">
           <ProgressBar path={this.props.downloadName} downloadManager={this.props.downloadManager} />
         </div>

src/utils/download.ts

@@ -1,6 +1,7 @@
 
 import { invoke } from '@tauri-apps/api/tauri'
 import { listen } from '@tauri-apps/api/event'
+import { byteToString } from './string'
 
 export default class DownloadHandler {
   downloads: {
@@ -73,6 +74,11 @@ export default class DownloadHandler {
     return this.downloads[index] || null
   }
 
+  getDownloadSize(path: string) {
+    const index = this.downloads.findIndex(download => download.path === path)
+    return byteToString(this.downloads[index].total) || null
+  }
+
   getTotalAverage() {
     const files = this.downloads.filter(d => d.status !== 'finished')
     const total = files.reduce((acc, d) => acc + d.total, 0)

src/utils/string.ts

@@ -1,3 +1,11 @@
 export function capitalize(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
+
+export function byteToString(bytes: number) {
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+  if (bytes === 0) return '0 Bytes'
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString(), 10)
+  if (i === 0) return `${bytes} ${sizes[i]}`
+  return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`
+}