Frontend optimizations

frontend/src/App.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react"
 import { ThemeProvider } from "@emotion/react";
 import {
-    Badge,
     Box,
     createTheme, CssBaseline,
     Divider,
@@ -16,7 +15,7 @@ import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
 import {
     ChevronLeft,
     Dashboard,
-    Download,
+    // Download,
     Menu, Settings as SettingsIcon,
     SettingsEthernet,
     Storage,
@@ -35,7 +34,6 @@ import { RootState, store } from './stores/store';
 import { Provider, useSelector } from "react-redux";
 import ArchivedDownloads from "./Archived";
 
-
 const drawerWidth: number = 240;
 
 const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
@@ -237,8 +235,8 @@ function AppContent() {
                     >
                         <Toolbar />
                         <Routes>
-                            <Route path="/" element={<Home></Home>}></Route>
+                            <Route path="/" element={<Home socket={socket}></Home>}></Route>
-                            <Route path="/settings" element={<Settings></Settings>}></Route>
+                            <Route path="/settings" element={<Settings socket={socket}></Settings>}></Route>
                             <Route path="/downloaded" element={<ArchivedDownloads></ArchivedDownloads>}></Route>
                         </Routes>
                     </Box>

frontend/src/Home.tsx

@@ -8,9 +8,11 @@ import { IDLInfo, IDLInfoBase, IDownloadInfo, IMessage } from "./interfaces";
 import { RootState } from "./stores/store";
 import { toFormatArgs, updateInStateMap, } from "./utils";
 
-let socket: Socket;
+type Props = {
+    socket: Socket
+}
 
-export default function Home() {
+export default function Home({ socket }: Props) {
     // redux state
     const settings = useSelector((state: RootState) => state.settings)
     const status = useSelector((state: RootState) => state.status)
@@ -30,27 +32,16 @@ export default function Home() {
     const [showBackdrop, setShowBackdrop] = useState(false);
 
     /* -------------------- Effects -------------------- */
-    useEffect(() => {
-        socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`);
-        return () => {
-            socket.disconnect()
-        };
-    }, [])
-
     /* WebSocket connect event handler*/
     useEffect(() => {
         socket.on('connect', () => {
-            dispatch(connected());
+            dispatch(connected())
             socket.emit('fetch-jobs')
             socket.emit('disk-space')
-            socket.emit('retrieve-jobs');
+            socket.emit('retrieve-jobs')
-        })
+        });
-        return () => {
-            socket.disconnect()
-        }
     }, [])
 
-
     /* Ask server for pending jobs / background jobs */
     useEffect(() => {
         socket.on('pending-jobs', (count: number) => {
@@ -62,7 +53,6 @@ export default function Home() {
     useEffect(() => {
         socket.on('available-formats', (data: IDownloadInfo) => {
             setShowBackdrop(false)
-            console.log(data)
             setDownloadFormats(data);
         })
     }, [])

frontend/src/Settings.tsx

@@ -19,15 +19,17 @@ import {
 } from "@mui/material";
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { io } from "socket.io-client";
+import { io, Socket } from "socket.io-client";
 import { LanguageUnion, setCliArgs, setFormatSelection, setLanguage, setServerAddr, setTheme, ThemeUnion } from "./features/settings/settingsSlice";
 import { alreadyUpdated, updated } from "./features/status/statusSlice";
 import { RootState } from "./stores/store";
 import { validateDomain, validateIP } from "./utils";
 
-const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
+type Props = {
+    socket: Socket
+}
 
-export default function Settings() {
+export default function Settings({ socket }: Props) {
     const settings = useSelector((state: RootState) => state.settings)
     const status = useSelector((state: RootState) => state.status)
     const dispatch = useDispatch()

frontend/src/assets/i18n.yaml

@@ -33,6 +33,7 @@ languages:
     bgReminder: Chiusa questa UI il download continuerà in background.
     toastConnected: 'Connesso a '
     toastUpdated: yt-dlp aggiornato con successo!
+    formatSelectionEnabler: Abilita la selezione dei formati audio/video
   chinese:
     urlInput: YouTube 或其他受支持服务的视频网址
     statusTitle: 状态
@@ -49,6 +50,7 @@ languages:
     bgReminder: 关闭页面后，下载会继续在后台运行。
     toastConnected: '已连接到 '
     toastUpdated: 已更新 yt-dlp 可执行文件！
+    formatSelectionEnabler: Enable video/audio formats selection
   spanish:
     urlInput: YouTube or other supported service video url
     statusTitle: Status
@@ -65,6 +67,7 @@ languages:
     bgReminder: Once you close this page the download will continue in the background.
     toastConnected: 'Connected to '
     toastUpdated: Updated yt-dlp binary!
+    formatSelectionEnabler: Enable video/audio formats selection
   russian:
     urlInput: YouTube or other supported service video url
     statusTitle: Status
@@ -81,6 +84,7 @@ languages:
     bgReminder: Once you close this page the download will continue in the background.
     toastConnected: 'Connected to '
     toastUpdated: Updated yt-dlp binary!
+    formatSelectionEnabler: Enable video/audio formats selection
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -97,3 +101,4 @@ languages:
     bgReminder: 이 페이지를 닫아도 백그라운드에서 다운로드가 계속됩니다
     toastConnected: '다음으로 연결됨 '
     toastUpdated: yt-dlp 바이너리를 업데이트 했습니다
+    formatSelectionEnabler: Enable video/audio formats selection

server/src/main.ts

@@ -51,7 +51,7 @@ io.on('connection', socket => {
         download(socket, args)
     })
     socket.on('send-url-format-selection', (args) => {
-        logger('ws', args?.url)
+        logger('ws', `Formats ${args?.url}`)
         if (args.url) getFormatsAndInfo(socket, args?.url)
     })
     socket.on('abort', (args) => {