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])}>
+                                                        <Button className="float-end buttonAbort" size="sm" onClick={() => abort(message[0])}>
-                                                            <X></X>
+                                                            <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">
+            <Footer
-                <small>Made with ❤️ by Marcobaobao</small>
+                freeSpace={freeDiskSpace}
-            </div>
+                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

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

package.json

@@ -3,8 +3,9 @@
   "version": "1.1.0",
   "description": "A terrible webUI for yt-dlp, all-in-one solution.",
   "scripts": {
+    "dev": "nodemon dist/main.js",
     "start": "node dist/main.js",
-    "dev": "tsc --build -w",
+    "watch": "tsc --build -w",
     "build": "parcel build ./frontend/index.html --dist-dir ./dist/frontend",
     "build-server": "tsc --build",
     "build-all": "tsc --build && npm run build && npm run fetch",
@@ -21,12 +22,10 @@
     "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",
     "socket.io": "^4.3.2",
     "socket.io-client": "^4.3.2",
-    "sqlite": "^4.0.23",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -3,9 +3,6 @@ lockfileVersion: 5.3
 specifiers:
   '@parcel/transformer-yaml': ^2.2.1
   '@types/better-sqlite3': ^7.4.2
-  '@types/koa': ^2.13.4
-  '@types/koa-static': ^4.0.2
-  '@types/koa__cors': ^3.1.1
   '@types/node': ^17.0.13
   '@types/uuid': ^8.3.4
   better-sqlite3: ^7.4.5
@@ -13,12 +10,10 @@ specifiers:
   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
   socket.io: ^4.3.2
   socket.io-client: ^4.3.2
-  sqlite: ^4.0.23
   typescript: ^4.5.2
   uuid: ^8.3.2
 
@@ -27,20 +22,15 @@ dependencies:
   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_react@17.0.2
   react-dom: 17.0.2_react@17.0.2
   rxjs: 7.5.2
   socket.io: 4.4.1
   socket.io-client: 4.4.1
-  sqlite: 4.0.23
   uuid: 8.3.2
 
 devDependencies:
   '@parcel/transformer-yaml': 2.2.1
   '@types/better-sqlite3': 7.4.2
-  '@types/koa': 2.13.4
-  '@types/koa-static': 4.0.2
-  '@types/koa__cors': 3.1.1
   '@types/node': 17.0.13
   '@types/uuid': 8.3.4
   parcel: 2.2.1
@@ -1171,81 +1161,24 @@ packages:
     engines: {node: '>=10.13.0'}
     dev: true
 
-  /@types/accepts/1.3.5:
-    resolution: {integrity: sha512-jOdnI/3qTpHABjM5cx1Hc0sKsPoYCp+DP/GJRGtDlPd7fiV9oXGGIcjW/ZOxLIvjGz8MA+uMZI9metHlgqbgwQ==}
-    dependencies:
-      '@types/node': 17.0.13
-    dev: true
-
   /@types/better-sqlite3/7.4.2:
     resolution: {integrity: sha512-HUXWMOmRgOrXJ0SKt6kxqUaZtGkr0HCuaEt/76LojT6bkTu0lb0uhr3K1su9T09mskDKyQwNMvT7WithFN10PQ==}
     dependencies:
       '@types/node': 17.0.13
     dev: true
 
-  /@types/body-parser/1.19.2:
-    resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
-    dependencies:
-      '@types/connect': 3.4.35
-      '@types/node': 17.0.13
-    dev: true
-
   /@types/component-emitter/1.2.11:
     resolution: {integrity: sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ==}
     dev: false
 
-  /@types/connect/3.4.35:
-    resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
-    dependencies:
-      '@types/node': 17.0.13
-    dev: true
-
-  /@types/content-disposition/0.5.4:
-    resolution: {integrity: sha512-0mPF08jn9zYI0n0Q/Pnz7C4kThdSt+6LD4amsrYDDpgBfrVWa3TcCOxKX1zkGgYniGagRv8heN2cbh+CAn+uuQ==}
-    dev: true
-
   /@types/cookie/0.4.1:
     resolution: {integrity: sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==}
     dev: false
 
-  /@types/cookies/0.7.7:
-    resolution: {integrity: sha512-h7BcvPUogWbKCzBR2lY4oqaZbO3jXZksexYJVFvkrFeLgbZjQkU4x8pRq6eg2MHXQhY0McQdqmmsxRWlVAHooA==}
-    dependencies:
-      '@types/connect': 3.4.35
-      '@types/express': 4.17.13
-      '@types/keygrip': 1.0.2
-      '@types/node': 17.0.13
-    dev: true
-
   /@types/cors/2.8.12:
     resolution: {integrity: sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==}
     dev: false
 
-  /@types/express-serve-static-core/4.17.28:
-    resolution: {integrity: sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==}
-    dependencies:
-      '@types/node': 17.0.13
-      '@types/qs': 6.9.7
-      '@types/range-parser': 1.2.4
-    dev: true
-
-  /@types/express/4.17.13:
-    resolution: {integrity: sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==}
-    dependencies:
-      '@types/body-parser': 1.19.2
-      '@types/express-serve-static-core': 4.17.28
-      '@types/qs': 6.9.7
-      '@types/serve-static': 1.13.10
-    dev: true
-
-  /@types/http-assert/1.5.3:
-    resolution: {integrity: sha512-FyAOrDuQmBi8/or3ns4rwPno7/9tJTijVW6aQQjK02+kOQ8zmoNg2XJtAuQhvQcy1ASJq38wirX5//9J1EqoUA==}
-    dev: true
-
-  /@types/http-errors/1.8.2:
-    resolution: {integrity: sha512-EqX+YQxINb+MeXaIqYDASb6U6FCHbWjkj4a1CKDBks3d/QiB2+PqBLyO72vLDgAO1wUI4O+9gweRcQK11bTL/w==}
-    dev: true
-
   /@types/http-proxy/1.17.8:
     resolution: {integrity: sha512-5kPLG5BKpWYkw/LVOGWpiq3nEVqxiN32rTgI53Sk12/xHFQ2rG3ehI9IO+O3W2QoKeyB92dJkoka8SUm6BX1pA==}
     dependencies:
@@ -1256,52 +1189,6 @@ packages:
     resolution: {integrity: sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==}
     dev: false
 
-  /@types/keygrip/1.0.2:
-    resolution: {integrity: sha512-GJhpTepz2udxGexqos8wgaBx4I/zWIDPh/KOGEwAqtuGDkOUJu5eFvwmdBX4AmB8Odsr+9pHCQqiAqDL/yKMKw==}
-    dev: true
-
-  /@types/koa-compose/3.2.5:
-    resolution: {integrity: sha512-B8nG/OoE1ORZqCkBVsup/AKcvjdgoHnfi4pZMn5UwAPCbhk/96xyv284eBYW8JlQbQ7zDmnpFr68I/40mFoIBQ==}
-    dependencies:
-      '@types/koa': 2.13.4
-    dev: true
-
-  /@types/koa-send/4.1.3:
-    resolution: {integrity: sha512-daaTqPZlgjIJycSTNjKpHYuKhXYP30atFc1pBcy6HHqB9+vcymDgYTguPdx9tO4HMOqNyz6bz/zqpxt5eLR+VA==}
-    dependencies:
-      '@types/koa': 2.13.4
-    dev: true
-
-  /@types/koa-static/4.0.2:
-    resolution: {integrity: sha512-ns/zHg+K6XVPMuohjpOlpkR1WLa4VJ9czgUP9bxkCDn0JZBtUWbD/wKDZzPGDclkQK1bpAEScufCHOy8cbfL0w==}
-    dependencies:
-      '@types/koa': 2.13.4
-      '@types/koa-send': 4.1.3
-    dev: true
-
-  /@types/koa/2.13.4:
-    resolution: {integrity: sha512-dfHYMfU+z/vKtQB7NUrthdAEiSvnLebvBjwHtfFmpZmB7em2N3WVQdHgnFq+xvyVgxW5jKDmjWfLD3lw4g4uTw==}
-    dependencies:
-      '@types/accepts': 1.3.5
-      '@types/content-disposition': 0.5.4
-      '@types/cookies': 0.7.7
-      '@types/http-assert': 1.5.3
-      '@types/http-errors': 1.8.2
-      '@types/keygrip': 1.0.2
-      '@types/koa-compose': 3.2.5
-      '@types/node': 17.0.13
-    dev: true
-
-  /@types/koa__cors/3.1.1:
-    resolution: {integrity: sha512-O7MBkCocnLrpEvkMrYAp17arUDS+KuS5bXMG/Z4aPSbrO7vrYB6YrqcsTD3Dp2OnAL3j4WME2k/x2kOcyzwNUw==}
-    dependencies:
-      '@types/koa': 2.13.4
-    dev: true
-
-  /@types/mime/1.3.2:
-    resolution: {integrity: sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==}
-    dev: true
-
   /@types/node/17.0.13:
     resolution: {integrity: sha512-Y86MAxASe25hNzlDbsviXl8jQHb0RDvKt4c40ZJQ1Don0AAL0STLZSs4N+6gLEO55pedy7r2cLwS+ZDxPm/2Bw==}
 
@@ -1313,14 +1200,6 @@ packages:
     resolution: {integrity: sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==}
     dev: false
 
-  /@types/qs/6.9.7:
-    resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
-    dev: true
-
-  /@types/range-parser/1.2.4:
-    resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
-    dev: true
-
   /@types/react-transition-group/4.4.4:
     resolution: {integrity: sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==}
     dependencies:
@@ -1339,13 +1218,6 @@ packages:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
     dev: false
 
-  /@types/serve-static/1.13.10:
-    resolution: {integrity: sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==}
-    dependencies:
-      '@types/mime': 1.3.2
-      '@types/node': 17.0.13
-    dev: true
-
   /@types/uuid/8.3.4:
     resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
     dev: true
@@ -3971,15 +3843,6 @@ packages:
       warning: 4.0.3
     dev: false
 
-  /react-chartjs-2/4.0.1_react@17.0.2:
-    resolution: {integrity: sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==}
-    peerDependencies:
-      chart.js: ^3.5.0
-      react: ^16.8.0 || ^17.0.0
-    dependencies:
-      react: 17.0.2
-    dev: false
-
   /react-dom/17.0.2_react@17.0.2:
     resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
     peerDependencies:
@@ -4298,10 +4161,6 @@ packages:
     resolution: {integrity: sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=}
     dev: true
 
-  /sqlite/4.0.23:
-    resolution: {integrity: sha512-dSdmSkrdIhUL7xP/fiEMfFuAo4dxb0afag3rK8T4Y9lYxE3g3fXT0J8H9qSFvmcKxnM0zEA8yvLbpdWQ8mom3g==}
-    dev: false
-
   /stable/0.1.8:
     resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
     dev: true