show cumulative download speed

code refactoring

frontend/src/components/DownloadCard.tsx

@@ -61,14 +61,22 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
           /> :
           <Skeleton variant="rectangular" height={180} />
         }
+        {download.progress.percentage ?
+          <LinearProgress
+            variant="determinate"
+            value={percentageToNumber()}
+            color={isCompleted() ? "success" : "primary"}
+          /> :
+          null
+        }
         <CardContent>
           {download.info.title !== '' ?
             <Typography gutterBottom variant="h6" component="div">
-              {ellipsis(download.info.title, 54)}
+              {ellipsis(download.info.title, 100)}
             </Typography> :
             <Skeleton />
           }
-          <Stack direction="row" spacing={1} py={2}>
+          <Stack direction="row" spacing={0.5} py={1}>
             <Chip
               label={
                 isCompleted()
@@ -90,14 +98,6 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
             </Typography>
             <Resolution resolution={download.info.resolution} />
           </Stack>
-          {download.progress.percentage ?
-            <LinearProgress
-              variant="determinate"
-              value={percentageToNumber()}
-              color={isCompleted() ? "secondary" : "primary"}
-            /> :
-            null
-          }
         </CardContent>
       </CardActionArea>
       <CardActions>

frontend/src/components/Downloads.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { loadingDownloadsState } from '../atoms/downloads'
+import { activeDownloadsState, loadingDownloadsState } from '../atoms/downloads'
 import { listViewState } from '../atoms/settings'
-import { loadingAtom } from '../atoms/ui'
+import { loadingAtom, totalDownloadSpeedState } from '../atoms/ui'
 import DownloadsCardView from './DownloadsCardView'
 import DownloadsTableView from './DownloadsTableView'
 
@@ -12,10 +12,18 @@ const Downloads: React.FC = () => {
 
   const [isLoading, setIsLoading] = useRecoilState(loadingAtom)
 
+  const downloads = useRecoilValue(activeDownloadsState)
+  const [, setTotalDownloadSpeed] = useRecoilState(totalDownloadSpeedState)
+
+  useEffect(() => {
+    setTotalDownloadSpeed(
+      downloads.map(d => d.progress.speed).reduce((curr, next) => curr + next)
+    )
+  }, [downloads])
+
   useEffect(() => {
     if (loadingDownloads) {
-      setIsLoading(true)
-      return
+      return setIsLoading(true)
     }
     setIsLoading(false)
   }, [loadingDownloads, isLoading])

frontend/src/components/Footer.tsx

@@ -7,10 +7,14 @@ import { connectedState } from '../atoms/status'
 import { useI18n } from '../hooks/useI18n'
 import FreeSpaceIndicator from './FreeSpaceIndicator'
 import VersionIndicator from './VersionIndicator'
+import DownloadIcon from '@mui/icons-material/Download'
+import { totalDownloadSpeedState } from '../atoms/ui'
+import { formatSpeedMiB } from '../utils'
 
 const Footer: React.FC = () => {
   const settings = useRecoilValue(settingsState)
   const isConnected = useRecoilValue(connectedState)
+  const totalDownloadSpeed = useRecoilValue(totalDownloadSpeedState)
 
   const mode = settings.theme
   const { i18n } = useI18n()
@@ -42,6 +46,11 @@ const Footer: React.FC = () => {
             marginRight: 'px',
             gap: 3,
           }}>
+            <DownloadIcon />
+            <span>
+              {formatSpeedMiB(totalDownloadSpeed)}
+            </span>
+            <Divider orientation="vertical" flexItem />
             <SettingsEthernet />
             <span>
               {isConnected ? settings.serverAddr : i18n.t('notConnectedText')}