marco/yt-dlp-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend performance, rpc/rest jwt authentication

Browse Source
This commit is contained in:
marcobaobao
2023-06-22 11:31:24 +02:00
parent 78c1559e84
commit d6c0646756
24 changed files with 691 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@@ -14,6 +14,7 @@
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.13.2",
"@reduxjs/toolkit": "^1.9.5",
"fp-ts": "^2.16.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",

206
frontend/src/App.tsx
View File

@@ -1,208 +1,12 @@
import { ThemeProvider } from '@emotion/react'
import ChevronLeft from '@mui/icons-material/ChevronLeft'
import Dashboard from '@mui/icons-material/Dashboard'
import Menu from '@mui/icons-material/Menu'
import SettingsIcon from '@mui/icons-material/Settings'
import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
import Storage from '@mui/icons-material/Storage'
import { Box, createTheme } from '@mui/material'
import CircularProgress from '@mui/material/CircularProgress'
import CssBaseline from '@mui/material/CssBaseline'
import Divider from '@mui/material/Divider'
import IconButton from '@mui/material/IconButton'
import List from '@mui/material/List'
import ListItemButton from '@mui/material/ListItemButton'
import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
import DownloadIcon from '@mui/icons-material/Download';
import { grey } from '@mui/material/colors'
import { Suspense, lazy, useMemo, useState } from 'react'
import { Provider, useDispatch, useSelector } from 'react-redux'
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
import { RootState, store } from './stores/store'
import AppBar from './components/AppBar'
import Drawer from './components/Drawer'
import Archive from './Archive'
import { formatGiB } from './utils'
function AppContent() {
const [open, setOpen] = useState(false)
const settings = useSelector((state: RootState) => state.settings)
const status = useSelector((state: RootState) => state.status)
const mode = settings.theme
const theme = useMemo(() =>
createTheme({
palette: {
mode: settings.theme,
background: {
default: settings.theme === 'light' ? grey[50] : '#121212'
},
},
}), [settings.theme]
)
const toggleDrawer = () => {
setOpen(!open)
}
const Home = lazy(() => import('./Home'))
const Settings = lazy(() => import('./Settings'))
return (
<ThemeProvider theme={theme}>
<BrowserRouter>
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar position="absolute" open={open}>
<Toolbar sx={{ pr: '24px' }}>
<IconButton
edge="start"
color="inherit"
aria-label="open drawer"
onClick={toggleDrawer}
sx={{
marginRight: '36px',
...(open && { display: 'none' }),
}}
>
<Menu />
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
sx={{ flexGrow: 1 }}
>
yt-dlp WebUI
</Typography>
{
status.freeSpace ?
<div style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}>
<Storage />
<span>&nbsp;{formatGiB(status.freeSpace)}&nbsp;</span>
</div>
: null
}
<div style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}>
<SettingsEthernet />
<span>&nbsp;{status.connected ? settings.serverAddr : 'not connected'}</span>
</div>
</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
<Toolbar
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
px: [1],
}}
>
<IconButton onClick={toggleDrawer}>
<ChevronLeft />
</IconButton>
</Toolbar>
<Divider />
<List component="nav">
<Link to={'/'} style={
{
textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE'
}
}>
<ListItemButton disabled={status.downloading}>
<ListItemIcon>
<Dashboard />
</ListItemIcon>
<ListItemText primary="Home" />
</ListItemButton>
</Link>
<Link to={'/archive'} style={
{
textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE'
}
}>
<ListItemButton disabled={status.downloading}>
<ListItemIcon>
<DownloadIcon />
</ListItemIcon>
<ListItemText primary="Archive" />
</ListItemButton>
</Link>
<Link to={'/settings'} style={
{
textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE'
}
}>
<ListItemButton disabled={status.downloading}>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText primary="Settings" />
</ListItemButton>
</Link>
</List>
</Drawer>
<Box
component="main"
sx={{
flexGrow: 1,
height: '100vh',
overflow: 'auto',
}}
>
<Toolbar />
<Routes>
<Route path="/" element={
<Suspense fallback={<CircularProgress />}>
<Home />
</Suspense>
} />
<Route path="/settings" element={
<Suspense fallback={<CircularProgress />}>
<Settings />
</Suspense>
} />
<Route path="/archive" element={
<Suspense fallback={<CircularProgress />}>
<Archive />
</Suspense>
} />
</Routes>
</Box>
</Box>
</BrowserRouter>
</ThemeProvider>
)
}
import { Provider } from 'react-redux'
import { RouterProvider } from 'react-router-dom'
import { router } from './router'
import { store } from './stores/store'
export function App() {
return (
<Provider store={store}>
<AppContent />
<RouterProvider router={router} />
</Provider>
)
}

181
frontend/src/Layout.tsx Normal file
View File

@@ -0,0 +1,181 @@
import { ThemeProvider } from '@emotion/react'
import ChevronLeft from '@mui/icons-material/ChevronLeft'
import Dashboard from '@mui/icons-material/Dashboard'
import Menu from '@mui/icons-material/Menu'
import SettingsIcon from '@mui/icons-material/Settings'
import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
import Storage from '@mui/icons-material/Storage'
import { Box, createTheme } from '@mui/material'
import DownloadIcon from '@mui/icons-material/Download'
import CssBaseline from '@mui/material/CssBaseline'
import Divider from '@mui/material/Divider'
import IconButton from '@mui/material/IconButton'
import List from '@mui/material/List'
import ListItemButton from '@mui/material/ListItemButton'
import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
import { grey } from '@mui/material/colors'
import { useMemo, useState } from 'react'
import { useSelector } from 'react-redux'
import { Link, Outlet } from 'react-router-dom'
import { RootState } from './stores/store'
import AppBar from './components/AppBar'
import Drawer from './components/Drawer'
import Logout from './components/Logout'
import { formatGiB } from './utils'
import ThemeToggler from './components/ThemeToggler'
export default function Layout() {
const [open, setOpen] = useState(false)
const settings = useSelector((state: RootState) => state.settings)
const status = useSelector((state: RootState) => state.status)
const mode = settings.theme
const theme = useMemo(() =>
createTheme({
palette: {
mode: settings.theme,
background: {
default: settings.theme === 'light' ? grey[50] : '#121212'
},
},
}), [settings.theme]
)
const toggleDrawer = () => {
setOpen(state => !state)
}
return (
<ThemeProvider theme={theme}>
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar position="absolute" open={open}>
<Toolbar sx={{ pr: '24px' }}>
<IconButton
edge="start"
color="inherit"
aria-label="open drawer"
onClick={toggleDrawer}
sx={{
marginRight: '36px',
...(open && { display: 'none' }),
}}
>
<Menu />
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
sx={{ flexGrow: 1 }}
>
yt-dlp WebUI
</Typography>
{
status.freeSpace ?
<div style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}>
<Storage />
<span>&nbsp;{formatGiB(status.freeSpace)}&nbsp;</span>
</div>
: null
}
<div style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}>
<SettingsEthernet />
<span>&nbsp;{status.connected ? settings.serverAddr : 'not connected'}</span>
</div>
</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
<Toolbar
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
px: [1],
}}
>
<IconButton onClick={toggleDrawer}>
<ChevronLeft />
</IconButton>
</Toolbar>
<Divider />
<List component="nav">
<Link to={'/'} style={
{
textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE'
}
}>
<ListItemButton disabled={status.downloading}>
<ListItemIcon>
<Dashboard />
</ListItemIcon>
<ListItemText primary="Home" />
</ListItemButton>
</Link>
<Link to={'/archive'} style={
{
textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE'
}
}>
<ListItemButton disabled={status.downloading}>
<ListItemIcon>
<DownloadIcon />
</ListItemIcon>
<ListItemText primary="Archive" />
</ListItemButton>
</Link>
<Link to={'/settings'} style={
{
textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE'
}
}>
<ListItemButton disabled={status.downloading}>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText primary="Settings" />
</ListItemButton>
</Link>
<ThemeToggler />
<Logout />
</List>
</Drawer>
<Box
component="main"
sx={{
flexGrow: 1,
height: '100vh',
overflow: 'auto',
}}
>
<Toolbar />
<Outlet />
</Box>
</Box>
</ThemeProvider>
)
}

24
frontend/src/components/Logout.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
import LogoutIcon from '@mui/icons-material/Logout'
import { getHttpEndpoint } from '../utils'
import { useNavigate } from 'react-router-dom'
export default function Logout() {
const navigate = useNavigate()
const logout = async () => {
const res = await fetch(`${getHttpEndpoint()}/auth/logout`)
if (res.ok) {
navigate('/login')
}
}
return (
<ListItemButton onClick={logout}>
<ListItemIcon>
<LogoutIcon />
</ListItemIcon>
<ListItemText primary="Authentication" />
</ListItemButton>
)
}

27
frontend/src/components/ThemeToggler.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
import { useDispatch, useSelector } from 'react-redux'
import { setTheme } from '../features/settings/settingsSlice'
import { RootState } from '../stores/store'
import { Brightness4, Brightness5 } from '@mui/icons-material'
export default function ThemeToggler() {
const settings = useSelector((state: RootState) => state.settings)
const dispatch = useDispatch()
return (
<ListItemButton onClick={() => {
settings.theme === 'light'
? dispatch(setTheme('dark'))
: dispatch(setTheme('light'))
}}>
<ListItemIcon>
{
settings.theme === 'light'
? <Brightness4 />
: <Brightness5 />
}
</ListItemIcon>
<ListItemText primary="Toggle theme" />
</ListItemButton>
)
}

7
frontend/src/index.tsx
View File

@@ -3,8 +3,9 @@ import { createRoot } from 'react-dom/client'
import { App } from './App'
const root = createRoot(document.getElementById('root')!)
root.render(
<StrictMode>
<App />
</StrictMode>
<StrictMode>
<App />
</StrictMode>
)

38
frontend/src/features/core/argsParser.ts → frontend/src/lib/argsParser.ts
View File

@@ -1,39 +1,39 @@
export class CliArguments {
private _extractAudio: boolean;
private _noMTime: boolean;
private _proxy: string;
private _extractAudio: boolean
private _noMTime: boolean
private _proxy: string
constructor(extractAudio = false, noMTime = false) {
this._extractAudio = extractAudio;
this._noMTime = noMTime;
constructor(extractAudio = false, noMTime = true) {
this._extractAudio = extractAudio
this._noMTime = noMTime
this._proxy = ""
}
public get extractAudio(): boolean {
return this._extractAudio;
return this._extractAudio
}
public toggleExtractAudio() {
this._extractAudio = !this._extractAudio;
return this;
this._extractAudio = !this._extractAudio
return this
}
public disableExtractAudio() {
this._extractAudio = false;
return this;
this._extractAudio = false
return this
}
public get noMTime(): boolean {
return this._noMTime;
return this._noMTime
}
public toggleNoMTime() {
this._noMTime = !this._noMTime;
return this;
this._noMTime = !this._noMTime
return this
}
public toString(): string {
let args = '';
let args = ''
if (this._extractAudio) {
args += '-x '
@@ -43,19 +43,19 @@ export class CliArguments {
args += '--no-mtime '
}
return args.trim();
return args.trim()
}
public fromString(str: string): CliArguments {
if (str) {
if (str.includes('-x')) {
this._extractAudio = true;
this._extractAudio = true
}
if (str.includes('--no-mtime')) {
this._noMTime = true;
this._noMTime = true
}
}
return this;
return this
}
}

0
frontend/src/features/core/events.ts → frontend/src/lib/events.ts
View File

21
frontend/src/lib/httpClient.ts Normal file
View File

@@ -0,0 +1,21 @@
import * as E from 'fp-ts/Either'
import { pipe } from 'fp-ts/function'
type FetchInit = {
url: string,
opt?: RequestInit
}
export async function ffetch<T>(
url: string,
onSuccess: (res: T) => void,
onError: (err: string) => void,
opt?: RequestInit,
) {
const res = await fetch(url, opt)
if (!res.ok) {
onError(await res.text())
return
}
onSuccess(await res.json() as T)
}

2
frontend/src/features/core/intl.ts → frontend/src/lib/intl.ts
View File

@@ -1,5 +1,5 @@
// @ts-nocheck
import i18n from "../../assets/i18n.yaml"
import i18n from "../assets/i18n.yaml"
export default class I18nBuilder {
private language: string

4
frontend/src/features/core/rpcClient.ts → frontend/src/lib/rpcClient.ts
View File

@@ -1,7 +1,7 @@
import type { DLMetadata, RPCRequest, RPCResponse } from '../../types'
import type { DLMetadata, RPCRequest, RPCResponse } from '../types'
import { webSocket } from 'rxjs/webSocket'
import { getHttpRPCEndpoint, getWebSocketEndpoint } from '../../utils'
import { getHttpRPCEndpoint, getWebSocketEndpoint } from '../utils'
export const socket$ = webSocket<any>(getWebSocketEndpoint())

50
frontend/src/router.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { CircularProgress } from '@mui/material'
import { Suspense, lazy } from 'react'
import { createBrowserRouter } from 'react-router-dom'
import Layout from './Layout'
const Home = lazy(() => import('./views/Home'))
const Login = lazy(() => import('./views/Login'))
const Archive = lazy(() => import('./views/Archive'))
const Settings = lazy(() => import('./views/Settings'))
export const router = createBrowserRouter([
{
path: '/',
Component: () => <Layout />,
children: [
{
path: '/',
element: (
<Suspense fallback={<CircularProgress />}>
<Home />
</Suspense >
)
},
{
path: '/settings',
element: (
<Suspense fallback={<CircularProgress />}>
<Settings />
</Suspense >
)
},
{
path: '/archive',
element: (
<Suspense fallback={<CircularProgress />}>
<Archive />
</Suspense >
)
},
{
path: '/login',
element: (
<Suspense fallback={<CircularProgress />}>
<Login />
</Suspense >
)
},
]
},
])

64
frontend/src/utils.ts
View File

@@ -4,8 +4,8 @@
* @returns ip validity test
*/
export function validateIP(ipAddr: string): boolean {
let ipRegex = /^(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}$/gm
return ipRegex.test(ipAddr)
let ipRegex = /^(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}$/gm
return ipRegex.test(ipAddr)
}
/**
@@ -18,8 +18,8 @@ export function validateIP(ipAddr: string): boolean {
* @returns domain validity test
*/
export function validateDomain(domainName: string): boolean {
let domainRegex = /[^@ \t\r\n]+.[^@ \t\r\n]+\.[^@ \t\r\n]+/
return domainRegex.test(domainName) || domainName === 'localhost'
let domainRegex = /[^@ \t\r\n]+.[^@ \t\r\n]+\.[^@ \t\r\n]+/
return domainRegex.test(domainName) || domainName === 'localhost'
}
/**
@@ -34,15 +34,15 @@ export function validateDomain(domainName: string): boolean {
* @returns url validity test
*/
export function isValidURL(url: string): boolean {
let urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
return urlRegex.test(url)
let urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
return urlRegex.test(url)
}
export function ellipsis(str: string, lim: number): string {
if (str) {
return str.length > lim ? `${str.substring(0, lim)}...` : str
}
return ''
if (str) {
return str.length > lim ? `${str.substring(0, lim)}...` : str
}
return ''
}
/**
@@ -51,43 +51,43 @@ export function ellipsis(str: string, lim: number): string {
* @returns download speed in KiB/s
*/
export function detectSpeed(str: string): number {
let effective = str.match(/[\d,]+(\.\d+)?/)![0]
const unit = str.replace(effective, '')
switch (unit) {
case 'MiB/s':
return Number(effective) * 1000
case 'KiB/s':
return Number(effective)
default:
return 0
}
let effective = str.match(/[\d,]+(\.\d+)?/)![0]
const unit = str.replace(effective, '')
switch (unit) {
case 'MiB/s':
return Number(effective) * 1000
case 'KiB/s':
return Number(effective)
default:
return 0
}
}
export function toFormatArgs(codes: string[]): string {
if (codes.length > 1) {
return codes.reduce((v, a) => ` -f ${v}+${a}`)
}
if (codes.length === 1) {
return ` -f ${codes[0]}`;
}
return '';
if (codes.length > 1) {
return codes.reduce((v, a) => ` -f ${v}+${a}`)
}
if (codes.length === 1) {
return ` -f ${codes[0]}`;
}
return '';
}
export function getWebSocketEndpoint() {
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
return `${protocol}://${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}/ws-rpc`
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
return `${protocol}://${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}/rpc/ws`
}
export function getHttpRPCEndpoint() {
return `${window.location.protocol}//${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}/http-rpc`
return `${window.location.protocol}//${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}/rpc/http`
}
export function getHttpEndpoint() {
return `${window.location.protocol}//${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}`
return `${window.location.protocol}//${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}`
}
export function formatGiB(bytes: number) {
return `${(bytes / 1_000_000_000).toFixed(0)}GiB`
return `${(bytes / 1_000_000_000).toFixed(0)}GiB`
}
export const roundMiB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)} MiB`

42
frontend/src/Archive.tsx → frontend/src/views/Archive.tsx
View File

@@ -30,13 +30,16 @@ import { Buffer } from 'buffer'
import { useEffect, useMemo, useState, useTransition } from 'react'
import { useSelector } from 'react-redux'
import { BehaviorSubject, Subject, combineLatestWith, map, share } from 'rxjs'
import { useObservable } from './hooks/observable'
import { RootState } from './stores/store'
import { DeleteRequest, DirectoryEntry } from './types'
import { roundMiB } from './utils'
import { useObservable } from '../hooks/observable'
import { RootState } from '../stores/store'
import { DeleteRequest, DirectoryEntry } from '../types'
import { roundMiB } from '../utils'
import { useNavigate } from 'react-router-dom'
import { ffetch } from '../lib/httpClient'
export default function Downloaded() {
const settings = useSelector((state: RootState) => state.settings)
const navigate = useNavigate()
const [openDialog, setOpenDialog] = useState(false)
@@ -48,17 +51,20 @@ export default function Downloaded() {
const [isPending, startTransition] = useTransition()
const fetcher = () => fetch(`${serverAddr}/downloaded`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
subdir: '',
})
})
.then(res => res.json())
.then(data => files$.next(data))
const fetcher = () => ffetch<DirectoryEntry[]>(
`${serverAddr}/archive/downloaded`,
(d) => files$.next(d),
() => navigate('/login'),
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
subdir: '',
})
}
)
const fetcherSubfolder = (sub: string) => {
const folders = sub.startsWith('/')
@@ -74,7 +80,7 @@ export default function Downloaded() {
? ['.', ..._upperLevel].join('/')
: _upperLevel.join('/')
fetch(`${serverAddr}/downloaded`, {
fetch(`${serverAddr}/archive/downloaded`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -114,7 +120,7 @@ export default function Downloaded() {
const deleteSelected = () => {
Promise.all(selectable
.filter(entry => entry.selected)
.map(entry => fetch(`${serverAddr}/delete`, {
.map(entry => fetch(`${serverAddr}/archive/delete`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -133,7 +139,7 @@ export default function Downloaded() {
const onFileClick = (path: string) => startTransition(() => {
window.open(`${serverAddr}/d/${Buffer.from(path).toString('hex')}`)
window.open(`${serverAddr}/archive/d/${Buffer.from(path).toString('hex')}`)
})
const onFolderClick = (path: string) => startTransition(() => {

98
frontend/src/Home.tsx → frontend/src/views/Home.tsx
View File

@@ -24,17 +24,17 @@ import {
import { Buffer } from 'buffer'
import { useEffect, useMemo, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { DownloadsCardView } from './components/DownloadsCardView'
import { DownloadsListView } from './components/DownloadsListView'
import FormatsGrid from './components/FormatsGrid'
import { CliArguments } from './features/core/argsParser'
import I18nBuilder from './features/core/intl'
import { RPCClient, socket$ } from './features/core/rpcClient'
import { toggleListView } from './features/settings/settingsSlice'
import { connected, setFreeSpace } from './features/status/statusSlice'
import { RootState } from './stores/store'
import type { DLMetadata, RPCResponse, RPCResult } from './types'
import { isValidURL, toFormatArgs } from './utils'
import { DownloadsCardView } from '../components/DownloadsCardView'
import { DownloadsListView } from '../components/DownloadsListView'
import FormatsGrid from '../components/FormatsGrid'
import { CliArguments } from '../lib/argsParser'
import I18nBuilder from '../lib/intl'
import { RPCClient, socket$ } from '../lib/rpcClient'
import { toggleListView } from '../features/settings/settingsSlice'
import { connected, setFreeSpace } from '../features/status/statusSlice'
import { RootState } from '../stores/store'
import type { DLMetadata, RPCResponse, RPCResult } from '../types'
import { isValidURL, toFormatArgs } from '../utils'
export default function Home() {
// redux state
@@ -76,24 +76,24 @@ export default function Home() {
/* WebSocket connect event handler*/
useEffect(() => {
if (!status.connected) {
const sub = socket$.subscribe({
next: () => {
dispatch(connected())
setCustomArgs(localStorage.getItem('last-input-args') ?? '')
setFilenameOverride(localStorage.getItem('last-filename-override') ?? '')
},
error: () => {
setSocketHasError(true)
setShowBackdrop(false)
},
complete: () => {
setSocketHasError(true)
setShowBackdrop(false)
},
})
return () => sub.unsubscribe()
}
if (status.connected) { return }
const sub = socket$.subscribe({
next: () => {
dispatch(connected())
setCustomArgs(localStorage.getItem('last-input-args') ?? '')
setFilenameOverride(localStorage.getItem('last-filename-override') ?? '')
},
error: () => {
setSocketHasError(true)
setShowBackdrop(false)
},
complete: () => {
setSocketHasError(true)
setShowBackdrop(false)
},
})
return () => sub.unsubscribe()
}, [socket$, status.connected])
useEffect(() => {
@@ -109,22 +109,22 @@ export default function Home() {
}, [])
useEffect(() => {
if (status.connected) {
const sub = socket$.subscribe((event: RPCResponse<RPCResult[]>) => {
switch (typeof event.result) {
case 'object':
setActiveDownloads(
(event.result ?? [])
.filter((r) => !!r.info.url)
.sort((a, b) => a.info.title.localeCompare(b.info.title))
)
break
default:
break
}
})
return () => sub.unsubscribe()
}
if (!status.connected) { return }
const sub = socket$.subscribe((event: RPCResponse<RPCResult[]>) => {
switch (typeof event.result) {
case 'object':
setActiveDownloads(
(event.result ?? [])
.filter((r) => !!r.info.url)
.sort((a, b) => a.info.title.localeCompare(b.info.title))
)
break
default:
break
}
})
return () => sub.unsubscribe()
}, [socket$, status.connected])
useEffect(() => {
@@ -166,7 +166,7 @@ export default function Home() {
resetInput()
setShowBackdrop(true)
setDownloadFormats(undefined)
}, 250);
}, 250)
}
/**
@@ -246,7 +246,7 @@ export default function Home() {
const resetInput = () => {
urlInputRef.current!.value = '';
if (customFilenameInputRef.current) {
customFilenameInputRef.current!.value = '';
customFilenameInputRef.current!.value = ''
}
}
@@ -254,7 +254,7 @@ export default function Home() {
const Input = styled('input')({
display: 'none',
});
})
return (
<Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
@@ -423,5 +423,5 @@ export default function Home() {
/>
</SpeedDial>
</Container>
);
)
}

78
frontend/src/views/Login.tsx Normal file
View File

@@ -0,0 +1,78 @@
/*
Login view component
*/
import styled from '@emotion/styled'
import {
Button,
Container,
Paper,
Stack,
TextField,
Typography
} from '@mui/material'
import { getHttpEndpoint } from '../utils'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
const LoginContainer = styled(Container)({
display: 'flex',
minWidth: '100%',
minHeight: '100vh',
alignItems: 'center',
justifyContent: 'center',
})
const Title = styled(Typography)({
display: 'flex',
width: '100%',
alignItems: 'center',
justifyContent: 'center',
paddingBottom: '0.5rem'
})
export default function Login() {
const [secret, setSecret] = useState('')
const [formHasError, setFormHasError] = useState(false)
const navigate = useNavigate()
const login = async () => {
const res = await fetch(`${getHttpEndpoint()}/auth/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
secret
})
})
res.ok ? navigate('/') : setFormHasError(true)
}
return (
<LoginContainer>
<Paper sx={{ padding: '1.5rem', minWidth: '25%' }}>
<Stack direction="column" spacing={2}>
<Title fontWeight={'700'} fontSize={32} color={'primary'}>
yt-dlp WebUI
</Title>
<Title fontWeight={'500'} fontSize={16} color={'gray'}>
Authentication token will expire after 30 days.
</Title>
<TextField
id="outlined-password-input"
label="RPC secret"
type="password"
autoComplete="current-password"
error={formHasError}
onChange={e => setSecret(e.currentTarget.value)}
/>
<Button variant="contained" size="large" onClick={() => login()}>
Submit
</Button>
</Stack>
</Paper>
</LoginContainer>
)
}

14
frontend/src/Settings.tsx → frontend/src/views/Settings.tsx
View File

@@ -26,9 +26,9 @@ import {
map,
takeWhile
} from 'rxjs'
import { CliArguments } from './features/core/argsParser'
import I18nBuilder from './features/core/intl'
import { RPCClient } from './features/core/rpcClient'
import { CliArguments } from '../lib/argsParser'
import I18nBuilder from '../lib/intl'
import { RPCClient } from '../lib/rpcClient'
import {
LanguageUnion,
ThemeUnion,
@@ -41,10 +41,10 @@ import {
setServerAddr,
setServerPort,
setTheme
} from './features/settings/settingsSlice'
import { updated } from './features/status/statusSlice'
import { RootState } from './stores/store'
import { validateDomain, validateIP } from './utils'
} from '../features/settings/settingsSlice'
import { updated } from '../features/status/statusSlice'
import { RootState } from '../stores/store'
import { validateDomain, validateIP } from '../utils'
export default function Settings() {
const dispatch = useDispatch()