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

frontend performance optimizations

Browse Source
This commit is contained in:
marcobaobao
2023-11-02 10:42:59 +01:00
parent f49f072963
commit 1d9dabd397
4 changed files with 129 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
frontend/src/Layout.tsx
View File

@@ -55,126 +55,125 @@ export default function Layout() {
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<SocketSubscriber> <SocketSubscriber />
<Helmet> <Helmet>
<title> <title>
{settings.appTitle} {settings.appTitle}
</title> </title>
</Helmet> </Helmet>
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
<CssBaseline /> <CssBaseline />
<AppBar position="absolute" open={open}> <AppBar position="absolute" open={open}>
<Toolbar sx={{ pr: '24px' }}> <Toolbar sx={{ pr: '24px' }}>
<IconButton <IconButton
edge="start" edge="start"
color="inherit" color="inherit"
aria-label="open drawer" aria-label="open drawer"
onClick={toggleDrawer} onClick={toggleDrawer}
sx={{
marginRight: '36px',
...(open && { display: 'none' }),
}}
>
<Menu />
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
sx={{ flexGrow: 1 }}
>
{settings.appTitle}
</Typography>
<Suspense fallback={i18n.t('loadingLabel')}>
<FreeSpaceIndicator />
</Suspense>
<div style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
marginLeft: '4px',
gap: 3,
}}>
<SettingsEthernet />
<span>
{isConnected ? settings.serverAddr : i18n.t('notConnectedText')}
</span>
</div>
</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
<Toolbar
sx={{ sx={{
display: 'flex', marginRight: '36px',
alignItems: 'center', ...(open && { display: 'none' }),
justifyContent: 'flex-end',
px: [1],
}} }}
> >
<IconButton onClick={toggleDrawer}> <Menu />
<ChevronLeft /> </IconButton>
</IconButton> <Typography
</Toolbar> component="h1"
<Divider /> variant="h6"
<List component="nav"> color="inherit"
<Link to={'/'} style={ noWrap
{ sx={{ flexGrow: 1 }}
textDecoration: 'none', >
color: mode === 'dark' ? '#ffffff' : '#000000DE' {settings.appTitle}
} </Typography>
}> <Suspense fallback={i18n.t('loadingLabel')}>
<ListItemButton> <FreeSpaceIndicator />
<ListItemIcon> </Suspense>
<Dashboard /> <div style={{
</ListItemIcon> display: 'flex',
<ListItemText primary={i18n.t('homeButtonLabel')} /> alignItems: 'center',
</ListItemButton> flexWrap: 'wrap',
</Link> marginLeft: '4px',
<Link to={'/archive'} style={ gap: 3,
{ }}>
textDecoration: 'none', <SettingsEthernet />
color: mode === 'dark' ? '#ffffff' : '#000000DE' <span>
} {isConnected ? settings.serverAddr : i18n.t('notConnectedText')}
}> </span>
<ListItemButton> </div>
<ListItemIcon> </Toolbar>
<DownloadIcon /> </AppBar>
</ListItemIcon> <Drawer variant="permanent" open={open}>
<ListItemText primary={i18n.t('archiveButtonLabel')} /> <Toolbar
</ListItemButton>
</Link>
<Link to={'/settings'} style={
{
textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE'
}
}>
<ListItemButton>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText primary={i18n.t('settingsButtonLabel')} />
</ListItemButton>
</Link>
<ThemeToggler />
<Logout />
</List>
</Drawer>
<Box
component="main"
sx={{ sx={{
flexGrow: 1, display: 'flex',
height: '100vh', alignItems: 'center',
overflow: 'auto', justifyContent: 'flex-end',
px: [1],
}} }}
> >
<Toolbar /> <IconButton onClick={toggleDrawer}>
<Outlet /> <ChevronLeft />
</Box> </IconButton>
</Toolbar>
<Divider />
<List component="nav">
<Link to={'/'} style={
{
textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE'
}
}>
<ListItemButton>
<ListItemIcon>
<Dashboard />
</ListItemIcon>
<ListItemText primary={i18n.t('homeButtonLabel')} />
</ListItemButton>
</Link>
<Link to={'/archive'} style={
{
textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE'
}
}>
<ListItemButton>
<ListItemIcon>
<DownloadIcon />
</ListItemIcon>
<ListItemText primary={i18n.t('archiveButtonLabel')} />
</ListItemButton>
</Link>
<Link to={'/settings'} style={
{
textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE'
}
}>
<ListItemButton>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText primary={i18n.t('settingsButtonLabel')} />
</ListItemButton>
</Link>
<ThemeToggler />
<Logout />
</List>
</Drawer>
<Box
component="main"
sx={{
flexGrow: 1,
height: '100vh',
overflow: 'auto',
}}
>
<Toolbar />
<Outlet />
</Box> </Box>
<Toaster /> </Box>
</SocketSubscriber> <Toaster />
</ThemeProvider> </ThemeProvider>
) )
} }

15
frontend/src/components/DownloadCard.tsx
View File

@@ -15,6 +15,7 @@ import {
Stack, Stack,
Typography Typography
} from '@mui/material' } from '@mui/material'
import { useCallback } from 'react'
import { RPCResult } from '../types' import { RPCResult } from '../types'
import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils' import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'
@@ -34,11 +35,17 @@ const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
} }
const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => { const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
const isCompleted = () => download.progress.percentage === '-1' const isCompleted = useCallback(
() => download.progress.percentage === '-1',
[download.progress.percentage]
)
const percentageToNumber = () => isCompleted() const percentageToNumber = useCallback(
? 100 () => isCompleted()
: Number(download.progress.percentage.replace('%', '')) ? 100
: Number(download.progress.percentage.replace('%', '')),
[download.progress.percentage, isCompleted]
)
return ( return (
<Card> <Card>

12
frontend/src/components/DownloadsCardView.tsx
View File

@@ -20,13 +20,11 @@ const DownloadsCardView: React.FC = () => {
{ {
downloads.map(download => ( downloads.map(download => (
<Grid item xs={4} sm={8} md={6} key={download.id}> <Grid item xs={4} sm={8} md={6} key={download.id}>
<> <DownloadCard
<DownloadCard download={download}
download={download} onStop={() => abort(download.id)}
onStop={() => abort(download.id)} onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')} />
/>
</>
</Grid> </Grid>
)) ))
} }

2
frontend/src/components/Splash.tsx
View File

@@ -25,7 +25,7 @@ export default function Splash() {
const { i18n } = useI18n() const { i18n } = useI18n()
const activeDownloads = useRecoilValue(activeDownloadsState) const activeDownloads = useRecoilValue(activeDownloadsState)
if (!activeDownloads || activeDownloads.length !== 0) { if (activeDownloads.length !== 0) {
return null return null
} }