show download speed

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;