Show all albums an asset appears in on the asset viewer page (#575)

* Add route to query albums for a specific asset

* Update API and add to detail-panel

* Fix tests

* Refactor API endpoint

* Added alt attribute to img tag

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/api/open-api/api.ts

@@ -1457,10 +1457,11 @@ export const AlbumApiAxiosParamCreator = function (configuration?: Configuration
         /**
          * 
          * @param {boolean} [shared] 
+         * @param {string} [assetId] Only returns albums that contain the asset Ignores the shared parameter undefined: get all albums
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        getAllAlbums: async (shared?: boolean, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+        getAllAlbums: async (shared?: boolean, assetId?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
             const localVarPath = `/album`;
             // use dummy base URL string because the URL constructor only accepts absolute URLs.
             const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
@@ -1481,6 +1482,10 @@ export const AlbumApiAxiosParamCreator = function (configuration?: Configuration
                 localVarQueryParameter['shared'] = shared;
             }
 
+            if (assetId !== undefined) {
+                localVarQueryParameter['assetId'] = assetId;
+            }
+
 
     
             setSearchParams(localVarUrlObj, localVarQueryParameter);
@@ -1684,11 +1689,12 @@ export const AlbumApiFp = function(configuration?: Configuration) {
         /**
          * 
          * @param {boolean} [shared] 
+         * @param {string} [assetId] Only returns albums that contain the asset Ignores the shared parameter undefined: get all albums
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getAllAlbums(shared?: boolean, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AlbumResponseDto>>> {
-            const localVarAxiosArgs = await localVarAxiosParamCreator.getAllAlbums(shared, options);
+        async getAllAlbums(shared?: boolean, assetId?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AlbumResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAllAlbums(shared, assetId, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
         /**
@@ -1784,11 +1790,12 @@ export const AlbumApiFactory = function (configuration?: Configuration, basePath
         /**
          * 
          * @param {boolean} [shared] 
+         * @param {string} [assetId] Only returns albums that contain the asset Ignores the shared parameter undefined: get all albums
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        getAllAlbums(shared?: boolean, options?: any): AxiosPromise<Array<AlbumResponseDto>> {
-            return localVarFp.getAllAlbums(shared, options).then((request) => request(axios, basePath));
+        getAllAlbums(shared?: boolean, assetId?: string, options?: any): AxiosPromise<Array<AlbumResponseDto>> {
+            return localVarFp.getAllAlbums(shared, assetId, options).then((request) => request(axios, basePath));
         },
         /**
          * 
@@ -1890,12 +1897,13 @@ export class AlbumApi extends BaseAPI {
     /**
      * 
      * @param {boolean} [shared] 
+     * @param {string} [assetId] Only returns albums that contain the asset Ignores the shared parameter undefined: get all albums
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
      * @memberof AlbumApi
      */
-    public getAllAlbums(shared?: boolean, options?: AxiosRequestConfig) {
-        return AlbumApiFp(this.configuration).getAllAlbums(shared, options).then((request) => request(this.axios, this.basePath));
+    public getAllAlbums(shared?: boolean, assetId?: string, options?: AxiosRequestConfig) {
+        return AlbumApiFp(this.configuration).getAllAlbums(shared, assetId, options).then((request) => request(this.axios, this.basePath));
     }
 
     /**

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

@@ -8,18 +8,26 @@
 	import DetailPanel from './detail-panel.svelte';
 	import { downloadAssets } from '$lib/stores/download';
 	import VideoViewer from './video-viewer.svelte';
-	import { api, AssetResponseDto, AssetTypeEnum } from '@api';
+	import { api, AssetResponseDto, AssetTypeEnum, AlbumResponseDto } from '@api';
 	import {
 		notificationController,
 		NotificationType
 	} from '../shared-components/notification/notification';
 
 	export let asset: AssetResponseDto;
+	$: {
+		appearsInAlbums = [];
+
+		api.albumApi.getAllAlbums(undefined, asset.id).then(result => {
+			appearsInAlbums = result.data;
+		});
+	}
 
 	const dispatch = createEventDispatcher();
 	let halfLeftHover = false;
 	let halfRightHover = false;
 	let isShowDetail = false;
+	let appearsInAlbums: AlbumResponseDto[] = [];
 
 	onMount(() => {
 		document.addEventListener('keydown', (keyInfo) => handleKeyboardPress(keyInfo.key));
@@ -200,7 +208,7 @@
 			class="bg-immich-bg w-[360px] row-span-full transition-all "
 			translate="yes"
 		>
-			<DetailPanel {asset} on:close={() => (isShowDetail = false)} />
+			<DetailPanel {asset} albums={appearsInAlbums} on:close={() => (isShowDetail = false)} />
 		</div>
 	{/if}
 </section>

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

@@ -7,7 +7,7 @@
 	import moment from 'moment';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { browser } from '$app/env';
-	import { AssetResponseDto } from '@api';
+	import { AssetResponseDto, AlbumResponseDto } from '@api';
 
 	// Map Property
 	let map: any;
@@ -19,6 +19,8 @@
 		drawMap(asset.exifInfo.latitude, asset.exifInfo.longitude);
 	}
 
+	export let albums: AlbumResponseDto[];
+
 	onMount(async () => {
 		if (browser) {
 			if (asset.exifInfo?.latitude != null && asset.exifInfo?.longitude != null) {
@@ -201,6 +203,37 @@
 	<div class="h-[360px] w-full" id="map" />
 </div>
 
+<section class="p-2">
+	<div class="px-4 py-4">
+		{#if albums.length > 0}
+			<p class="text-sm pb-4">APPEARS IN</p>
+		{/if}
+		{#each albums as album}
+			<a sveltekit:prefetch href={`/albums/${album.id}`}>
+				<div class="flex gap-4 py-2 hover:cursor-pointer" on:click={() => dispatch('click', album)}>
+					<div>
+						<img
+							alt={album.albumName}
+							class="w-[50px] h-[50px] object-cover rounded"
+							src={`/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=JPEG`}
+						/>
+					</div>
+
+					<div class="mt-auto mb-auto">
+						<p>{album.albumName}</p>
+						<div class="flex gap-2 text-sm">
+							<p>{album.assetCount} items</p>
+							{#if album.shared}
+								<p>· Shared</p>
+							{/if}
+						</div>
+					</div>
+				</div>
+			</a>
+		{/each}
+	</div>
+</section>
+
 <style>
 	@import 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css';
 </style>