show download speed

src/ui/App.css

@@ -36,4 +36,10 @@ body {
   top: 85%;
   left: 5%;
   width: 60%;
+}
+
+.MiniDownloads {
+  position: absolute;
+  top: 40%;
+  left: 12%;
 }

src/ui/App.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { listen } from '@tauri-apps/api/event'
 import './App.css'
-import './custom.css'
 
 /* FOR TESTING */
 import DownloadHandler from '../utils/download'
@@ -60,19 +59,19 @@ class App extends React.Component<IProps, IState> {
           optFunc={() => {
             this.setState({ optionsOpen: !this.state.optionsOpen })
           }}
-          downFunc={() => {
-            this.setState({ miniDownloadsOpen: !this.state.miniDownloadsOpen })
-          }}
+          downFunc={() => { console.log('Shit is changing dw') }}
         />
 
         {
           // Mini downloads section
           this.state.miniDownloadsOpen ? 
-            <MiniDialog title="Downloads" closeFn={() => {
-              this.setState({ miniDownloadsOpen: false })
-            }}>
-              <DownloadList downloadManager={downloadHandler} />
-            </MiniDialog> : null
+            <div className="MiniDownloads">
+              <MiniDialog title="Downloads" closeFn={() => {
+                this.setState({ miniDownloadsOpen: false })
+              }}>
+                <DownloadList downloadManager={downloadHandler} />
+              </MiniDialog>
+            </div> : null
         }
 
         {
@@ -83,7 +82,9 @@ class App extends React.Component<IProps, IState> {
 
         <ServerLaunchSection />
 
-        <div id="DownloadProgress">
+        <div id="DownloadProgress"
+          onClick={() => this.setState({ miniDownloadsOpen: !this.state.miniDownloadsOpen })}
+        >
           <MainProgressBar downloadManager={downloadHandler} />
         </div>
       </div>

src/ui/components/MiniDialog.css

@@ -1,12 +1,7 @@
 .MiniDialog {
   position: fixed;
   z-index: 99;
-
-  /* Temp positions */
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
+  
   /* Len and width */
   height: 30%;
   width: 30%;

src/ui/components/common/DownloadSection.tsx

@@ -9,7 +9,7 @@ interface IProps {
   downloadName: string;
 }
 
-export default class MiniDialog extends React.Component<IProps, never> {
+export default class DownloadSection extends React.Component<IProps, never> {
   constructor(props: IProps) {
     super(props)
   }

src/ui/components/common/MainProgressBar.tsx

@@ -9,7 +9,8 @@ interface IProps {
 interface IState {
   average: number,
   files: number,
-  total: number
+  total: number,
+  speed: string,
 }
 
 /**
@@ -24,7 +25,8 @@ export default class ProgressBar extends React.Component<IProps, IState> {
     this.state = {
       average,
       files,
-      total: totalSize
+      total: totalSize,
+      speed: '0 B/s'
     }
   }
 
@@ -36,6 +38,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
         average: prog?.average || 0,
         files: prog?.files,
         total: prog?.totalSize || 0,
+        speed: prog?.speed || '0 B/s',
       })
     }, 200)
   }
@@ -60,8 +63,8 @@ export default class ProgressBar extends React.Component<IProps, IState> {
           }}></div>
         </div>
 
-        <div className="ProgressText">
-          Files Downloading: {this.state.files}
+        <div className="MainProgressText">
+          Files Downloading: {this.state.files} ({this.state.speed})
         </div>
       </div>
     )

src/ui/components/common/ProgressBar.css

@@ -22,12 +22,17 @@
   background-color: #fff;
 }
 
+.MainProgressText,
 .ProgressText {
   color: #c5c5c5;
   padding: 0px 10px;
   width: 30%;
 }
 
+.MainProgressText {
+  width: 100%;
+}
+
 .MainProgressBarWrapper {
   display: flex;
   flex-direction: column;
@@ -37,7 +42,7 @@
   color: #fff;
 }
 
-.MainProgressBarWrapper .ProgressText {
+.MainProgressBarWrapper .MainProgressText {
   font-size: 20px;
   font-weight: bold;
   color: #fff !important;

src/utils/download.ts

@@ -9,7 +9,9 @@ export default class DownloadHandler {
     progress: number,
     total: number,
     status: string,
+    startTime: number,
     error?: string,
+    speed?: string,
   }[]
 
   // Pass tauri invoke function
@@ -27,6 +29,12 @@ export default class DownloadHandler {
       const index = this.downloads.findIndex(download => download.path === obj.path)
       this.downloads[index].progress = parseInt(obj.downloaded, 10)
       this.downloads[index].total = parseInt(obj.total, 10)
+
+      // Set download speed based on startTime
+      const now = Date.now()
+      const timeDiff = now - this.downloads[index].startTime
+      const speed = (this.downloads[index].progress / timeDiff) * 1000
+      this.downloads[index].speed = byteToString(speed) + '/s'
     })
 
     listen('download_finished', (...payload) => {
@@ -63,7 +71,8 @@ export default class DownloadHandler {
       path,
       progress: 0,
       total: 0,
-      status: 'downloading'
+      status: 'downloading',
+      startTime: Date.now(),
     }
 
     this.downloads.push(obj)
@@ -92,11 +101,21 @@ export default class DownloadHandler {
     const files = this.downloads.filter(d => d.status === 'downloading')
     const total = files.reduce((acc, d) => acc + d.total, 0)
     const progress = files.reduce((acc, d) => acc + d.progress, 0)
+    let speedStr = '0 B/s'
+
+    // Get download speed based on startTimes
+    if (files.length > 0) {
+      const now = Date.now()
+      const timeDiff = now - files[0].startTime
+      const speed = (progress / timeDiff) * 1000
+      speedStr = byteToString(speed) + '/s'
+    }
 
     return {
       average: (progress / total) * 100 || 0,
       files: this.downloads.filter(d => d.status === 'downloading').length,
       totalSize: total,
+      speed: speedStr
     }
   }
 }