Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-10-31 18:47:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: show location & date on duplicate asset comparison overview (#22632)

Browse Source
This commit is contained in:
Adrian Jost 2025-10-17 23:04:45 +02:00 committed by GitHub
parent 24a6757630
commit 0979528a05
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 65 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
View File

@ -1,11 +1,20 @@
<script lang="ts">
import { locale } from '$lib/stores/preferences.store';
import { getAssetThumbnailUrl } from '$lib/utils';
import { getAssetResolution, getFileSize } from '$lib/utils/asset-utils';
import { getAltText } from '$lib/utils/thumbnail-util';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { fromISODateTime, fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
import { type AssetResponseDto, getAllAlbums } from '@immich/sdk';
import { Icon } from '@immich/ui';
import { mdiHeart, mdiImageMultipleOutline, mdiMagnifyPlus } from '@mdi/js';
import {
mdiBookmarkOutline,
mdiCalendar,
mdiHeart,
mdiImageMultipleOutline,
mdiImageOutline,
mdiMagnifyPlus,
mdiMapMarkerOutline,
} from '@mdi/js';
import { t } from 'svelte-i18n';
interface Props {
@ -19,6 +28,15 @@
let isFromExternalLibrary = $derived(!!asset.libraryId);
let assetData = $derived(JSON.stringify(asset, null, 2));
let locationParts = $derived([asset.exifInfo?.city, asset.exifInfo?.state, asset.exifInfo?.country].filter(Boolean));
let timeZone = $derived(asset.exifInfo?.timeZone);
let dateTime = $derived(
timeZone && asset.exifInfo?.dateTimeOriginal
? fromISODateTime(asset.exifInfo.dateTimeOriginal, timeZone)
: fromISODateTimeUTC(asset.localDateTime),
);
</script>
<div
@ -88,13 +106,53 @@
</div>
<div
class="grid place-items-center gap-y-2 py-2 text-xs transition-colors {isSelected
class="grid place-items-start gap-y-2 py-2 text-xs transition-colors {isSelected
? 'text-white dark:text-black'
: 'dark:text-white'}"
>
<span class="break-all text-center">{asset.originalFileName}</span>
<span>{getAssetResolution(asset)} - {getFileSize(asset)}</span>
<span>
<div class="flex items-start gap-x-1">
<Icon icon={mdiImageOutline} size="16" />
<div>
<span class="break-all text-center">{asset.originalFileName}</span><br />
{getAssetResolution(asset)} - {getFileSize(asset)}
</div>
</div>
<div class="flex items-start gap-x-1">
<Icon icon={mdiCalendar} size="16" />
{#if dateTime}
{dateTime.toLocaleString(
{
month: 'short',
day: 'numeric',
year: 'numeric',
},
{ locale: $locale },
)}
{dateTime.toLocaleString(
{
// weekday: 'short',
hour: 'numeric',
minute: '2-digit',
timeZoneName: timeZone ? 'shortOffset' : undefined,
},
{ locale: $locale },
)}
{:else}
{$t('unknown')}
{/if}
</div>
<div class="flex items-start gap-x-1">
<Icon icon={mdiMapMarkerOutline} size="16" />
{#if locationParts.length > 0}
{locationParts.join(', ')}
{:else}
{$t('unknown')}
{/if}
</div>
<div class="flex items-start gap-x-1">
<Icon icon={mdiBookmarkOutline} size="16" />
{#await getAllAlbums({ assetId: asset.id })}
{$t('scanning_for_album')}
{:then albums}
@ -104,6 +162,6 @@
{$t('in_albums', { values: { count: albums.length } })}
{/if}
{/await}
</span>
</div>
</div>
</div>