updated dockerfile, organized imports

2022-11-05 15:33:39 +01:00
parent 7480c49212
commit b4f8b09f2d
2 changed files with 205 additions and 208 deletions
--- a/3
+++ b/3
@@ -1,4 +1,4 @@
-FROM node:16-alpine3.15
+FROM node:16-alpine3.16
 RUN mkdir -p /usr/src/yt-dlp-webui/download
 VOLUME /usr/src/yt-dlp-webui/downloads
 WORKDIR /usr/src/yt-dlp-webui
@@ -9,6 +9,7 @@ RUN apk add curl wget psmisc python3 ffmpeg
 COPY . .
 RUN chmod +x ./fetch-yt-dlp.sh
 # install node dependencies
+RUN npm i -g yarn
 RUN yarn
 RUN yarn build
 RUN yarn build-server
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,205 +1,201 @@
-import { useEffect, useMemo, useState } from "react"
 import { ThemeProvider } from "@emotion/react";
 import {
-    Box,
-    createTheme, CssBaseline,
-    Divider,
-    IconButton, List,
-    ListItemIcon, ListItemText,
-    Toolbar,
-    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,
+  ChevronLeft,
+  Dashboard,
+  // Download,
+  Menu, Settings as SettingsIcon,
+  SettingsEthernet,
+  Storage
 } from "@mui/icons-material";
-import ListItemButton from '@mui/material/ListItemButton';
 import {
-    BrowserRouter as Router,
-    Route,
-    Routes,
-    Link,
+  Box,
+  createTheme, CssBaseline,
+  Divider,
+  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';
+import { io } from "socket.io-client";
+import ArchivedDownloads from "./Archived";
 import Home from "./Home";
 import Settings from "./Settings";
-import { io } from "socket.io-client";
 import { RootState, store } from './stores/store';
-import { Provider, useSelector } from "react-redux";
-import ArchivedDownloads from "./Archived";

 const drawerWidth: number = 240;

 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 {
-    open?: boolean;
+  open?: boolean;
 }

 const AppBar = styled(MuiAppBar, {
-    shouldForwardProp: (prop) => prop !== 'open',
+  shouldForwardProp: (prop) => prop !== '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'], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-    }),
-    ...(open && {
-        marginLeft: drawerWidth,
-        width: `calc(100% - ${drawerWidth}px)`,
-        transition: theme.transitions.create(['width', 'margin'], {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
    }),
+  }),
 }));

 const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
-    ({ theme, open }) => ({
-        '& .MuiDrawer-paper': {
-            position: 'relative',
-            whiteSpace: 'nowrap',
-            width: drawerWidth,
-            transition: theme.transitions.create('width', {
-                easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.enteringScreen,
-            }),
-            boxSizing: 'border-box',
-            ...(!open && {
-                overflowX: 'hidden',
-                transition: theme.transitions.create('width', {
-                    easing: theme.transitions.easing.sharp,
-                    duration: theme.transitions.duration.leavingScreen,
-                }),
-                width: theme.spacing(7),
-                [theme.breakpoints.up('sm')]: {
-                    width: theme.spacing(9),
-                },
-            }),
+  ({ theme, open }) => ({
+    '& .MuiDrawer-paper': {
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      width: drawerWidth,
+      transition: theme.transitions.create('width', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+      boxSizing: 'border-box',
+      ...(!open && {
+        overflowX: 'hidden',
+        transition: theme.transitions.create('width', {
+          easing: theme.transitions.easing.sharp,
+          duration: theme.transitions.duration.leavingScreen,
+        }),
+        width: theme.spacing(7),
+        [theme.breakpoints.up('sm')]: {
+          width: theme.spacing(9),
        },
-    }),
+      }),
+    },
+  }),
 );

 function AppContent() {
-    const [open, setOpen] = useState(false);
-    const [freeDiskSpace, setFreeDiskSpace] = useState('');
+  const [open, setOpen] = useState(false);
+  const [freeDiskSpace, setFreeDiskSpace] = useState('');

-    const settings = useSelector((state: RootState) => state.settings)
-    const status = useSelector((state: RootState) => state.status)
+  const settings = useSelector((state: RootState) => state.settings)
+  const status = useSelector((state: RootState) => state.status)

-    const mode = settings.theme
+  const mode = settings.theme

-    const theme = useMemo(() =>
-        createTheme({
-            palette: {
-                mode,
-            },
-        }), [settings.theme]
-    );
+  const theme = useMemo(() =>
+    createTheme({
+      palette: {
+        mode,
+      },
+    }), [settings.theme]
+  );

-    const toggleDrawer = () => {
-        setOpen(!open);
-    };
+  const toggleDrawer = () => {
+    setOpen(!open);
+  };

-    /* Get disk free space */
-    useEffect(() => {
-        socket.on('free-space', (res: string) => {
-            setFreeDiskSpace(res)
-        })
-    }, [])
+  /* Get disk free space */
+  useEffect(() => {
+    socket.on('free-space', (res: string) => {
+      setFreeDiskSpace(res)
+    })
+  }, [])

-    return (
-        <ThemeProvider theme={theme}>
-            <Router>
-                <Box sx={{ display: 'flex' }}>
-                    <CssBaseline />
-                    <AppBar position="absolute" open={open}>
-                        <Toolbar
-                            sx={{
-                                pr: '24px', // keep right padding when drawer closed
-                            }}
-                        >
-                            <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>
-                            {
-                                freeDiskSpace ?
-                                    <div style={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        flexWrap: 'wrap',
-                                    }}>
-                                        <Storage></Storage>
-                                        <span>&nbsp;{freeDiskSpace}&nbsp;</span>
-                                    </div>
-                                    : null
-                            }
-                            <div style={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                flexWrap: 'wrap',
-                            }}>
-                                <SettingsEthernet></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>
-                            {/* Next release: list downloaded files */}
-                            {/* <Link to={'/downloaded'} style={
+  return (
+    <ThemeProvider theme={theme}>
+      <Router>
+        <Box sx={{ display: 'flex' }}>
+          <CssBaseline />
+          <AppBar position="absolute" open={open}>
+            <Toolbar
+              sx={{
+                pr: '24px', // keep right padding when drawer closed
+              }}
+            >
+              <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>
+              {
+                freeDiskSpace ?
+                  <div style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                  }}>
+                    <Storage></Storage>
+                    <span>&nbsp;{freeDiskSpace}&nbsp;</span>
+                  </div>
+                  : null
+              }
+              <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                flexWrap: 'wrap',
+              }}>
+                <SettingsEthernet></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>
+              {/* Next release: list downloaded files */}
+              {/* <Link to={'/downloaded'} style={
                                {
                                    textDecoration: 'none',
                                    color: mode === 'dark' ? '#ffffff' : '#000000DE'
@@ -212,46 +208,46 @@ function AppContent() {
                                    <ListItemText primary="Downloaded" />
                                </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={<Home socket={socket}></Home>}></Route>
-                            <Route path="/settings" element={<Settings socket={socket}></Settings>}></Route>
-                            <Route path="/downloaded" element={<ArchivedDownloads></ArchivedDownloads>}></Route>
-                        </Routes>
-                    </Box>
-                </Box>
-            </Router>
-        </ThemeProvider>
-    );
+              <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={<Home socket={socket}></Home>}></Route>
+              <Route path="/settings" element={<Settings socket={socket}></Settings>}></Route>
+              <Route path="/downloaded" element={<ArchivedDownloads></ArchivedDownloads>}></Route>
+            </Routes>
+          </Box>
+        </Box>
+      </Router>
+    </ThemeProvider>
+  );
 }

 export function App() {
-    return (
-        <Provider store={store}>
-            <AppContent></AppContent>
-        </Provider>
-    );
+  return (
+    <Provider store={store}>
+      <AppContent></AppContent>
+    </Provider>
+  );
 }