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 <[email protected]>
immich-app · Jan 23, 2025 · f32c5d9 · f32c5d9
1 parent afc6e91
commit f32c5d9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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'),
     };