[WEB] Select album thumbnail (#383)

* Added context menu for album opionts

* choose asset for album thumbnail

* Refactor UpdateAlbumDto to accept albumThumbnailAssetId

* implemented changing album cover on web

* Fixed api change on mobile app

mobile/lib/modules/sharing/services/shared_album.service.dart

@@ -134,7 +134,6 @@ class SharedAlbumService {
       await _apiService.albumApi.updateAlbumInfo(
         albumId,
         UpdateAlbumDto(
-          ownerId: ownerId,
           albumName: newAlbumTitle,
         ),
       );

server/apps/immich/src/api-v1/album/album-repository.ts

@@ -237,7 +237,8 @@ export class AlbumRepository implements IAlbumRepository {
   }
 
   updateAlbum(album: AlbumEntity, updateAlbumDto: UpdateAlbumDto): Promise<AlbumEntity> {
-    album.albumName = updateAlbumDto.albumName;
+    album.albumName = updateAlbumDto.albumName || album.albumName;
+    album.albumThumbnailAssetId = updateAlbumDto.albumThumbnailAssetId || album.albumThumbnailAssetId;
 
     return this.albumRepository.save(album);
   }

server/apps/immich/src/api-v1/album/album.controller.ts

@@ -104,6 +104,6 @@ export class AlbumController {
     @Body(ValidationPipe) updateAlbumInfoDto: UpdateAlbumDto,
     @Param('albumId', new ParseUUIDPipe({ version: '4' })) albumId: string,
   ) {
-    return this.albumService.updateAlbumTitle(authUser, updateAlbumInfoDto, albumId);
+    return this.albumService.updateAlbumInfo(authUser, updateAlbumInfoDto, albumId);
   }
 }

server/apps/immich/src/api-v1/album/album.service.spec.ts

@@ -260,17 +260,16 @@ describe('Album service', () => {
     const albumEntity = _getOwnedAlbum();
     const albumId = albumEntity.id;
     const updatedAlbumName = 'new album name';
-
+    const updatedAlbumThumbnailAssetId = '69d2f917-0b31-48d8-9d7d-673b523f1aac';
     albumRepositoryMock.get.mockImplementation(() => Promise.resolve<AlbumEntity>(albumEntity));
     albumRepositoryMock.updateAlbum.mockImplementation(() =>
       Promise.resolve<AlbumEntity>({ ...albumEntity, albumName: updatedAlbumName }),
     );
 
-    const result = await sut.updateAlbumTitle(
+    const result = await sut.updateAlbumInfo(
       authUser,
       {
         albumName: updatedAlbumName,
-        ownerId: 'this is not used and will be removed',
       },
       albumId,
     );
@@ -280,7 +279,7 @@ describe('Album service', () => {
     expect(albumRepositoryMock.updateAlbum).toHaveBeenCalledTimes(1);
     expect(albumRepositoryMock.updateAlbum).toHaveBeenCalledWith(albumEntity, {
       albumName: updatedAlbumName,
-      ownerId: 'this is not used and will be removed',
+      thumbnailAssetId: updatedAlbumThumbnailAssetId,
     });
   });
 
@@ -291,11 +290,11 @@ describe('Album service', () => {
     albumRepositoryMock.get.mockImplementation(() => Promise.resolve<AlbumEntity>(albumEntity));
 
     await expect(
-      sut.updateAlbumTitle(
+      sut.updateAlbumInfo(
         authUser,
         {
           albumName: 'new album name',
-          ownerId: 'this is not used and will be removed',
+          albumThumbnailAssetId: '69d2f917-0b31-48d8-9d7d-673b523f1aac',
         },
         albumId,
       ),
@@ -361,7 +360,7 @@ describe('Album service', () => {
   it('removes assets from owned album', async () => {
     const albumEntity = _getOwnedAlbum();
     albumRepositoryMock.get.mockImplementation(() => Promise.resolve<AlbumEntity>(albumEntity));
-    albumRepositoryMock.removeAssets.mockImplementation(() => Promise.resolve(true));
+    albumRepositoryMock.removeAssets.mockImplementation(() => Promise.resolve<AlbumEntity>(albumEntity));
 
     await expect(
       sut.removeAssetsFromAlbum(
@@ -381,7 +380,7 @@ describe('Album service', () => {
   it('removes assets from shared album (shared with auth user)', async () => {
     const albumEntity = _getOwnedSharedAlbum();
     albumRepositoryMock.get.mockImplementation(() => Promise.resolve<AlbumEntity>(albumEntity));
-    albumRepositoryMock.removeAssets.mockImplementation(() => Promise.resolve(true));
+    albumRepositoryMock.removeAssets.mockImplementation(() => Promise.resolve<AlbumEntity>(albumEntity));
 
     await expect(
       sut.removeAssetsFromAlbum(

server/apps/immich/src/api-v1/album/album.service.ts

@@ -103,16 +103,17 @@ export class AlbumService {
     return mapAlbum(updatedAlbum);
   }
 
-  async updateAlbumTitle(
+  async updateAlbumInfo(
     authUser: AuthUserDto,
     updateAlbumDto: UpdateAlbumDto,
     albumId: string,
   ): Promise<AlbumResponseDto> {
-    // TODO: this should not come from request DTO. To be removed from here and DTO
-    // if (authUser.id != updateAlbumDto.ownerId) {
-    //   throw new BadRequestException('Unauthorized to change album info');
-    // }
     const album = await this._getAlbum({ authUser, albumId });
+
+    if (authUser.id != album.ownerId) {
+      throw new BadRequestException('Unauthorized to change album info');
+    }
+
     const updatedAlbum = await this._albumRepository.updateAlbum(album, updateAlbumDto);
     return mapAlbum(updatedAlbum);
   }

server/apps/immich/src/api-v1/album/dto/update-album.dto.ts

@@ -1,9 +1,9 @@
-import { IsNotEmpty } from 'class-validator';
+import { IsNotEmpty, IsOptional } from 'class-validator';
 
 export class UpdateAlbumDto {
-  @IsNotEmpty()
+  @IsOptional()
-  albumName!: string;
+  albumName?: string;
 
-  @IsNotEmpty()
+  @IsOptional()
-  ownerId!: string;
+  albumThumbnailAssetId?: string;
 }

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

@@ -1001,13 +1001,13 @@ export interface UpdateAlbumDto {
      * @type {string}
      * @memberof UpdateAlbumDto
      */
-    'albumName': string;
+    'albumName'?: string;
     /**
      * 
      * @type {string}
      * @memberof UpdateAlbumDto
      */
-    'ownerId': string;
+    'albumThumbnailAssetId'?: string;
 }
 /**
  * 

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

@@ -18,6 +18,11 @@
 	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
 	import Close from 'svelte-material-icons/Close.svelte';
 	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+	import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
+	import MenuOption from '../shared-components/context-menu/menu-option.svelte';
+	import ThumbnailSelection from './thumbnail-selection.svelte';
+
 	export let album: AlbumResponseDto;
 
 	let isShowAssetViewer = false;
@@ -26,6 +31,8 @@
 	let isEditingTitle = false;
 	let isCreatingSharedAlbum = false;
 	let isShowShareInfoModal = false;
+	let isShowAlbumOptions = false;
+	let isShowThumbnailSelection = false;
 
 	let selectedAsset: AssetResponseDto;
 	let currentViewAssetIndex = 0;
@@ -37,6 +44,7 @@
 	let currentAlbumName = '';
 	let currentUser: UserResponseDto;
 	let titleInput: HTMLInputElement;
+	let contextMenuPosition = { x: 0, y: 0 };
 
 	$: isOwned = currentUser?.id == album.ownerId;
 
@@ -165,7 +173,6 @@
 		if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {
 			api.albumApi
 				.updateAlbumInfo(album.id, {
-					ownerId: album.ownerId,
 					albumName: album.albumName
 				})
 				.then(() => {
@@ -238,6 +245,28 @@
 			}
 		}
 	};
+
+	const showAlbumOptionsMenu = (event: CustomEvent) => {
+		contextMenuPosition = {
+			x: event.detail.mouseEvent.x,
+			y: event.detail.mouseEvent.y
+		};
+
+		isShowAlbumOptions = !isShowAlbumOptions;
+	};
+
+	const setAlbumThumbnailHandler = (event: CustomEvent) => {
+		const { asset }: { asset: AssetResponseDto } = event.detail;
+		try {
+			api.albumApi.updateAlbumInfo(album.id, {
+				albumThumbnailAssetId: asset.id
+			});
+		} catch (e) {
+			console.log('Error [setAlbumThumbnailHandler] ', e);
+		}
+
+		isShowThumbnailSelection = false;
+	};
 </script>
 
 <section class="bg-immich-bg">
@@ -274,7 +303,7 @@
 						logo={FileImagePlusOutline}
 					/>
 
-					<!-- Sharing only for owner -->
+					<!-- Share and remove album -->
 					{#if isOwned}
 						<CircleIconButton
 							title="Share"
@@ -283,6 +312,12 @@
 						/>
 						<CircleIconButton title="Remove album" on:click={removeAlbum} logo={DeleteOutline} />
 					{/if}
+
+					<CircleIconButton
+						title="Album options"
+						on:click={(event) => showAlbumOptionsMenu(event)}
+						logo={DotsVertical}
+					/>
 				{/if}
 
 				{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
@@ -418,3 +453,25 @@
 		on:user-deleted={sharedUserDeletedHandler}
 	/>
 {/if}
+
+{#if isShowAlbumOptions}
+	<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowAlbumOptions = false)}>
+		{#if isOwned}
+			<MenuOption
+				on:click={() => {
+					isShowThumbnailSelection = true;
+					isShowAlbumOptions = false;
+				}}
+				text="Set album cover"
+			/>
+		{/if}
+	</ContextMenu>
+{/if}
+
+{#if isShowThumbnailSelection}
+	<ThumbnailSelection
+		{album}
+		on:close={() => (isShowThumbnailSelection = false)}
+		on:thumbnail-selected={setAlbumThumbnailHandler}
+	/>
+{/if}

web/src/lib/components/album-page/asset-selection.svelte

@@ -170,7 +170,7 @@
 
 <section
 	transition:fly={{ y: 500, duration: 100, easing: quintOut }}
-	class="absolute top-0 left-0 w-full h-full  bg-immich-bg z-[9999]"
+	class="absolute top-0 left-0 w-full h-full py-[160px]  bg-immich-bg z-[9999]"
 >
 	<AlbumAppBar on:close-button-click={() => dispatch('go-back')}>
 		<svelte:fragment slot="leading">

web/src/lib/components/album-page/thumbnail-selection.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { AlbumResponseDto, AssetResponseDto } from '@api';
+	import { createEventDispatcher } from 'svelte';
+	import { quintOut } from 'svelte/easing';
+	import { fly } from 'svelte/transition';
+	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
+	import AlbumAppBar from './album-app-bar.svelte';
+
+	export let album: AlbumResponseDto;
+
+	let selectedThumbnail: AssetResponseDto | undefined;
+	const dispatch = createEventDispatcher();
+
+	$: isSelected = (id: string): boolean | undefined => {
+		if (!selectedThumbnail && album.albumThumbnailAssetId == id) {
+			return true;
+		} else {
+			return selectedThumbnail?.id == id;
+		}
+	};
+</script>
+
+<section
+	transition:fly={{ y: 500, duration: 100, easing: quintOut }}
+	class="absolute top-0 left-0 w-full h-full py-[160px]  bg-immich-bg z-[9999]"
+>
+	<AlbumAppBar on:close-button-click={() => dispatch('close')}>
+		<svelte:fragment slot="leading">
+			<p class="text-lg">Select album cover</p>
+		</svelte:fragment>
+
+		<svelte:fragment slot="trailing">
+			<button
+				disabled={selectedThumbnail == undefined}
+				on:click={() => dispatch('thumbnail-selected', { asset: selectedThumbnail })}
+				class="immich-text-button border bg-immich-primary text-gray-50 hover:bg-immich-primary/75 px-6 text-sm disabled:opacity-25 disabled:bg-gray-500 disabled:cursor-not-allowed"
+				><span class="px-2">Done</span></button
+			>
+		</svelte:fragment>
+	</AlbumAppBar>
+
+	<section class="flex flex-wrap gap-14  px-20 overflow-y-auto">
+		<!-- Image grid -->
+		<div class="flex flex-wrap gap-[2px]">
+			{#each album.assets as asset}
+				<ImmichThumbnail
+					{asset}
+					on:click={() => (selectedThumbnail = asset)}
+					selected={isSelected(asset.id)}
+				/>
+			{/each}
+		</div>
+	</section>
+</section>

web/src/routes/albums/[albumId]/index.svelte

@@ -45,6 +45,6 @@
 	<title>{album.albumName} - Immich</title>
 </svelte:head>
 
-<div class="relative immich-scrollbar">
+<div class="immich-scrollbar">
 	<AlbumViewer {album} />
 </div>