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

optimized and future-proofed stdout parser

Browse Source
This commit is contained in:
marcobaobao
2023-01-04 11:53:36 +01:00
parent 210f323b4a
commit e1ab4c2d1a
8 changed files with 270 additions and 993 deletions
Download Patch File Download Diff File Expand all files Collapse all files

460
frontend/src/Settings.tsx
View File

@@ -1,21 +1,21 @@
import {
Button,
Container,
FormControl,
FormControlLabel,
FormGroup,
Grid,
InputAdornment,
InputLabel,
MenuItem,
Paper,
Select,
SelectChangeEvent,
Snackbar,
Stack,
Switch,
TextField,
Typography
Button,
Container,
FormControl,
FormControlLabel,
FormGroup,
Grid,
InputAdornment,
InputLabel,
MenuItem,
Paper,
Select,
SelectChangeEvent,
Snackbar,
Stack,
Switch,
TextField,
Typography
} from "@mui/material";
import { useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
@@ -23,14 +23,14 @@ import { debounceTime, distinctUntilChanged, map, of, takeWhile } from "rxjs";
import { Socket } from "socket.io-client";
import { CliArguments } from "./classes";
import {
LanguageUnion,
setCliArgs,
setFormatSelection,
setLanguage,
setServerAddr,
setServerPort,
setTheme,
ThemeUnion
LanguageUnion,
setCliArgs,
setFormatSelection,
setLanguage,
setServerAddr,
setServerPort,
setTheme,
ThemeUnion
} from "./features/settings/settingsSlice";
import { alreadyUpdated, updated } from "./features/status/statusSlice";
import { I18nBuilder } from "./i18n";
@@ -38,220 +38,220 @@ import { RootState } from "./stores/store";
import { validateDomain, validateIP } from "./utils";
type Props = {
socket: Socket
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 settings = useSelector((state: RootState) => state.settings)
const status = useSelector((state: RootState) => state.status)
const dispatch = useDispatch()
const [invalidIP, setInvalidIP] = useState(false);
const [invalidIP, setInvalidIP] = useState(false);
const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])
/**
* Update the server ip address state and localstorage whenever the input value changes.
* Validate the ip-addr then set.s
* @param event Input change event
*/
const handleAddrChange = (event: any) => {
const $serverAddr = of(event)
.pipe(
map(event => event.target.value),
debounceTime(500),
distinctUntilChanged()
)
.subscribe(addr => {
if (validateIP(addr)) {
setInvalidIP(false)
dispatch(setServerAddr(addr))
} else if (validateDomain(addr)) {
setInvalidIP(false)
dispatch(setServerAddr(addr))
} else {
setInvalidIP(true)
}
})
return $serverAddr.unsubscribe()
}
const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])
/**
* Update the server ip address state and localstorage whenever the input value changes.
* Validate the ip-addr then set.s
* @param event Input change event
*/
const handleAddrChange = (event: any) => {
const $serverAddr = of(event)
.pipe(
map(event => event.target.value),
debounceTime(500),
distinctUntilChanged()
)
.subscribe(addr => {
if (validateIP(addr)) {
setInvalidIP(false)
dispatch(setServerAddr(addr))
} else if (validateDomain(addr)) {
setInvalidIP(false)
dispatch(setServerAddr(addr))
} else {
setInvalidIP(true)
}
})
return $serverAddr.unsubscribe()
}
/**
* Set server port
*/
const handlePortChange = (event: any) => {
const $port = of(event)
.pipe(
map(event => event.target.value),
map(val => Number(val)),
takeWhile(val => isFinite(val) && val <= 65535),
)
.subscribe(port => {
dispatch(setServerPort(port.toString()))
})
return $port.unsubscribe()
}
/**
* Set server port
*/
const handlePortChange = (event: any) => {
const $port = of(event)
.pipe(
map(event => event.target.value),
map(val => Number(val)),
takeWhile(val => isFinite(val) && val <= 65535),
)
.subscribe(port => {
dispatch(setServerPort(port.toString()))
})
return $port.unsubscribe()
}
/**
* Language toggler handler
*/
const handleLanguageChange = (event: SelectChangeEvent<LanguageUnion>) => {
dispatch(setLanguage(event.target.value as LanguageUnion));
}
/**
* Language toggler handler
*/
const handleLanguageChange = (event: SelectChangeEvent<LanguageUnion>) => {
dispatch(setLanguage(event.target.value as LanguageUnion));
}
/**
* Theme toggler handler
*/
const handleThemeChange = (event: SelectChangeEvent<ThemeUnion>) => {
dispatch(setTheme(event.target.value as ThemeUnion));
}
/**
* Theme toggler handler
*/
const handleThemeChange = (event: SelectChangeEvent<ThemeUnion>) => {
dispatch(setTheme(event.target.value as ThemeUnion));
}
/**
* Send via WebSocket a message in order to update the yt-dlp binary from server
*/
const updateBinary = () => {
socket.emit('update-bin')
dispatch(alreadyUpdated())
}
/**
* 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}>
<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">
{i18n.t('settingsAnchor')}
</Typography>
<FormGroup>
<Grid container spacing={2}>
<Grid item xs={12} md={11}>
<TextField
fullWidth
label={i18n.t('serverAddressTitle')}
defaultValue={settings.serverAddr}
error={invalidIP}
onChange={handleAddrChange}
InputProps={{
startAdornment: <InputAdornment position="start">ws://</InputAdornment>,
}}
sx={{ mb: 2 }}
/>
</Grid>
<Grid item xs={12} md={1}>
<TextField
fullWidth
label={i18n.t('serverPortTitle')}
defaultValue={settings.serverPort}
onChange={handlePortChange}
error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
sx={{ mb: 2 }}
/>
</Grid>
</Grid>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Language</InputLabel>
<Select
defaultValue={settings.language}
label="Language"
onChange={handleLanguageChange}
>
<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>
<MenuItem value="japanese">Japanese</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<FormControl fullWidth>
<InputLabel>Theme</InputLabel>
<Select
defaultValue={settings.theme}
label="Theme"
onChange={handleThemeChange}
>
<MenuItem value="light">Light</MenuItem>
<MenuItem value="dark">Dark</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<TextField
fullWidth
label={'Max download speed' || i18n.t('serverPortTitle')}
defaultValue={settings.serverPort}
onChange={handlePortChange}
error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
sx={{ mb: 2 }}
/>
</Grid>
</Grid>
<FormControlLabel
control={
<Switch
defaultChecked={cliArgs.noMTime}
onChange={() => dispatch(setCliArgs(cliArgs.toggleNoMTime().toString()))}
/>
}
label={i18n.t('noMTimeCheckbox')}
sx={{ mt: 3 }}
/>
<FormControlLabel
control={
<Switch
defaultChecked={cliArgs.extractAudio}
onChange={() => dispatch(setCliArgs(cliArgs.toggleExtractAudio().toString()))}
disabled={settings.formatSelection}
/>
}
label={i18n.t('extractAudioCheckbox')}
/>
<FormControlLabel
control={
<Switch
defaultChecked={settings.formatSelection}
onChange={() => {
dispatch(setCliArgs(cliArgs.disableExtractAudio().toString()))
dispatch(setFormatSelection(!settings.formatSelection))
}}
/>
}
label={i18n.t('formatSelectionEnabler')}
/>
<Grid>
<Stack direction="row">
<Button
sx={{ mr: 1, mt: 3 }}
variant="contained"
onClick={() => dispatch(updated())}
>
{i18n.t('updateBinButton')}
</Button>
{/* <Button sx={{ mr: 1, mt: 1 }} variant="outlined">Primary</Button> */}
</Stack>
</Grid>
</FormGroup>
</Paper>
return (
<Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
<Grid container spacing={3}>
<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">
{i18n.t('settingsAnchor')}
</Typography>
<FormGroup>
<Grid container spacing={2}>
<Grid item xs={12} md={11}>
<TextField
fullWidth
label={i18n.t('serverAddressTitle')}
defaultValue={settings.serverAddr}
error={invalidIP}
onChange={handleAddrChange}
InputProps={{
startAdornment: <InputAdornment position="start">ws://</InputAdornment>,
}}
sx={{ mb: 2 }}
/>
</Grid>
</Grid>
<Snackbar
open={status.updated}
autoHideDuration={1500}
message={i18n.t('toastUpdated')}
onClose={updateBinary}
/>
</Container>
);
<Grid item xs={12} md={1}>
<TextField
fullWidth
label={i18n.t('serverPortTitle')}
defaultValue={settings.serverPort}
onChange={handlePortChange}
error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
sx={{ mb: 2 }}
/>
</Grid>
</Grid>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Language</InputLabel>
<Select
defaultValue={settings.language}
label="Language"
onChange={handleLanguageChange}
>
<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>
<MenuItem value="japanese">Japanese</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<FormControl fullWidth>
<InputLabel>Theme</InputLabel>
<Select
defaultValue={settings.theme}
label="Theme"
onChange={handleThemeChange}
>
<MenuItem value="light">Light</MenuItem>
<MenuItem value="dark">Dark</MenuItem>
</Select>
</FormControl>
</Grid>
{/* <Grid item xs={12} md={6}>
<TextField
fullWidth
label={'Max download speed' || i18n.t('serverPortTitle')}
defaultValue={settings.serverPort}
onChange={handlePortChange}
error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
sx={{ mb: 2 }}
/>
</Grid> */}
</Grid>
<FormControlLabel
control={
<Switch
defaultChecked={cliArgs.noMTime}
onChange={() => dispatch(setCliArgs(cliArgs.toggleNoMTime().toString()))}
/>
}
label={i18n.t('noMTimeCheckbox')}
sx={{ mt: 3 }}
/>
<FormControlLabel
control={
<Switch
defaultChecked={cliArgs.extractAudio}
onChange={() => dispatch(setCliArgs(cliArgs.toggleExtractAudio().toString()))}
disabled={settings.formatSelection}
/>
}
label={i18n.t('extractAudioCheckbox')}
/>
<FormControlLabel
control={
<Switch
defaultChecked={settings.formatSelection}
onChange={() => {
dispatch(setCliArgs(cliArgs.disableExtractAudio().toString()))
dispatch(setFormatSelection(!settings.formatSelection))
}}
/>
}
label={i18n.t('formatSelectionEnabler')}
/>
<Grid>
<Stack direction="row">
<Button
sx={{ mr: 1, mt: 3 }}
variant="contained"
onClick={() => dispatch(updated())}
>
{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={i18n.t('toastUpdated')}
onClose={updateBinary}
/>
</Container>
);
}

2
frontend/src/classes.ts
View File

@@ -1,10 +1,12 @@
export class CliArguments {
private _extractAudio: boolean;
private _noMTime: boolean;
private _proxy: string;
constructor(extractAudio = false, noMTime = false) {
this._extractAudio = extractAudio;
this._noMTime = noMTime;
this._proxy = ""
}
public get extractAudio(): boolean {

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

@@ -23,6 +23,8 @@ export function StackableResult({ formattedLog, title, thumbnail, resolution, pr
return null;
}
const roundMB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)}MB`
return (
<Card>
<CardActionArea>
@@ -45,7 +47,7 @@ export function StackableResult({ formattedLog, title, thumbnail, resolution, pr
<Chip label={formattedLog.status} color="primary" />
<Typography>{formattedLog.progress}</Typography>
<Typography>{formattedLog.dlSpeed}</Typography>
<Typography>{formattedLog.size}</Typography>
<Typography>{roundMB(formattedLog.size ?? 0)}</Typography>
{guessResolution(resolution)}
</Stack>
{progress ?

2
frontend/src/interfaces.ts
View File

@@ -1,7 +1,7 @@
export interface IMessage {
status: string,
progress?: string,
size?: string,
size?: number,
dlSpeed?: string
pid: number
}

742
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

16
server/src/core/Process.ts
View File

@@ -24,6 +24,16 @@ class Process {
private metadata?: IDownloadMetadata;
private exePath = join(__dirname, 'yt-dlp');
private readonly template = `download:
{
"eta":%(progress.eta)s,
"percentage":"%(progress._percent_str)s",
"speed":"%(progress._speed_str)s",
"size":%(info.filesize_approx)s
}`
.replace(/\s\s+/g, ' ')
.replace('\n', '');
constructor(url: string, params: Array<string>, settings: any) {
this.url = url;
this.params = params || [];
@@ -48,7 +58,11 @@ class Process {
}
const ytldp = spawn(this.exePath,
['-o', `${this.settings?.download_path || 'downloads/'}%(title)s.%(ext)s`]
[
'-o', `${this.settings?.download_path || 'downloads/'}%(title)s.%(ext)s`,
'--progress-template', this.template,
'--no-colors',
]
.concat(sanitizedParams)
.concat((this.settings?.cliArgs ?? []).map(arg => arg.split(' ')).flat())
.concat([this.url])

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

@@ -5,6 +5,7 @@ import { Socket } from 'socket.io';
import MemoryDB from '../db/memoryDB';
import { IPayload } from '../interfaces/IPayload';
import { ISettings } from '../interfaces/ISettings';
import { CLIProgress } from '../types';
import Logger from '../utils/BetterLogger';
import Process from './Process';
import { states } from './states';
@@ -118,7 +119,6 @@ function streamProcess(process: Process, socket: Socket) {
.subscribe({
next: (stdout) => {
socket.emit('progress', stdout)
log.info(`proc-${stdout.pid}`, `${stdout.progress}\t${stdout.dlSpeed}`)
},
complete: () => {
process.kill().then(() => {
@@ -227,27 +227,20 @@ export function getQueueSize(): number {
* @returns
*/
const formatter = (stdout: string, pid: number) => {
const cleanStdout = stdout
.replace(/\s\s+/g, ' ')
.split(' ');
const status = cleanStdout[0].replace(/\[|\]|\r/g, '');
switch (status) {
case 'download':
try {
const p: CLIProgress = JSON.parse(stdout);
if (p) {
return {
status: states.PROC_DOWNLOAD,
progress: cleanStdout[1],
size: cleanStdout[3],
dlSpeed: cleanStdout[5],
progress: p.percentage,
size: p.size,
dlSpeed: p.speed,
pid: pid,
}
case 'merge':
return {
status: states.PROC_MERGING,
progress: '100',
}
default:
return {
progress: '0'
}
}
} catch (e) {
return {
progress: 0,
}
}
}

6
server/src/types/index.d.ts vendored Normal file
View File

@@ -0,0 +1,6 @@
export type CLIProgress = {
percentage: string
speed: string
size: number
eta: number
}