Implemented "download file" in dashboard and bulk download

closes #115

frontend/src/components/DownloadCard.tsx

@@ -16,8 +16,10 @@ import {
   Typography
 } from '@mui/material'
 import { useCallback } from 'react'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
 import { RPCResult } from '../types'
-import { ellipsis, formatSpeedMiB, mapProcessStatus, formatSize } from '../utils'
+import { base64URLEncode, ellipsis, formatSize, formatSpeedMiB, mapProcessStatus } from '../utils'
 
 type Props = {
   download: RPCResult
@@ -35,6 +37,8 @@ const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
 }
 
 const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
+  const serverAddr = useRecoilValue(serverURL)
+
   const isCompleted = useCallback(
     () => download.progress.percentage === '-1',
     [download.progress.percentage]
@@ -47,6 +51,16 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
     [download.progress.percentage, isCompleted]
   )
 
+  const viewFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/archive/v/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  const downloadFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/archive/d/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
   return (
     <Card>
       <CardActionArea onClick={() => {
@@ -109,6 +123,26 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
         >
           {isCompleted() ? "Clear" : "Stop"}
         </Button>
+        {isCompleted() &&
+          <>
+            <Button
+              variant="contained"
+              size="small"
+              color="primary"
+              onClick={() => downloadFile(download.output.savedFilePath)}
+            >
+              Download
+            </Button>
+            <Button
+              variant="contained"
+              size="small"
+              color="primary"
+              onClick={() => viewFile(download.output.savedFilePath)}
+            >
+              View
+            </Button>
+          </>
+        }
       </CardActions>
     </Card>
   )

frontend/src/components/DownloadsTableView.tsx

@@ -1,14 +1,15 @@
 import DeleteIcon from '@mui/icons-material/Delete'
 import DownloadIcon from '@mui/icons-material/Download'
 import DownloadDoneIcon from '@mui/icons-material/DownloadDone'
+import FileDownloadIcon from '@mui/icons-material/FileDownload'
+import SmartDisplayIcon from '@mui/icons-material/SmartDisplay'
 import StopCircleIcon from '@mui/icons-material/StopCircle'
 import {
   Box,
-  Grid,
+  ButtonGroup,
   IconButton,
   LinearProgress,
   LinearProgressProps,
-  Paper,
   Table,
   TableBody,
   TableCell,
@@ -19,8 +20,9 @@ import {
 } from "@mui/material"
 import { useRecoilValue } from 'recoil'
 import { activeDownloadsState } from '../atoms/downloads'
+import { serverURL } from '../atoms/settings'
 import { useRPC } from '../hooks/useRPC'
-import { formatSize, formatSpeedMiB } from "../utils"
+import { base64URLEncode, formatSize, formatSpeedMiB } from "../utils"
 
 function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
   return (
@@ -38,12 +40,23 @@ function LinearProgressWithLabel(props: LinearProgressProps & { value: number })
 }
 
 const DownloadsTableView: React.FC = () => {
+  const serverAddr = useRecoilValue(serverURL)
   const downloads = useRecoilValue(activeDownloadsState)
 
   const { client } = useRPC()
 
   const abort = (id: string) => client.kill(id)
 
+  const viewFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/archive/v/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  const downloadFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/archive/d/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
   return (
     <TableContainer
       sx={{ minHeight: '80vh', mt: 4 }}
@@ -108,13 +121,31 @@ const DownloadsTableView: React.FC = () => {
                   {new Date(download.info.created_at).toLocaleString()}
                 </TableCell>
                 <TableCell align="right">
-                  <IconButton
-                    size="small"
-                    onClick={() => abort(download.id)}
-                  >
-                    {download.progress.percentage === '-1' ? <DeleteIcon /> : <StopCircleIcon />}
+                  <ButtonGroup>
+                    <IconButton
+                      size="small"
+                      onClick={() => abort(download.id)}
+                    >
+                      {download.progress.percentage === '-1' ? <DeleteIcon /> : <StopCircleIcon />}
 
-                  </IconButton>
+                    </IconButton>
+                    {download.progress.percentage === '-1' &&
+                      <>
+                        <IconButton
+                          size="small"
+                          onClick={() => viewFile(download.output.savedFilePath)}
+                        >
+                          <SmartDisplayIcon />
+                        </IconButton>
+                        <IconButton
+                          size="small"
+                          onClick={() => downloadFile(download.output.savedFilePath)}
+                        >
+                          <FileDownloadIcon />
+                        </IconButton>
+                      </>
+                    }
+                  </ButtonGroup>
                 </TableCell>
               </TableRow>
             ))

frontend/src/components/HomeSpeedDial.tsx

@@ -3,13 +3,14 @@ import BuildCircleIcon from '@mui/icons-material/BuildCircle'
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
 import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
 import ViewAgendaIcon from '@mui/icons-material/ViewAgenda'
+import FolderZipIcon from '@mui/icons-material/FolderZip'
 import {
   SpeedDial,
   SpeedDialAction,
   SpeedDialIcon
 } from '@mui/material'
-import { useRecoilState } from 'recoil'
-import { listViewState } from '../atoms/settings'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { listViewState, serverURL } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
 
@@ -19,6 +20,7 @@ type Props = {
 }
 
 const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
+  const serverAddr = useRecoilValue(serverURL)
   const [listView, setListView] = useRecoilState(listViewState)
 
   const { i18n } = useI18n()
@@ -37,6 +39,11 @@ const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
         tooltipTitle={listView ? 'Card view' : 'Table view'}
         onClick={() => setListView(state => !state)}
       />
+      <SpeedDialAction
+        icon={<FolderZipIcon />}
+        tooltipTitle={i18n.t('bulkDownload')}
+        onClick={() => window.open(`${serverAddr}/archive/bulk`)}
+      />
       <SpeedDialAction
         icon={<DeleteForeverIcon />}
         tooltipTitle={i18n.t('abortAllButton')}