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

* 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>
2025-12-19 09:13:14 +03:00 · 2025-08-28 18:54:11 +02:00
parent 80fa5ec198
commit 662d44536e
17 changed files with 733 additions and 49 deletions
--- a/web/src/lib/components/utilities-page/geolocation/geolocation.svelte
+++ b/web/src/lib/components/utilities-page/geolocation/geolocation.svelte
@@ -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>