Code refactoring and set up format selection

Set up format selection and archive download for next releases

frontend/src/App.tsx

@@ -16,6 +16,7 @@ import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
 import {
     ChevronLeft,
     Dashboard,
+    Download,
     Menu, Settings as SettingsIcon,
     SettingsEthernet,
     Storage,
@@ -32,6 +33,7 @@ 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;
@@ -166,10 +168,6 @@ function AppContent() {
                                 <SettingsEthernet></SettingsEthernet>
                                 <span>&nbsp;{settings.serverAddr}</span>
                             </div>
-                            <IconButton color="inherit">
-                                <Badge badgeContent={0} color="secondary">
-                                </Badge>
-                            </IconButton>
                         </Toolbar>
                     </AppBar>
                     <Drawer variant="permanent" open={open}>
@@ -200,6 +198,20 @@ function AppContent() {
                                     <ListItemText primary="Home" />
                                 </ListItemButton>
                             </Link>
+                            {/* Next release: list downloaded files */}
+                            {/* <Link to={'/downloaded'} style={
+                                {
+                                    textDecoration: 'none',
+                                    color: mode === 'dark' ? '#ffffff' : '#000000DE'
+                                }
+                            }>
+                                <ListItemButton disabled={status.downloading}>
+                                    <ListItemIcon>
+                                        <Download />
+                                    </ListItemIcon>
+                                    <ListItemText primary="Downloaded" />
+                                </ListItemButton>
+                            </Link> */}
                             <Link to={'/settings'} style={
                                 {
                                     textDecoration: 'none',
@@ -227,6 +239,7 @@ function AppContent() {
                         <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>

frontend/src/Archived.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from "react";
+import { Backdrop, CircularProgress, Container, Grid } from "@mui/material";
+import { ArchiveResult } from "./components/ArchiveResult";
+import { useSelector } from "react-redux";
+import { RootState } from "./stores/store";
+
+export default function archivedDownloads() {
+    const [loading, setLoading] = useState(true);
+    const [archived, setArchived] = useState([]);
+
+    const settings = useSelector((state: RootState) => state.settings)
+
+    useEffect(() => {
+        fetch(`http://${settings.serverAddr}:3022/getAllDownloaded`)
+            .then(res => res.json())
+            .then(data => setArchived(data))
+            .then(() => setLoading(false))
+    }, []);
+
+    return (
+        <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+            <Backdrop
+                sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+                open={loading}
+            >
+                <CircularProgress color="primary" />
+            </Backdrop>
+            {
+                archived.length > 0 ?
+                    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
+                        {
+                            archived.map((el, idx) =>
+                                <Grid key={`${idx}-${el.id}`} item xs={4} sm={4} md={4}>
+                                    <ArchiveResult
+                                        url={`http://${settings.serverAddr}:3022/stream/${el.id}`}
+                                        thumbnail={el.img} title={el.title}
+                                    />
+                                </Grid>
+                            )
+                        }
+                    </Grid>
+                    : null
+            }
+        </Container>
+    );
+}

frontend/src/Home.tsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { Socket } from "socket.io-client";
 import { StackableResult } from "./components/StackableResult";
 import { connected, disconnected, downloading, finished } from "./features/status/statusSlice";
-import { IDLInfo, IDLInfoBase, IMessage } from "./interfaces";
+import { IDLInfo, IDLInfoBase, IDownloadInfo, IMessage } from "./interfaces";
 import { RootState } from "./stores/store";
 import { updateInStateMap, } from "./utils";
 
@@ -48,6 +48,14 @@ export default function Home({ socket }: Props) {
         })
     }, [])
 
+    /* Handle download information sent by server */
+    useEffect(() => {
+        socket.on('available-formats', (data: IDownloadInfo) => {
+            setShowBackdrop(false)
+            console.log(data)
+        })
+    }, [])
+
     /* Handle download information sent by server */
     useEffect(() => {
         socket.on('info', (data: IDLInfo) => {
@@ -60,13 +68,6 @@ export default function Home({ socket }: Props) {
     /* Handle per-download progress */
     useEffect(() => {
         socket.on('progress', (data: IMessage) => {
-            if (showBackdrop) {
-                setShowBackdrop(false)
-            }
-            if (!status.downloading) {
-                setShowBackdrop(false)
-                dispatch(downloading())
-            }
             if (data.status === 'Done!' || data.status === 'Aborted') {
                 setShowBackdrop(false)
                 updateInStateMap(data.pid, 'Done!', messageMap, setMessageMap);
@@ -147,11 +148,21 @@ export default function Home({ socket }: Props) {
                         />
                         <Grid container spacing={1} pt={2}>
                             <Grid item>
-                                <Button variant="contained" onClick={() => sendUrl()} disabled={false}>{settings.i18n.t('startButton')}</Button>
+                                <Button
+                                    variant="contained"
+                                    disabled={url === ''}
+                                    onClick={() => sendUrl()}
+                                >
+                                    {settings.i18n.t('startButton')}
+                                </Button>
                             </Grid>
                             <Grid item>
-                                <Button variant="contained" onClick={() => abort()}>{settings.i18n.t('abortAllButton')}</Button>
-
+                                <Button
+                                    variant="contained"
+                                    onClick={() => abort()}
+                                >
+                                    {settings.i18n.t('abortAllButton')}
+                                </Button>
                             </Grid>
                         </Grid>
                     </Paper>

frontend/src/components/ArchiveResult.tsx

@@ -0,0 +1,30 @@
+import { Card, CardActionArea, CardContent, CardMedia, Skeleton, Typography } from "@mui/material";
+import { ellipsis } from "../utils";
+
+type Props = {
+    title: string,
+    thumbnail: string,
+    url: string,
+}
+
+export function ArchiveResult({ title, thumbnail, url }: Props) {
+    return (
+        <Card>
+            <CardActionArea onClick={() => window.open(url)}>
+                {thumbnail ?
+                    <CardMedia
+                        component="img"
+                        height={180}
+                        image={thumbnail}
+                    /> :
+                    <Skeleton variant="rectangular" height={180} />
+                }
+                <CardContent>
+                    <Typography gutterBottom variant="body2" component="div">
+                        {ellipsis(title, 72)}
+                    </Typography>
+                </CardContent>
+            </CardActionArea>
+        </Card>
+    )
+}

frontend/src/components/MessageToast.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import {
-    Toast,
-} from "react-bootstrap";
-
-type Props = {
-    flag: boolean,
-    callback: Function,
-    children:
-    | JSX.Element
-    | string
-}
-
-export function MessageToast({ flag, callback, children }: Props) {
-    return (
-        <Toast
-            show={flag}
-            onClose={() => callback(false)}
-            bg={'primary'}
-            delay={1500}
-            autohide
-            className="mt-5"
-        >
-            <Toast.Body className="text-light">
-                {children}
-            </Toast.Body>
-        </Toast>
-    );
-}

frontend/src/components/StackableResult.tsx

@@ -1,4 +1,3 @@
-import { Fragment } from "react";
 import { EightK, FourK, Hd, Sd } from "@mui/icons-material";
 import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Chip, Grid, LinearProgress, Skeleton, Stack, Typography } from "@mui/material";
 import { IMessage } from "../interfaces";
@@ -14,7 +13,6 @@ type Props = {
 }
 
 export function StackableResult({ formattedLog, title, thumbnail, resolution, progress, stopCallback }: Props) {
-
     const guessResolution = (xByY: string): JSX.Element => {
         if (!xByY) return null;
         if (xByY.includes('4320')) return (<EightK color="primary" />);

frontend/src/interfaces.ts

@@ -14,6 +14,21 @@ export interface IDLInfoBase {
     resolution?: string
 }
 
+export interface IDownloadInfo {
+    formats: Array<IDownloadInfoSection>,
+    best: IDownloadInfoSection,
+    thumbnail: string,
+    title: string,
+}
+
+export interface IDownloadInfoSection {
+    format_id: string,
+    format_note: string,
+    fps: number,
+    resolution: string,
+    vcodec: string,
+}
+
 export interface IDLInfo {
     pid: number,
     info: IDLInfoBase