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

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

Browse source 
* 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 99 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

40
web/src/lib/components/asset-viewer/download-panel.svelte
View file

@ -1,6 +1,15 @@
<script lang="ts">
import { downloadAssets, isDownloading } from '$lib/stores/download';
import { DownloadProgress, downloadAssets, downloadManager, isDownloading } from '$lib/stores/download';
import { locale } from '$lib/stores/preferences.store';
import Close from 'svelte-material-icons/Close.svelte';
import { fly, slide } from 'svelte/transition';
import { asByteUnitString } from '../../utils/byte-units';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
const abort = (downloadKey: string, download: DownloadProgress) => {
download.abort?.abort();
downloadManager.clear(downloadKey);
};
</script>
{#if $isDownloading}
@ -10,16 +19,27 @@
>
<p class="text-gray-500 text-xs mb-2">DOWNLOADING</p>
<div class="max-h-[200px] my-2 overflow-y-auto mb-2 flex flex-col text-sm">
{#each Object.keys($downloadAssets) as fileName}
<div class="mb-2" transition:slide>
<p class="font-medium text-xs truncate">■ {fileName}</p>
<div class="flex flex-row-reverse place-items-center gap-5">
<p>
<span class="text-immich-primary font-medium">{$downloadAssets[fileName]}</span>/100
</p>
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700">
<div class="bg-immich-primary h-[7px] rounded-full" style={`width: ${$downloadAssets[fileName]}%`} />
{#each Object.keys($downloadAssets) as downloadKey (downloadKey)}
{@const download = $downloadAssets[downloadKey]}
<div class="mb-2 flex place-items-center" transition:slide>
<div class="w-full pr-10">
<div class="font-medium text-xs flex gap-2 place-items-center justify-between">
<p class="truncate">■ {downloadKey}</p>
{#if download.total}
<p class="whitespace-nowrap">{asByteUnitString(download.total, $locale)}</p>
{/if}
</div>
<div class="flex place-items-center gap-2">
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700">
<div class="bg-immich-primary h-[7px] rounded-full" style={`width: ${download.percentage}%`} />
</div>
<p class="whitespace-nowrap min-w-[4em] text-right">
<span class="text-immich-primary">{download.percentage}%</span>
</p>
</div>
</div>
<div class="absolute right-2">
<CircleIconButton on:click={() => abort(downloadKey, download)} size="20" logo={Close} forceDark />
</div>
</div>
{/each}