From 72fb421f547f05c18fc34297fceddfb25021cfcd Mon Sep 17 00:00:00 2001
From: Dmitriy P <dpantel@users.noreply.github.com>
Date: Mon, 13 Nov 2023 15:57:58 -0600
Subject: [PATCH] feat(web): Add file path info for owned assets (#4943)

* feat(web): Add file path info for external assets

Add file path information to the asset details panel for External assets. This will allow a user to easily locate said asset in the filesystem, to perform any desired tasks on that asset. Styling was chosen to be as unobtrusive as possible.

* feat(web): toggleable file path info for external assets

If the user is the owner of the current asset and it's an external asset, then add a button next to the filename to reveal the asset's file path.

* show path on owned asset and styling

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../asset-viewer/detail-panel.svelte          | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 5fff954af..70d76ca1a 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -6,10 +6,18 @@
   import { AlbumResponseDto, AssetResponseDto, ThumbnailFormat, api } from '@api';
   import { DateTime } from 'luxon';
   import { createEventDispatcher } from 'svelte';
+  import { slide } from 'svelte/transition';
   import { asByteUnitString } from '../../utils/byte-units';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
-  import { mdiCalendar, mdiCameraIris, mdiClose, mdiImageOutline, mdiMapMarkerOutline } from '@mdi/js';
+  import {
+    mdiCalendar,
+    mdiCameraIris,
+    mdiClose,
+    mdiImageOutline,
+    mdiMapMarkerOutline,
+    mdiInformationOutline,
+  } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
   import Map from '../shared-components/map/map.svelte';
 
@@ -77,6 +85,9 @@
       console.error(error);
     }
   };
+
+  let showAssetPath = false;
+  const toggleAssetPath = () => (showAssetPath = !showAssetPath);
 </script>
 
 <section class="p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
@@ -215,8 +226,15 @@
         <div><Icon path={mdiImageOutline} size="24" /></div>
 
         <div>
-          <p class="break-all">
-            {getAssetFilename(asset)}
+          <p class="break-all flex place-items-center gap-2">
+            {#if isOwner}
+              {asset.originalFileName}
+              <button title="Show File Location" on:click={toggleAssetPath}>
+                <Icon path={mdiInformationOutline} />
+              </button>
+            {:else}
+              {getAssetFilename(asset)}
+            {/if}
           </p>
           <div class="flex gap-2 text-sm">
             {#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth}
@@ -230,6 +248,11 @@
             {/if}
             <p>{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
           </div>
+          {#if showAssetPath}
+            <p class="text-xs opacity-50 break-all" transition:slide={{ duration: 250 }}>
+              {asset.originalPath}
+            </p>
+          {/if}
         </div>
       </div>
     {/if}