feat: Add Download Manager (pause, stop, delete) (#1339)

4 files changed, 397 insertions, 1 deletions

diff --git a/src/components/downloadManager/DownloadManagerDashboard.tsx b/src/components/downloadManager/DownloadManagerDashboard.tsx
new file mode 100644
index 000000000..86facc476
--- /dev/null
+++ b/src/components/downloadManager/DownloadManagerDashboard.tsx
@@ -0,0 +1,288 @@
+import { Component } from 'react';
+import { observer } from 'mobx-react';
+import { IntlShape, defineMessages, injectIntl } from 'react-intl';
+import { shell } from 'electron';
+import prettyBytes from 'pretty-bytes';
+import {
+  Typography,
+  Card,
+  CardContent,
+  LinearProgress,
+  Box,
+  IconButton,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+import { mdiDownload } from '@mdi/js';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import PauseIcon from '@mui/icons-material/Pause';
+import CancelIcon from '@mui/icons-material/Cancel';
+import FolderIcon from '@mui/icons-material/Folder';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
+import { round } from 'lodash';
+import { RealStores } from '../../stores';
+import { Actions } from '../../actions/lib/actions';
+import Icon from '../ui/icon';
+
+const messages = defineMessages({
+  headline: {
+    id: 'downloadManager.headline',
+    defaultMessage: 'Download Manager',
+  },
+  empty: {
+    id: 'downloadManager.empty',
+    defaultMessage: 'Your download list is empty.',
+  },
+});
+
+interface IProps {
+  intl: IntlShape;
+  stores?: RealStores;
+  actions?: Actions;
+}
+
+interface IState {
+  data: string;
+}
+
+// eslint-disable-next-line react/prefer-stateless-function
+class DownloadManagerDashboard extends Component<IProps, IState> {
+  render() {
+    const { intl, stores, actions } = this.props;
+
+    const downloads = stores?.app.downloads ?? [];
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+              gap={1.5}
+            >
+              <Icon icon={mdiDownload} size={1.5} />
+              {intl.formatMessage(messages.headline)}
+              <span className="badge badge--success">beta</span>
+            </Box>
+          </span>
+        </div>
+        <div className="settings__body">
+          {downloads.length === 0 ? (
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+              gap={4}
+            >
+              <Icon icon={mdiDownload} size={1.8} />
+              <Typography variant="h4">
+                {intl.formatMessage(messages.empty)}
+              </Typography>
+            </Box>
+          ) : (
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'flex-end',
+                height: 'fit-content',
+              }}
+            >
+              <Box
+                sx={{
+                  maxWidth: '176px',
+                }}
+              >
+                <ListItemButton
+                  onClick={() => {
+                    actions?.app.removeDownload(null);
+                  }}
+                >
+                  <ListItemIcon>
+                    <ClearAllIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Clear all completed" />
+                </ListItemButton>
+              </Box>
+            </Box>
+          )}
+          {downloads.map(download => {
+            const {
+              totalBytes,
+              receivedBytes,
+              filename,
+              url,
+              savePath,
+              state,
+              id,
+              paused,
+            } = download;
+
+            const downloadPercentage =
+              receivedBytes !== undefined && totalBytes !== undefined
+                ? round((receivedBytes / totalBytes) * 100, 2)
+                : null;
+
+            const stateParse =
+              state === 'progressing'
+                ? paused === false || paused === undefined
+                  ? null
+                  : 'Paused'
+                : state === 'cancelled'
+                ? 'Cancelled'
+                : state === 'completed'
+                ? null
+                : 'Error';
+
+            return (
+              <Card
+                key={id}
+                style={{
+                  marginBottom: '16px',
+                  height: 'fit-content',
+                  display: 'flex',
+                }}
+              >
+                <Box
+                  sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}
+                >
+                  <CardContent>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                      }}
+                      gap={2}
+                    >
+                      <button
+                        type="button"
+                        disabled={state !== 'completed'}
+                        style={{
+                          pointerEvents:
+                            state === 'completed' ? undefined : 'none',
+                        }}
+                        onClick={() => {
+                          if (savePath) shell.openPath(savePath);
+                        }}
+                      >
+                        <Typography
+                          variant="h6"
+                          color={state === 'completed' ? 'primary' : undefined}
+                          sx={{
+                            textDecoration:
+                              stateParse !== null && stateParse !== 'Paused'
+                                ? 'line-through'
+                                : state === 'completed'
+                                ? 'underline'
+                                : null,
+                          }}
+                        >
+                          {filename}
+                        </Typography>
+                      </button>
+                      <Typography
+                        variant="h6"
+                        color={stateParse === 'Paused' ? '#ed6c02' : undefined}
+                      >
+                        {stateParse !== null && stateParse !== 'Paused'
+                          ? stateParse
+                          : stateParse === 'Paused'
+                          ? stateParse
+                          : null}
+                      </Typography>
+                    </Box>
+                    <Typography variant="body2">{url}</Typography>
+                    <LinearProgress
+                      variant="determinate"
+                      value={downloadPercentage || 0}
+                      style={{ marginTop: '8px', marginBottom: '8px' }}
+                    />
+                    <Typography variant="body2">
+                      {`${
+                        downloadPercentage ? `${downloadPercentage}%  - ` : ''
+                      }${
+                        receivedBytes ? `${prettyBytes(receivedBytes)} of ` : ''
+                      }${totalBytes ? prettyBytes(totalBytes) : ''}`}
+                    </Typography>
+                  </CardContent>
+                </Box>
+
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: '8px',
+                  }}
+                >
+                  {state !== 'completed' && state !== 'cancelled' && (
+                    <IconButton
+                      color="error"
+                      size="small"
+                      onClick={() => {
+                        actions?.app.stopDownload(id);
+                      }}
+                    >
+                      <CancelIcon />
+                    </IconButton>
+                  )}
+                  {state === 'progressing' && (
+                    <IconButton
+                      color={
+                        paused === false || paused === undefined
+                          ? 'warning'
+                          : 'success'
+                      }
+                      size="small"
+                      onClick={() => {
+                        actions?.app.togglePauseDownload(id);
+                      }}
+                    >
+                      {(paused === false || paused === undefined) && (
+                        <PauseIcon />
+                      )}
+                      {paused && <PlayArrowIcon />}
+                    </IconButton>
+                  )}
+                  {(state === 'cancelled' || state === 'completed') && (
+                    <IconButton
+                      color="error"
+                      onClick={() => {
+                        actions?.app.removeDownload(id);
+                      }}
+                      size="small"
+                    >
+                      <DeleteIcon />
+                    </IconButton>
+                  )}
+                  {state !== 'cancelled' && (
+                    <IconButton
+                      color="primary"
+                      onClick={() => {
+                        if (savePath) shell.showItemInFolder(savePath);
+                      }}
+                      size="small"
+                    >
+                      <FolderIcon />
+                    </IconButton>
+                  )}
+                </Box>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(observer(DownloadManagerDashboard));
diff --git a/src/components/downloadManager/DownloadManagerLayout.tsx b/src/components/downloadManager/DownloadManagerLayout.tsx
new file mode 100644
index 000000000..1e018cfb8
--- /dev/null
+++ b/src/components/downloadManager/DownloadManagerLayout.tsx
@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+
+import { mdiClose } from '@mdi/js';
+import { Outlet } from 'react-router-dom';
+import { Actions } from '../../actions/lib/actions';
+import { isEscKeyPress } from '../../jsUtils';
+import Appear from '../ui/effects/Appear';
+import ErrorBoundary from '../util/ErrorBoundary';
+import Icon from '../ui/icon';
+
+const messages = defineMessages({
+  closeSettings: {
+    id: 'settings.app.closeSettings',
+    defaultMessage: 'Close settings',
+  },
+});
+
+interface IProps extends WrappedComponentProps {
+  actions?: Actions;
+  // eslint-disable-next-line react/no-unused-prop-types
+  children?: React.ReactNode;
+}
+
+@inject('stores', 'actions')
+@observer
+class DownloadManagerLayout extends Component<IProps> {
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown.bind(this), false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener(
+      'keydown',
+      // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
+      this.handleKeyDown.bind(this),
+      false,
+    );
+  }
+
+  handleKeyDown(e) {
+    if (isEscKeyPress(e.keyCode)) {
+      this.props.actions!.ui.closeSettings();
+    }
+  }
+
+  render() {
+    const { closeSettings } = this.props.actions!.ui;
+
+    const { intl } = this.props;
+
+    return (
+      <Appear transitionName="fadeIn-fast">
+        <div className="settings-wrapper">
+          <ErrorBoundary>
+            <button
+              type="button"
+              className="settings-wrapper__action"
+              onClick={closeSettings}
+              aria-label={intl.formatMessage(messages.closeSettings)}
+            />
+            <div className="settings franz-form">
+              <Outlet />
+              <button
+                type="button"
+                className="settings__close"
+                onClick={closeSettings}
+                aria-label={intl.formatMessage(messages.closeSettings)}
+              >
+                <Icon icon={mdiClose} size={1.35} />
+              </button>
+            </div>
+          </ErrorBoundary>
+        </div>
+      </Appear>
+    );
+  }
+}
+
+export default injectIntl<'intl', IProps>(DownloadManagerLayout);
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 6fd911a24..7904d7653 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -14,11 +14,12 @@ import {
   mdiPlusBox,
   mdiViewGrid,
   mdiViewSplitVertical,
+  mdiDownload,
 } from '@mdi/js';
-
 import Tabbar from '../services/tabs/Tabbar';
 import {
   addNewServiceShortcutKey,
+  downloadsShortcutKey,
   lockFerdiumShortcutKey,
   muteFerdiumShortcutKey,
   settingsShortcutKey,
@@ -91,6 +92,7 @@ interface IProps extends WrappedComponentProps {
   toggleCollapseMenu: () => void;
   toggleWorkspaceDrawer: () => void;
   openSettings: (args: { path: string }) => void;
+  openDownloads: (args: { path: string }) => void;
   // eslint-disable-next-line react/no-unused-prop-types
   closeSettings: () => void;
   setActive: (args: { serviceId: string }) => void;
@@ -141,6 +143,7 @@ class Sidebar extends Component<IProps, IState> {
   render() {
     const {
       openSettings,
+      openDownloads,
       toggleMuteApp,
       toggleCollapseMenu,
       isAppMuted,
@@ -156,6 +159,7 @@ class Sidebar extends Component<IProps, IState> {
       hideWorkspacesButton,
       hideNotificationsButton,
       hideSettingsButton,
+      hideDownloadButton,
       hideSplitModeButton,
       useHorizontalStyle,
       splitMode,
@@ -180,6 +184,8 @@ class Sidebar extends Component<IProps, IState> {
 
     const { isMenuCollapsed } = stores!.settings.all.app;
 
+    const { isDownloading, justFinishedDownloading } = stores!.app;
+
     return (
       <div className="sidebar">
         <Tabbar
@@ -340,6 +346,25 @@ class Sidebar extends Component<IProps, IState> {
             style={{ height: 'auto', overflowY: 'unset' }}
           />
         )}
+
+        {!hideDownloadButton && !isMenuCollapsed ? (
+          <button
+            type="button"
+            onClick={() => openDownloads({ path: '/downloadmanager' })}
+            className={
+              'sidebar__button' +
+              `${isDownloading ? ' sidebar__button--downloading' : ''}` +
+              `${justFinishedDownloading ? ' sidebar__button--done' : ''}`
+            }
+            data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-content={`${intl.formatMessage(
+              globalMessages.downloads,
+            )} (${downloadsShortcutKey(false)})`}
+          >
+            <Icon icon={mdiDownload} size={1.8} />
+          </button>
+        ) : null}
+
         {!hideSettingsButton && !isMenuCollapsed ? (
           <button
             type="button"
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index 0b5d4374d..210c8d9e9 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -794,6 +794,8 @@ class EditSettingsForm extends Component<IProps, IState> {
 
                 <Toggle {...form.$('hideSettingsButton').bind()} />
 
+                <Toggle {...form.$('hideDownloadButton').bind()} />
+
                 <Toggle {...form.$('alwaysShowWorkspaces').bind()} />
               </div>
             )}