diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte index 0a3da9ade3..40a36fa0e0 100644 --- a/web/src/lib/components/asset-viewer/photo-viewer.svelte +++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte @@ -152,7 +152,7 @@ ]} /> {#if imageError} - <BrokenAsset square /> + <BrokenAsset class="text-xl" /> {/if} <!-- svelte-ignore a11y-missing-attribute --> <img bind:this={loader} style="display:none" src={imageLoaderUrl} aria-hidden="true" /> diff --git a/web/src/lib/components/assets/broken-asset.svelte b/web/src/lib/components/assets/broken-asset.svelte index 216a8f6f84..dd54afba01 100644 --- a/web/src/lib/components/assets/broken-asset.svelte +++ b/web/src/lib/components/assets/broken-asset.svelte @@ -3,23 +3,20 @@ import { mdiImageBrokenVariant } from '@mdi/js'; import { t } from 'svelte-i18n'; - export let square = false; - export let noMessage = false; + let className = ''; + export { className as class }; + export let hideMessage = false; + export let width: string | undefined = undefined; + export let height: string | undefined = undefined; </script> -<section class="flex h-full w-full justify-center"> - <div - class="px-auto flex flex-col {square - ? 'aspect-square' - : 'w-full'} h-full items-center justify-center bg-gray-100 dark:text-gray-100 dark:bg-immich-dark-gray" - > - <slot name="message"> - {#if !noMessage} - <div class="text-lg absolute top-2/3">{$t('error_loading_image')}</div> - {/if} - </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> +<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}" + style:width + style:height +> + <Icon path={mdiImageBrokenVariant} size="7em" class="max-w-full" /> + {#if !hideMessage} + <span class="text-center">{$t('error_loading_image')}</span> + {/if} +</div> diff --git a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte index 38f2ff4dbb..662209544a 100644 --- a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte +++ b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte @@ -5,7 +5,6 @@ import { TUNABLES } from '$lib/utils/tunables'; import { mdiEyeOffOutline } from '@mdi/js'; import { onMount } from 'svelte'; - import { t } from 'svelte-i18n'; import { fade } from 'svelte/transition'; export let url: string; @@ -45,12 +44,20 @@ 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> {#if errored} - <BrokenAsset> - <div slot="message" class="absolute top-2/3">{$t('error_loading_image')}</div> - </BrokenAsset> + <BrokenAsset class={optionalClasses} width={widthStyle} height={heightStyle} /> {:else} <img bind:this={img} @@ -64,11 +71,7 @@ src={url} alt={loaded || errored ? altText : ''} {title} - class="object-cover {border ? 'border-[3px] border-immich-dark-primary/80 hover:border-immich-primary' : ''}" - class:rounded-xl={curve} - class:shadow-lg={shadow} - class:rounded-full={circle} - class:aspect-square={circle || !heightStyle} + class="object-cover {optionalClasses}" class:opacity-0={!thumbhash && !loaded} draggable="false" /> diff --git a/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte b/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte index 69c11e079c..d8b0a1b0d7 100644 --- a/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte +++ b/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte @@ -11,7 +11,7 @@ </script> {#if isBroken} - <BrokenAsset noMessage /> + <BrokenAsset hideMessage class="aspect-square rounded-xl" /> {:else} <img {alt}