From 476eea44df0643d0b4fb3da7fd2cfe4b9e56bb7c Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Wed, 12 Jun 2024 06:12:58 -0500
Subject: [PATCH] chore(web): remove thumbnail usage for places card (#10142)

* chore(web): remove thumbnail usage for places

* remove href attribute from Thumbnail

* linting
---
 .../assets/thumbnail/thumbnail.svelte          |  3 +--
 web/src/routes/(user)/explore/+page.svelte     | 18 ++++++++----------
 web/src/routes/(user)/places/+page.svelte      | 10 +++++++---
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 6c166fdf38..51095df231 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -40,7 +40,6 @@
   export let readonly = false;
   export let showArchiveIcon = false;
   export let showStackedIcon = true;
-  export let href: string | undefined = undefined;
   export let onClick: ((asset: AssetResponseDto, event: Event) => void) | undefined = undefined;
 
   let className = '';
@@ -94,7 +93,7 @@
 
 <IntersectionObserver once={false} on:intersected let:intersecting>
   <a
-    href={href ?? currentUrlReplaceAssetId(asset.id)}
+    href={currentUrlReplaceAssetId(asset.id)}
     style:width="{width}px"
     style:height="{height}px"
     class="group focus-visible:outline-none flex overflow-hidden {disabled
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index 509b7ec51f..3b25cdc0c1 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import { AppRoute } from '$lib/constants';
-  import { getPeopleThumbnailUrl } from '$lib/utils';
-  import type { SearchExploreResponseDto } from '@immich/sdk';
+  import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
+  import { AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
   import type { PageData } from './$types';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
   import { t } from 'svelte-i18n';
@@ -86,15 +85,14 @@
       </div>
       <div class="flex flex-row flex-wrap gap-4">
         {#each places as item (item.data.id)}
-          <div class="relative">
+          <a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}" draggable="false">
             <div
               class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
             >
-              <Thumbnail
-                thumbnailSize={156}
-                asset={item.data}
-                readonly
-                href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}"
+              <img
+                src={getAssetThumbnailUrl({ id: item.data.id, size: AssetMediaSize.Thumbnail })}
+                alt={item.value}
+                class="object-cover w-[156px] h-[156px]"
               />
             </div>
             <span
@@ -102,7 +100,7 @@
             >
               {item.value}
             </span>
-          </div>
+          </a>
         {/each}
       </div>
     </div>
diff --git a/web/src/routes/(user)/places/+page.svelte b/web/src/routes/(user)/places/+page.svelte
index 9ebf9db6aa..28c8e95cb1 100644
--- a/web/src/routes/(user)/places/+page.svelte
+++ b/web/src/routes/(user)/places/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import { AppRoute } from '$lib/constants';
   import { mdiMapMarkerOff } from '@mdi/js';
   import type { PageData } from './$types';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
-  import type { AssetResponseDto } from '@immich/sdk';
+  import { AssetMediaSize, type AssetResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
+  import { getAssetThumbnailUrl } from '$lib/utils';
 
   export let data: PageData;
 
@@ -34,7 +34,11 @@
           <div
             class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
           >
-            <Thumbnail thumbnailSize={156} asset={item} readonly />
+            <img
+              src={getAssetThumbnailUrl({ id: item.id, size: AssetMediaSize.Thumbnail })}
+              alt={city}
+              class="object-cover w-[156px] h-[156px]"
+            />
           </div>
           <span
             class="w-100 absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"