optimized and future-proofed stdout parser

frontend/src/Settings.tsx

@@ -187,7 +187,7 @@ export default function Settings({ socket }: Props) {
                     </Select>
                   </FormControl>
                 </Grid>
-                                <Grid item xs={12} md={6}>
+                {/* <Grid item xs={12} md={6}>
                   <TextField
                     fullWidth
                     label={'Max download speed' || i18n.t('serverPortTitle')}
@@ -196,7 +196,7 @@ export default function Settings({ socket }: Props) {
                     error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
                     sx={{ mb: 2 }}
                   />
-                                </Grid>
+                </Grid> */}
               </Grid>
               <FormControlLabel
                 control={

frontend/src/classes.ts

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

frontend/src/components/StackableResult.tsx

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

frontend/src/interfaces.ts

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

server/src/core/Process.ts

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

server/src/core/downloader.ts

@@ -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
+    try {
-        .replace(/\s\s+/g, ' ')
+        const p: CLIProgress = JSON.parse(stdout);
-        .split(' ');
+        if (p) {
-    const status = cleanStdout[0].replace(/\[|\]|\r/g, '');
-    switch (status) {
-        case 'download':
             return {
                 status: states.PROC_DOWNLOAD,
-                progress: cleanStdout[1],
+                progress: p.percentage,
-                size: cleanStdout[3],
+                size: p.size,
-                dlSpeed: cleanStdout[5],
+                dlSpeed: p.speed,
                 pid: pid,
             }
-        case 'merge':
+        }
+    } catch (e) {
         return {
-                status: states.PROC_MERGING,
+            progress: 0,
-                progress: '100',
-            }
-        default:
-            return {
-                progress: '0'
         }
     }
 }

server/src/types/index.d.ts

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