feat(web): improve alt text

open-api/immich-openapi-specs.json

@@ -8291,6 +8291,14 @@
       },
       "MapMarkerResponseDto": {
         "properties": {
+          "city": {
+            "nullable": true,
+            "type": "string"
+          },
+          "country": {
+            "nullable": true,
+            "type": "string"
+          },
           "id": {
             "type": "string"
           },
@@ -8301,12 +8309,19 @@
           "lon": {
             "format": "double",
             "type": "number"
+          },
+          "state": {
+            "nullable": true,
+            "type": "string"
           }
         },
         "required": [
+          "city",
+          "country",
           "id",
           "lat",
-          "lon"
+          "lon",
+          "state"
         ],
         "type": "object"
       },

open-api/typescript-sdk/src/fetch-client.ts

@@ -260,9 +260,12 @@ export type AssetJobsDto = {
     name: AssetJobName;
 };
 export type MapMarkerResponseDto = {
+    city: string | null;
+    country: string | null;
     id: string;
     lat: number;
     lon: number;
+    state: string | null;
 };
 export type MemoryLaneResponseDto = {
     assets: AssetResponseDto[];

server/src/domain/asset/asset.service.spec.ts

@@ -286,27 +286,22 @@ describe(AssetService.name, () => {
 
   describe('getMapMarkers', () => {
     it('should get geo information of assets', async () => {
+      const asset = assetStub.withLocation;
+      const marker = {
+        id: asset.id,
+        lat: asset.exifInfo!.latitude!,
+        lon: asset.exifInfo!.longitude!,
+        city: asset.exifInfo!.city,
+        state: asset.exifInfo!.state,
+        country: asset.exifInfo!.country,
+      };
       partnerMock.getAll.mockResolvedValue([]);
-      assetMock.getMapMarkers.mockResolvedValue(
-        [assetStub.withLocation].map((asset) => ({
-          id: asset.id,
-
-          /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-          lat: asset.exifInfo!.latitude!,
-
-          /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-          lon: asset.exifInfo!.longitude!,
-        })),
-      );
+      assetMock.getMapMarkers.mockResolvedValue([marker]);
 
       const markers = await sut.getMapMarkers(authStub.user1, {});
 
       expect(markers).toHaveLength(1);
-      expect(markers[0]).toEqual({
-        id: assetStub.withLocation.id,
-        lat: 100,
-        lon: 100,
-      });
+      expect(markers[0]).toEqual(marker);
     });
   });
 

server/src/domain/asset/response-dto/map-marker-response.dto.ts

@@ -9,4 +9,13 @@ export class MapMarkerResponseDto {
 
   @ApiProperty({ format: 'double' })
   lon!: number;
+
+  @ApiProperty()
+  city!: string | null;
+
+  @ApiProperty()
+  state!: string | null;
+
+  @ApiProperty()
+  country!: string | null;
 }

server/src/domain/repositories/asset.repository.ts

@@ -1,4 +1,9 @@
-import { AssetSearchOneToOneRelationOptions, AssetSearchOptions, SearchExploreItem } from '@app/domain';
+import {
+  AssetSearchOneToOneRelationOptions,
+  AssetSearchOptions,
+  ReverseGeocodeResult,
+  SearchExploreItem,
+} from '@app/domain';
 import { AssetEntity, AssetJobStatusEntity, AssetType, ExifEntity } from '@app/infra/entities';
 import { FindOptionsRelations, FindOptionsSelect } from 'typeorm';
 import { Paginated, PaginationOptions } from '../domain.util';
@@ -25,7 +30,7 @@ export interface MapMarkerSearchOptions {
   fileCreatedAfter?: Date;
 }
 
-export interface MapMarker {
+export interface MapMarker extends ReverseGeocodeResult {
   id: string;
   lat: number;
   lon: number;

server/src/infra/repositories/asset.repository.ts

@@ -507,6 +507,9 @@ export class AssetRepository implements IAssetRepository {
       select: {
         id: true,
         exifInfo: {
+          city: true,
+          state: true,
+          country: true,
           latitude: true,
           longitude: true,
         },
@@ -532,12 +535,11 @@ export class AssetRepository implements IAssetRepository {
 
     return assets.map((asset) => ({
       id: asset.id,
-
-      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
       lat: asset.exifInfo!.latitude!,
-
-      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
       lon: asset.exifInfo!.longitude!,
+      city: asset.exifInfo!.city,
+      state: asset.exifInfo!.state,
+      country: asset.exifInfo!.country,
     }));
   }
 

server/test/fixtures/asset.stub.ts

@@ -482,6 +482,9 @@ export const assetStub = {
       latitude: 100,
       longitude: 100,
       fileSizeInByte: 23_456,
+      city: 'test-city',
+      state: 'test-state',
+      country: 'test-country',
     } as ExifEntity,
     deletedAt: null,
   }),

web/src/lib/components/album-page/__tests__/album-card.spec.ts

@@ -47,11 +47,11 @@ describe('AlbumCard component', () => {
     const detailsText = `${count} items` + (shared ? ' . Shared' : '');
 
     expect(albumImgElement).toHaveAttribute('src');
-    expect(albumImgElement).toHaveAttribute('alt', album.id);
+    expect(albumImgElement).toHaveAttribute('alt', album.albumName);
 
     await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
 
-    expect(albumImgElement).toHaveAttribute('alt', album.id);
+    expect(albumImgElement).toHaveAttribute('alt', album.albumName);
     expect(sdkMock.getAssetThumbnail).not.toHaveBeenCalled();
 
     expect(albumNameElement).toHaveTextContent(album.albumName);
@@ -74,11 +74,11 @@ describe('AlbumCard component', () => {
     const albumImgElement = sut.getByTestId('album-image');
     const albumNameElement = sut.getByTestId('album-name');
     const albumDetailsElement = sut.getByTestId('album-details');
-    expect(albumImgElement).toHaveAttribute('alt', album.id);
+    expect(albumImgElement).toHaveAttribute('alt', album.albumName);
 
     await waitFor(() => expect(albumImgElement).toHaveAttribute('src', thumbnailUrl));
 
-    expect(albumImgElement).toHaveAttribute('alt', album.id);
+    expect(albumImgElement).toHaveAttribute('alt', album.albumName);
     expect(sdkMock.getAssetThumbnail).toHaveBeenCalledTimes(1);
     expect(sdkMock.getAssetThumbnail).toHaveBeenCalledWith({
       id: 'thumbnailIdOne',

web/src/lib/components/album-page/album-card.svelte

@@ -72,7 +72,7 @@
       <img
         loading={preload ? 'eager' : 'lazy'}
         src={imageData}
-        alt={album.id}
+        alt={album.albumName}
         class="z-0 h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg"
         data-testid="album-image"
         draggable="false"
@@ -82,7 +82,7 @@
         loading={preload ? 'eager' : 'lazy'}
         src="$lib/assets/no-thumbnail.png"
         sizes="min(271px,186px)"
-        alt={album.id}
+        alt={album.albumName}
         class="z-0 h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg"
         data-testid="album-image"
         draggable="false"

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -195,7 +195,7 @@
                   <img
                     class="rounded-lg w-[75px] h-[75px] object-cover"
                     src={getAssetThumbnailUrl(reaction.assetId, ThumbnailFormat.Webp)}
-                    alt="comment-thumbnail"
+                    alt="Profile picture of {reaction.user.name}, who commented on this asset"
                   />
                 </div>
               {/if}
@@ -241,7 +241,7 @@
                     <img
                       class="rounded-lg w-[75px] h-[75px] object-cover"
                       src={getAssetThumbnailUrl(reaction.assetId, ThumbnailFormat.Webp)}
-                      alt="like-thumbnail"
+                      alt="Profile picture of {reaction.user.name}, who liked this asset"
                     />
                   </div>
                 {/if}

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -616,7 +616,16 @@
     {:then component}
       <svelte:component
         this={component.default}
-        mapMarkers={[{ lat: latlng.lat, lon: latlng.lng, id: asset.id }]}
+        mapMarkers={[
+          {
+            lat: latlng.lat,
+            lon: latlng.lng,
+            id: asset.id,
+            city: asset.exifInfo?.city ?? null,
+            state: asset.exifInfo?.state ?? null,
+            country: asset.exifInfo?.country ?? null,
+          },
+        ]}
         center={latlng}
         zoom={15}
         simplified

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -13,6 +13,7 @@
   import { fade } from 'svelte/transition';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import { getAltText } from '$lib/utils/thumbnail-util';
 
   export let asset: AssetResponseDto;
   export let element: HTMLDivElement | undefined = undefined;
@@ -133,7 +134,7 @@
         bind:this={$photoViewer}
         transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
         src={assetData}
-        alt={asset.id}
+        alt={getAltText(asset)}
         class="h-full w-full object-contain"
         draggable="false"
       />