code refactoring

.dockerignore

@@ -1,4 +1,5 @@
 node_modules
+downloads
 dist
 package-lock.json
 pnpm-lock.yaml

.gitignore

@@ -11,4 +11,5 @@ src/server/core/yt-dlp
 *.ytdl
 *.part
 *.db
+downloads
 .DS_Store

frontend/src/Home.tsx

@@ -1,9 +1,20 @@
-import { Backdrop, Button, ButtonGroup, CircularProgress, Container, Grid, Paper, Skeleton, Snackbar, TextField, Typography, } from "@mui/material";
 import React, { Fragment, useEffect, useState } from "react";
+import {
+    Backdrop,
+    Button,
+    ButtonGroup,
+    CircularProgress,
+    Container,
+    Grid,
+    Paper,
+    Snackbar,
+    TextField,
+    Typography,
+} from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
-import { io, Socket } from "socket.io-client";
+import { Socket } from "socket.io-client";
 import { StackableResult } from "./components/StackableResult";
-import { connected, disconnected, downloading, finished } from "./features/status/statusSlice";
+import { connected, downloading, finished } from "./features/status/statusSlice";
 import { IDLInfo, IDLInfoBase, IDownloadInfo, IMessage } from "./interfaces";
 import { RootState } from "./stores/store";
 import { toFormatArgs, updateInStateMap, } from "./utils";
@@ -106,7 +117,7 @@ export default function Home({ socket }: Props) {
             const input = document.getElementById('urlInput') as HTMLInputElement;
             input.value = '';
             setShowBackdrop(true);
-            setDownloadFormats(null);
+            setDownloadFormats(undefined);
         }, 250);
     }
 
@@ -148,7 +159,7 @@ export default function Home({ socket }: Props) {
             socket.emit('abort', { pid: id })
             return
         }
-        setDownloadFormats(null)
+        setDownloadFormats(undefined)
         socket.emit('abort-all')
     }
 
@@ -319,10 +330,10 @@ export default function Home({ socket }: Props) {
                                 <Fragment>
                                     <StackableResult
                                         formattedLog={message[1]}
-                                        title={downloadInfoMap.get(message[0])?.title}
+                                        title={downloadInfoMap.get(message[0])?.title ?? '...'}
-                                        thumbnail={downloadInfoMap.get(message[0])?.thumbnail}
+                                        thumbnail={downloadInfoMap.get(message[0])?.thumbnail ?? '...'}
-                                        resolution={downloadInfoMap.get(message[0])?.resolution}
+                                        resolution={downloadInfoMap.get(message[0])?.resolution ?? '...'}
-                                        progress={progressMap.get(message[0])}
+                                        progress={progressMap.get(message[0]) ?? 0}
                                         stopCallback={() => abort(message[0])}
                                     />
                                 </Fragment>

frontend/src/components/StackableResult.tsx

@@ -13,7 +13,7 @@ type Props = {
 }
 
 export function StackableResult({ formattedLog, title, thumbnail, resolution, progress, stopCallback }: Props) {
-    const guessResolution = (xByY: string): JSX.Element => {
+    const guessResolution = (xByY: string): any => {
         if (!xByY) return null;
         if (xByY.includes('4320')) return (<EightK color="primary" />);
         if (xByY.includes('2160')) return (<FourK color="primary" />);

pnpm-lock.yaml

@@ -133,9 +133,6 @@ packages:
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
     dependencies:
       '@babel/compat-data': 7.17.10
       '@babel/core': 7.18.2
@@ -248,9 +245,6 @@ packages:
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
     dependencies:
       '@babel/helper-plugin-utils': 7.16.7
     dev: false
@@ -260,9 +254,6 @@ packages:
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
     dependencies:
       '@babel/core': 7.18.2
       '@babel/helper-plugin-utils': 7.17.12
@@ -273,9 +264,6 @@ packages:
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
     dependencies:
       '@babel/core': 7.18.2
       '@babel/plugin-transform-react-jsx': 7.17.12_@babel+core@7.18.2
@@ -286,9 +274,6 @@ packages:
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
     dependencies:
       '@babel/core': 7.18.2
       '@babel/helper-plugin-utils': 7.17.12
@@ -299,9 +284,6 @@ packages:
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
     dependencies:
       '@babel/core': 7.18.2
       '@babel/helper-plugin-utils': 7.16.7
@@ -312,9 +294,6 @@ packages:
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
     dependencies:
       '@babel/core': 7.18.2
       '@babel/helper-annotate-as-pure': 7.16.7
@@ -377,9 +356,6 @@ packages:
     resolution: {integrity: sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==}
     peerDependencies:
       '@babel/core': ^7.0.0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
     dependencies:
       '@babel/helper-module-imports': 7.16.7
       '@babel/plugin-syntax-jsx': 7.16.7

server/src/core/downloadArchive.ts

@@ -1,18 +1,30 @@
-import { resolve } from "path";
+import { resolve as pathResolve } from "path";
 import { readdir } from "fs";
+import { ISettings } from "../interfaces/ISettings";
+import Logger from "../utils/BetterLogger";
 
+let settings: ISettings;
+const log = Logger.instance;
 
-const archived = [
+try {
-    {
+    settings = require('../../settings.json');
-        id: 1,
+} catch (e) {
-        title: '',
+    log.warn('dl', 'settings.json not found');
-        path: resolve(''),
+}
-        img: '',
+
-    },
+export function listDownloaded(ctx: any) {
-]
+    return new Promise((resolve, reject) => {
-
+        readdir(pathResolve(settings.download_path || 'download'), (err, files) => {
-export function listDownloaded(ctx: any, next: any) {
+            if (err) {
-    //readdir()
+                reject({ err: true })
-    ctx.body = archived
+                return
-    next()
+            }
+            ctx.body = files.map(file => {
+                resolve({
+                    filename: file,
+                    path: pathResolve(file),
+                })
+            })
+        })
+    })
 }

server/src/main.ts

@@ -4,14 +4,14 @@ import { Server } from 'socket.io';
 import { ytdlpUpdater } from './utils/updater';
 import { download, abortDownload, retrieveDownload, abortAllDownloads, getFormatsAndInfo } from './core/downloader';
 import { getFreeDiskSpace } from './utils/procUtils';
-import Logger from './utils/BetterLogger';
 import { listDownloaded } from './core/downloadArchive';
 import { createServer } from 'http';
+import { streamer } from './core/streamer';
 import * as Koa from 'koa';
 import * as Router from 'koa-router';
 import * as serve from 'koa-static';
 import * as cors from '@koa/cors';
-import { streamer } from './core/streamer';
+import Logger from './utils/BetterLogger';
 
 const app = new Koa();
 const server = createServer(app.callback());
@@ -25,7 +25,6 @@ const io = new Server(server, {
 });
 
 // Koa routing
-
 router.get('/settings', (ctx, next) => {
     ctx.redirect('/')
     next()
@@ -34,8 +33,16 @@ router.get('/downloaded', (ctx, next) => {
     ctx.redirect('/')
     next()
 })
-router.get('/getAllDownloaded', (ctx, next) => {
+router.get('/archive', (ctx, next) => {
-    listDownloaded(ctx, next)
+    listDownloaded(ctx)
+        .then((res: any) => {
+            ctx.body = res
+            next()
+        })
+        .catch((err: any) => {
+            ctx.body = err;
+            next()
+        })
 })
 router.get('/stream/:filepath', (ctx, next) => {
     streamer(ctx, next)
@@ -76,8 +83,8 @@ io.on('disconnect', (socket) => {
 })
 
 app.use(serve(join(__dirname, 'frontend')))
-app.use(router.routes())
 app.use(cors())
+app.use(router.routes())
 
 server.listen(process.env.PORT || 3022)
 

server/src/utils/procUtils.ts

@@ -1,7 +1,9 @@
 import { exec, spawn } from 'child_process';
 import fs = require('fs');
+import Logger from './BetterLogger';
 // import net = require('net');
-import { logger } from './logger';
+
+const log = Logger.instance;
 
 /**
  * Browse /proc in order to find the specific pid
@@ -12,7 +14,7 @@ export function existsInProc(pid: number): any {
     try {
         return fs.statSync(`/proc/${pid}`)
     } catch (e) {
-        logger('proc', `pid ${pid} not found in procfs`)
+        log.warn('proc', `pid ${pid} not found in procfs`)
     }
 }
 
@@ -36,12 +38,11 @@ function retriveStdoutFromProcFd(pid) {
 export async function killProcess(pid: number) {
     const res = spawn('kill', [String(pid)])
     res.on('exit', () => {
-        logger('proc', `Successfully killed yt-dlp process, pid: ${pid}`)
+        log.info('proc', `Successfully killed yt-dlp process, pid: ${pid}`)
     })
 }
 
 export function getFreeDiskSpace(socket: any) {
-    let buffer: string = '';
     let message: string = 'free-space';
     exec("df -h / | tail -1 | awk '{print $4}'", (_, stdout) => {
         socket.emit(message, stdout)

vite.config.ts

@@ -1,17 +1,18 @@
-import ViteYaml from '@modyfi/vite-plugin-yaml';
 import react from "@vitejs/plugin-react";
+import ViteYaml from '@modyfi/vite-plugin-yaml';
+import { defineConfig } from 'vite';
 import { resolve } from 'path';
 
-const config = {
+export default defineConfig(() => {
+    return {
         plugins: [
-        ViteYaml(),
             react(),
+            ViteYaml(),
         ],
-    root: './frontend',
+        root: resolve(__dirname, 'frontend'),
         build: {
             emptyOutDir: true,
             outDir: resolve(__dirname, 'dist', 'frontend'),
         }
-}
+    }
-
+})
-export default config