MUI update

.vscode/launch.json

@@ -0,0 +1,19 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:1234",
+            "webRoot": "${workspaceFolder}",
+            "breakOnLoad": true,
+            "sourceMapPathOverrides": {
+                "/__parcel_source_root/*": "${webRoot}/*"
+            }
+        }
+    ]
+}

Dockerfile

@@ -12,7 +12,7 @@ RUN chmod +x ./fetch-yt-dlp.sh
 RUN npm install
 RUN npm run build-all
 # cleanup
-RUN npm remove parcel react react-dom react-bootstrap react-bootstrap-icons
+RUN npm remove parcel
 RUN rm -rf .parcel-cache
 # expose and run
 EXPOSE 3022

README.md

@@ -20,12 +20,12 @@ Changelog:
 Refactoring and JSDoc.
 
 04/01/22: Background jobs now are retrieved!! It's still rudimentary but it leverages on yt-dlp resume feature
+
+05/05/22: Material UI update
 ```
-<img src="https://i.ibb.co/tcq3mtq/Screenshot-20220204-122644.png">
 
-## Now with dark mode
 
-<img src="https://i.ibb.co/1qd2RMs/Screenshot-20220204-122713.png">
+<img src="https://i.ibb.co/YyCwS0F/Unsaved-Image-1.png">
 
 ## Settings
 
@@ -35,6 +35,9 @@ The avaible settings are currently only:
 -   Extract audio
 -   Switch language
 
+<img src="https://i.ibb.co/VMBhhFX/Unsaved-Image-2.png">
+<img src="https://i.ibb.co/cXJwDp4/Unsaved-Image-3.png">
+
 Future releases will have:
 -   ~~Multi download~~ *done*
 -   ~~Exctract audio~~ *done*
@@ -83,6 +86,8 @@ node dist/main.js
     - Originally it was 1.8GB circa, now it has been slimmed to ~340MB compressed. This is due to the fact that it encapsule a basic Alpine linux image + FFmpeg + Node.js + Python3 + yt-dlp.
 -   **Am I forced to run it on port 3022?**
     -   Well, yes (until now).
+-   **Why is it so slow to start a download**
+    - I genuinely don't know. I know that yt-dlp is slow starting up even on my M1 Mac, so....
 
 ## Todo list
 - ~~retrieve background tasks~~

frontend/index.html

@@ -5,12 +5,8 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <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.tsx

@@ -1,407 +1,195 @@
-import { io } from "socket.io-client";
-import React, { useState, useEffect, useRef, Fragment } from "react";
+import React, { useEffect } from "react"
+import { ThemeProvider } from "@emotion/react";
+import { Badge, Box, Container, createTheme, CssBaseline, Divider, IconButton, List, ListItemIcon, ListItemText, Snackbar, styled, Toolbar, Typography } from "@mui/material"
+import MuiDrawer from '@mui/material/Drawer';
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
+import { ChevronLeft, Dashboard, Menu, Settings as SettingsIcon } from "@mui/icons-material";
+import ListItemButton from '@mui/material/ListItemButton';
 import {
-    Container,
-    Row,
-    Col,
-    InputGroup,
-    FormControl,
-    Button,
-    ButtonGroup,
-} from "react-bootstrap";
-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";
-import { StackableResult } from "./components/StackableResult";
-import { CliArguments } from "./classes";
-import { I18nBuilder } from "./i18n";
-import './App.css';
-import { Footer } from "./components/Footer";
+    BrowserRouter as Router,
+    Route,
+    Routes,
+    Link,
+} from 'react-router-dom';
+import Home from "./Home";
+import Settings from "./Settings";
+import { io } from "socket.io-client";
+import { RootState, store } from './stores/store';
+import { Provider, useDispatch, useSelector } from "react-redux";
+import { connected } from "./features/status/statusSlice";
+
+const theme = createTheme();
+
+const drawerWidth: number = 240;
 
 const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
 
-export function App() {
-
-    const [progressMap, setProgressMap] = useState(new Map<number, number>());
-    const [messageMap, setMessageMap] = useState(new Map<number, string>());
-    const [downloadInfoMap, setDownloadInfoMap] = useState(new Map<number, IDLInfoBase>());
-
-    const [halt, setHalt] = useState(false);
-    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);
-    const [freeDiskSpace, setFreeDiskSpace] = useState('');
-
-    const [darkMode, setDarkMode] = useState(localStorage.getItem('theme') === 'dark');
-    const [language, setLanguage] = useState(localStorage.getItem('language') || 'english');
-
-    const xaInput = useRef(null);
-    const mtInput = useRef(null);
-
-    /* -------------------- Init ----------------------- */
-
-    const cliArgs = new CliArguments();
-
-    if (!localStorage.getItem('cliArgs')) {
-        localStorage.setItem('cliArgs', '')
+interface AppBarProps extends MuiAppBarProps {
+    open?: boolean;
 }
 
-    cliArgs.fromString(localStorage.getItem('cliArgs'))
+const AppBar = styled(MuiAppBar, {
+    shouldForwardProp: (prop) => prop !== 'open',
+})<AppBarProps>(({ theme, open }) => ({
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(['width', 'margin'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    ...(open && {
+        marginLeft: drawerWidth,
+        width: `calc(100% - ${drawerWidth}px)`,
+        transition: theme.transitions.create(['width', 'margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    }),
+}));
 
-    const i18n = new I18nBuilder(language);
+const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
+    ({ theme, open }) => ({
+        '& .MuiDrawer-paper': {
+            position: 'relative',
+            whiteSpace: 'nowrap',
+            width: drawerWidth,
+            transition: theme.transitions.create('width', {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+            boxSizing: 'border-box',
+            ...(!open && {
+                overflowX: 'hidden',
+                transition: theme.transitions.create('width', {
+                    easing: theme.transitions.easing.sharp,
+                    duration: theme.transitions.duration.leavingScreen,
+                }),
+                width: theme.spacing(7),
+                [theme.breakpoints.up('sm')]: {
+                    width: theme.spacing(9),
+                },
+            }),
+        },
+    }),
+);
 
-    /* -------------------- Effects -------------------- */
+function AppContent() {
+    const [open, setOpen] = React.useState(false);
+    const toggleDrawer = () => {
+        setOpen(!open);
+    };
 
-    /* WebSocket connect event handler*/
-    useEffect(() => {
-        socket.on('connect', () => {
-            setConnected(true)
-            setShowToast(true)
-            socket.emit('fetch-jobs')
-            socket.emit('disk-space')
-        })
-        return () => {
-            socket.disconnect()
-        }
-    }, [])
-
-    /* Ask server for pending jobs / background jobs */
-    useEffect(() => {
-        socket.on('pending-jobs', () => {
-            socket.emit('retrieve-jobs')
-        })
-    }, [])
-
-    /* Handle download information sent by server */
-    useEffect(() => {
-        socket.on('info', (data: IDLInfo) => {
-            updateInStateMap(data.pid, data.info, downloadInfoMap, setDownloadInfoMap);
-        })
-    }, [])
-
-    /* Handle per-download progress */
-    useEffect(() => {
-        socket.on('progress', (data: IMessage) => {
-            if (data.status === 'Done!' || data.status === 'Aborted') {
-                setHalt(false);
-                updateInStateMap(data.pid, 'Done!', messageMap, setMessageMap);
-                updateInStateMap(data.pid, 0, progressMap, setProgressMap);
-                socket.emit('disk-space')
-                return;
-            }
-            updateInStateMap(data.pid, buildMessage(data), messageMap, setMessageMap);
-            if (data.progress) {
-                updateInStateMap(data.pid, Math.ceil(Number(data.progress.replace('%', ''))), progressMap, setProgressMap)
-            }
-        })
-    }, [])
-
-    /* Handle yt-dlp update success */
-    useEffect(() => {
-        socket.on('updated', () => {
-            setUpdatedBin(true)
-            setHalt(false)
-        })
-    }, [])
-
-    /* Theme changer */
-    useEffect(() => {
-        darkMode ?
-            document.body.classList.add('dark') :
-            document.body.classList.remove('dark');
-    }, [darkMode])
-
-    /* Get disk free space */
-    useEffect(() => {
-        socket.on('free-space', (res: string) => {
-            setFreeDiskSpace(res)
-        })
-    }, [])
-
-    /* Change language */
-    useEffect(() => {
-        i18n.setLanguage(language)
-    }, [language])
-
-    /* -------------------- component functions -------------------- */
-
-    /**
-     * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
-     */
-    const sendUrl = () => {
-        setHalt(true)
-        socket.emit('send-url', {
-            url: url,
-            params: cliArgs.toString(),
-        })
-        setUrl('')
-        const input = document.getElementById('urlInput') as HTMLInputElement;
-        input.value = '';
-    }
-
-    /**
-     * Update the url state whenever the input value changes
-     * @param e Input change event
-     */
-    const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setUrl(e.target.value)
-    }
-
-    /**
-     * Update the server ip address state and localstorage whenever the input value changes.  
-     * Validate the ip-addr then set.
-     * @param e Input change event
-     */
-    const handleAddrChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const input = e.target.value;
-        if (validateIP(input)) {
-            setInvalidIP(false)
-            localStorage.setItem('server-addr', input)
-        } else if (validateDomain(input)) {
-            setInvalidIP(false)
-            localStorage.setItem('server-addr', input)
-        } else {
-            setInvalidIP(true)
-        }
-    }
-
-    /**
-     * Abort a specific download if id's provided, other wise abort all running ones.
-     * @param id The download id / pid
-     * @returns void
-     */
-    const abort = (id?: number) => {
-        if (id) {
-            updateInStateMap(id, null, downloadInfoMap, setDownloadInfoMap, true)
-            socket.emit('abort', { pid: id })
-            return
-        }
-        socket.emit('abort-all')
-        setHalt(false)
-    }
-
-    /**
-     * Send via WebSocket a message in order to update the yt-dlp binary from server
-     */
-    const updateBinary = () => {
-        setHalt(true)
-        socket.emit('update-bin')
-    }
-
-    /**
-     * Theme toggler handler
-     */
-    const toggleTheme = () => {
-        if (darkMode) {
-            localStorage.setItem('theme', 'light')
-            setDarkMode(false)
-        } else {
-            localStorage.setItem('theme', 'dark')
-            setDarkMode(true)
-        }
-    }
-
-    /**
-     * Handle extract audio checkbox
-     */
-    const setExtractAudio = () => {
-        if (cliArgs.extractAudio) {
-            xaInput.current.checked = false;
-            cliArgs.extractAudio = false;
-
-            const lStorageItem = localStorage.getItem('cliArgs');
-            localStorage.setItem('cliArgs', lStorageItem.replace('-x ', ''));
-        } else {
-            xaInput.current.checked = true;
-            cliArgs.extractAudio = true;
-
-            const lStorageItem = localStorage.getItem('cliArgs');
-            localStorage.setItem('cliArgs', lStorageItem.concat('-x ', ''));
-        }
-    }
-
-    /**
-     * Handle no modified time header checkbox
-     */
-    const setNoMTime = () => {
-        if (cliArgs.noMTime) {
-            mtInput.current.checked = false;
-            cliArgs.noMTime = false;
-
-            const lStorageItem = localStorage.getItem('cliArgs');
-            localStorage.setItem('cliArgs', lStorageItem.replace('--no-mtime ', ''));
-        } else {
-            mtInput.current.checked = true;
-            cliArgs.noMTime = true;
-
-            const lStorageItem = localStorage.getItem('cliArgs');
-            localStorage.setItem('cliArgs', lStorageItem.concat('--no-mtime ', ''));
-        }
-    }
-
-    /**
-     * Language toggler handler 
-     */
-    const handleLanguageChage = (event: React.ChangeEvent<HTMLSelectElement>) => {
-        setLanguage(event.target.value);
-        setShowLanguages(false);
-        localStorage.setItem('language', event.target.value);
-    }
+    const status = useSelector((state: RootState) => state.status)
+    const dispatch = useDispatch()
 
     return (
-        <main>
-            <Container className="pb-5 main">
-                <Row>
-                    <Col lg={7} xs={12}>
-                        <div className="mt-5" />
-                        <h1 className="fw-bold">yt-dlp WebUI</h1>
-                        <div className="mt-5" />
-
-                        <div className="p-3 stack-box shadow">
-                            <InputGroup>
-                                <FormControl
-                                    id="urlInput"
-                                    className="url-input"
-                                    placeholder={i18n.t('urlInput')}
-                                    onChange={handleUrlChange}
-                                />
-                            </InputGroup>
+        <ThemeProvider theme={theme}>
+            <Router>
+                <Box sx={{ display: 'flex' }}>
+                    <CssBaseline />
+                    <AppBar position="absolute" open={open}>
+                        <Toolbar
+                            sx={{
+                                pr: '24px', // keep right padding when drawer closed
+                            }}
+                        >
+                            <IconButton
+                                edge="start"
+                                color="inherit"
+                                aria-label="open drawer"
+                                onClick={toggleDrawer}
+                                sx={{
+                                    marginRight: '36px',
+                                    ...(open && { display: 'none' }),
+                                }}
+                            >
+                                <Menu />
+                            </IconButton>
+                            <Typography
+                                component="h1"
+                                variant="h6"
+                                color="inherit"
+                                noWrap
+                                sx={{ flexGrow: 1 }}
+                            >
+                                yt-dlp WebUI
+                            </Typography>
+                            <IconButton color="inherit">
+                                <Badge badgeContent={0} color="secondary">
+                                </Badge>
+                            </IconButton>
+                        </Toolbar>
+                    </AppBar>
+                    <Drawer variant="permanent" open={open}>
+                        <Toolbar
+                            sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'flex-end',
+                                px: [1],
+                            }}
+                        >
+                            <IconButton onClick={toggleDrawer}>
+                                <ChevronLeft />
+                            </IconButton>
+                        </Toolbar>
+                        <Divider />
+                        <List component="nav">
+                            <Link to={'/'} style={
                                 {
-                                !Array.from(messageMap).length ?
-                                    <div className="mt-2 status-box">
-                                        <Row>
-                                            <Col sm={9}>
-                                                <h6>{i18n.t('statusTitle')}</h6>
-                                                <pre>{i18n.t('statusReady')}</pre>
-                                            </Col>
-                                        </Row>
-                                    </div> : null
+                                    textDecoration: 'none',
+                                    color: '#222222'
                                 }
-                            { /*Super big brain flatMap moment*/
-                                Array.from(messageMap).flatMap(message => (
-                                    <Fragment key={message[0]}>
+                            }>
+                                <ListItemButton disabled={status.downloading}>
+                                    <ListItemIcon>
+                                        <Dashboard />
+                                    </ListItemIcon>
+                                    <ListItemText primary="Home" />
+                                </ListItemButton>
+                            </Link>
+                            <Link to={'/settings'} style={
                                 {
-                                            /*
-                                                Message[0] => key, the pid which is shared with the progress and download Maps
-                                                Message[1] => value, the actual formatted message sent from server
-                                             */
+                                    textDecoration: 'none',
+                                    color: '#222222'
                                 }
-                                        {message[0] && message[1] && message[1] !== 'Done!' ?
-                                            <Fragment>
-                                                <StackableResult
-                                                    formattedLog={message[1]}
-                                                    title={downloadInfoMap.get(message[0])?.title}
-                                                    thumbnail={downloadInfoMap.get(message[0])?.thumbnail}
-                                                    resolution={downloadInfoMap.get(message[0])?.resolution}
-                                                    progress={progressMap.get(message[0])} />
-                                                <Row>
-                                                    <Col>
-                                                        <Button className="float-end buttonAbort" size="sm" onClick={() => abort(message[0])}>
-                                                            <StopFill className="mb-1"></StopFill>
-                                                        </Button>
-                                                    </Col>
-                                                </Row>
-                                            </Fragment> : null
-                                        }
-                                    </Fragment>
-                                ))
-                            }
-                            <ButtonGroup className="mt-2">
-                                <Button onClick={() => sendUrl()} disabled={false}>{i18n.t('startButton')}</Button>
-                                <Button active onClick={() => abort()}>{i18n.t('abortAllButton')}</Button>
-                            </ButtonGroup>
-                        </div>
-
-                        <div className="my-4">
-                            <span className="settings" onClick={() => setShowSettings(!showSettings)}>
-                                <GearFill className="mb-1"></GearFill>
-                            </span>
-                            {' '}
-                            <span className="settings" onClick={() => setShowLanguages(!showLanguages)}>
-                                <Translate className="mb-1"></Translate>
-                            </span>
-                            {showLanguages ?
-                                <select className="form-select mt-2" onChange={handleLanguageChage} defaultValue={language}>
-                                    <option value="english">English</option>
-                                    <option value="italian">Italian</option>
-                                    <option value="spanish">Spanish</option>
-                                    <option value="chinese">Chinese</option>
-                                    <option value="korean">Korean</option>
-                                    <option value="russian">Russian</option>
-                                </select>
-                                : null
-                            }
-                        </div>
-
-
-                        {showSettings ?
-                            <div className="p-3 stack-box shadow">
-                                <h6>{i18n.t('serverAddressTitle')}</h6>
-                                <InputGroup className="mb-3 url-input" hasValidation>
-                                    <InputGroup.Text>ws://</InputGroup.Text>
-                                    <FormControl
-                                        defaultValue={localStorage.getItem('server-addr') || 'localhost'}
-                                        placeholder={i18n.t('serverAddressTitle')}
-                                        aria-label={i18n.t('serverAddressTitle') || ''}
-                                        onChange={handleAddrChange}
-                                        isInvalid={invalidIP}
-                                        isValid={!invalidIP}
-                                    />
-                                    <InputGroup.Text>:3022</InputGroup.Text>
-                                </InputGroup>
-                                <div className="pt-2">
-                                    <input type="checkbox" name="-x" defaultChecked={cliArgs.extractAudio} ref={xaInput}
-                                        onClick={setExtractAudio} />
-                                    <label htmlFor="-x">&nbsp;
-                                        {i18n.t('extractAudioCheckbox')}
-                                    </label>
-                                    <div></div>
-                                    <input type="checkbox" name="-nomtime" defaultChecked={cliArgs.noMTime} ref={mtInput}
-                                        onClick={setNoMTime} />
-                                    <label htmlFor="-x">&nbsp;
-                                        {i18n.t('noMTimeCheckbox')}
-                                    </label>
-                                </div>
-                                <br />
-                                <Button size="sm" onClick={() => updateBinary()} disabled={halt}>
-                                    {i18n.t('updateBinButton')}
-                                </Button>{' '}
-                                <Button size="sm" variant={darkMode ? 'light' : 'dark'} onClick={() => toggleTheme()}>
-                                    {darkMode ? i18n.t('lightThemeButton') : i18n.t('darkThemeButton')}
-                                </Button>
-                            </div> :
-                            null
+                            }>
+                                <ListItemButton disabled={status.downloading}>
+                                    <ListItemIcon>
+                                        <SettingsIcon />
+                                    </ListItemIcon>
+                                    <ListItemText primary="Settings" />
+                                </ListItemButton>
+                            </Link>
+                        </List>
+                    </Drawer>
+                    <Box
+                        component="main"
+                        sx={{
+                            backgroundColor: (theme) =>
+                                theme.palette.mode === 'light'
+                                    ? theme.palette.grey[100]
+                                    : theme.palette.grey[900],
+                            flexGrow: 1,
+                            height: '100vh',
+                            overflow: 'auto',
+                        }}
+                    >
+                        <Toolbar />
+                        <Routes>
+                            <Route path="/" element={<Home socket={socket}></Home>}></Route>
+                            <Route path="/settings" element={<Settings socket={socket}></Settings>}></Route>
+                        </Routes>
+                    </Box>
+                </Box>
+            </Router>
+        </ThemeProvider>
+    );
 }
 
-                        <div className="mt-5" />
-                        <div>
-                            <small>
-                                {i18n.t('bgReminder')}
-                            </small>
-                        </div>
-                    </Col>
-                    <Col>
-                        <MessageToast flag={showToast} callback={setShowToast}>
-                            <>
-                                {i18n.t('toastConnected')}{localStorage.getItem('server-addr') || 'localhost'}
-                            </>
-                        </MessageToast>
-                        <MessageToast flag={updatedBin} callback={setUpdatedBin}>
-                            {i18n.t('toastUpdated')}
-                        </MessageToast>
-                    </Col>
-                </Row>
-            </Container>
-            <Footer
-                freeSpace={freeDiskSpace}
-                serverAddr={localStorage.getItem('server-addr')}
-                connected={connected}
-            />
-        </main>
-    )
+export function App() {
+    return (
+        <Provider store={store}>
+            <AppContent></AppContent>
+        </Provider>
+    );
 }

frontend/src/Home.tsx

@@ -0,0 +1,194 @@
+import { Backdrop, Button, CircularProgress, Container, Grid, Paper, Snackbar, TextField, } from "@mui/material";
+import React, { Fragment, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Socket } from "socket.io-client";
+import { StackableResult } from "./components/StackableResult";
+import { connected, disconnected, downloading, finished } from "./features/status/statusSlice";
+import { IDLInfo, IDLInfoBase, IMessage } from "./interfaces";
+import { RootState } from "./stores/store";
+import { updateInStateMap, } from "./utils";
+
+type Props = {
+    socket: Socket
+}
+
+export default function Home({ socket }: Props) {
+    // redux state
+    const settings = useSelector((state: RootState) => state.settings)
+    const status = useSelector((state: RootState) => state.status)
+    const dispatch = useDispatch()
+
+    // ephemeral state
+    const [progressMap, setProgressMap] = useState(new Map<number, number>());
+    const [messageMap, setMessageMap] = useState(new Map<number, IMessage>());
+    const [downloadInfoMap, setDownloadInfoMap] = useState(new Map<number, IDLInfoBase>());
+
+    const [url, setUrl] = useState('');
+    const [showBackdrop, setShowBackdrop] = useState(false);
+
+    /* -------------------- Effects -------------------- */
+    /* WebSocket connect event handler*/
+    useEffect(() => {
+        socket.on('connect', () => {
+            dispatch(connected());
+            socket.emit('fetch-jobs')
+            socket.emit('disk-space')
+            socket.emit('retrieve-jobs');
+        })
+        return () => {
+            socket.disconnect()
+        }
+    }, [])
+
+
+    /* Ask server for pending jobs / background jobs */
+    useEffect(() => {
+        socket.on('pending-jobs', (count: number) => {
+            count === 0 ? setShowBackdrop(false) : setShowBackdrop(true)
+        })
+    }, [])
+
+    /* Handle download information sent by server */
+    useEffect(() => {
+        socket.on('info', (data: IDLInfo) => {
+            setShowBackdrop(false)
+            dispatch(downloading())
+            updateInStateMap(data.pid, data.info, downloadInfoMap, setDownloadInfoMap);
+        })
+    }, [])
+
+    /* Handle per-download progress */
+    useEffect(() => {
+        socket.on('progress', (data: IMessage) => {
+            if (showBackdrop) {
+                setShowBackdrop(false)
+            }
+            if (!status.downloading) {
+                dispatch(downloading())
+            }
+            if (data.status === 'Done!' || data.status === 'Aborted') {
+                updateInStateMap(data.pid, 'Done!', messageMap, setMessageMap);
+                updateInStateMap(data.pid, 0, progressMap, setProgressMap);
+                socket.emit('disk-space')
+                dispatch(finished())
+                return;
+            }
+            updateInStateMap(data.pid, data, messageMap, setMessageMap);
+            if (data.progress) {
+                updateInStateMap(data.pid, Math.ceil(Number(data.progress.replace('%', ''))), progressMap, setProgressMap)
+            }
+        })
+    }, [])
+
+    /* -------------------- component functions -------------------- */
+
+    /**
+     * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
+     */
+    const sendUrl = () => {
+        socket.emit('send-url', {
+            url: url,
+            params: settings.cliArgs.toString(),
+        })
+        setUrl('')
+        setTimeout(() => {
+            const input = document.getElementById('urlInput') as HTMLInputElement;
+            input.value = '';
+            setShowBackdrop(true)
+        }, 250);
+    }
+
+    /**
+     * Update the url state whenever the input value changes
+     * @param e Input change event
+     */
+    const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setUrl(e.target.value)
+    }
+
+    /**
+     * Abort a specific download if id's provided, other wise abort all running ones.
+     * @param id The download id / pid
+     * @returns void
+     */
+    const abort = (id?: number) => {
+        if (id) {
+            updateInStateMap(id, null, downloadInfoMap, setDownloadInfoMap, true)
+            socket.emit('abort', { pid: id })
+            return
+        }
+        socket.emit('abort-all')
+    }
+
+    return (
+        <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+            <Backdrop
+                sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+                open={showBackdrop}
+            >
+                <CircularProgress color="primary" />
+            </Backdrop>
+            <Grid container spacing={2}>
+                <Grid item xs={12}>
+                    <Paper
+                        sx={{
+                            p: 2,
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }}
+                    >
+                        <TextField
+                            id="urlInput"
+                            label={settings.i18n.t('urlInput')}
+                            variant="outlined"
+                            onChange={handleUrlChange}
+                        />
+                        <Grid container spacing={1} pt={2}>
+                            <Grid item>
+                                <Button variant="contained" onClick={() => sendUrl()} disabled={false}>{settings.i18n.t('startButton')}</Button>
+                            </Grid>
+                            <Grid item>
+                                <Button variant="contained" onClick={() => abort()}>{settings.i18n.t('abortAllButton')}</Button>
+
+                            </Grid>
+                        </Grid>
+                    </Paper>
+                </Grid>
+            </Grid>
+            <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
+                { /*Super big brain flatMap moment*/
+                    Array
+                        .from(messageMap)
+                        .filter(flattened => [...flattened][0])
+                        .filter(flattened => [...flattened][1].toString() !== 'Done!')
+                        .flatMap(message => (
+                            <Grid item xs={4} sm={8} md={6} key={message[0]}>
+                                {
+                                    /*
+                                        Message[0] => key, the pid which is shared with the progress and download Maps
+                                        Message[1] => value, the actual formatted message sent from server
+                                     */
+                                }
+                                <Fragment>
+                                    <StackableResult
+                                        formattedLog={message[1]}
+                                        title={downloadInfoMap.get(message[0])?.title}
+                                        thumbnail={downloadInfoMap.get(message[0])?.thumbnail}
+                                        resolution={downloadInfoMap.get(message[0])?.resolution}
+                                        progress={progressMap.get(message[0])}
+                                        stopCallback={() => abort(message[0])}
+                                    />
+                                </Fragment>
+                            </Grid>
+                        ))
+                }
+            </Grid>
+            <Snackbar
+                open={status.connected}
+                autoHideDuration={1500}
+                message="Connected"
+                onClose={() => dispatch(disconnected())}
+            />
+        </Container>
+    );
+}

frontend/src/Settings.tsx

@@ -0,0 +1,158 @@
+import { Box, Button, Container, FormControl, FormControlLabel, FormGroup, Grid, InputAdornment, InputLabel, MenuItem, Paper, Select, SelectChangeEvent, Snackbar, Stack, Switch, TextField, Toolbar, Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Socket } from "socket.io-client";
+import { LanguageUnion, setCliArgs, setLanguage, setServerAddr } from "./features/settings/settingsSlice";
+import { alreadyUpdated, updated } from "./features/status/statusSlice";
+import { RootState } from "./stores/store";
+import { validateDomain, validateIP } from "./utils";
+
+type Props = {
+    socket: Socket
+}
+
+export default function Settings({ socket }: Props) {
+    const settings = useSelector((state: RootState) => state.settings)
+    const status = useSelector((state: RootState) => state.status)
+    const dispatch = useDispatch()
+
+    const [halt, setHalt] = useState(false);
+    const [invalidIP, setInvalidIP] = useState(false);
+    const [updatedBin, setUpdatedBin] = useState(false);
+    const [freeDiskSpace, setFreeDiskSpace] = useState('');
+
+    /* Handle yt-dlp update success */
+    useEffect(() => {
+        socket.on('updated', () => {
+            setUpdatedBin(true)
+            setHalt(false)
+        })
+    }, [])
+
+    /* Get disk free space */
+    useEffect(() => {
+        socket.on('free-space', (res: string) => {
+            setFreeDiskSpace(res)
+        })
+    }, [])
+
+    /**
+     * Update the server ip address state and localstorage whenever the input value changes.  
+     * Validate the ip-addr then set.
+     * @param e Input change event
+     */
+    const handleAddrChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const input = e.target.value;
+        if (validateIP(input)) {
+            setInvalidIP(false)
+            dispatch(setServerAddr(input))
+        } else if (validateDomain(input)) {
+            setInvalidIP(false)
+            dispatch(setServerAddr(input))
+        } else {
+            setInvalidIP(true)
+        }
+    }
+
+    /**
+     * Language toggler handler 
+     */
+    const handleLanguageChage = (event: SelectChangeEvent<LanguageUnion>) => {
+        dispatch(setLanguage(event.target.value as LanguageUnion));
+    }
+
+    /**
+     * Send via WebSocket a message in order to update the yt-dlp binary from server
+     */
+    const updateBinary = () => {
+        socket.emit('update-bin')
+        dispatch(alreadyUpdated())
+    }
+
+
+    return (
+        <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+            <Grid container spacing={3}>
+                {/* Chart */}
+                <Grid item xs={12} md={12} lg={12}>
+                    <Paper
+                        sx={{
+                            p: 2,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            minHeight: 240,
+                        }}
+                    >
+                        <Typography pb={2} variant="h6" color="primary">
+                            {settings.i18n.t('settingsAnchor')}
+                        </Typography>
+                        <FormGroup>
+                            <TextField
+                                label={settings.i18n.t('serverAddressTitle')}
+                                defaultValue={settings.serverAddr}
+                                onChange={handleAddrChange}
+                                error={invalidIP}
+                                InputProps={{
+                                    startAdornment: <InputAdornment position="start">ws://</InputAdornment>,
+                                }}
+                                sx={{ mb: 2 }}
+                            />
+                            <FormControl fullWidth>
+                                <InputLabel id="demo-simple-select-label">Language</InputLabel>
+                                <Select
+                                    defaultValue={settings.language}
+                                    label="Language"
+                                    onChange={handleLanguageChage}
+                                >
+                                    <MenuItem value="english">English</MenuItem>
+                                    <MenuItem value="spanish">Spanish</MenuItem>
+                                    <MenuItem value="italian">Italian</MenuItem>
+                                    <MenuItem value="chinese">Chinese</MenuItem>
+                                    <MenuItem value="russian">Russian</MenuItem>
+                                    <MenuItem value="korean">Korean</MenuItem>
+                                </Select>
+                            </FormControl>
+                            <FormControlLabel
+                                control={
+                                    <Switch
+                                        defaultChecked={settings.cliArgs.noMTime}
+                                        onChange={() => dispatch(setCliArgs(settings.cliArgs.toggleNoMTime()))}
+                                    />
+                                }
+                                label={settings.i18n.t('noMTimeCheckbox')}
+                                sx={{ mt: 3 }}
+                            />
+                            <FormControlLabel
+                                control={
+                                    <Switch
+                                        defaultChecked={settings.cliArgs.extractAudio}
+                                        onChange={() => dispatch(setCliArgs(settings.cliArgs.toggleExtractAudio()))}
+                                    />
+                                }
+                                label={settings.i18n.t('extractAudioCheckbox')}
+                            />
+                            <Grid>
+                                <Stack direction="row">
+                                    <Button
+                                        sx={{ mr: 1, mt: 3 }}
+                                        variant="contained"
+                                        onClick={() => dispatch(updated())}
+                                    >
+                                        {settings.i18n.t('updateBinButton')}
+                                    </Button>
+                                    {/* <Button sx={{ mr: 1, mt: 1 }} variant="outlined">Primary</Button> */}
+                                </Stack>
+                            </Grid>
+                        </FormGroup>
+                    </Paper>
+                </Grid>
+            </Grid>
+            <Snackbar
+                open={status.updated}
+                autoHideDuration={1500}
+                message={settings.i18n.t('toastUpdated')}
+                onClose={updateBinary}
+            />
+        </Container>
+    );
+}

frontend/src/classes.ts

@@ -2,25 +2,27 @@ export class CliArguments {
     private _extractAudio: boolean;
     private _noMTime: boolean;
 
-    constructor() {
-        this._extractAudio = false;
-        this._noMTime = false;
+    constructor(extractAudio = false, noMTime = false) {
+        this._extractAudio = extractAudio;
+        this._noMTime = noMTime;
     }
 
     public get extractAudio(): boolean {
         return this._extractAudio;
     }
 
-    public set extractAudio(v: boolean) {
-        this._extractAudio = v;
+    public toggleExtractAudio() {
+        this._extractAudio = !this._extractAudio;
+        return this;
     }
 
     public get noMTime(): boolean {
         return this._noMTime;
     }
 
-    public set noMTime(v: boolean) {
-        this._noMTime = v;
+    public toggleNoMTime() {
+        this._noMTime = !this._noMTime;
+        return this;
     }
 
     public toString(): string {
@@ -37,7 +39,8 @@ export class CliArguments {
         return args.trim();
     }
 
-    public fromString(str: string): void {
+    public fromString(str: string): CliArguments {
+        if (str) {
             if (str.includes('-x')) {
                 this._extractAudio = true;
             }
@@ -46,4 +49,6 @@ export class CliArguments {
                 this._noMTime = true;
             }
         }
+        return this;
+    }
 }

frontend/src/components/StackableResult.tsx

@@ -1,53 +1,62 @@
 import { Fragment } from "react";
-import {
-    Row,
-    Col,
-    ProgressBar
-} from "react-bootstrap";
-import { Badge4kFill, Badge8kFill, BadgeHdFill } from "react-bootstrap-icons";
+import { EightK, FourK, Hd, Sd } from "@mui/icons-material";
+import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Chip, Grid, LinearProgress, Skeleton, Stack, Typography } from "@mui/material";
+import { IMessage } from "../interfaces";
+import { ellipsis } from "../utils";
 
 type Props = {
-    formattedLog: string,
+    formattedLog: IMessage,
     title: string,
     thumbnail: string,
     resolution: string
     progress: number,
+    stopCallback: VoidFunction,
 }
 
-export function StackableResult({ formattedLog, title, thumbnail, resolution, progress }: Props) {
+export function StackableResult({ formattedLog, title, thumbnail, resolution, progress, stopCallback }: Props) {
 
     const guessResolution = (xByY: string): JSX.Element => {
         if (!xByY) return null;
-        if (xByY.includes('4320')) return (<Badge8kFill></Badge8kFill>);
-        if (xByY.includes('2160')) return (<Badge4kFill></Badge4kFill>);
-        if (xByY.includes('1080')) return (<BadgeHdFill></BadgeHdFill>);
-        if (xByY.includes('720')) return (<BadgeHdFill></BadgeHdFill>);
+        if (xByY.includes('4320')) return (<EightK color="primary" />);
+        if (xByY.includes('2160')) return (<FourK color="primary" />);
+        if (xByY.includes('1080')) return (<Hd color="primary" />);
+        if (xByY.includes('720')) return (<Sd color="primary" />);
         return null;
     }
 
     return (
-        <Fragment>
-            <div className="mt-2 status-box">
-                <Row>
-                    {title ? <p>{title}</p> : null}
-                    <Col sm={9}>
-                        <h6>Status</h6>
-                        {!formattedLog ? <pre>Ready</pre> : null}
-                        <pre id='status'>{formattedLog}</pre>
-                    </Col>
-                    <Col sm={3}>
-                        <br />
-                        <img className="img-fluid rounded" src={thumbnail ? thumbnail : ''} />
-                    </Col>
-                    <div className="float-end">
+        <Card>
+            <CardActionArea>
+                {thumbnail ?
+                    <CardMedia
+                        component="img"
+                        height={180}
+                        image={thumbnail}
+                    /> :
+                    <Skeleton variant="rectangular" height={180} />
+                }
+                <CardContent>
+                    <Typography gutterBottom variant="h6" component="div">
+                        {ellipsis(title, 54)}
+                    </Typography>
+                    <Stack direction="row" spacing={1} py={2}>
+                        <Chip label={formattedLog.status} color="primary" />
+                        <Typography>{formattedLog.progress}</Typography>
+                        <Typography>{formattedLog.dlSpeed}</Typography>
+                        <Typography>{formattedLog.size}</Typography>
                         {guessResolution(resolution)}
-                    </div>
-                </Row>
-            </div>
+                    </Stack>
                     {progress ?
-                <ProgressBar className="container-padding mt-2" now={progress} variant="primary" /> :
+                        <LinearProgress variant="determinate" value={progress} /> :
                         null
                     }
-        </Fragment>
+                </CardContent>
+            </CardActionArea>
+            <CardActions>
+                <Button variant="contained" size="small" color="primary" onClick={stopCallback}>
+                    Stop
+                </Button>
+            </CardActions>
+        </Card>
     )
 }

frontend/src/features/settings/settingsSlice.ts

@@ -0,0 +1,50 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { CliArguments } from "../../classes"
+import { I18nBuilder } from "../../i18n"
+
+export type LanguageUnion = "english" | "chinese" | "russian" | "italian" | "spanish" | "korean"
+export type ThemeUnion = "light" | "dark"
+
+export interface SettingsState {
+    serverAddr: string,
+    language: LanguageUnion,
+    theme: ThemeUnion,
+    cliArgs: CliArguments,
+    i18n: I18nBuilder
+}
+
+const initialState: SettingsState = {
+    serverAddr: localStorage.getItem("server-addr") || "localhost",
+    language: (localStorage.getItem("language") || "english") as LanguageUnion,
+    theme: (localStorage.getItem("theme") || "light") as ThemeUnion,
+    cliArgs: localStorage.getItem("cli-args") ? new CliArguments().fromString(localStorage.getItem("cli-args")) : new CliArguments(false, true),
+    i18n: new I18nBuilder((localStorage.getItem("language") || "english")),
+}
+
+export const settingsSlice = createSlice({
+    name: "settings",
+    initialState,
+    reducers: {
+        setServerAddr: (state, action: PayloadAction<string>) => {
+            state.serverAddr = action.payload
+            localStorage.setItem("server-addr", action.payload)
+        },
+        setLanguage: (state, action: PayloadAction<LanguageUnion>) => {
+            state.language = action.payload
+            state.i18n.setLanguage(action.payload)
+            localStorage.setItem("language", action.payload)
+        },
+        setCliArgs: (state, action: PayloadAction<CliArguments>) => {
+            state.cliArgs = action.payload
+            localStorage.setItem("cli-args", action.payload.toString())
+        },
+        setTheme: (state, action: PayloadAction<ThemeUnion>) => {
+            state.theme = action.payload
+            localStorage.setItem("theme", action.payload)
+        },
+    }
+})
+
+export const { setLanguage, setCliArgs, setTheme, setServerAddr } = settingsSlice.actions
+
+export default settingsSlice.reducer

frontend/src/features/status/statusSlice.ts

@@ -0,0 +1,30 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+export interface StatusState {
+    connected: boolean,
+    updated: boolean,
+    downloading: boolean,
+}
+
+const initialState: StatusState = {
+    connected: false,
+    updated: false,
+    downloading: false,
+}
+
+export const statusSlice = createSlice({
+    name: 'status',
+    initialState,
+    reducers: {
+        connected: (state) => { state.connected = true },
+        disconnected: (state) => { state.connected = false },
+        updated: (state) => { state.updated = true },
+        alreadyUpdated: (state) => { state.updated = false },
+        downloading: (state) => { state.downloading = true },
+        finished: (state) => { state.downloading = false },
+    }
+})
+
+export const { connected, disconnected, updated, alreadyUpdated, downloading, finished } = statusSlice.actions
+
+export default statusSlice.reducer 

frontend/src/stores/store.ts

@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit'
+import settingsReducer from '../features/settings/settingsSlice'
+import statussReducer from '../features/status/statusSlice'
+
+export const store = configureStore({
+    reducer: {
+        settings: settingsReducer,
+        status: statussReducer,
+    },
+})
+
+export type RootState = ReturnType<typeof store.getState>
+
+export type AppDispatch = typeof store.dispatch
+

frontend/src/utils.ts

@@ -59,8 +59,9 @@ export function detectSpeed(str: string): number {
  */
 export const updateInStateMap = (k: number, v: any, target: Map<number, any>, callback: Function, remove: boolean = false) => {
     if (remove) {
-        target.delete(k)
-        callback(new Map(target))
+        const _target = target
+        _target.delete(k)
+        callback(new Map(_target))
         return;
     }
     callback(new Map(target.set(k, v)));

package.json

@@ -18,22 +18,30 @@
   "author": "marcobaobao",
   "license": "ISC",
   "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.6.4",
+    "@reduxjs/toolkit": "^1.8.1",
+    "@types/react-router-dom": "^5.3.3",
+    "babel-plugin-dev-expression": "^0.2.3",
     "better-sqlite3": "^7.4.5",
     "react": "^17.0.2",
-    "react-bootstrap": "2.0.2",
-    "react-bootstrap-icons": "^1.7.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^8.0.1",
+    "react-router-dom": "^6.3.0",
     "rxjs": "^7.4.0",
     "socket.io": "^4.3.2",
     "socket.io-client": "^4.3.2",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "vite": "^2.9.8"
   },
   "devDependencies": {
-    "@parcel/transformer-yaml": "^2.2.1",
-    "parcel": "^2.0.1",
-    "typescript": "^4.5.2",
+    "@parcel/transformer-yaml": "^2.5.0",
     "@types/better-sqlite3": "^7.4.2",
     "@types/node": "^17.0.13",
-    "@types/uuid": "^8.3.4"
+    "@types/uuid": "^8.3.4",
+    "parcel": "^2.5.0",
+    "typescript": "^4.5.2"
   }
 }

server/src/core/downloader.ts

@@ -46,7 +46,6 @@ export async function download(socket: Socket, payload: IPayload) {
     const p = new Process(url, params, settings);
 
     p.start().then(downloader => {
-
         pool.add(p)
         let infoLock = true;
         let pid = downloader.getPid();
@@ -91,7 +90,7 @@ export async function download(socket: Socket, payload: IPayload) {
  * @param {Socket} socket current connection socket
  * @returns 
  */
-export async function retriveDownload(socket: Socket) {
+export async function retrieveDownload(socket: Socket) {
     // it's a cold restart: the server has just been started with pending
     // downloads, so fetch them from the database and resume.
     if (coldRestart) {
@@ -110,7 +109,9 @@ export async function retriveDownload(socket: Socket) {
 
     // it's an hot-reload the server it's running and the frontend ask for
     // the pending job: retrieve them from the "in-memory database" (ProcessPool)
-    log.info('dl', `Retrieving ${pool.size()} jobs from pool`)
+    const _poolSize = pool.size()
+    log.info('dl', `Retrieving ${_poolSize} jobs from pool`)
+    socket.emit('pending-jobs', _poolSize)
 
     const it = pool.iterator();
     const tempWorkQueue = new Array();
@@ -169,6 +170,13 @@ export function abortAllDownloads(socket: Socket) {
         });
 }
 
+/**
+ * Get pool current size
+ */
+export function getQueueSize(): number {
+    return pool.size();
+}
+
 /**
  * @private Formats the yt-dlp stdout to a frontend-readable format
  * @param {string} stdout stdout as string

server/src/main.ts

@@ -2,8 +2,8 @@ import { logger, splash } from './utils/logger';
 import { join } from 'path';
 import { Server } from 'socket.io';
 import { ytdlpUpdater } from './utils/updater';
-import { download, abortDownload, retriveDownload, abortAllDownloads } from './core/downloader';
-import { retrieveAll, init } from './db/db';
+import { download, abortDownload, retrieveDownload, abortAllDownloads } from './core/downloader';
+import { init } from './db/db';
 import { getFreeDiskSpace } from './utils/procUtils';
 import Logger from './utils/BetterLogger';
 import Jean from './core/HTTPServer';
@@ -36,11 +36,8 @@ io.on('connection', socket => {
     socket.on('update-bin', () => {
         ytdlpUpdater(socket)
     })
-    socket.on('fetch-jobs', () => {
-        socket.emit('pending-jobs', retrieveAll())
-    })
     socket.on('retrieve-jobs', () => {
-        retriveDownload(socket)
+        retrieveDownload(socket)
     })
     socket.on('disk-space', () => {
         getFreeDiskSpace(socket)