diff --git a/frontend/package.json b/frontend/package.json
index 48cea88..7850656 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
{
"name": "yt-dlp-webui",
- "version": "2.0.7",
+ "version": "2.10.0",
"description": "Frontend compontent of yt-dlp-webui",
"scripts": {
"dev": "vite",
@@ -9,28 +9,28 @@
"author": "marcopeocchi",
"license": "MPL-2.0",
"dependencies": {
- "@emotion/react": "^11.11.0",
+ "@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.11.16",
- "@mui/material": "^5.13.2",
+ "@mui/material": "^5.13.5",
"@reduxjs/toolkit": "^1.9.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-redux": "^8.0.5",
- "react-router-dom": "^6.11.2",
+ "react-redux": "^8.1.1",
+ "react-router-dom": "^6.13.0",
"rxjs": "^7.8.1",
"uuid": "^9.0.0"
},
"devDependencies": {
"@modyfi/vite-plugin-yaml": "^1.0.4",
- "@types/node": "^20.2.4",
- "@types/react": "^18.2.7",
- "@types/react-dom": "^18.0.10",
+ "@types/node": "^20.3.1",
+ "@types/react": "^18.2.13",
+ "@types/react-dom": "^18.2.6",
"@types/react-router-dom": "^5.3.3",
- "@types/uuid": "^9.0.1",
- "@vitejs/plugin-react": "^4.0.0",
+ "@types/uuid": "^9.0.2",
+ "@vitejs/plugin-react": "^4.0.1",
"buffer": "^6.0.3",
- "typescript": "^5.0.4",
- "vite": "^4.3.8"
+ "typescript": "^5.1.3",
+ "vite": "^4.3.9"
}
}
\ No newline at end of file
diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx
index 21bd067..55b1ffe 100644
--- a/frontend/src/Layout.tsx
+++ b/frontend/src/Layout.tsx
@@ -34,7 +34,7 @@ import Drawer from './components/Drawer'
import Logout from './components/Logout'
import ThemeToggler from './components/ThemeToggler'
import I18nProvider from './providers/i18nProvider'
-import RPCCLientProvider from './providers/rpcClientProvider'
+import RPCClientProvider from './providers/rpcClientProvider'
import { formatGiB } from './utils'
export default function Layout() {
@@ -62,7 +62,7 @@ export default function Layout() {
return (
-
+
@@ -184,7 +184,7 @@ export default function Layout() {
-
+
)
diff --git a/frontend/src/components/DownloadDialog.tsx b/frontend/src/components/DownloadDialog.tsx
index 7280b66..45f3640 100644
--- a/frontend/src/components/DownloadDialog.tsx
+++ b/frontend/src/components/DownloadDialog.tsx
@@ -49,7 +49,6 @@ export default function DownloadDialog({ open, onClose }: Props) {
// redux state
const settings = useSelector((state: RootState) => state.settings)
const status = useSelector((state: RootState) => state.status)
- const dispatch = useDispatch()
// ephemeral state
const [downloadFormats, setDownloadFormats] = useState()
@@ -67,7 +66,8 @@ export default function DownloadDialog({ open, onClose }: Props) {
const [workingUrl, setWorkingUrl] = useState('')
// memos
- const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])
+ const cliArgs = useMemo(() =>
+ new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])
// context
const { i18n } = useContext(I18nContext)
@@ -210,7 +210,7 @@ export default function DownloadDialog({ open, onClose }: Props) {
-
+
({
client: new RPCClient()
})
-export default function RPCCLientProvider({ children }: Props) {
+export default function RPCClientProvider({ children }: Props) {
const settings = useSelector((state: RootState) => state.settings)
const client = useMemo(() => new RPCClient(), [
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index 8f6d925..ab8fd92 100644
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -1,3 +1,5 @@
+import type { RPCResponse } from "./types"
+
/**
* Validate an ip v4 via regex
* @param {string} ipAddr
@@ -68,9 +70,9 @@ export function toFormatArgs(codes: string[]): string {
return codes.reduce((v, a) => ` -f ${v}+${a}`)
}
if (codes.length === 1) {
- return ` -f ${codes[0]}`;
+ return ` -f ${codes[0]}`
}
- return '';
+ return ''
}
export function getWebSocketEndpoint() {
@@ -94,3 +96,7 @@ export const roundMiB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)} Mi
export const formatSpeedMiB = (val: number) => `${roundMiB(val)}/s`
export const dateTimeComparatorFunc = (a: string, b: string) => new Date(a).getTime() - new Date(b).getTime()
+
+export function isRPCResponse(object: any): object is RPCResponse {
+ return 'result' in object && 'id' in object
+}
\ No newline at end of file
diff --git a/frontend/src/views/Home.tsx b/frontend/src/views/Home.tsx
index f4853a4..47f0968 100644
--- a/frontend/src/views/Home.tsx
+++ b/frontend/src/views/Home.tsx
@@ -24,7 +24,7 @@ import { I18nContext } from '../providers/i18nProvider'
import { RPCClientContext } from '../providers/rpcClientProvider'
import { RootState } from '../stores/store'
import type { RPCResponse, RPCResult } from '../types'
-import { dateTimeComparatorFunc } from '../utils'
+import { dateTimeComparatorFunc, isRPCResponse } from '../utils'
export default function Home() {
// redux state
@@ -83,20 +83,14 @@ export default function Home() {
if (!status.connected) { return }
const sub = socket$.subscribe((event: RPCResponse) => {
- switch (typeof event.result) {
- case 'object':
- setActiveDownloads(
- (event.result ?? [])
- .filter((r) => !!r.info.url)
- .sort((a, b) => dateTimeComparatorFunc(
- b.info.created_at,
- a.info.created_at,
- ))
- )
- break
- default:
- break
- }
+ if (!isRPCResponse(event)) { return }
+
+ setActiveDownloads((event.result ?? [])
+ .filter(f => !!f.info.url)
+ .sort((a, b) => dateTimeComparatorFunc(
+ b.info.created_at,
+ a.info.created_at,
+ )))
})
return () => sub.unsubscribe()
}, [socket$, status.connected])
@@ -105,7 +99,7 @@ export default function Home() {
if (activeDownloads && activeDownloads.length >= 0) {
setShowBackdrop(false)
}
- }, [activeDownloads?.length])
+ }, [activeDownloads])
/**
* Abort a specific download if id's provided, other wise abort all running ones.