From 7dd812050a244f88c8e28fe53ee102c107bffe8d Mon Sep 17 00:00:00 2001 From: marcobaobao Date: Sat, 4 Jun 2022 11:46:32 +0200 Subject: [PATCH] Frontend optimizations --- frontend/src/App.tsx | 8 +++----- frontend/src/Home.tsx | 24 +++++++----------------- frontend/src/Settings.tsx | 8 +++++--- frontend/src/assets/i18n.yaml | 5 +++++ server/src/main.ts | 2 +- 5 files changed, 21 insertions(+), 26 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1ebd00e..d8711d4 100755 --- a/frontend/src/App.tsx +++ b/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() { > - }> - }> + }> + }> }> diff --git a/frontend/src/Home.tsx b/frontend/src/Home.tsx index e67949a..96ded18 100644 --- a/frontend/src/Home.tsx +++ b/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'); - }) - return () => { - socket.disconnect() - } + socket.emit('retrieve-jobs') + }); }, []) - /* 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); }) }, []) diff --git a/frontend/src/Settings.tsx b/frontend/src/Settings.tsx index 2012767..56aaaba 100644 --- a/frontend/src/Settings.tsx +++ b/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() diff --git a/frontend/src/assets/i18n.yaml b/frontend/src/assets/i18n.yaml index 1bafec1..d5717f9 100644 --- a/frontend/src/assets/i18n.yaml +++ b/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 diff --git a/server/src/main.ts b/server/src/main.ts index 01c672b..ee41db1 100644 --- a/server/src/main.ts +++ b/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) => {