fix: remove asset.resized (#11983)

fix: remove resized

web/src/lib/components/assets/broken-asset.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiImageBrokenVariant } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let square = false;
+  export let noMessage = false;
+</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>

web/src/lib/components/assets/thumbnail/image-thumbnail.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-
-  import { fade } from 'svelte/transition';
-
   import { thumbhash } from '$lib/actions/thumbhash';
+  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { TUNABLES } from '$lib/utils/tunables';
-  import { mdiEyeOffOutline, mdiImageBrokenVariant } from '@mdi/js';
+  import { mdiEyeOffOutline } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
 
   export let url: string;
   export let altText: string | undefined;
@@ -48,9 +48,9 @@
 </script>
 
 {#if errored}
-  <div class="absolute flex h-full w-full items-center justify-center p-4 z-10">
-    <Icon path={mdiImageBrokenVariant} size="48" />
-  </div>
+  <BrokenAsset>
+    <div slot="message" class="absolute top-2/3">{$t('error_loading_image')}</div>
+  </BrokenAsset>
 {:else}
   <img
     bind:this={img}

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -13,7 +13,6 @@
     mdiCameraBurst,
     mdiCheckCircle,
     mdiHeart,
-    mdiImageBrokenVariant,
     mdiMotionPauseOutline,
     mdiMotionPlayOutline,
     mdiRotate360,
@@ -297,20 +296,14 @@
           </div>
         {/if}
 
-        {#if asset.resized}
-          <ImageThumbnail
-            url={getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, checksum: asset.checksum })}
-            altText={$getAltText(asset)}
-            widthStyle="{width}px"
-            heightStyle="{height}px"
-            curve={selected}
-            onComplete={() => (loaded = true)}
-          />
-        {:else}
-          <div class="absolute flex h-full w-full items-center justify-center p-4 z-10">
-            <Icon path={mdiImageBrokenVariant} size="48" />
-          </div>
-        {/if}
+        <ImageThumbnail
+          url={getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, checksum: asset.checksum })}
+          altText={$getAltText(asset)}
+          widthStyle="{width}px"
+          heightStyle="{height}px"
+          curve={selected}
+          onComplete={() => (loaded = true)}
+        />
 
         {#if asset.type === AssetTypeEnum.Video}
           <div class="absolute top-0 h-full w-full">