helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(server): download assets (#3032)

Browse source 
* refactor: download assets

* chore: open api

* chore: finish tests, make size configurable

* chore: defualt to 4GiB

* chore: open api

* fix: optional archive size

* fix: bugs

* chore: cleanup
This commit is contained in:
Jason Rasmussen 2023-06-30 12:24:28 -04:00 • committed by GitHub
parent df9c05bef3
commit ad343b7b32
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
53 changed files with 1455 additions and 1403 deletions
Download patch file Download diff file Expand all files Collapse all files

82
web/src/lib/components/album-page/album-viewer.svelte
View file

@ -3,7 +3,6 @@
import { afterNavigate, goto } from '$app/navigation';
import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
import { downloadAssets } from '$lib/stores/download';
import { locale } from '$lib/stores/preferences.store';
import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
import {
@ -45,6 +44,7 @@
import ThumbnailSelection from './thumbnail-selection.svelte';
import UserSelectionModal from './user-selection-modal.svelte';
import { handleError } from '../../utils/handle-error';
import { downloadArchive } from '../../utils/asset-utils';
export let album: AlbumResponseDto;
export let sharedLink: SharedLinkResponseDto | undefined = undefined;
@ -242,78 +242,12 @@
};
const downloadAlbum = async () => {
try {
let skip = 0;
let count = 0;
let done = false;
while (!done) {
count++;
const fileName = album.albumName + `${count === 1 ? '' : count}.zip`;
$downloadAssets[fileName] = 0;
let total = 0;
const { data, status, headers } = await api.albumApi.downloadArchive(
{ id: album.id, skip: skip || undefined, key: sharedLink?.key },
{
responseType: 'blob',
onDownloadProgress: function (progressEvent) {
const request = this as XMLHttpRequest;
if (!total) {
total = Number(request.getResponseHeader('X-Immich-Content-Length-Hint')) || 0;
}
if (total) {
const current = progressEvent.loaded;
$downloadAssets[fileName] = Math.floor((current / total) * 100);
}
}
}
);
const isNotComplete = headers['x-immich-archive-complete'] === 'false';
const fileCount = Number(headers['x-immich-archive-file-count']) || 0;
if (isNotComplete && fileCount > 0) {
skip += fileCount;
} else {
done = true;
}
if (!(data instanceof Blob)) {
return;
}
if (status === 200) {
const fileUrl = URL.createObjectURL(data);
const anchor = document.createElement('a');
anchor.href = fileUrl;
anchor.download = fileName;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(fileUrl);
// Remove item from download list
setTimeout(() => {
const copy = $downloadAssets;
delete copy[fileName];
$downloadAssets = copy;
}, 2000);
}
}
} catch (e) {
$downloadAssets = {};
console.error('Error downloading file ', e);
notificationController.show({
type: NotificationType.Error,
message: 'Error downloading file, check console for more details.'
});
}
await downloadArchive(
`${album.albumName}.zip`,
{ albumId: album.id },
undefined,
sharedLink?.key
);
};
const showAlbumOptionsMenu = ({ x, y }: MouseEvent) => {
@ -360,7 +294,7 @@
>
<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
{#if sharedLink?.allowDownload || !isPublicShared}
<DownloadAction filename={album.albumName} sharedLinkKey={sharedLink?.key} />
<DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink?.key} />
{/if}
{#if isOwned}
<RemoveFromAlbum bind:album />

74
web/src/lib/components/asset-viewer/asset-viewer.svelte
View file

@ -1,6 +1,5 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { downloadAssets } from '$lib/stores/download';
import {
AlbumResponseDto,
api,
@ -25,7 +24,7 @@
import { assetStore } from '$lib/stores/assets.store';
import { isShowDetail } from '$lib/stores/preferences.store';
import { addAssetsToAlbum, getFilenameExtension } from '$lib/utils/asset-utils';
import { addAssetsToAlbum, downloadFile } from '$lib/utils/asset-utils';
import { browser } from '$app/environment';
export let asset: AssetResponseDto;
@ -115,75 +114,6 @@
$isShowDetail = !$isShowDetail;
};
const handleDownload = () => {
if (asset.livePhotoVideoId) {
downloadFile(asset.livePhotoVideoId, true, publicSharedKey);
downloadFile(asset.id, false, publicSharedKey);
return;
}
downloadFile(asset.id, false, publicSharedKey);
};
const downloadFile = async (assetId: string, isLivePhoto: boolean, key: string) => {
try {
const imageExtension = isLivePhoto ? 'mov' : getFilenameExtension(asset.originalPath);
const imageFileName = asset.originalFileName + '.' + imageExtension;
// If assets is already download -> return;
if ($downloadAssets[imageFileName]) {
return;
}
$downloadAssets[imageFileName] = 0;
const { data, status } = await api.assetApi.downloadFile(
{ id: assetId, key },
{
responseType: 'blob',
onDownloadProgress: (progressEvent) => {
if (progressEvent.lengthComputable) {
const total = progressEvent.total;
const current = progressEvent.loaded;
$downloadAssets[imageFileName] = Math.floor((current / total) * 100);
}
}
}
);
if (!(data instanceof Blob)) {
return;
}
if (status === 200) {
const fileUrl = URL.createObjectURL(data);
const anchor = document.createElement('a');
anchor.href = fileUrl;
anchor.download = imageFileName;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(fileUrl);
// Remove item from download list
setTimeout(() => {
const copy = $downloadAssets;
delete copy[imageFileName];
$downloadAssets = copy;
}, 2000);
}
} catch (e) {
$downloadAssets = {};
console.error('Error downloading file ', e);
notificationController.show({
type: NotificationType.Error,
message: 'Error downloading file, check console for more details.'
});
}
};
const deleteAsset = async () => {
try {
if (
@ -313,7 +243,7 @@
showDownloadButton={shouldShowDownloadButton}
on:goBack={closeViewer}
on:showDetail={showDetailInfoHandler}
on:download={handleDownload}
on:download={() => downloadFile(asset, publicSharedKey)}
on:delete={deleteAsset}
on:favorite={toggleFavorite}
on:addToAlbum={() => openAlbumPicker(false)}

18
web/src/lib/components/photos-page/actions/download-action.svelte
View file

@ -1,18 +1,30 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { bulkDownload } from '$lib/utils/asset-utils';
import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
export let filename = 'immich';
export let filename = 'immich.zip';
export let sharedLinkKey: string | undefined = undefined;
export let menuItem = false;
const { getAssets, clearSelect } = getAssetControlContext();
const handleDownloadFiles = async () => {
await bulkDownload(filename, Array.from(getAssets()), clearSelect, sharedLinkKey);
const assets = Array.from(getAssets());
if (assets.length === 1) {
await downloadFile(assets[0], sharedLinkKey);
clearSelect();
return;
}
await downloadArchive(
filename,
{ assetIds: assets.map((asset) => asset.id) },
clearSelect,
sharedLinkKey
);
};
</script>

11
web/src/lib/components/share-page/individual-shared-viewer.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { bulkDownload } from '$lib/utils/asset-utils';
import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
import { downloadArchive } from '$lib/utils/asset-utils';
import { api, AssetResponseDto, SharedLinkResponseDto } from '@api';
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
@ -38,7 +38,12 @@
});
const downloadAssets = async () => {
await bulkDownload('immich-shared', assets, undefined, sharedLink.key);
await downloadArchive(
`immich-shared.zip`,
{ assetIds: assets.map((asset) => asset.id) },
undefined,
sharedLink.key
);
};
const handleUploadAssets = async (files: File[] = []) => {
@ -78,7 +83,7 @@
<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
{#if sharedLink?.allowDownload}
<DownloadAction filename="immich-shared" sharedLinkKey={sharedLink.key} />
<DownloadAction filename="immich-shared.zip" sharedLinkKey={sharedLink.key} />
{/if}
{#if isOwned}
<RemoveFromSharedLink bind:sharedLink />