immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-20 01:11:46 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

feat(web): add geolocation utility (#20758)

Browse Source 
* feat(geolocation):  add geolocation utility

* feat(web): geolocation utility - fix code review - 1

* feat(web): geolocation utility - fix code review - 2

* chore: cleanup

* chore: feedback

* feat(web): add animation and text

animation on locations change and action text on thumbnail

* styling, messages and filtering

* selected color

* format i18n

* fix lint

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>
Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Johann
2025-08-28 18:54:11 +02:00
committed by GitHub
parent 80fa5ec198
commit 662d44536e
17 changed files with 733 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
web/src/lib/components/utilities-page/geolocation/geolocation.svelte Normal file
View File

@@ -0,0 +1,104 @@
<script lang="ts">
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
import { AppRoute } from '$lib/constants';
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { type AssetResponseDto } from '@immich/sdk';
import { t } from 'svelte-i18n';
interface Props {
asset: AssetResponseDto;
assetInteraction: AssetInteraction;
onSelectAsset: (asset: AssetResponseDto) => void;
onMouseEvent: (asset: AssetResponseDto) => void;
onLocation: (location: { latitude: number; longitude: number }) => void;
}
let { asset, assetInteraction, onSelectAsset, onMouseEvent, onLocation }: Props = $props();
let assetData = $derived(
JSON.stringify(
{
originalFileName: asset.originalFileName,
localDateTime: asset.localDateTime,
make: asset.exifInfo?.make,
model: asset.exifInfo?.model,
gps: {
latitude: asset.exifInfo?.latitude,
longitude: asset.exifInfo?.longitude,
},
location: asset.exifInfo?.city ? `${asset.exifInfo?.country} - ${asset.exifInfo?.city}` : undefined,
},
null,
2,
),
);
let boxWidth = $state(300);
let timelineAsset = $derived(toTimelineAsset(asset));
const hasGps = $derived(!!asset.exifInfo?.latitude && !!asset.exifInfo?.longitude);
</script>
<div
class="w-full aspect-square rounded-xl border-3 transition-colors font-semibold text-xs dark:bg-black bg-gray-200 border-gray-200 dark:border-gray-800"
bind:clientWidth={boxWidth}
title={assetData}
>
<div class="relative w-full h-full overflow-hidden rounded-lg">
<Thumbnail
asset={timelineAsset}
onClick={() => {
if (asset.exifInfo?.latitude && asset.exifInfo?.longitude) {
onLocation({ latitude: asset.exifInfo?.latitude, longitude: asset.exifInfo?.longitude });
} else {
onSelectAsset(asset);
}
}}
onSelect={() => onSelectAsset(asset)}
onMouseEvent={() => onMouseEvent(asset)}
selected={assetInteraction.hasSelectedAsset(asset.id)}
selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
thumbnailSize={boxWidth}
readonly={hasGps}
/>
{#if hasGps}
<div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-success text-black">
{$t('gps')}
</div>
{:else}
<div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-danger text-light">
{$t('gps_missing')}
</div>
{/if}
</div>
<div class="text-center mt-4 px-4 text-sm font-semibold truncate" title={asset.originalFileName}>
<a href={`${AppRoute.PHOTOS}/${asset.id}`} target="_blank" rel="noopener noreferrer">
{asset.originalFileName}
</a>
</div>
<div class="text-center my-3">
<p class="px-4 text-xs font-normal truncate text-dark/75">
{new Date(asset.localDateTime).toLocaleDateString(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric',
})}
</p>
<p class="px-4 text-xs font-normal truncate text-dark/75">
{new Date(asset.localDateTime).toLocaleTimeString(undefined, {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
timeZone: 'UTC',
})}
</p>
{#if hasGps}
<p class="text-primary mt-2 text-xs font-normal px-4 text-center truncate">
{asset.exifInfo?.country}
</p>
<p class="text-primary text-xs font-normal px-4 text-center truncate">
{asset.exifInfo?.city}
</p>
{/if}
</div>
</div>

32
web/src/lib/components/utilities-page/utilities-menu.svelte
View File

@@ -1,29 +1,23 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { AppRoute } from '$lib/constants';
import { mdiContentDuplicate, mdiImageSizeSelectLarge } from '@mdi/js';
import { mdiContentDuplicate, mdiCrosshairsGps, mdiImageSizeSelectLarge } from '@mdi/js';
import { t } from 'svelte-i18n';
const links = [
{ href: AppRoute.DUPLICATES, icon: mdiContentDuplicate, label: $t('review_duplicates') },
{ href: AppRoute.LARGE_FILES, icon: mdiImageSizeSelectLarge, label: $t('review_large_files') },
{ href: AppRoute.GEOLOCATION, icon: mdiCrosshairsGps, label: $t('manage_geolocation') },
];
</script>
<div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
<p class="text-xs font-medium p-4">{$t('organize_your_library').toUpperCase()}</p>
<a
href={AppRoute.DUPLICATES}
class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
>
<span
><Icon path={mdiContentDuplicate} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
</span>
{$t('review_duplicates')}
</a>
<a
href={AppRoute.LARGE_FILES}
class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
>
<span
><Icon path={mdiImageSizeSelectLarge} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
</span>
{$t('review_large_files')}
</a>
{#each links as link (link.href)}
<a href={link.href} class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4">
<span><Icon path={link.icon} class="text-immich-primary dark:text-immich-dark-primary" size="24" /> </span>
{link.label}
</a>
{/each}
</div>