fix dangling download

frontend/src/App.tsx

@@ -10,7 +10,8 @@ import {
     Button,
     ButtonGroup,
 } from "react-bootstrap";
-import { validateDomain, validateIP } from "./utils";
+import { X } from "react-bootstrap-icons";
+import { updateInStateMap, validateDomain, validateIP } from "./utils";
 import { IDLInfo, IDLInfoBase, IMessage } from "./interfaces";
 import { MessageToast } from "./components/MessageToast";
 import './App.css';
@@ -32,15 +33,6 @@ export function App() {
     const [darkMode, setDarkMode] = useState(localStorage.getItem('theme') === 'dark');
     const [extractAudio, setExtractAudio] = useState(localStorage.getItem('-x') === 'true');
 
-    const updateInStateMap = (k: number, v: any, target: Map<number, any>, callback: Function, remove: boolean = false) => {
-        if (remove) {
-            target.delete(k)
-            callback(new Map(target))
-            return;
-        }
-        callback(new Map(target.set(k, v)));
-    }
-
     useEffect(() => {
         socket.on('connect', () => {
             setShowToast(true)
@@ -69,7 +61,6 @@ export function App() {
         })
     }, [])
 
-
     useEffect(() => {
         socket.on('progress', (data: IMessage) => {
             if (data.status === 'Done!' || data.status === 'Aborted') {
@@ -92,10 +83,6 @@ export function App() {
             if (data.progress) {
                 updateInStateMap(data.pid, Math.ceil(Number(data.progress.replace('%', ''))), progressMap, setProgressMap)
             }
-            // if (data.dlSpeed) {
-            //     const event = new CustomEvent<number>("dlSpeed", { "detail": detectSpeed(data.dlSpeed) });
-            //     document.dispatchEvent(event);
-            // }
         })
     }, [])
 
@@ -115,7 +102,7 @@ export function App() {
             },
         })
         setUrl('')
-        const input: HTMLInputElement = document.getElementById('urlInput') as HTMLInputElement;
+        const input = document.getElementById('urlInput') as HTMLInputElement;
         input.value = '';
     }
 
@@ -190,7 +177,7 @@ export function App() {
                                 />
                             </InputGroup>
                             {
-                                Array.from(messageMap).length === 0 ?
+                                !Array.from(messageMap).length ?
                                     <div className="mt-2 status-box">
                                         <Row>
                                             <Col sm={9}>
@@ -209,7 +196,7 @@ export function App() {
                                                 Message[1] => value, the actual formatted message sent from server
                                              */
                                         }
-                                        {message[1] && message[1] !== 'Done!' ?
+                                        {message[0] && message[1] && message[1] !== 'Done!' ?
                                             <div className="mt-2 status-box">
                                                 <Row>
                                                     {
@@ -245,9 +232,9 @@ export function App() {
                                         {message[1] && message[1] !== 'Done!' ?
                                             <Row>
                                                 <Col>
-                                                    <div className="px-2">
+                                                    <Button variant={darkMode ? 'dark' : 'light'} className="float-end" active size="sm" onClick={() => abort(message[0])}>
-                                                        <Button variant="" className="float-end" active size="sm" onClick={() => abort(message[0])}>x</Button>
+                                                        <X></X>
-                                                    </div>
+                                                    </Button>
                                                 </Col>
                                             </Row> : null
                                         }
@@ -284,10 +271,7 @@ export function App() {
                                 <Button onClick={() => updateBinary()} disabled={halt}>
                                     Update yt-dlp binary
                                 </Button>{' '}
-                                <Button
+                                <Button variant={darkMode ? 'light' : 'dark'} onClick={() => toggleTheme()}>
-                                    variant={darkMode ? 'light' : 'dark'}
-                                    onClick={() => toggleTheme()}
-                                >
                                     {darkMode ? 'Light theme' : 'Dark theme'}
                                 </Button>
                                 <div className="pt-2">

frontend/src/utils.ts

@@ -27,3 +27,12 @@ export function detectSpeed(str: string): number {
             return 0
     }
 }
+
+export const updateInStateMap = (k: number, v: any, target: Map<number, any>, callback: Function, remove: boolean = false) => {
+    if (remove) {
+        target.delete(k)
+        callback(new Map(target))
+        return;
+    }
+    callback(new Map(target.set(k, v)));
+}

package.json

@@ -20,6 +20,7 @@
     "ordered-binary": "^1.2.1",
     "react": "^17.0.2",
     "react-bootstrap": "2.0.2",
+    "react-bootstrap-icons": "^1.7.2",
     "react-chartjs-2": "^4.0.0",
     "react-dom": "^17.0.2",
     "rxjs": "^7.4.0",

pnpm-lock.yaml

@@ -10,6 +10,7 @@ specifiers:
   parcel: ^2.0.1
   react: ^17.0.2
   react-bootstrap: 2.0.2
+  react-bootstrap-icons: ^1.7.2
   react-chartjs-2: ^4.0.0
   react-dom: ^17.0.2
   rxjs: ^7.4.0
@@ -28,6 +29,7 @@ dependencies:
   ordered-binary: 1.2.3
   react: 17.0.2
   react-bootstrap: 2.0.2_react-dom@17.0.2+react@17.0.2
+  react-bootstrap-icons: 1.7.2_react@17.0.2
   react-chartjs-2: 4.0.1_chart.js@3.7.0+react@17.0.2
   react-dom: 17.0.2_react@17.0.2
   rxjs: 7.5.2
@@ -3949,6 +3951,15 @@ packages:
       strip-json-comments: 2.0.1
     dev: false
 
+  /react-bootstrap-icons/1.7.2_react@17.0.2:
+    resolution: {integrity: sha512-FaXk5iHjd6eltoPHUo+onIkcN/xcCEbaEnTeRacibwVlPagEzujFYtUJ0C2+DlvfkWwy5N+b347tSTbtWqBSEg==}
+    peerDependencies:
+      react: ^16.8.6 || ^17
+    dependencies:
+      prop-types: 15.8.1
+      react: 17.0.2
+    dev: false
+
   /react-bootstrap/2.0.2_react-dom@17.0.2+react@17.0.2:
     resolution: {integrity: sha512-QuMqJ+WJmd6dUyOys6OF3nr6T/FjUVAoEMbSjsFrwVufJtvMox0SU1Dvz/cDID+Dl6Rz2RLcJzyqkdl+DEK2Gg==}
     peerDependencies: