monthly update

frontend/index.css

@@ -1,16 +1,12 @@
 @import url('./src/styles/colors.css');
 
+html {
+    min-height: 100%;
+}
+
 body {
     font-family: 'Shippori Antique', sans-serif;
     height: 80vh;
     background-color: var(--body);
     color: var(--text);
 }
-
-.dark {
-    --body: #1c1c1c;
-    --text: #ffffff;
-    --status:#292929;
-    --stack: #212121;
-    --border: #3a3a3a;
-}

frontend/src/App.css

@@ -9,7 +9,7 @@
 
 .stack-box {
     background-color: var(--stack);
-    border-radius: 1pc;
+    border-radius: 0.5pc;
 }
 
 .settings {
@@ -19,14 +19,21 @@
     border-radius: 5px;
 }
 
-.form-control{
+.form-control {
     background-color: var(--status);
     border-color: var(--border);
     color: var(--text);
 }
 
-.input-group-text{
+.input-group-text {
     color: var(--text);
     background-color: var(--status);
     border-color: var(--border);
 }
+
+.buttonAbort {
+    background-color: var(--border);
+    color: var(--text);
+    border: 0px;
+    margin-top: 2px;
+}

frontend/src/App.tsx

@@ -9,7 +9,7 @@ import {
     Button,
     ButtonGroup,
 } from "react-bootstrap";
-import { X, HddFill, GearFill, Translate } from "react-bootstrap-icons";
+import { StopFill, GearFill, Translate } from "react-bootstrap-icons";
 import { buildMessage, updateInStateMap, validateDomain, validateIP } from "./utils";
 import { IDLInfo, IDLInfoBase, IMessage } from "./interfaces";
 import { MessageToast } from "./components/MessageToast";
@@ -17,6 +17,7 @@ import { StackableResult } from "./components/StackableResult";
 import { CliArguments } from "./classes";
 import { I18nBuilder } from "./i18n";
 import './App.css';
+import { Footer } from "./components/Footer";
 
 const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
 
@@ -30,6 +31,7 @@ export function App() {
     const [url, setUrl] = useState('');
     const [showToast, setShowToast] = useState(false);
     const [invalidIP, setInvalidIP] = useState(false);
+    const [connected, setConnected] = useState(false);
     const [updatedBin, setUpdatedBin] = useState(false);
     const [showSettings, setShowSettings] = useState(false);
     const [showLanguages, setShowLanguages] = useState(false);
@@ -58,6 +60,7 @@ export function App() {
     /* WebSocket connect event handler*/
     useEffect(() => {
         socket.on('connect', () => {
+            setConnected(true)
             setShowToast(true)
             socket.emit('fetch-jobs')
             socket.emit('disk-space')
@@ -298,8 +301,8 @@ export function App() {
                                                     progress={progressMap.get(message[0])} />
                                                 <Row>
                                                     <Col>
-                                                        <Button variant={darkMode ? 'dark' : 'light'} className="float-end" active size="sm" onClick={() => abort(message[0])}>
-                                                            <X></X>
+                                                        <Button className="float-end buttonAbort" size="sm" onClick={() => abort(message[0])}>
+                                                            <StopFill></StopFill>
                                                         </Button>
                                                     </Col>
                                                 </Row>
@@ -308,16 +311,10 @@ export function App() {
                                     </Fragment>
                                 ))
                             }
-
                             <ButtonGroup className="mt-2">
                                 <Button onClick={() => sendUrl()} disabled={false}>{i18n.t('startButton')}</Button>
                                 <Button active onClick={() => abort()}>{i18n.t('abortAllButton')}</Button>
                             </ButtonGroup>
-                            <span className="text-muted float-end pt-3">
-                                <HddFill></HddFill> {' '}
-                                <small>{freeDiskSpace ? freeDiskSpace : '-'}</small>
-                            </span>
-
                         </div>
 
                         <div className="my-4">
@@ -399,9 +396,11 @@ export function App() {
                     </Col>
                 </Row>
             </Container>
-            <div className="container pb-5">
-                <small>Made with ❤️ by Marcobaobao</small>
-            </div>
+            <Footer
+                freeSpace={freeDiskSpace}
+                serverAddr={localStorage.getItem('server-addr')}
+                connected={connected}
+            />
         </main>
     )
 }

frontend/src/components/Footer.css

@@ -0,0 +1,18 @@
+@import url('../../src/styles/colors.css');
+
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 40px;
+    line-height: 39px;
+    background-color: var(--stack);
+}
+
+.separator {
+    border-left: 1px solid var(--border);
+}
+
+.website {
+    cursor: pointer;
+}

frontend/src/components/Footer.tsx

@@ -0,0 +1,40 @@
+import { HddStackFill, Ethernet, Github, CheckSquareFill, XSquareFill } from 'react-bootstrap-icons';
+import './Footer.css';
+
+type Props = {
+    freeSpace: string,
+    statistics?: string,
+    serverAddr: string,
+    connected: boolean,
+}
+
+export const Footer = ({ freeSpace, statistics, serverAddr, connected }: Props) => {
+    return (
+        <footer className="footer">
+            <div className="container">
+                <span className="pe-3">
+                    <small>Made with ❤️ on 🌍</small>
+                </span>
+                <span className="px-3 separator">
+                    <HddStackFill></HddStackFill> {' '}
+                    <small>{freeSpace ? `${freeSpace.trim()}iB` : '-'}</small>
+                </span>
+                <span className="px-3 separator">
+                    <Ethernet></Ethernet> {' '}
+                    <small>{serverAddr ? `${serverAddr}:3022` : 'not defined'}</small>
+                </span>
+                <span className="px-3 separator">
+                    <small title={connected ? 'Successfully connected!' : 'Can\'t connect to server'}>
+                        {connected ?
+                            <CheckSquareFill style={{ color: '#03b703' }} /> :
+                            <XSquareFill style={{ color: '#e83a3a' }} />
+                        }
+                    </small>
+                </span>
+                <span className="float-end website" onClick={() => window.open('https://github.com/marcobaobao/yt-dlp-web-ui')}>
+                    <Github></Github>
+                </span>
+            </div>
+        </footer >
+    );
+}

frontend/src/styles/colors.css

@@ -4,4 +4,12 @@
     --status:#f8f9ffa1;
     --border:#ced4da;
     --stack: #ffffff;
+}
+
+.dark {
+    --body: #1c1c1c;
+    --text: #ffffff;
+    --status:#292929;
+    --stack: #212121;
+    --border: #3a3a3a;
 }