update 30

frontend/src/App.tsx

@@ -12,7 +12,7 @@ import {
     Toast,
 } from "react-bootstrap";
 import { validateDomain, validateIP } from "./utils";
-import { IMessage } from "./interfaces";
+import { IDLInfo, IMessage } from "./interfaces";
 import './App.css';
 
 const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
@@ -28,11 +28,15 @@ export function App() {
     const [updatedBin, setUpdatedBin] = useState(false)
     const [showSettings, setShowSettings] = useState(false)
     const [darkMode, setDarkMode] = useState(localStorage.getItem('theme') === 'dark')
+    const [downloadInfo, setDownloadInfo] = useState<IDLInfo>()
 
     useEffect(() => {
         socket.on('connect', () => {
             setShowToast(true)
         })
+        return () => {
+            socket.disconnect()
+        }
     }, [])
 
     useEffect(() => {
@@ -41,9 +45,15 @@ export function App() {
             document.body.classList.remove('dark')
     }, [darkMode])
 
+    useEffect(() => {
+        socket.on('info', (data: IDLInfo) => {
+            setDownloadInfo(data)
+        })
+    }, [])
+
     useEffect(() => {
         socket.on('progress', (data: IMessage) => {
-            setMessage(`${data.status || '...'} | progress: ${data.progress || '?'} | size: ${data.size || '?'} | speed: ${data.dlSpeed || '?'}`)
+            setMessage(`operation: ${data.status || '...'} \nprogress: ${data.progress || '?'} \nsize: ${data.size || '?'} \nspeed: ${data.dlSpeed || '?'}`)
             if (data.status === 'Done!') {
                 setHalt(false)
                 setMessage('Done!')
@@ -86,6 +96,10 @@ export function App() {
     }
 
     const abort = () => {
+        setDownloadInfo({
+            title: '',
+            thumbnail: ''
+        })
         socket.emit('abort')
         setHalt(false)
     }
@@ -123,13 +137,23 @@ export function App() {
                         </InputGroup>
 
                         <div className="mt-2 status-box">
-                            <h6>Status</h6>
-                            {!message ? <pre>Ready</pre> : null}
-                            <pre id='status'>{message}</pre>
+                            <Row>
+                                {downloadInfo ? <p>{downloadInfo.title}</p> : null}
+                                <Col sm={9}>
+                                    <h6>Status</h6>
+                                    {!message ? <pre>Ready</pre> : null}
+                                    <pre id='status'>{message}</pre>
+                                </Col>
+                                <Col sm={3}>
+                                    <br />
+                                    <img className="img-fluid rounded" src={downloadInfo?.thumbnail} />
+                                </Col>
+                            </Row>
                         </div>
-                        <ButtonGroup>
-                            <Button className="mt-2" onClick={() => sendUrl()} disabled={halt}>Start</Button>{' '}
-                            <Button className="mt-2" active onClick={() => abort()}>Abort</Button>{' '}
+
+                        <ButtonGroup className="mt-2">
+                            <Button onClick={() => sendUrl()} disabled={halt}>Start</Button>
+                            <Button active onClick={() => abort()}>Abort</Button>
                         </ButtonGroup>
 
                         {progress ? <ProgressBar className="container-padding mt-2" now={progress} variant="primary" /> : null}
@@ -161,14 +185,14 @@ export function App() {
                             <Button
                                 variant={darkMode ? 'light' : 'dark'}
                                 onClick={() => toggleTheme()}>
-                                {darkMode ? 'Dark theme' : 'Light theme'}
+                                {darkMode ? 'Light theme' : 'Dark theme'}
                             </Button>
                         </div> :
                         null
                     }
 
                     <div className="mt-5" />
-                    <div>Once you close the page the download will continue in the background.</div>
+                    <div>Once you close this page the download will continue in the background.</div>
                     <div>It won't be possible retriving the progress though.</div>
                     <div className="mt-5" />
                     <small>Made with ❤️ by Marcobaobao</small>

frontend/src/components/Statistics.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from "react";
+import { IDLSpeed } from "../interfaces";
+
+export function Statistics(props: any) {
+    const [dataset, setDataset] = useState<Array<IDLSpeed>>()
+
+    return (
+        <div className="chart">
+
+        </div>
+    )
+}

frontend/src/interfaces.tsx

@@ -2,7 +2,14 @@ export interface IMessage {
     status: string,
     progress?: string,
     size?: string,
-    dlSpeed?: string
+    dlSpeed?: string | IDLSpeed
+}
+
+export interface IDLInfo {
+    title: string,
+    thumbnail: string,
+    upload_date?: string | Date,
+    duration?: number
 }
 
 export interface IDLSpeed {

frontend/src/utils.ts

@@ -6,4 +6,11 @@ export function validateIP(ipAddr: string): boolean {
 export function validateDomain(domainName: string): boolean {
     let domainRegex = /[^@ \t\r\n]+.[^@ \t\r\n]+\.[^@ \t\r\n]+/
     return domainRegex.test(domainName) || domainName === 'localhost'
+}
+
+export function ellipsis(str: string, lim: number): string {
+    if (str) {
+        return str.length > lim ? `${str.substr(0, lim)}...` : str
+    }
+    return ''
 }