code optimisation

frontend/src/App.tsx

@@ -164,7 +164,7 @@ function AppContent() {
                                 flexWrap: 'wrap',
                             }}>
                                 <SettingsEthernet></SettingsEthernet>
-                                <span>&nbsp;{settings.serverAddr}</span>
+                                <span>&nbsp;{status.connected ? settings.serverAddr : 'not connected'}</span>
                             </div>
                         </Toolbar>
                     </AppBar>

frontend/src/Home.tsx

@@ -30,6 +30,7 @@ export default function Home({ socket }: Props) {
     const [url, setUrl] = useState('');
     const [workingUrl, setWorkingUrl] = useState('');
     const [showBackdrop, setShowBackdrop] = useState(false);
+    const [showToast, setShowToast] = useState(true);
 
     /* -------------------- Effects -------------------- */
     /* WebSocket connect event handler*/
@@ -330,10 +331,10 @@ export default function Home({ socket }: Props) {
                 }
             </Grid>
             <Snackbar
-                open={status.connected}
+                open={showToast === status.connected}
                 autoHideDuration={1500}
                 message="Connected"
-                onClose={() => dispatch(disconnected())}
+                onClose={() => setShowToast(false)}
             />
         </Container>
     );

frontend/src/Settings.tsx

@@ -62,7 +62,7 @@ export default function Settings({ socket }: Props) {
     }
 
     /**
-     * Language toggler handler 
+     * Theme toggler handler 
      */
     const handleThemeChange = (event: SelectChangeEvent<ThemeUnion>) => {
         dispatch(setTheme(event.target.value as ThemeUnion));
@@ -76,7 +76,6 @@ export default function Settings({ socket }: Props) {
         dispatch(alreadyUpdated())
     }
 
-
     return (
         <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
             <Grid container spacing={3}>

server/src/core/Process.ts

@@ -5,11 +5,10 @@ import { ISettings } from '../interfaces/ISettings';
 import { availableParams } from '../utils/params';
 import Logger from '../utils/BetterLogger';
 
-const log = new Logger();
+const log = Logger.instance;
 
 /**
  * Represents a download process that spawns yt-dlp.
- * @constructor
  * @param url - The downlaod url.
  * @param params - The cli arguments passed by the frontend.
  * @param settings - The download settings passed by the frontend.

server/src/core/downloadArchive.ts

@@ -1,15 +1,18 @@
 import { resolve } from "path";
+import { readdir } from "fs";
+
 
 const archived = [
     {
         id: 1,
-        title: 'AleXa (알렉사) – Voting Open in American Song Contest Grand Final!',
-        path: resolve('downloads/AleXa (알렉사) – Voting Open in American Song Contest Grand Final!.webm'),
-        img: 'https://i.ytimg.com/vi/WbBUz7pjUnM/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAi5MNtvpgnY9aRpdFlhAfhdV7Zlg',
+        title: '',
+        path: resolve(''),
+        img: '',
     },
 ]
 
 export function listDownloaded(ctx: any, next: any) {
+    //readdir()
     ctx.body = archived
     next()
 }

server/src/core/downloader.ts

@@ -12,7 +12,7 @@ import ProcessPool from './ProcessPool';
 // settings read from settings.json
 let settings: ISettings;
 let coldRestart = true;
-const log = new Logger();
+const log = Logger.instance;
 
 const pool = new ProcessPool();
 

server/src/main.ts

@@ -1,4 +1,4 @@
-import { logger, splash } from './utils/logger';
+import { splash } from './utils/logger';
 import { join } from 'path';
 import { Server } from 'socket.io';
 import { ytdlpUpdater } from './utils/updater';
@@ -16,7 +16,7 @@ import { streamer } from './core/streamer';
 const app = new Koa();
 const server = createServer(app.callback());
 const router = new Router();
-const log = new Logger();
+const log = Logger.instance;
 const io = new Server(server, {
     cors: {
         origin: "*",
@@ -44,14 +44,14 @@ router.get('/stream/:filepath', (ctx, next) => {
 // WebSocket listeners
 
 io.on('connection', socket => {
-    logger('ws', `${socket.handshake.address} connected!`)
+    log.info('ws', `${socket.handshake.address} connected!`)
 
     socket.on('send-url', (args) => {
-        logger('ws', args?.url)
+        log.info('ws', args?.url)
         download(socket, args)
     })
     socket.on('send-url-format-selection', (args) => {
-        logger('ws', `Formats ${args?.url}`)
+        log.info('ws', `Formats ${args?.url}`)
         if (args.url) getFormatsAndInfo(socket, args?.url)
     })
     socket.on('abort', (args) => {
@@ -72,7 +72,7 @@ io.on('connection', socket => {
 })
 
 io.on('disconnect', (socket) => {
-    logger('ws', `${socket.handshake.address} disconnected`)
+    log.info('ws', `${socket.handshake.address} disconnected`)
 })
 
 app.use(serve(join(__dirname, 'frontend')))

server/src/utils/BetterLogger.ts

@@ -4,9 +4,22 @@ const ansi = {
     cyan: '\u001b[36m',
     green: '\u001b[32m',
     yellow: '\u001b[93m',
+    bold: '\u001b[1m',
+    normal: '\u001b[22m',
 }
 
 class Logger {
+    private static _instance: Logger;
+
+    constructor() { };
+
+    static get instance() {
+        if (this._instance) {
+            return this._instance
+        }
+        this._instance = new Logger()
+        return this._instance;
+    }
     /**
      * Print a standard info message
      * @param {string} proto the context/protocol/section outputting the message
@@ -39,7 +52,7 @@ class Logger {
     }
 
     private formatter(proto: any, args: any) {
-        return `[${proto}]\t${args}\n`
+        return `${ansi.bold}[${proto}]${ansi.normal}\t${args}\n`
     }
 }
 

server/src/utils/logger.ts

@@ -11,8 +11,13 @@ export const logger = (proto: string, args: string) => {
 /**
  * CLI splash
  */
+
 export const splash = () => {
-    console.log("-------------------------------------------------")
-    console.log("yt-dlp-webUI - A web-ui for yt-dlp, simply enough")
-    console.log("-------------------------------------------------")
+    console.log("        __         ____                  __   __  ______")
+    console.log("  __ __/ /________/ / /__    _    _____ / /  / / / /  _/")
+    console.log(" / // / __/___/ _  / / _ \  | |/|/ / -_) _ \/ /_/ // /  ")
+    console.log(" \_, /\__/    \_,_/_/ .__/  |__,__/\__/_.__/\____/___/  ")
+    console.log("/___/              /_/                                  \n")
+    console.log(" yt-dlp-webUI - A web-ui for yt-dlp, simply enough")
+    console.log("---------------------------------------------------\n")
 }