1
0
mirror of https://github.com/immich-app/immich.git synced 2025-06-24 04:46:50 +02:00

feat(web): show download size (#3270)

* feat(web): show download size

* chore: never over 100%

* chore: use percentage

* fix: unselect assets before download finishes
This commit is contained in:
Jason Rasmussen
2023-07-14 21:25:13 -04:00
committed by GitHub
parent 81e07fda08
commit 382341f550
7 changed files with 99 additions and 42 deletions

View File

@ -1,5 +1,5 @@
import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
import { clearDownload, updateDownload } from '$lib/stores/download';
import { downloadManager } from '$lib/stores/download';
import { AddAssetsResponseDto, api, AssetApiGetDownloadInfoRequest, AssetResponseDto, DownloadResponseDto } from '@api';
import { handleError } from './handle-error';
@ -37,7 +37,6 @@ const downloadBlob = (data: Blob, filename: string) => {
export const downloadArchive = async (
fileName: string,
options: Omit<AssetApiGetDownloadInfoRequest, 'key'>,
onDone?: () => void,
key?: string,
) => {
let downloadInfo: DownloadResponseDto | null = null;
@ -58,65 +57,77 @@ export const downloadArchive = async (
const suffix = downloadInfo.archives.length === 1 ? '' : `+${i + 1}`;
const archiveName = fileName.replace('.zip', `${suffix}.zip`);
let downloadKey = `${archiveName}`;
let downloadKey = `${archiveName} `;
if (downloadInfo.archives.length > 1) {
downloadKey = `${archiveName} (${i + 1}/${downloadInfo.archives.length})`;
}
updateDownload(downloadKey, 0);
const abort = new AbortController();
downloadManager.add(downloadKey, archive.size, abort);
try {
const { data } = await api.assetApi.downloadArchive(
{ assetIdsDto: { assetIds: archive.assetIds }, key },
{
responseType: 'blob',
onDownloadProgress: (event) => updateDownload(downloadKey, Math.floor((event.loaded / archive.size) * 100)),
signal: abort.signal,
onDownloadProgress: (event) => downloadManager.update(downloadKey, event.loaded),
},
);
downloadBlob(data, archiveName);
} catch (e) {
handleError(e, 'Unable to download files');
clearDownload(downloadKey);
downloadManager.clear(downloadKey);
return;
} finally {
setTimeout(() => clearDownload(downloadKey), 3_000);
setTimeout(() => downloadManager.clear(downloadKey), 5_000);
}
}
onDone?.();
};
export const downloadFile = async (asset: AssetResponseDto, key?: string) => {
const assets = [{ filename: `${asset.originalFileName}.${getFilenameExtension(asset.originalPath)}`, id: asset.id }];
const assets = [
{
filename: `${asset.originalFileName}.${getFilenameExtension(asset.originalPath)}`,
id: asset.id,
size: asset.exifInfo?.fileSizeInByte || 0,
},
];
if (asset.livePhotoVideoId) {
assets.push({
filename: `${asset.originalFileName}.mov`,
id: asset.livePhotoVideoId,
size: 0,
});
}
for (const asset of assets) {
for (const { filename, id, size } of assets) {
const downloadKey = filename;
try {
updateDownload(asset.filename, 0);
const abort = new AbortController();
downloadManager.add(downloadKey, size, abort);
const { data } = await api.assetApi.downloadFile(
{ id: asset.id, key },
{ id, key },
{
responseType: 'blob',
onDownloadProgress: (event: ProgressEvent) => {
if (event.lengthComputable) {
updateDownload(asset.filename, Math.floor((event.loaded / event.total) * 100));
downloadManager.update(downloadKey, event.loaded, event.total);
}
},
signal: abort.signal,
},
);
downloadBlob(data, asset.filename);
downloadBlob(data, filename);
} catch (e) {
handleError(e, `Error downloading ${asset.filename}`);
handleError(e, `Error downloading ${filename}`);
downloadManager.clear(downloadKey);
} finally {
setTimeout(() => clearDownload(asset.filename), 3_000);
setTimeout(() => downloadManager.clear(downloadKey), 5_000);
}
}
};