self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-28 11:15:54 +02:00
Code Issues Releases Activity

fix(web): broken album thumbnail (#12381)

Browse Source 
* fix(web): broken album thumbnail

* use properties from thumbnail
This commit is contained in:
Michel Heusschen 2024-09-06 15:16:18 +02:00 committed by GitHub
parent 9fc30d6bf6
commit 639bc0c660
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/asset-viewer/photo-viewer.svelte
View File

@ -152,7 +152,7 @@
]} ]}
/> />
{#if imageError} {#if imageError}
<BrokenAsset square /> <BrokenAsset class="text-xl" />
{/if} {/if}
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-missing-attribute -->
<img bind:this={loader} style="display:none" src={imageLoaderUrl} aria-hidden="true" /> <img bind:this={loader} style="display:none" src={imageLoaderUrl} aria-hidden="true" />

33
web/src/lib/components/assets/broken-asset.svelte
View File

@ -3,23 +3,20 @@
import { mdiImageBrokenVariant } from '@mdi/js'; import { mdiImageBrokenVariant } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
export let square = false; let className = '';
export let noMessage = false; export { className as class };
export let hideMessage = false;
export let width: string | undefined = undefined;
export let height: string | undefined = undefined;
</script> </script>
<section class="flex h-full w-full justify-center"> <div
<div class="flex flex-col overflow-hidden max-h-full max-w-full justify-center items-center bg-gray-100 dark:bg-gray-700 dark:text-gray-100 p-4 {className}"
class="px-auto flex flex-col {square style:width
? 'aspect-square' style:height
: 'w-full'} h-full items-center justify-center bg-gray-100 dark:text-gray-100 dark:bg-immich-dark-gray" >
> <Icon path={mdiImageBrokenVariant} size="7em" class="max-w-full" />
<slot name="message"> {#if !hideMessage}
{#if !noMessage} <span class="text-center">{$t('error_loading_image')}</span>
<div class="text-lg absolute top-2/3">{$t('error_loading_image')}</div> {/if}
{/if} </div>
</slot>
<div class="flex h-full w-full items-center justify-center p-4 bg-gray-100 dark:text-slate-200 dark:bg-gray-700">
<Icon path={mdiImageBrokenVariant} size="33%" />
</div>
</div>
</section>

21
web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
View File

@ -5,7 +5,6 @@
import { TUNABLES } from '$lib/utils/tunables'; import { TUNABLES } from '$lib/utils/tunables';
import { mdiEyeOffOutline } from '@mdi/js'; import { mdiEyeOffOutline } from '@mdi/js';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
export let url: string; export let url: string;
@ -45,12 +44,20 @@
setLoaded(); setLoaded();
} }
}); });
$: optionalClasses = [
curve && 'rounded-xl',
circle && 'rounded-full',
shadow && 'shadow-lg',
(circle || !heightStyle) && 'aspect-square',
border && 'border-[3px] border-immich-dark-primary/80 hover:border-immich-primary',
]
.filter(Boolean)
.join(' ');
</script> </script>
{#if errored} {#if errored}
<BrokenAsset> <BrokenAsset class={optionalClasses} width={widthStyle} height={heightStyle} />
<div slot="message" class="absolute top-2/3">{$t('error_loading_image')}</div>
</BrokenAsset>
{:else} {:else}
<img <img
bind:this={img} bind:this={img}
@ -64,11 +71,7 @@
src={url} src={url}
alt={loaded || errored ? altText : ''} alt={loaded || errored ? altText : ''}
{title} {title}
class="object-cover {border ? 'border-[3px] border-immich-dark-primary/80 hover:border-immich-primary' : ''}" class="object-cover {optionalClasses}"
class:rounded-xl={curve}
class:shadow-lg={shadow}
class:rounded-full={circle}
class:aspect-square={circle || !heightStyle}
class:opacity-0={!thumbhash && !loaded} class:opacity-0={!thumbhash && !loaded}
draggable="false" draggable="false"
/> />

2
web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte
View File

@ -11,7 +11,7 @@
</script> </script>
{#if isBroken} {#if isBroken}
<BrokenAsset noMessage /> <BrokenAsset hideMessage class="aspect-square rounded-xl" />
{:else} {:else}
<img <img
{alt} {alt}