forked from Cutlery/immich
Daniel Dietzler
60 lines
2.4 KiB
Svelte
60 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { type DownloadProgress, downloadManager } from '$lib/managers/download-manager.svelte';
|
|
import { locale } from '$lib/stores/preferences.store';
|
|
import { Heading, IconButton } from '@immich/ui';
|
|
import { mdiClose } from '@mdi/js';
|
|
import { t } from 'svelte-i18n';
|
|
import { fly, slide } from 'svelte/transition';
|
|
import { getByteUnitString } from '$lib/utils/byte-units';
|
|
|
|
const abort = (downloadKey: string, download: DownloadProgress) => {
|
|
download.abort?.abort();
|
|
downloadManager.clear(downloadKey);
|
|
};
|
|
</script>
|
|
|
|
{#if downloadManager.isDownloading}
|
|
<div
|
|
transition:fly={{ x: -100, duration: 350 }}
|
|
class="fixed inset-s-2 bottom-10 z-60 max-h-67.5 w-79 rounded-2xl border bg-subtle p-4 shadow-lg dark:border-white/10"
|
|
>
|
|
<Heading size="tiny">{$t('downloading')}</Heading>
|
|
<div class="my-2 mb-2 flex max-h-50 flex-col overflow-y-auto text-sm">
|
|
{#each Object.keys(downloadManager.assets) as downloadKey (downloadKey)}
|
|
{@const download = downloadManager.assets[downloadKey]}
|
|
<div class="mb-2 flex place-items-center" transition:slide>
|
|
<div class="w-full pe-10">
|
|
<div class="flex place-items-center justify-between gap-2 text-xs font-medium">
|
|
<p class="truncate">{downloadKey}</p>
|
|
{#if download.total}
|
|
<p class="whitespace-nowrap">{getByteUnitString(download.total, $locale)}</p>
|
|
{/if}
|
|
</div>
|
|
<div class="flex place-items-center gap-2">
|
|
<div class="h-2.5 w-full rounded-full bg-neutral-200 dark:bg-neutral-600">
|
|
<div class="h-2.5 rounded-full bg-primary" style={`width: ${download.percentage}%`}></div>
|
|
</div>
|
|
<p class="min-w-16 text-right whitespace-nowrap">
|
|
<span class="text-primary">
|
|
{(download.percentage / 100).toLocaleString($locale, { style: 'percent' })}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="absolute inset-e-4">
|
|
<IconButton
|
|
color="secondary"
|
|
variant="outline"
|
|
shape="round"
|
|
aria-label={$t('close')}
|
|
onclick={() => abort(downloadKey, download)}
|
|
size="tiny"
|
|
icon={mdiClose}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|