Code refactoring and minor bugfixes

frontend/src/Home.tsx

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

frontend/src/events.ts

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

server/src/core/downloader.ts

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

server/src/core/states.ts

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

server/src/utils/logger.ts

@@ -13,11 +13,13 @@ export const logger = (proto: string, args: string) => {
  */
 
 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("/___/              /_/                                  \n")
+    console.log(`/___/              /_/                                \n${reset}`)
     console.log(" yt-dlp-webUI - A web-ui for yt-dlp, simply enough")
     console.log("---------------------------------------------------\n")
 }