From f32c5d97cde40f7b13b4ab18f32f29f4941805af Mon Sep 17 00:00:00 2001
From: David Baxter <davidbaxter@gmail.com>
Date: Thu, 23 Jan 2025 07:34:36 -0800
Subject: [PATCH] feat(web): Show lens model in the asset viewer detail panel
 (#15460)

* Adds lens details to the asset viewer

* Update lens detail search links

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 i18n/en.json                                  |  2 ++
 .../asset-viewer/detail-panel.svelte          | 32 ++++++++++++++++++-
 .../[[assetId=id]]/+page.svelte               |  1 +
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/i18n/en.json b/i18n/en.json
index 737ec2704d..ad48a96991 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -822,6 +822,7 @@
   "latest_version": "Latest Version",
   "latitude": "Latitude",
   "leave": "Leave",
+  "lens_model": "Lens model",
   "let_others_respond": "Let others respond",
   "level": "Level",
   "library": "Library",
@@ -1113,6 +1114,7 @@
   "search_camera_model": "Search camera model...",
   "search_city": "Search city...",
   "search_country": "Search country...",
+  "search_for": "Search for",
   "search_for_existing_person": "Search for existing person",
   "search_no_people": "No people",
   "search_no_people_named": "No people named \"{name}\"",
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index fde4efae95..cdc00e247f 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -45,6 +45,7 @@
   import UserAvatar from '../shared-components/user-avatar.svelte';
   import AlbumListItemDetails from './album-list-item-details.svelte';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
 
   interface Props {
     asset: AssetResponseDto;
@@ -410,7 +411,36 @@
         <div><Icon path={mdiCameraIris} size="24" /></div>
 
         <div>
-          <p>{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}</p>
+          {#if asset.exifInfo?.make || asset.exifInfo?.model}
+            <p>
+              <a
+                href="{AppRoute.SEARCH}?{getMetadataSearchQuery({
+                  ...(asset.exifInfo?.make ? { make: asset.exifInfo.make } : {}),
+                  ...(asset.exifInfo?.model ? { model: asset.exifInfo.model } : {}),
+                })}"
+                title="{$t('search_for')} {asset.exifInfo.make || ''} {asset.exifInfo.model || ''}"
+                class="hover:dark:text-immich-dark-primary hover:text-immich-primary"
+              >
+                {asset.exifInfo.make || ''}
+                {asset.exifInfo.model || ''}
+              </a>
+            </p>
+          {/if}
+
+          {#if asset.exifInfo?.lensModel}
+            <div class="flex gap-2 text-sm">
+              <p>
+                <a
+                  href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ lensModel: asset.exifInfo.lensModel })}"
+                  title="{$t('search_for')} {asset.exifInfo.lensModel}"
+                  class="hover:dark:text-immich-dark-primary hover:text-immich-primary line-clamp-1"
+                >
+                  {asset.exifInfo.lensModel}
+                </a>
+              </p>
+            </div>
+          {/if}
+
           <div class="flex gap-2 text-sm">
             {#if asset.exifInfo?.fNumber}
               <p>ƒ/{asset.exifInfo.fNumber.toLocaleString($locale)}</p>
diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
index fe4a7a6612..97d0cacdce 100644
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -192,6 +192,7 @@
       state: $t('state'),
       make: $t('camera_brand'),
       model: $t('camera_model'),
+      lensModel: $t('lens_model'),
       personIds: $t('people'),
       originalFileName: $t('file_name'),
     };