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

Code refactoring and minor bugfixes

Browse Source
This commit is contained in:
marcobaobao
2022-08-30 18:28:40 +02:00
parent d99899eb16
commit fa5069f310
5 changed files with 79 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/Home.tsx
View File

@@ -1,4 +1,4 @@
import React, { Fragment, useEffect, useState } from "react"; import { FileUpload } from "@mui/icons-material";
import { import {
Backdrop, Backdrop,
Button, Button,
@@ -12,17 +12,18 @@ import {
Snackbar, Snackbar,
styled, styled,
TextField, TextField,
Typography, Typography
} from "@mui/material"; } from "@mui/material";
import { Buffer } from 'buffer';
import React, { Fragment, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { Socket } from "socket.io-client"; import { Socket } from "socket.io-client";
import { StackableResult } from "./components/StackableResult"; import { StackableResult } from "./components/StackableResult";
import { serverStates } from "./events";
import { connected, downloading, finished } from "./features/status/statusSlice"; import { connected, downloading, finished } from "./features/status/statusSlice";
import { IDLMetadata, IDLMetadataAndPID, IMessage } from "./interfaces"; import { IDLMetadata, IDLMetadataAndPID, IMessage } from "./interfaces";
import { RootState } from "./stores/store"; import { RootState } from "./stores/store";
import { isValidURL, toFormatArgs, updateInStateMap, } from "./utils"; import { isValidURL, toFormatArgs, updateInStateMap } from "./utils";
import { FileUpload } from "@mui/icons-material";
import { Buffer } from 'buffer';
type Props = { type Props = {
socket: Socket socket: Socket
@@ -86,9 +87,9 @@ export default function Home({ socket }: Props) {
/* Handle per-download progress */ /* Handle per-download progress */
useEffect(() => { useEffect(() => {
socket.on('progress', (data: IMessage) => { socket.on('progress', (data: IMessage) => {
if (data.status === 'Done!' || data.status === 'Aborted') { if (data.status === serverStates.PROG_DONE || data.status === serverStates.PROC_ABORT) {
setShowBackdrop(false) setShowBackdrop(false)
updateInStateMap<number, IMessage>(data.pid, 'Done!', messageMap, setMessageMap); updateInStateMap<number, IMessage>(data.pid, serverStates.PROG_DONE, messageMap, setMessageMap);
updateInStateMap<number, number>(data.pid, 0, progressMap, setProgressMap); updateInStateMap<number, number>(data.pid, 0, progressMap, setProgressMap);
socket.emit('disk-space') socket.emit('disk-space')
dispatch(finished()) dispatch(finished())
@@ -290,11 +291,14 @@ export default function Home({ socket }: Props) {
</Button> </Button>
</Grid> </Grid>
{/* video only */} {/* video only */}
<Grid item xs={12}> {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length ?
<Typography variant="body1" component="div"> <Grid item xs={12}>
Video data <Typography variant="body1" component="div">
</Typography> Video data {downloadFormats.formats[1].acodec}
</Grid> </Typography>
</Grid>
: null
}
{downloadFormats.formats {downloadFormats.formats
.filter(format => format.acodec === 'none' && format.vcodec !== 'none') .filter(format => format.acodec === 'none' && format.vcodec !== 'none')
.map((format, idx) => ( .map((format, idx) => (
@@ -312,11 +316,14 @@ export default function Home({ socket }: Props) {
</Grid> </Grid>
)) ))
} }
<Grid item xs={12}> {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length ?
<Typography variant="body1" component="div"> <Grid item xs={12}>
Audio data <Typography variant="body1" component="div">
</Typography> Audio data
</Grid> </Typography>
</Grid>
: null
}
{downloadFormats.formats {downloadFormats.formats
.filter(format => format.acodec !== 'none' && format.vcodec === 'none') .filter(format => format.acodec !== 'none' && format.vcodec === 'none')
.map((format, idx) => ( .map((format, idx) => (
@@ -360,7 +367,7 @@ export default function Home({ socket }: Props) {
Array Array
.from(messageMap) .from(messageMap)
.filter(flattened => [...flattened][0]) .filter(flattened => [...flattened][0])
.filter(flattened => [...flattened][1].toString() !== 'Done!') .filter(flattened => [...flattened][1].toString() !== serverStates.PROG_DONE)
.flatMap(message => ( .flatMap(message => (
<Grid item xs={4} sm={8} md={6} key={message[0]}> <Grid item xs={4} sm={8} md={6} key={message[0]}>
{ {

7
frontend/src/events.ts
View File

@@ -1,3 +1,10 @@
export function on(eventType: string, listener: any) { export function on(eventType: string, listener: any) {
document.addEventListener(eventType, listener) document.addEventListener(eventType, listener)
} }
export const serverStates = {
PROC_DOWNLOAD: 'download',
PROC_MERGING: 'merging',
PROC_ABORT: 'abort',
PROG_DONE: 'status_done',
}

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

@@ -2,15 +2,15 @@ import { spawn } from 'child_process';
import { from, interval } from 'rxjs'; import { from, interval } from 'rxjs';
import { map, throttle } from 'rxjs/operators'; import { map, throttle } from 'rxjs/operators';
import { Socket } from 'socket.io'; import { Socket } from 'socket.io';
import MemoryDB from '../db/memoryDB';
import { IPayload } from '../interfaces/IPayload'; import { IPayload } from '../interfaces/IPayload';
import { ISettings } from '../interfaces/ISettings'; import { ISettings } from '../interfaces/ISettings';
import Logger from '../utils/BetterLogger'; import Logger from '../utils/BetterLogger';
import Process from './Process'; import Process from './Process';
import MemoryDB from '../db/memoryDB'; import { states } from './states';
// settings read from settings.json // settings read from settings.json
let settings: ISettings; let settings: ISettings;
let coldRestart = true;
const log = Logger.instance; const log = Logger.instance;
const mem_db = new MemoryDB(); const mem_db = new MemoryDB();
@@ -29,9 +29,18 @@ catch (e) {
*/ */
export async function getFormatsAndMetadata(socket: Socket, url: string) { export async function getFormatsAndMetadata(socket: Socket, url: string) {
let p = new Process(url, [], settings); let p = new Process(url, [], settings);
const formats = await p.getMetadata(); try {
socket.emit('available-formats', formats) const formats = await p.getMetadata();
p = null; socket.emit('available-formats', formats)
} catch (e) {
log.warn('dl', e)
socket.emit('progress', {
status: states.PROG_DONE,
pid: -1,
});
} finally {
p = null;
}
} }
/** /**
@@ -43,7 +52,7 @@ export async function getFormatsAndMetadata(socket: Socket, url: string) {
*/ */
export async function download(socket: Socket, payload: IPayload) { export async function download(socket: Socket, payload: IPayload) {
if (!payload || payload.url === '' || payload.url === null) { if (!payload || payload.url === '' || payload.url === null) {
socket.emit('progress', { status: 'Done!' }); socket.emit('progress', { status: states.PROG_DONE });
return; return;
} }
@@ -67,12 +76,20 @@ export async function download(socket: Socket, payload: IPayload) {
* @param socket * @param socket
*/ */
function displayDownloadMetadata(process: Process, socket: Socket) { function displayDownloadMetadata(process: Process, socket: Socket) {
process.getMetadata().then(metadata => { process.getMetadata()
socket.emit('metadata', { .then(metadata => {
pid: process.getPid(), socket.emit('metadata', {
metadata: metadata, pid: process.getPid(),
}); metadata: metadata,
}); });
})
.catch((e) => {
socket.emit('progress', {
status: states.PROG_DONE,
pid: process.getPid(),
});
log.warn('dl', e)
})
} }
/** /**
@@ -83,7 +100,7 @@ function displayDownloadMetadata(process: Process, socket: Socket) {
function streamProcess(process: Process, socket: Socket) { function streamProcess(process: Process, socket: Socket) {
const emitAbort = () => { const emitAbort = () => {
socket.emit('progress', { socket.emit('progress', {
status: 'Done!', status: states.PROG_DONE,
pid: process.getPid(), pid: process.getPid(),
}); });
} }
@@ -168,7 +185,7 @@ export function abortDownload(socket: Socket, args: any) {
spawn('kill', [pid]) spawn('kill', [pid])
.on('exit', () => { .on('exit', () => {
socket.emit('progress', { socket.emit('progress', {
status: 'Aborted', status: states.PROC_ABORT,
process: pid, process: pid,
}); });
log.warn('dl', `Aborting download ${pid}`); log.warn('dl', `Aborting download ${pid}`);
@@ -182,7 +199,7 @@ export function abortDownload(socket: Socket, args: any) {
export function abortAllDownloads(socket: Socket) { export function abortAllDownloads(socket: Socket) {
spawn('killall', ['yt-dlp']) spawn('killall', ['yt-dlp'])
.on('exit', () => { .on('exit', () => {
socket.emit('progress', { status: 'Aborted' }); socket.emit('progress', { status: states.PROC_ABORT });
log.info('dl', 'Aborting downloads'); log.info('dl', 'Aborting downloads');
}); });
mem_db.flush(); mem_db.flush();
@@ -209,7 +226,7 @@ const formatter = (stdout: string, pid: number) => {
switch (status) { switch (status) {
case 'download': case 'download':
return { return {
status: 'download', status: states.PROC_DOWNLOAD,
progress: cleanStdout[1], progress: cleanStdout[1],
size: cleanStdout[3], size: cleanStdout[3],
dlSpeed: cleanStdout[5], dlSpeed: cleanStdout[5],
@@ -217,7 +234,7 @@ const formatter = (stdout: string, pid: number) => {
} }
case 'merge': case 'merge':
return { return {
status: 'merging', status: states.PROC_MERGING,
progress: '100', progress: '100',
} }
default: default:

9
server/src/core/states.ts Normal file
View File

@@ -0,0 +1,9 @@
/**
* Possible server states map
*/
export const states = {
PROC_DOWNLOAD: 'download',
PROC_MERGING: 'merging',
PROC_ABORT: 'abort',
PROG_DONE: 'status_done',
}

6
server/src/utils/logger.ts
View File

@@ -13,11 +13,13 @@ export const logger = (proto: string, args: string) => {
*/ */
export const splash = () => { export const splash = () => {
console.log(" __ ____ __ __ ______") const fg = "\u001b[38;2;50;113;168m"
const reset = "\u001b[0m"
console.log(`${fg} __ ____ __ __ ______`)
console.log(" __ __/ /________/ / /__ _ _____ / / / / / / _/") console.log(" __ __/ /________/ / /__ _ _____ / / / / / / _/")
console.log(" / // / __/___/ _ / / _ \ | |/|/ / -_) _ \/ /_/ // / ") console.log(" / // / __/___/ _ / / _ \ | |/|/ / -_) _ \/ /_/ // / ")
console.log(" \_, /\__/ \_,_/_/ .__/ |__,__/\__/_.__/\____/___/ ") console.log(" \_, /\__/ \_,_/_/ .__/ |__,__/\__/_.__/\____/___/ ")
console.log("/___/ /_/ \n") console.log(`/___/ /_/ \n${reset}`)
console.log(" yt-dlp-webUI - A web-ui for yt-dlp, simply enough") console.log(" yt-dlp-webUI - A web-ui for yt-dlp, simply enough")
console.log("---------------------------------------------------\n") console.log("---------------------------------------------------\n")
} }