download stop button

src-tauri/src/downloader.rs

@@ -13,7 +13,7 @@ pub async fn download_file(window: tauri::Window, url: &str, path: &str) -> Resu
     let res = match reqwest::get(url)
         .await {
             Ok(r) => r,
-            Err(e) => {
+            Err(_e) => {
                 emit_download_err(window, format!("Failed to request {}", url), url);
                 return Err(format!("Failed to request {}", url));
             },
@@ -25,7 +25,7 @@ pub async fn download_file(window: tauri::Window, url: &str, path: &str) -> Resu
     // Create file path
     let mut file = match File::create(path) {
         Ok(f) => f,
-        Err(e) => {
+        Err(_e) => {
             emit_download_err(window, format!("Failed to create file '{}'", path), path);
             return Err(format!("Failed to create file '{}'", path));
         },

src/index.css

@@ -1,7 +1,7 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: 'Helvetica Neue', BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/ui/App.css

@@ -34,5 +34,6 @@ body {
 #DownloadProgress {
   position: absolute;
   top: 85%;
+  left: 5%;
   width: 60%;
 }

src/ui/components/ServerLaunchSection.css

@@ -12,5 +12,6 @@
 }
 
 #serverControls .Checkbox label {
-  color: #000;
+  color: #fff;
+  font-weight: bold;
 }

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>

src/utils/download.ts

@@ -86,7 +86,7 @@ export default class DownloadHandler {
 
     return {
       average: (progress / total) * 100 || 0,
-      files: this.downloads.filter(d => d.status !== 'finished').length,
+      files: this.downloads.filter(d => d.status !== 'finished' && d.status !== 'error').length,
       totalSize: total,
     }
   }