onedrive/components/MultiFileDownloader.tsx
2022-02-14 19:33:19 +08:00

260 lines
8.1 KiB
TypeScript

import { NextRouter } from 'next/router'
import toast from 'react-hot-toast'
import JSZip from 'jszip'
import { useTranslation } from 'next-i18next'
import { fetcher } from '../utils/fetchWithSWR'
import { getStoredToken } from '../utils/protectedRouteHandler'
/**
* A loading toast component with file download progress support
* @param props
* @param props.router Next router instance, used for reloading the page
* @param props.progress Current downloading and compression progress (returned by jszip metadata)
*/
export function DownloadingToast({ router, progress }: { router: NextRouter; progress?: string }) {
const { t } = useTranslation()
return (
<div className="flex items-center space-x-2">
<div className="w-56">
<span>{progress ? t('Downloading {{progress}}%', { progress }) : t('Downloading selected files...')}</span>
<div className="relative mt-2">
<div className="flex h-1 overflow-hidden rounded bg-gray-100">
<div style={{ width: `${progress}%` }} className="bg-gray-500 text-white transition-all duration-100"></div>
</div>
</div>
</div>
<button
className="rounded bg-red-500 p-2 text-white hover:bg-red-400 focus:outline-none focus:ring focus:ring-red-300"
onClick={() => router.reload()}
>
{t('Cancel')}
</button>
</div>
)
}
// Blob download helper
export function downloadBlob({ blob, name }: { blob: Blob; name: string }) {
// Prepare for download
const el = document.createElement('a')
el.style.display = 'none'
document.body.appendChild(el)
// Download zip file
const bUrl = window.URL.createObjectURL(blob)
el.href = bUrl
el.download = name
el.click()
window.URL.revokeObjectURL(bUrl)
el.remove()
}
/**
* Download multiple files after compressing them into a zip
* @param toastId Toast ID to be used for toast notification
* @param files Files to be downloaded
* @param folder Optional folder name to hold files, otherwise flatten files in the zip
*/
export async function downloadMultipleFiles({
toastId,
router,
files,
folder,
}: {
toastId: string
router: NextRouter
files: { name: string; url: string }[]
folder?: string
}): Promise<void> {
const zip = new JSZip()
const dir = folder ? zip.folder(folder)! : zip
// Add selected file blobs to zip
files.forEach(({ name, url }) => {
dir.file(
name,
fetch(url).then(r => {
return r.blob()
})
)
})
// Create zip file and download it
const b = await zip.generateAsync({ type: 'blob' }, metadata => {
toast.loading(<DownloadingToast router={router} progress={metadata.percent.toFixed(0)} />, {
id: toastId,
})
})
downloadBlob({ blob: b, name: folder ? folder + '.zip' : 'download.zip' })
}
/**
* Download hierarchical tree-like files after compressing them into a zip
* @param toastId Toast ID to be used for toast notification
* @param files Files to be downloaded. Array of file and folder items excluding root folder.
* Folder items MUST be in front of its children items in the array.
* Use async generator because generation of the array may be slow.
* When waiting for its generation, we can meanwhile download bodies of already got items.
* Only folder items can have url undefined.
* @param basePath Root dir path of files to be downloaded
* @param folder Optional folder name to hold files, otherwise flatten files in the zip
*/
export async function downloadTreelikeMultipleFiles({
toastId,
router,
files,
basePath,
folder,
}: {
toastId: string
router: NextRouter
files: AsyncGenerator<{
name: string
url?: string
path: string
isFolder: boolean
}>
basePath: string
folder?: string
}): Promise<void> {
const zip = new JSZip()
const root = folder ? zip.folder(folder)! : zip
const map = [{ path: basePath, dir: root }]
// Add selected file blobs to zip according to its path
for await (const { name, url, path, isFolder } of files) {
// Search parent dir in map
const i = map
.slice()
.reverse()
.findIndex(
({ path: parent }) =>
path.substring(0, parent.length) === parent && path.substring(parent.length + 1).indexOf('/') === -1
)
if (i === -1) {
throw new Error('File array does not satisfy requirement')
}
// Add file or folder to zip
const dir = map[map.length - 1 - i].dir
if (isFolder) {
map.push({ path, dir: dir.folder(name)! })
} else {
dir.file(
name,
fetch(url!).then(r => r.blob())
)
}
}
// Create zip file and download it
const b = await zip.generateAsync({ type: 'blob' }, metadata => {
toast.loading(<DownloadingToast router={router} progress={metadata.percent.toFixed(0)} />, {
id: toastId,
})
})
downloadBlob({ blob: b, name: folder ? folder + '.zip' : 'download.zip' })
}
interface TraverseItem {
path: string
meta: any
isFolder: boolean
error?: { status: number; message: string }
}
/**
* One-shot concurrent top-down file traversing for the folder.
* Due to react hook limit, we cannot reuse SWR utils for recursive actions.
* We will directly fetch API and arrange responses instead.
* In folder tree, we visit folders top-down as concurrently as possible.
* Every time we visit a folder, we fetch and return meta of all its children.
* If folders have pagination, partically retrieved items are not returned immediately,
* but after all children of the folder have been successfully retrieved.
* If an error occurred in paginated fetching, all children will be dropped.
* @param path Folder to be traversed. The path should be cleaned in advance.
* @returns Array of items representing folders and files of traversed folder top-down and excluding root folder.
* Due to top-down, Folder items are ALWAYS in front of its children items.
* Error key in the item will contain the error when there is a handleable error.
*/
export async function* traverseFolder(path: string): AsyncGenerator<TraverseItem, void, undefined> {
const hashedToken = getStoredToken(path)
// Generate the task passed to Promise.race to request a folder
const genTask = async (i: number, path: string, next?: string) => {
return {
i,
path,
data: await fetcher(
next ? `/api/?path=${path}&next=${next}` : `/api?path=${path}`,
hashedToken ?? undefined
).catch(error => ({ i, path, error })),
}
}
// Pool containing Promises of folder requests
let pool = [genTask(0, path)]
// Map as item buffer for folders with pagination
const buf: { [k: string]: TraverseItem[] } = {}
// filter(() => true) removes gaps in the array
while (pool.filter(() => true).length > 0) {
let info: { i: number; path: string; data: any }
try {
info = await Promise.race(pool.filter(() => true))
} catch (error: any) {
const { i, path, error: innerError } = error
// 4xx errors are identified as handleable errors
if (Math.floor(innerError.status / 100) === 4) {
delete pool[i]
yield {
path,
meta: {},
isFolder: true,
error: { status: innerError.status, message: innerError.message.error },
}
continue
} else {
throw error
}
}
const { i, path, data } = info
if (!data || !data.folder) {
throw new Error('Path is not folder')
}
delete pool[i]
const items = data.folder.value.map((c: any) => {
const p = `${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`
return { path: p, meta: c, isFolder: Boolean(c.folder) }
}) as TraverseItem[]
if (data.next) {
buf[path] = (buf[path] ?? []).concat(items)
// Append next page task to the pool at the end
const i = pool.length
pool[i] = genTask(i, path, data.next)
} else {
const allItems = (buf[path] ?? []).concat(items)
if (buf[path]) {
delete buf[path]
}
allItems
.filter(item => item.isFolder)
.forEach(item => {
// Append new folder tasks to the pool at the end
const i = pool.length
pool[i] = genTask(i, item.path)
})
yield* allItems
}
}
}