From 639bc0c66079bb917003017ccd935eef4976d625 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Fri, 6 Sep 2024 15:16:18 +0200
Subject: [PATCH] fix(web): broken album thumbnail (#12381)

* fix(web): broken album thumbnail

* use properties from thumbnail
---
 .../asset-viewer/photo-viewer.svelte          |  2 +-
 .../lib/components/assets/broken-asset.svelte | 33 +++++++++----------
 .../assets/thumbnail/image-thumbnail.svelte   | 21 +++++++-----
 .../covers/asset-cover.svelte                 |  2 +-
 4 files changed, 29 insertions(+), 29 deletions(-)

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}