download stop button

src/ui/components/common/MainProgressBar.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
+import DownloadHandler from '../../../utils/download'
 import './ProgressBar.css'
 
 interface IProps {
-  downloadManager: any,
+  downloadManager: DownloadHandler,
 }
 
 interface IState {
@@ -18,12 +19,12 @@ export default class ProgressBar extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
 
-    const { average, files, total } = this.props.downloadManager.getTotalAverage()
+    const { average, files, totalSize } = this.props.downloadManager.getTotalAverage()
 
     this.state = {
       average,
       files,
-      total
+      total: totalSize
     }
   }
 
@@ -32,7 +33,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
     const intv = setInterval(() => {
       const prog = this.props.downloadManager.getTotalAverage()
       this.setState({
-        average: parseInt(prog?.average || 0, 10),
+        average: prog?.average || 0,
         files: prog?.files,
         total: prog?.totalSize || 0,
       })

src/ui/components/common/ProgressBar.css

@@ -19,7 +19,7 @@
 
 .InnerProgress {
   height: 100%;
-  background-color: #ffc61e;
+  background-color: #fff;
 }
 
 .ProgressText {
@@ -30,7 +30,7 @@
 .MainProgressBarWrapper {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
 
   color: #fff;
@@ -40,4 +40,28 @@
   font-size: 20px;
   font-weight: bold;
   color: #fff !important;
+}
+
+.ProgressBarWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.DownloadControls {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  margin-left: 10px;
+}
+
+.DownloadControls div {
+  height: 20px;
+}
+
+.DownloadControls div img {
+  height: 100%;
 }

src/ui/components/common/ProgressBar.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { capitalize } from '../../../utils/string'
 
+import Stop from '../../../resources/icons/close.svg' 
 import './ProgressBar.css'
 
 interface IProps {
@@ -45,23 +46,31 @@ export default class ProgressBar extends React.Component<IProps, IState> {
   render() {
     return (
       <div className="ProgressBarWrapper">
-        <div className="ProgressBar">
-          <div className="InnerProgress" style={{
-            width: `${(() => {
-              // Handles files with content-lengths of 0
-              if (this.state.status === 'finished') {
-                return '100'
-              }
+        <div>
+          <div className="ProgressBar">
+            <div className="InnerProgress" style={{
+              width: `${(() => {
+                // Handles files with content-lengths of 0
+                if (this.state.status === 'finished') {
+                  return '100'
+                }
 
-              if (this.state.total <= 0) {
-                return '0'
-              }
+                if (this.state.total <= 0) {
+                  return '0'
+                }
 
-              return this.state.progress / this.state.total * 100
-            })()}%`,
-          }}></div>
+                return this.state.progress / this.state.total * 100
+              })()}%`,
+            }}></div>
+          </div>
+          <div className="DownloadControls">
+            <div>
+              <img src={Stop}></img>
+            </div>
+          </div>
         </div>
 
+
         <div className="ProgressText">
           {capitalize(this.state.status)}
         </div>