async (url: string) => {
downloadBlob(blob, filename)
}
-const downloadMediaShowProgress = (t: TranslationFn) => async (
- response: Response
-) => {
- const totalBytes = Number(response.headers.get('content-length'))
- const reader = response.body?.getReader()
- const data = new Uint8Array(totalBytes)
+const downloadMediaShowProgress =
+ (t: TranslationFn) => async (response: Response) => {
+ const totalBytes = Number(response.headers.get('content-length'))
+ const reader = response.body?.getReader()
+ const data = new Uint8Array(totalBytes)
- if (reader == null) {
- throw new Error('Download reader is null')
- }
+ if (reader == null) {
+ throw new Error('Download reader is null')
+ }
- let canceled = false
- const onDismiss = () => {
- canceled = true
- reader.cancel('Download canceled by user')
- }
-
- const notifyKey = Math.random().toString(26)
- MessageState.add({
- key: notifyKey,
- type: 'progress',
- onDismiss,
- props: {
- header: 'Downloading photo',
- content: `Starting download`,
- progress: 0,
- },
- })
-
- let receivedBytes = 0
- let result
- do {
- result = await reader.read()
-
- if (canceled) break
-
- if (result.value) data.set(result.value, receivedBytes)
-
- receivedBytes += result.value ? result.value.length : 0
+ let canceled = false
+ const onDismiss = () => {
+ canceled = true
+ reader.cancel('Download canceled by user')
+ }
+ const notifyKey = Math.random().toString(26)
MessageState.add({
key: notifyKey,
type: 'progress',
onDismiss,
props: {
header: 'Downloading photo',
- percent: (receivedBytes / totalBytes) * 100,
- content: `${formatBytes(t)(receivedBytes)} of ${formatBytes(t)(
- totalBytes
- )} bytes downloaded`,
+ content: `Starting download`,
+ progress: 0,
},
})
- } while (!result.done)
- if (canceled) {
- return
+ let receivedBytes = 0
+ let result
+ do {
+ result = await reader.read()
+
+ if (canceled) break
+
+ if (result.value) data.set(result.value, receivedBytes)
+
+ receivedBytes += result.value ? result.value.length : 0
+
+ MessageState.add({
+ key: notifyKey,
+ type: 'progress',
+ onDismiss,
+ props: {
+ header: 'Downloading photo',
+ percent: (receivedBytes / totalBytes) * 100,
+ content: `${formatBytes(t)(receivedBytes)} of ${formatBytes(t)(
+ totalBytes
+ )} bytes downloaded`,
+ },
+ })
+ } while (!result.done)
+
+ if (canceled) {
+ return
+ }
+
+ MessageState.add({
+ key: notifyKey,
+ type: 'progress',
+ props: {
+ header: 'Downloading photo completed',
+ content: `The photo has been downloaded`,
+ percent: 100,
+ positive: true,
+ },
+ })
+
+ setTimeout(() => {
+ MessageState.removeKey(notifyKey)
+ }, 2000)
+
+ const content = new Blob([data.buffer], {
+ type: response.headers.get('content-type') || undefined,
+ })
+
+ return content
}
- MessageState.add({
- key: notifyKey,
- type: 'progress',
- props: {
- header: 'Downloading photo completed',
- content: `The photo has been downloaded`,
- percent: 100,
- positive: true,
- },
- })
-
- setTimeout(() => {
- MessageState.removeKey(notifyKey)
- }, 2000)
-
- const content = new Blob([data.buffer], {
- type: response.headers.get('content-type') || undefined,
- })
-
- return content
-}
-
const downloadBlob = async (blob: Blob, filename: string) => {
const objectUrl = window.URL.createObjectURL(blob)
@@ -188,10 +186,6 @@ const downloadBlob = async (blob: Blob, filename: string) => {
window.URL.revokeObjectURL(objectUrl)
}
-const DownloadTableRow = styled(Table.Row)`
- cursor: pointer;
-`
-
type SidebarDownladProps = {
media: MediaSidebarMedia
}
@@ -229,41 +223,45 @@ const SidebarDownload = ({ media }: SidebarDownladProps) => {
const download = downloadMedia(t)
const bytes = formatBytes(t)
const downloadRows = downloads.map(x => (
-
download(x.mediaUrl.url)}
+ tabIndex={0}
>
- {`${x.title}`}
- {`${x.mediaUrl.width} x ${x.mediaUrl.height}`}
- {`${bytes(x.mediaUrl.fileSize)}`}
- {extractExtension(x.mediaUrl.url)}
-
+
{`${x.title}`} |
+
{`${x.mediaUrl.width} x ${x.mediaUrl.height}`} |
+
{`${bytes(x.mediaUrl.fileSize)}`} |
+
{extractExtension(x.mediaUrl.url)} |
+
))
return (
-
-
{t('sidebar.download.title', 'Download')}
+
+
+ {t('sidebar.download.title', 'Download')}
+
-
-
-
-
+
+
+
+ |
{t('sidebar.download.table_columns.name', 'Name')}
-
-
+ |
+
{t('sidebar.download.table_columns.dimensions', 'Dimensions')}
-
-
+ |
+
{t('sidebar.download.table_columns.file_size', 'Size')}
-
-
+ |
+
{t('sidebar.download.table_columns.file_type', 'Type')}
-
-
-
- {downloadRows}
- |
-
+
+
+
+ {downloadRows}
+
+
)
}
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index a9646293..8ce22d14 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -7,11 +7,11 @@ import svgr from 'vite-plugin-svgr'
export default defineConfig({
plugins: [
reactRefresh(),
- // babel({
- // babelHelpers: 'bundled',
- // exclude: 'node_modules/**',
- // extensions: ['.js', '.jsx', '.ts', '.tsx'],
- // }),
+ babel({
+ babelHelpers: 'bundled',
+ exclude: 'node_modules/**',
+ extensions: ['.js', '.jsx', '.ts', '.tsx'],
+ }),
svgr(),
],
server: {