Fast ui change

README.md

@@ -4,7 +4,7 @@ A terrible web ui for yt-dlp.
 Created for the only purpose of *cough cough* k-pop videos from my server/nas.  
 I will eventually make this better as soon as I can. Not in the immediate.  
 
-<img src="https://i.ibb.co/s9pcXP8/yt.png" alt="yt">
+<img src="https://i.ibb.co/drt0LWc/Screenshot-2021-11-24-at-13-11-09-yt-dlp-Web-UI.png" alt="ytdlpwebui">
 
 ## Docker install
 ```

frontend/index.css

@@ -1,5 +1,8 @@
-body{
+body {
+    font-family: 'Shippori Antique', sans-serif;
     height: 80vh;
-    background-color: #202124;
+    /* background-color: #222848; */
-    color: #f1f1f1;
+    background-color: #f8f9ff;
+    /* color: #f1f1f1; */
+    color: #3b3e66;
 }

frontend/index.html

@@ -7,6 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Shippori+Antique&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="index.css">
     <title>yt-dlp Web UI</title>
 </head>

frontend/src/App.css

@@ -1,5 +1,16 @@
-.status-box{
+.status-box {
-    background-color: #2b2c31;
+    background-color: #f8f9ffa1;
     padding: 8px;
     border-radius: 5px;
+    overflow-x: hidden;
+}
+
+.stack-box {
+    background-color: #ffffff;
+    border-radius: 1pc;
+}
+
+.settings {
+    text-decoration: underline;
+    cursor: pointer;
 }

frontend/src/App.jsx

@@ -8,7 +8,8 @@ import {
     InputGroup,
     FormControl,
     Button,
-    Toast
+    ButtonGroup,
+    Toast,
 } from "react-bootstrap";
 import { validateDomain, validateIP } from "./utils";
 import './App.css';
@@ -44,14 +45,13 @@ export function App() {
                     setProgress(_progress)
                 }
             } catch (error) {
-                console.log('finished or empty url or aborted')
+                console.warn('finished or empty url or aborted')
             }
         })
     }, [])
 
     const sendUrl = () => {
         setHalt(true)
-        console.log(url)
         socket.emit('send-url', url)
     }
 
@@ -82,9 +82,11 @@ export function App() {
             <Row>
                 <Col lg={7} xs={12}>
                     <div className="mt-5" />
-                    <h1>yt-dlp Web UI 🤠</h1>
+                    <h1 className="fw-bold">yt-dlp WebUI</h1>
+                    <div className="mt-5" />
 
-                    <InputGroup className="mt-5">
+                    <div className="p-3 stack-box shadow">
+                        <InputGroup>
                             <FormControl
                                 className="url-input"
                                 placeholder="YouTube or other supported service video url"
@@ -94,22 +96,28 @@ export function App() {
 
                         <div className="mt-2 status-box">
                             <h6>Status</h6>
+                            {!message ? <pre>Ready</pre> : null}
                             <pre id='status'>{message}</pre>
                         </div>
+                        <ButtonGroup>
+                            <Button className="mt-2" variant="primary" onClick={() => sendUrl()} disabled={halt}>Start</Button>{' '}
+                            <Button className="mt-2" variant="primary" active onClick={() => abort()}>Abort</Button>{' '}
+                        </ButtonGroup>
+                    </div>
 
-                    {progress ? <ProgressBar className="container-padding" now={progress} variant="danger" /> : null}
+                    {progress ? <ProgressBar className="container-padding" now={progress} variant="primary" /> : null}
 
-                    <Button className="my-5" variant="danger" onClick={() => sendUrl()} disabled={halt}>Go!</Button>{' '}
+                    <div className="my-4">
-                    <Button variant="danger" active onClick={() => abort()}>Abort</Button>{' '}
+                        <span className="settings" onClick={() => setShowSettings(!showSettings)}>Settings</span>
-                    <Button variant="secondary" onClick={() => setShowSettings(!showSettings)}>Settings</Button>
+                    </div>
 
                     {showSettings ?
-                        <>
+                        <div className="p-3 stack-box shadow">
                             <h6>Server address</h6>
                             <InputGroup className="mb-3 url-input" hasValidation>
                                 <InputGroup.Text>ws://</InputGroup.Text>
                                 <FormControl
-                                    defaultValue={localStorage.getItem('server-addr')}
+                                    defaultValue={localStorage.getItem('server-addr') || 'localhost'}
                                     placeholder="Server address"
                                     aria-label="Server address"
                                     onChange={handleAddrChange}
@@ -118,7 +126,7 @@ export function App() {
                                 />
                                 <InputGroup.Text>:3022</InputGroup.Text>
                             </InputGroup>
-                        </> :
+                        </div> :
                         null
                     }
 
@@ -132,16 +140,14 @@ export function App() {
                     <Toast
                         show={showToast}
                         onClose={() => setShowToast(false)}
-                        bg={'success'}
+                        bg={'primary'}
                         delay={1500}
                         autohide
                         className="mt-5"
                     >
-                        <Toast.Header>
+                        <Toast.Body className="text-light">
-                            <strong className="me-auto">Server</strong>
+                            {`Connected to ${localStorage.getItem('server-addr') || 'localhost'}`}
-                            <small>Now</small>
+                        </Toast.Body>
-                        </Toast.Header>
-                        <Toast.Body>{`Connected to ${localStorage.getItem('server-addr')}`}</Toast.Body>
                     </Toast>
                 </Col>
             </Row>