[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

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>