From 22744e2f2fef68cd5fdc3fee198edbffc8e848b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E7=99=BD-=E7=99=BD?= <i@moedog.org>
Date: Thu, 7 Jul 2022 20:21:28 +0800
Subject: [PATCH] enhance remote download dashboard (#119)

* fix: aria2 task page navigation

* feat: improve performance with virtual list

* feat: hide remote download when disabled

* Update aria2 file list style
---
 src/component/Download/DownloadingCard.js | 321 +++++++++++++---------
 src/component/Download/FinishedCard.js    | 167 ++++++-----
 src/component/Modals/SelectFile.js        |  18 +-
 src/component/Navbar/Navbar.js            |  32 ++-
 4 files changed, 323 insertions(+), 215 deletions(-)

diff --git a/src/component/Download/DownloadingCard.js b/src/component/Download/DownloadingCard.js
index d8f0a31..750a71c 100644
--- a/src/component/Download/DownloadingCard.js
+++ b/src/component/Download/DownloadingCard.js
@@ -19,13 +19,13 @@ import Grid from "@material-ui/core/Grid";
 import withStyles from "@material-ui/core/styles/withStyles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
 import Tooltip from "@material-ui/core/Tooltip";
 import { ExpandMore, HighlightOff } from "@material-ui/icons";
 import PermMediaIcon from "@material-ui/icons/PermMedia";
 import classNames from "classnames";
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { useDispatch } from "react-redux";
 import TimeAgo from "timeago-react";
 import { toggleSnackbar } from "../../redux/explorer";
@@ -34,7 +34,9 @@ import { hex2bin, sizeToString } from "../../utils";
 import TypeIcon from "../FileManager/TypeIcon";
 import SelectFileDialog from "../Modals/SelectFile";
 import { useHistory } from "react-router";
+import { TableVirtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
+
 const ExpansionPanel = withStyles({
     root: {
         maxWidth: "100%",
@@ -123,14 +125,26 @@ const useStyles = makeStyles((theme) => ({
     expanded: {
         transform: "rotate(180deg)",
     },
+    subFile: {
+        width: "100%",
+        minWidth: 300,
+        wordBreak: "break-all",
+    },
     subFileName: {
         display: "flex",
     },
     subFileIcon: {
         marginRight: "20px",
     },
+    subFileSize: {
+        minWidth: 120,
+    },
+    subFilePercent: {
+        minWidth: 105,
+    },
     scroll: {
-        overflowY: "auto",
+        overflow: "auto",
+        maxHeight: "300px",
     },
     action: {
         padding: theme.spacing(2),
@@ -325,6 +339,177 @@ export default function DownloadingCard(props) {
             });
     };
 
+    const subFileList = useMemo(() => {
+        const processStyle = (value) => ({
+            background:
+                "linear-gradient(to right, " +
+                (theme.palette.type ===
+                    "dark"
+                    ? darken(
+                        theme.palette
+                            .primary
+                            .main,
+                        0.4
+                    )
+                    : lighten(
+                        theme.palette
+                            .primary
+                            .main,
+                        0.85
+                    )) +
+                " 0%," +
+                (theme.palette.type ===
+                    "dark"
+                    ? darken(
+                        theme.palette
+                            .primary
+                            .main,
+                        0.4
+                    )
+                    : lighten(
+                        theme.palette
+                            .primary
+                            .main,
+                        0.85
+                    )) +
+                " " +
+                getPercent(
+                    value.completedLength,
+                    value.length
+                ).toFixed(0) +
+                "%," +
+                theme.palette.background
+                    .paper +
+                " " +
+                getPercent(
+                    value.completedLength,
+                    value.length
+                ).toFixed(0) +
+                "%," +
+                theme.palette.background
+                    .paper +
+                " 100%)",
+        });
+
+        const subFileCell = (value) => (
+            <>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.subFile}
+                >
+                    <Typography
+                        className={
+                            classes.subFileName
+                        }
+                    >
+                        <TypeIcon
+                            className={
+                                classes.subFileIcon
+                            }
+                            fileName={
+                                value.path
+                            }
+                        />
+                        {value.path}
+                    </Typography>
+                </TableCell>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.subFileSize}
+                >
+                    <Typography noWrap>
+                        {" "}
+                        {sizeToString(
+                            value.length
+                        )}
+                    </Typography>
+                </TableCell>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.subFilePercent}
+                >
+                    <Typography noWrap>
+                        {getPercent(
+                            value.completedLength,
+                            value.length
+                        ).toFixed(2)}
+                        %
+                    </Typography>
+                </TableCell>
+                <TableCell>
+                    <Tooltip
+                        title={t(
+                            "deleteThisFile"
+                        )}
+                    >
+                        <IconButton
+                            onClick={() =>
+                                deleteFile(
+                                    value.index
+                                )
+                            }
+                            disabled={loading}
+                            size={"small"}
+                        >
+                            <HighlightOff />
+                        </IconButton>
+                    </Tooltip>
+                </TableCell>
+            </>
+        );
+
+        return activeFiles().length > 5 ? (
+            <TableVirtuoso
+                style={{ height: 43 * activeFiles().length }}
+                className={classes.scroll}
+                components={{
+                    // eslint-disable-next-line react/display-name
+                    Table: (props) => <Table {...props} size={"small"} />,
+                    // eslint-disable-next-line react/display-name
+                    TableRow: (props) => {
+                        const index = props["data-index"];
+                        const value = activeFiles()[index];
+                        return (
+                            <TableRow
+                                {...props}
+                                key={index}
+                                style={processStyle(value)}
+                            />
+                        );
+                    },
+                }}
+                data={activeFiles()}
+                itemContent={(index, value) => (
+                    subFileCell(value)
+                )}
+            />
+        ) : (
+            <div className={classes.scroll}>
+                <Table size="small">
+                    <TableBody>
+                        {activeFiles().map((value) => {
+                            return (
+                                <TableRow
+                                    key={value.index}
+                                    style={processStyle(value)}
+                                >
+                                    {subFileCell(value)}
+                                </TableRow>
+                            );
+                        })}
+                    </TableBody>
+                </Table>
+            </div>
+        );
+    }, [
+        classes,
+        theme,
+        activeFiles,
+    ]);
+
     return (
         <Card className={classes.card}>
             <SelectFileDialog
@@ -400,135 +585,7 @@ export default function DownloadingCard(props) {
                 </ExpansionPanelSummary>
                 <ExpansionPanelDetails>
                     <Divider />
-                    {task.info.bittorrent.mode === "multi" && (
-                        <div className={classes.scroll}>
-                            <Table size="small">
-                                <TableBody>
-                                    {activeFiles().map((value) => {
-                                        return (
-                                            <TableRow
-                                                key={value.index}
-                                                style={{
-                                                    background:
-                                                        "linear-gradient(to right, " +
-                                                        (theme.palette.type ===
-                                                        "dark"
-                                                            ? darken(
-                                                                  theme.palette
-                                                                      .primary
-                                                                      .main,
-                                                                  0.4
-                                                              )
-                                                            : lighten(
-                                                                  theme.palette
-                                                                      .primary
-                                                                      .main,
-                                                                  0.85
-                                                              )) +
-                                                        " 0%," +
-                                                        (theme.palette.type ===
-                                                        "dark"
-                                                            ? darken(
-                                                                  theme.palette
-                                                                      .primary
-                                                                      .main,
-                                                                  0.4
-                                                              )
-                                                            : lighten(
-                                                                  theme.palette
-                                                                      .primary
-                                                                      .main,
-                                                                  0.85
-                                                              )) +
-                                                        " " +
-                                                        getPercent(
-                                                            value.completedLength,
-                                                            value.length
-                                                        ).toFixed(0) +
-                                                        "%," +
-                                                        theme.palette.background
-                                                            .paper +
-                                                        " " +
-                                                        getPercent(
-                                                            value.completedLength,
-                                                            value.length
-                                                        ).toFixed(0) +
-                                                        "%," +
-                                                        theme.palette.background
-                                                            .paper +
-                                                        " 100%)",
-                                                }}
-                                            >
-                                                <TableCell
-                                                    component="th"
-                                                    scope="row"
-                                                >
-                                                    <Typography
-                                                        className={
-                                                            classes.subFileName
-                                                        }
-                                                    >
-                                                        <TypeIcon
-                                                            className={
-                                                                classes.subFileIcon
-                                                            }
-                                                            fileName={
-                                                                value.path
-                                                            }
-                                                        />
-                                                        {value.path}
-                                                    </Typography>
-                                                </TableCell>
-                                                <TableCell
-                                                    component="th"
-                                                    scope="row"
-                                                >
-                                                    <Typography noWrap>
-                                                        {" "}
-                                                        {sizeToString(
-                                                            value.length
-                                                        )}
-                                                    </Typography>
-                                                </TableCell>
-                                                <TableCell
-                                                    component="th"
-                                                    scope="row"
-                                                >
-                                                    <Typography noWrap>
-                                                        {getPercent(
-                                                            value.completedLength,
-                                                            value.length
-                                                        ).toFixed(2)}
-                                                        %
-                                                    </Typography>
-                                                </TableCell>
-                                                <TableCell>
-                                                    <Tooltip
-                                                        title={t(
-                                                            "deleteThisFile"
-                                                        )}
-                                                    >
-                                                        <IconButton
-                                                            onClick={() =>
-                                                                deleteFile(
-                                                                    value.index
-                                                                )
-                                                            }
-                                                            disabled={loading}
-                                                            size={"small"}
-                                                        >
-                                                            <HighlightOff />
-                                                        </IconButton>
-                                                    </Tooltip>
-                                                </TableCell>
-                                            </TableRow>
-                                        );
-                                    })}
-                                </TableBody>
-                            </Table>
-                        </div>
-                    )}
-
+                    {task.info.bittorrent.mode === "multi" && subFileList}
                     <div className={classes.action}>
                         <Button
                             className={classes.actionButton}
diff --git a/src/component/Download/FinishedCard.js b/src/component/Download/FinishedCard.js
index 2305391..2f24cdd 100644
--- a/src/component/Download/FinishedCard.js
+++ b/src/component/Download/FinishedCard.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import {
     Card,
     CardContent,
@@ -17,10 +17,10 @@ import withStyles from "@material-ui/core/styles/withStyles";
 import Divider from "@material-ui/core/Divider";
 import { ExpandMore } from "@material-ui/icons";
 import classNames from "classnames";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
 import TableRow from "@material-ui/core/TableRow";
 import TableCell from "@material-ui/core/TableCell";
-import TableBody from "@material-ui/core/TableBody";
-import Table from "@material-ui/core/Table";
 import Badge from "@material-ui/core/Badge";
 import Tooltip from "@material-ui/core/Tooltip";
 import Button from "@material-ui/core/Button";
@@ -30,6 +30,7 @@ import { useDispatch } from "react-redux";
 import { useHistory } from "react-router";
 import { formatLocalTime } from "../../utils/datetime";
 import { toggleSnackbar } from "../../redux/explorer";
+import { TableVirtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
 
 const ExpansionPanel = withStyles({
@@ -121,14 +122,26 @@ const useStyles = makeStyles((theme) => ({
     expanded: {
         transform: "rotate(180deg)",
     },
+    subFile: {
+        width: "100%",
+        minWidth: 300,
+        wordBreak: "break-all",
+    },
     subFileName: {
         display: "flex",
     },
     subFileIcon: {
         marginRight: "20px",
     },
+    subFileSize: {
+        minWidth: 115,
+    },
+    subFilePercent: {
+        minWidth: 100,
+    },
     scroll: {
-        overflowY: "auto",
+        overflow: "auto",
+        maxHeight: "300px",
     },
     action: {
         padding: theme.spacing(2),
@@ -223,6 +236,91 @@ export default function FinishedCard(props) {
         }
     };
 
+    const subFileList = useMemo(() => {
+        const subFileCell = (value) => (
+            <>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.subFile}
+                >
+                    <Typography
+                        className={
+                            classes.subFileName
+                        }
+                    >
+                        <TypeIcon
+                            className={
+                                classes.subFileIcon
+                            }
+                            fileName={
+                                value.path
+                            }
+                        />
+                        {value.path}
+                    </Typography>
+                </TableCell>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.subFileSize}
+                >
+                    <Typography noWrap>
+                        {" "}
+                        {sizeToString(
+                            value.length
+                        )}
+                    </Typography>
+                </TableCell>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.subFilePercent}
+                >
+                    <Typography noWrap>
+                        {getPercent(
+                            value.completedLength,
+                            value.length
+                        ).toFixed(2)}
+                        %
+                    </Typography>
+                </TableCell>
+            </>
+        );
+
+        return activeFiles().length > 5 ? (
+            <TableVirtuoso
+                style={{ height: 57 * activeFiles().length }}
+                className={classes.scroll}
+                components={{
+                    // eslint-disable-next-line react/display-name
+                    Table: (props) => <Table {...props} />,
+                }}
+                data={activeFiles()}
+                itemContent={(index, value) => (
+                    subFileCell(value)
+                )}
+            />
+        ) : (
+            <div className={classes.scroll}>
+                <Table>
+                    <TableBody>
+                        {activeFiles().map((value) => {
+                            return (
+                                <TableRow key={value.index}>
+                                    {subFileCell(value)}
+                                </TableRow>
+                            );
+                        })}
+                    </TableBody>
+                </Table>
+            </div>
+        );
+    }, [
+        classes,
+        activeFiles,
+    ]);
+
     return (
         <Card className={classes.card}>
             <ExpansionPanel
@@ -328,64 +426,7 @@ export default function FinishedCard(props) {
                 </ExpansionPanelSummary>
                 <ExpansionPanelDetails>
                     <Divider />
-                    {props.task.files.length > 1 && (
-                        <div className={classes.scroll}>
-                            <Table>
-                                <TableBody>
-                                    {activeFiles().map((value) => {
-                                        return (
-                                            <TableRow key={value.index}>
-                                                <TableCell
-                                                    component="th"
-                                                    scope="row"
-                                                >
-                                                    <Typography
-                                                        className={
-                                                            classes.subFileName
-                                                        }
-                                                    >
-                                                        <TypeIcon
-                                                            className={
-                                                                classes.subFileIcon
-                                                            }
-                                                            fileName={
-                                                                value.path
-                                                            }
-                                                        />
-                                                        {value.path}
-                                                    </Typography>
-                                                </TableCell>
-                                                <TableCell
-                                                    component="th"
-                                                    scope="row"
-                                                >
-                                                    <Typography noWrap>
-                                                        {" "}
-                                                        {sizeToString(
-                                                            value.length
-                                                        )}
-                                                    </Typography>
-                                                </TableCell>
-                                                <TableCell
-                                                    component="th"
-                                                    scope="row"
-                                                >
-                                                    <Typography noWrap>
-                                                        {getPercent(
-                                                            value.completedLength,
-                                                            value.length
-                                                        ).toFixed(2)}
-                                                        %
-                                                    </Typography>
-                                                </TableCell>
-                                            </TableRow>
-                                        );
-                                    })}
-                                </TableBody>
-                            </Table>
-                        </div>
-                    )}
-
+                    {props.task.files.length > 1 && subFileList}
                     <div className={classes.action}>
                         <Button
                             className={classes.actionButton}
@@ -393,7 +434,7 @@ export default function FinishedCard(props) {
                             color="secondary"
                             onClick={() =>
                                 history.push(
-                                    "/#/home?path=" +
+                                    "/home?path=" +
                                         encodeURIComponent(props.task.dst)
                                 )
                             }
diff --git a/src/component/Modals/SelectFile.js b/src/component/Modals/SelectFile.js
index f247d40..e054f0a 100644
--- a/src/component/Modals/SelectFile.js
+++ b/src/component/Modals/SelectFile.js
@@ -12,6 +12,7 @@ import FormGroup from "@material-ui/core/FormGroup";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Checkbox from "@material-ui/core/Checkbox";
 import MenuItem from "@material-ui/core/MenuItem";
+import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles((theme) => ({
@@ -33,6 +34,9 @@ const useStyles = makeStyles((theme) => ({
     content: {
         padding: 0,
     },
+    scroll: {
+        maxHeight: "calc(100vh - 200px)",
+    },
 }));
 
 export default function SelectFileDialog(props) {
@@ -75,14 +79,18 @@ export default function SelectFileDialog(props) {
             open={props.open}
             onClose={props.onClose}
             aria-labelledby="form-dialog-title"
+            fullWidth
         >
             <DialogTitle id="form-dialog-title">
                 {t("download.selectDownloadingFile")}
             </DialogTitle>
             <DialogContent dividers={"paper"} className={classes.content}>
-                {files.map((v, k) => {
-                    return (
-                        <MenuItem key={k}>
+                <Virtuoso
+                    style={{ height: 54 * files.length }}
+                    className={classes.scroll}
+                    data={files}
+                    itemContent={(index, v) => (
+                        <MenuItem key={index}>
                             <FormGroup row>
                                 <FormControlLabel
                                     control={
@@ -96,8 +104,8 @@ export default function SelectFileDialog(props) {
                                 />
                             </FormGroup>
                         </MenuItem>
-                    );
-                })}
+                    )}
+                />
             </DialogContent>
             <DialogActions>
                 <Button onClick={props.onClose}>
diff --git a/src/component/Navbar/Navbar.js b/src/component/Navbar/Navbar.js
index b724f70..b0de0f9 100644
--- a/src/component/Navbar/Navbar.js
+++ b/src/component/Navbar/Navbar.js
@@ -397,22 +397,24 @@ class NavbarCompoment extends Component {
                                         primary={t("navbar.myShare")}
                                     />
                                 </ListItem>
-                                <ListItem
-                                    button
-                                    key="离线下载"
-                                    onClick={() =>
-                                        this.props.history.push("/aria2?")
-                                    }
-                                >
-                                    <ListItemIcon>
-                                        <DownloadIcon
-                                            className={classes.iconFix}
+                                {user.group.allowRemoteDownload && (
+                                    <ListItem
+                                        button
+                                        key="离线下载"
+                                        onClick={() =>
+                                            this.props.history.push("/aria2?")
+                                        }
+                                    >
+                                        <ListItemIcon>
+                                            <DownloadIcon
+                                                className={classes.iconFix}
+                                            />
+                                        </ListItemIcon>
+                                        <ListItemText
+                                            primary={t("navbar.remoteDownload")}
                                         />
-                                    </ListItemIcon>
-                                    <ListItemText
-                                        primary={t("navbar.remoteDownload")}
-                                    />
-                                </ListItem>
+                                    </ListItem>
+                                )}
                                 {user.group.webdav && (
                                     <ListItem
                                         button