diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte index 5fff954afe..70d76ca1aa 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);
@@ -215,8 +226,15 @@
-

- {getAssetFilename(asset)} +

+ {#if isOwner} + {asset.originalFileName} + + {:else} + {getAssetFilename(asset)} + {/if}

{#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth} @@ -230,6 +248,11 @@ {/if}

{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}

+ {#if showAssetPath} +

+ {asset.originalPath} +

+ {/if}
{/if}