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

fix(web): download panel (#22150)

Browse source
This commit is contained in:
Jason Rasmussen 2025-09-17 16:40:11 -04:00 • committed by GitHub
parent edc0698e2a
commit dfa38ec3ef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 11 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,11 @@
<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 '../../utils/byte-units';
import { IconButton } from '@immich/ui';
const abort = (downloadKey: string, download: DownloadProgress) => {
download.abort?.abort();
@ -16,41 +16,40 @@
{#if downloadManager.isDownloading}
<div
transition:fly={{ x: -100, duration: 350 }}
class="fixed bottom-10 start-2 max-h-[270px] w-[315px] rounded-2xl border p-4 text-sm shadow-sm bg-light"
class="fixed bottom-10 start-2 max-h-[270px] w-[315px] rounded-2xl border dark:border-white/10 p-4 shadow-lg bg-subtle"
>
<p class="uppercase mb-2 text-xs text-gray-500">{$t('downloading')}</p>
<Heading size="tiny">{$t('downloading')}</Heading>
<div class="my-2 mb-2 flex max-h-[200px] 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>
<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-[7px] w-full rounded-full bg-gray-200">
<div class="h-[7px] rounded-full bg-immich-primary" style={`width: ${download.percentage}%`}></div>
<div class="h-[10px] w-full rounded-full bg-neutral-200 dark:bg-neutral-600">
<div class="h-[10px] rounded-full bg-primary" style={`width: ${download.percentage}%`}></div>
</div>
<p class="min-w-[4em] whitespace-nowrap text-right">
<span class="text-immich-primary">
<span class="text-primary">
{(download.percentage / 100).toLocaleString($locale, { style: 'percent' })}
</span>
</p>
</div>
</div>
<div class="absolute end-2">
<div class="absolute end-4">
<IconButton
variant="ghost"
shape="round"
color="secondary"
variant="outline"
shape="round"
aria-label={$t('close')}
onclick={() => abort(downloadKey, download)}
size="large"
size="tiny"
icon={mdiClose}
class="dark:text-immich-dark-gray"
/>
</div>
</div>