first release

frontend/src/App.css

@@ -0,0 +1,5 @@
+.status-box{
+    background-color: #2b2c31;
+    padding: 8px;
+    border-radius: 5px;
+}

frontend/src/App.jsx

@@ -1,11 +1,34 @@
 import { io } from "socket.io-client";
 import React, { useState, useEffect } from "react";
-import { Container, ProgressBar, InputGroup, FormControl, Button } from "react-bootstrap";
+import {
+    Container,
+    Row,
+    Col,
+    ProgressBar,
+    InputGroup,
+    FormControl,
+    Button,
+    Toast
+} from "react-bootstrap";
 import './App.css'
 
-const socket = io('http://localhost:3000')
+const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
 
 export function App() {
+
+    const [progress, setProgress] = useState(0)
+    const [message, setMessage] = useState('')
+    const [halt, setHalt] = useState(false)
+    const [url, setUrl] = useState('')
+    const [showToast, setShowToast] = useState(false)
+    const [showSettings, setShowSettings] = useState(false)
+
+    useEffect(() => {
+        socket.on('connect', () => {
+            setShowToast(true)
+        })
+    }, [])
+
     useEffect(() => {
         socket.on('progress', data => {
             setMessage(data.trim())
@@ -14,9 +37,12 @@ export function App() {
                 setProgress(0)
             }
             try {
-                setProgress(Math.ceil(data.split(" ")[2].replace('%', '')))
+                const _progress = Math.ceil(data.split(" ")[2].replace('%', ''))
+                if (!isNaN(_progress)) {
+                    setProgress(_progress)
+                }
             } catch (error) {
-                console.log('finished or empty url')
+                console.log('finished or empty url or aborted')
             }
         })
     }, [])
@@ -31,39 +57,81 @@ export function App() {
         setUrl(e.target.value)
     }
 
+    const handleAddrChange = (e) => {
+        localStorage.setItem('server-addr', e.target.value)
+    }
+
     const abort = () => {
         socket.emit('abort')
         setHalt(false)
     }
 
-    const [progress, setProgress] = useState(0)
-    const [message, setMessage] = useState('')
-    const [halt, setHalt] = useState(false)
-    const [url, setUrl] = useState('')
-
     return (
         <Container>
-            <div className="mt-5" />
-            <h1>yt-dlp web ui</h1>
+            <Row>
+                <Col lg={7} xs={12}>
+                    <div className="mt-5" />
+                    <h1>yt-dlp Web UI 🤠</h1>
 
-            <InputGroup className="mt-5">
-                <FormControl placeholder="youtube video url" onChange={handleUrlChange} />
-            </InputGroup>
+                    <InputGroup className="mt-5">
+                        <FormControl
+                            className="url-input"
+                            placeholder="YouTube or other supported service video url"
+                            onChange={handleUrlChange}
+                        />
+                    </InputGroup>
 
-            <div className="mt-2">
-                <h6>Status</h6>
-                <pre id='status'>{message}</pre>
-            </div>
+                    <div className="mt-2 status-box">
+                        <h6>Status</h6>
+                        <pre id='status'>{message}</pre>
+                    </div>
 
-            <ProgressBar now={progress} />
+                    {progress ? <ProgressBar className="container-padding" now={progress} variant="success" /> : null}
 
-            <Button className="my-5" variant="success" onClick={() => sendUrl()} disabled={halt}>Go!</Button>{' '}
-            <Button variant="danger" onClick={() => abort()}>Abort</Button>
+                    <Button className="my-5" variant="success" onClick={() => sendUrl()} disabled={halt}>Go!</Button>{' '}
+                    <Button variant="danger" onClick={() => abort()}>Abort</Button>{' '}
+                    <Button variant="secondary" onClick={() => setShowSettings(!showSettings)}>Settings</Button>
 
-            <div className="mt-5" />
-            <div>
-                Once you close the page the download will continue in the background. It won't be possible retriving the progress though.
-            </div>
+                    {showSettings ?
+                        <>
+                            <h6>Server address</h6>
+                            <InputGroup className="mb-3 url-input">
+                                <InputGroup.Text>ws://</InputGroup.Text>
+                                <FormControl
+                                    defaultValue={localStorage.getItem('server-addr')}
+                                    placeholder="Server address"
+                                    aria-label="Server address"
+                                    onChange={handleAddrChange}
+                                />
+                                <InputGroup.Text>:3022</InputGroup.Text>
+                            </InputGroup>
+                        </> :
+                        null
+                    }
+
+                    <div className="mt-5" />
+                    <div>Once you close the 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>
+                </Col>
+                <Col>
+                    <Toast
+                        show={showToast}
+                        onClose={() => setShowToast(false)}
+                        bg={'success'}
+                        delay={1000}
+                        autohide
+                        className="mt-5"
+                    >
+                        <Toast.Header>
+                            <strong className="me-auto">Server</strong>
+                            <small>Now</small>
+                        </Toast.Header>
+                        <Toast.Body>{`Connected to ${localStorage.getItem('server-addr')}`}</Toast.Body>
+                    </Toast>
+                </Col>
+            </Row>
         </Container>
     )
 }