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

updated dockerfile, organized imports

Browse Source
This commit is contained in:
marcobaobao
2022-11-05 15:33:39 +01:00
parent 7480c49212
commit b4f8b09f2d
2 changed files with 205 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Dockerfile
View File

@@ -1,4 +1,4 @@
FROM node:16-alpine3.15 FROM node:16-alpine3.16
RUN mkdir -p /usr/src/yt-dlp-webui/download RUN mkdir -p /usr/src/yt-dlp-webui/download
VOLUME /usr/src/yt-dlp-webui/downloads VOLUME /usr/src/yt-dlp-webui/downloads
WORKDIR /usr/src/yt-dlp-webui WORKDIR /usr/src/yt-dlp-webui
@@ -9,6 +9,7 @@ RUN apk add curl wget psmisc python3 ffmpeg
COPY . . COPY . .
RUN chmod +x ./fetch-yt-dlp.sh RUN chmod +x ./fetch-yt-dlp.sh
# install node dependencies # install node dependencies
RUN npm i -g yarn
RUN yarn RUN yarn
RUN yarn build RUN yarn build
RUN yarn build-server RUN yarn build-server

410
frontend/src/App.tsx
View File

@@ -1,205 +1,201 @@
import { useEffect, useMemo, useState } from "react"
import { ThemeProvider } from "@emotion/react"; import { ThemeProvider } from "@emotion/react";
import { import {
Box, ChevronLeft,
createTheme, CssBaseline, Dashboard,
Divider, // Download,
IconButton, List, Menu, Settings as SettingsIcon,
ListItemIcon, ListItemText, SettingsEthernet,
Toolbar, Storage
Typography,
styled,
} from "@mui/material"
import MuiDrawer from '@mui/material/Drawer';
import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
import {
ChevronLeft,
Dashboard,
// Download,
Menu, Settings as SettingsIcon,
SettingsEthernet,
Storage,
} from "@mui/icons-material"; } from "@mui/icons-material";
import ListItemButton from '@mui/material/ListItemButton';
import { import {
BrowserRouter as Router, Box,
Route, createTheme, CssBaseline,
Routes, Divider,
Link, IconButton, List,
ListItemIcon, ListItemText, styled, Toolbar,
Typography
} from "@mui/material";
import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
import MuiDrawer from '@mui/material/Drawer';
import ListItemButton from '@mui/material/ListItemButton';
import { useEffect, useMemo, useState } from "react";
import { Provider, useSelector } from "react-redux";
import {
BrowserRouter as Router, Link, Route,
Routes
} from 'react-router-dom'; } from 'react-router-dom';
import { io } from "socket.io-client";
import ArchivedDownloads from "./Archived";
import Home from "./Home"; import Home from "./Home";
import Settings from "./Settings"; import Settings from "./Settings";
import { io } from "socket.io-client";
import { RootState, store } from './stores/store'; import { RootState, store } from './stores/store';
import { Provider, useSelector } from "react-redux";
import ArchivedDownloads from "./Archived";
const drawerWidth: number = 240; const drawerWidth: number = 240;
const socket = io( const socket = io(
`${window.location.protocol}//${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}` `${window.location.protocol}//${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}`
) )
interface AppBarProps extends MuiAppBarProps { interface AppBarProps extends MuiAppBarProps {
open?: boolean; open?: boolean;
} }
const AppBar = styled(MuiAppBar, { const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open', shouldForwardProp: (prop) => prop !== 'open',
})<AppBarProps>(({ theme, open }) => ({ })<AppBarProps>(({ theme, open }) => ({
zIndex: theme.zIndex.drawer + 1, zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], { transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen, duration: theme.transitions.duration.enteringScreen,
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}), }),
}),
})); }));
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
({ theme, open }) => ({ ({ theme, open }) => ({
'& .MuiDrawer-paper': { '& .MuiDrawer-paper': {
position: 'relative', position: 'relative',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
width: drawerWidth, width: drawerWidth,
transition: theme.transitions.create('width', { transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen,
}), }),
boxSizing: 'border-box', boxSizing: 'border-box',
...(!open && { ...(!open && {
overflowX: 'hidden', overflowX: 'hidden',
transition: theme.transitions.create('width', { transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen, duration: theme.transitions.duration.leavingScreen,
}), }),
width: theme.spacing(7), width: theme.spacing(7),
[theme.breakpoints.up('sm')]: { [theme.breakpoints.up('sm')]: {
width: theme.spacing(9), width: theme.spacing(9),
},
}),
}, },
}), }),
},
}),
); );
function AppContent() { function AppContent() {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [freeDiskSpace, setFreeDiskSpace] = useState(''); const [freeDiskSpace, setFreeDiskSpace] = useState('');
const settings = useSelector((state: RootState) => state.settings) const settings = useSelector((state: RootState) => state.settings)
const status = useSelector((state: RootState) => state.status) const status = useSelector((state: RootState) => state.status)
const mode = settings.theme const mode = settings.theme
const theme = useMemo(() => const theme = useMemo(() =>
createTheme({ createTheme({
palette: { palette: {
mode, mode,
}, },
}), [settings.theme] }), [settings.theme]
); );
const toggleDrawer = () => { const toggleDrawer = () => {
setOpen(!open); setOpen(!open);
}; };
/* Get disk free space */ /* Get disk free space */
useEffect(() => { useEffect(() => {
socket.on('free-space', (res: string) => { socket.on('free-space', (res: string) => {
setFreeDiskSpace(res) setFreeDiskSpace(res)
}) })
}, []) }, [])
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Router> <Router>
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
<CssBaseline /> <CssBaseline />
<AppBar position="absolute" open={open}> <AppBar position="absolute" open={open}>
<Toolbar <Toolbar
sx={{ sx={{
pr: '24px', // keep right padding when drawer closed pr: '24px', // keep right padding when drawer closed
}} }}
> >
<IconButton <IconButton
edge="start" edge="start"
color="inherit" color="inherit"
aria-label="open drawer" aria-label="open drawer"
onClick={toggleDrawer} onClick={toggleDrawer}
sx={{ sx={{
marginRight: '36px', marginRight: '36px',
...(open && { display: 'none' }), ...(open && { display: 'none' }),
}} }}
> >
<Menu /> <Menu />
</IconButton> </IconButton>
<Typography <Typography
component="h1" component="h1"
variant="h6" variant="h6"
color="inherit" color="inherit"
noWrap noWrap
sx={{ flexGrow: 1 }} sx={{ flexGrow: 1 }}
> >
yt-dlp WebUI yt-dlp WebUI
</Typography> </Typography>
{ {
freeDiskSpace ? freeDiskSpace ?
<div style={{ <div style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
flexWrap: 'wrap', flexWrap: 'wrap',
}}> }}>
<Storage></Storage> <Storage></Storage>
<span>&nbsp;{freeDiskSpace}&nbsp;</span> <span>&nbsp;{freeDiskSpace}&nbsp;</span>
</div> </div>
: null : null
} }
<div style={{ <div style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
flexWrap: 'wrap', flexWrap: 'wrap',
}}> }}>
<SettingsEthernet></SettingsEthernet> <SettingsEthernet></SettingsEthernet>
<span>&nbsp;{status.connected ? settings.serverAddr : 'not connected'}</span> <span>&nbsp;{status.connected ? settings.serverAddr : 'not connected'}</span>
</div> </div>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Drawer variant="permanent" open={open}> <Drawer variant="permanent" open={open}>
<Toolbar <Toolbar
sx={{ sx={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-end', justifyContent: 'flex-end',
px: [1], px: [1],
}} }}
> >
<IconButton onClick={toggleDrawer}> <IconButton onClick={toggleDrawer}>
<ChevronLeft /> <ChevronLeft />
</IconButton> </IconButton>
</Toolbar> </Toolbar>
<Divider /> <Divider />
<List component="nav"> <List component="nav">
<Link to={'/'} style={ <Link to={'/'} style={
{ {
textDecoration: 'none', textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE' color: mode === 'dark' ? '#ffffff' : '#000000DE'
} }
}> }>
<ListItemButton disabled={status.downloading}> <ListItemButton disabled={status.downloading}>
<ListItemIcon> <ListItemIcon>
<Dashboard /> <Dashboard />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Home" /> <ListItemText primary="Home" />
</ListItemButton> </ListItemButton>
</Link> </Link>
{/* Next release: list downloaded files */} {/* Next release: list downloaded files */}
{/* <Link to={'/downloaded'} style={ {/* <Link to={'/downloaded'} style={
{ {
textDecoration: 'none', textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE' color: mode === 'dark' ? '#ffffff' : '#000000DE'
@@ -212,46 +208,46 @@ function AppContent() {
<ListItemText primary="Downloaded" /> <ListItemText primary="Downloaded" />
</ListItemButton> </ListItemButton>
</Link> */} </Link> */}
<Link to={'/settings'} style={ <Link to={'/settings'} style={
{ {
textDecoration: 'none', textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE' color: mode === 'dark' ? '#ffffff' : '#000000DE'
} }
}> }>
<ListItemButton disabled={status.downloading}> <ListItemButton disabled={status.downloading}>
<ListItemIcon> <ListItemIcon>
<SettingsIcon /> <SettingsIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Settings" /> <ListItemText primary="Settings" />
</ListItemButton> </ListItemButton>
</Link> </Link>
</List> </List>
</Drawer> </Drawer>
<Box <Box
component="main" component="main"
sx={{ sx={{
flexGrow: 1, flexGrow: 1,
height: '100vh', height: '100vh',
overflow: 'auto', overflow: 'auto',
}} }}
> >
<Toolbar /> <Toolbar />
<Routes> <Routes>
<Route path="/" element={<Home socket={socket}></Home>}></Route> <Route path="/" element={<Home socket={socket}></Home>}></Route>
<Route path="/settings" element={<Settings socket={socket}></Settings>}></Route> <Route path="/settings" element={<Settings socket={socket}></Settings>}></Route>
<Route path="/downloaded" element={<ArchivedDownloads></ArchivedDownloads>}></Route> <Route path="/downloaded" element={<ArchivedDownloads></ArchivedDownloads>}></Route>
</Routes> </Routes>
</Box> </Box>
</Box> </Box>
</Router> </Router>
</ThemeProvider> </ThemeProvider>
); );
} }
export function App() { export function App() {
return ( return (
<Provider store={store}> <Provider store={store}>
<AppContent></AppContent> <AppContent></AppContent>
</Provider> </Provider>
); );
} }