marco/yt-dlp-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MUI update

Browse Source
This commit is contained in:
marcobaobao
2022-05-06 00:49:23 +02:00
parent 053bb884d4
commit 018b208835
18 changed files with 1726 additions and 680 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
.vscode/launch.json vendored Normal file
View File

@@ -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}/*"
}
}
]
}

2
Dockerfile
View File

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

11
README.md
View File

@@ -20,12 +20,12 @@ Changelog:
Refactoring and JSDoc. Refactoring and JSDoc.
04/01/22: Background jobs now are retrieved!! It's still rudimentary but it leverages on yt-dlp resume feature 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 ## Settings
@@ -35,6 +35,9 @@ The avaible settings are currently only:
- Extract audio - Extract audio
- Switch language - 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: Future releases will have:
- ~~Multi download~~ *done* - ~~Multi download~~ *done*
- ~~Exctract audio~~ *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. - 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?** - **Am I forced to run it on port 3022?**
- Well, yes (until now). - 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 ## Todo list
- ~~retrieve background tasks~~ - ~~retrieve background tasks~~

BIN
downloads/.DS_Store vendored Normal file
View File

Binary file not shown.

4
frontend/index.html
View File

@@ -5,12 +5,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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> <title>yt-dlp Web UI</title>
</head> </head>

566
frontend/src/App.tsx
View File

@@ -1,407 +1,195 @@
import { io } from "socket.io-client"; import React, { useEffect } from "react"
import React, { useState, useEffect, useRef, Fragment } 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 { import {
Container, BrowserRouter as Router,
Row, Route,
Col, Routes,
InputGroup, Link,
FormControl, } from 'react-router-dom';
Button, import Home from "./Home";
ButtonGroup, import Settings from "./Settings";
} from "react-bootstrap"; import { io } from "socket.io-client";
import { StopFill, GearFill, Translate } from "react-bootstrap-icons"; import { RootState, store } from './stores/store';
import { buildMessage, updateInStateMap, validateDomain, validateIP } from "./utils"; import { Provider, useDispatch, useSelector } from "react-redux";
import { IDLInfo, IDLInfoBase, IMessage } from "./interfaces"; import { connected } from "./features/status/statusSlice";
import { MessageToast } from "./components/MessageToast";
import { StackableResult } from "./components/StackableResult"; const theme = createTheme();
import { CliArguments } from "./classes";
import { I18nBuilder } from "./i18n"; const drawerWidth: number = 240;
import './App.css';
import { Footer } from "./components/Footer";
const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`) const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
export function App() { interface AppBarProps extends MuiAppBarProps {
open?: boolean;
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', '')
} }
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*/ const status = useSelector((state: RootState) => state.status)
useEffect(() => { const dispatch = useDispatch()
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);
}
return ( return (
<main> <ThemeProvider theme={theme}>
<Container className="pb-5 main"> <Router>
<Row> <Box sx={{ display: 'flex' }}>
<Col lg={7} xs={12}> <CssBaseline />
<div className="mt-5" /> <AppBar position="absolute" open={open}>
<h1 className="fw-bold">yt-dlp WebUI</h1> <Toolbar
<div className="mt-5" /> sx={{
pr: '24px', // keep right padding when drawer closed
<div className="p-3 stack-box shadow"> }}
<InputGroup> >
<FormControl <IconButton
id="urlInput" edge="start"
className="url-input" color="inherit"
placeholder={i18n.t('urlInput')} aria-label="open drawer"
onChange={handleUrlChange} onClick={toggleDrawer}
/> sx={{
</InputGroup> 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 ? textDecoration: 'none',
<div className="mt-2 status-box"> color: '#222222'
<Row>
<Col sm={9}>
<h6>{i18n.t('statusTitle')}</h6>
<pre>{i18n.t('statusReady')}</pre>
</Col>
</Row>
</div> : null
} }
{ /*Super big brain flatMap moment*/ }>
Array.from(messageMap).flatMap(message => ( <ListItemButton disabled={status.downloading}>
<Fragment key={message[0]}> <ListItemIcon>
<Dashboard />
</ListItemIcon>
<ListItemText primary="Home" />
</ListItemButton>
</Link>
<Link to={'/settings'} style={
{ {
/* textDecoration: 'none',
Message[0] => key, the pid which is shared with the progress and download Maps color: '#222222'
Message[1] => value, the actual formatted message sent from server
*/
} }
{message[0] && message[1] && message[1] !== 'Done!' ? }>
<Fragment> <ListItemButton disabled={status.downloading}>
<StackableResult <ListItemIcon>
formattedLog={message[1]} <SettingsIcon />
title={downloadInfoMap.get(message[0])?.title} </ListItemIcon>
thumbnail={downloadInfoMap.get(message[0])?.thumbnail} <ListItemText primary="Settings" />
resolution={downloadInfoMap.get(message[0])?.resolution} </ListItemButton>
progress={progressMap.get(message[0])} /> </Link>
<Row> </List>
<Col> </Drawer>
<Button className="float-end buttonAbort" size="sm" onClick={() => abort(message[0])}> <Box
<StopFill className="mb-1"></StopFill> component="main"
</Button> sx={{
</Col> backgroundColor: (theme) =>
</Row> theme.palette.mode === 'light'
</Fragment> : null ? theme.palette.grey[100]
} : theme.palette.grey[900],
</Fragment> flexGrow: 1,
)) height: '100vh',
} overflow: 'auto',
<ButtonGroup className="mt-2"> }}
<Button onClick={() => sendUrl()} disabled={false}>{i18n.t('startButton')}</Button> >
<Button active onClick={() => abort()}>{i18n.t('abortAllButton')}</Button> <Toolbar />
</ButtonGroup> <Routes>
</div> <Route path="/" element={<Home socket={socket}></Home>}></Route>
<Route path="/settings" element={<Settings socket={socket}></Settings>}></Route>
<div className="my-4"> </Routes>
<span className="settings" onClick={() => setShowSettings(!showSettings)}> </Box>
<GearFill className="mb-1"></GearFill> </Box>
</span> </Router>
{' '} </ThemeProvider>
<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
} }
<div className="mt-5" /> export function App() {
<div> return (
<small> <Provider store={store}>
{i18n.t('bgReminder')} <AppContent></AppContent>
</small> </Provider>
</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>
)
} }

194
frontend/src/Home.tsx Normal file
View File

@@ -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>
);
}

158
frontend/src/Settings.tsx Normal file
View File

@@ -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>
);
}

21
frontend/src/classes.ts
View File

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

71
frontend/src/components/StackableResult.tsx
View File

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

50
frontend/src/features/settings/settingsSlice.ts Normal file
View File

@@ -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

30
frontend/src/features/status/statusSlice.ts Normal file
View File

@@ -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

15
frontend/src/stores/store.ts Normal file
View File

@@ -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

5
frontend/src/utils.ts
View File

@@ -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) => { export const updateInStateMap = (k: number, v: any, target: Map<number, any>, callback: Function, remove: boolean = false) => {
if (remove) { if (remove) {
target.delete(k) const _target = target
callback(new Map(target)) _target.delete(k)
callback(new Map(_target))
return; return;
} }
callback(new Map(target.set(k, v))); callback(new Map(target.set(k, v)));

22
package.json
View File

@@ -18,22 +18,30 @@
"author": "marcobaobao", "author": "marcobaobao",
"license": "ISC", "license": "ISC",
"dependencies": { "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", "better-sqlite3": "^7.4.5",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "2.0.2",
"react-bootstrap-icons": "^1.7.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-redux": "^8.0.1",
"react-router-dom": "^6.3.0",
"rxjs": "^7.4.0", "rxjs": "^7.4.0",
"socket.io": "^4.3.2", "socket.io": "^4.3.2",
"socket.io-client": "^4.3.2", "socket.io-client": "^4.3.2",
"uuid": "^8.3.2" "uuid": "^8.3.2",
"vite": "^2.9.8"
}, },
"devDependencies": { "devDependencies": {
"@parcel/transformer-yaml": "^2.2.1", "@parcel/transformer-yaml": "^2.5.0",
"parcel": "^2.0.1",
"typescript": "^4.5.2",
"@types/better-sqlite3": "^7.4.2", "@types/better-sqlite3": "^7.4.2",
"@types/node": "^17.0.13", "@types/node": "^17.0.13",
"@types/uuid": "^8.3.4" "@types/uuid": "^8.3.4",
"parcel": "^2.5.0",
"typescript": "^4.5.2"
} }
} }

1187
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

14
server/src/core/downloader.ts
View File

@@ -46,7 +46,6 @@ export async function download(socket: Socket, payload: IPayload) {
const p = new Process(url, params, settings); const p = new Process(url, params, settings);
p.start().then(downloader => { p.start().then(downloader => {
pool.add(p) pool.add(p)
let infoLock = true; let infoLock = true;
let pid = downloader.getPid(); let pid = downloader.getPid();
@@ -91,7 +90,7 @@ export async function download(socket: Socket, payload: IPayload) {
* @param {Socket} socket current connection socket * @param {Socket} socket current connection socket
* @returns * @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 // it's a cold restart: the server has just been started with pending
// downloads, so fetch them from the database and resume. // downloads, so fetch them from the database and resume.
if (coldRestart) { 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 // 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) // 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 it = pool.iterator();
const tempWorkQueue = new Array(); 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 * @private Formats the yt-dlp stdout to a frontend-readable format
* @param {string} stdout stdout as string * @param {string} stdout stdout as string

9
server/src/main.ts
View File

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