|
@@ -18,6 +18,11 @@
|
|
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
|
|
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
|
|
import Close from 'svelte-material-icons/Close.svelte';
|
|
import Close from 'svelte-material-icons/Close.svelte';
|
|
import DeleteOutline from 'svelte-material-icons/DeleteOutline.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;
|
|
export let album: AlbumResponseDto;
|
|
|
|
|
|
let isShowAssetViewer = false;
|
|
let isShowAssetViewer = false;
|
|
@@ -26,6 +31,8 @@
|
|
let isEditingTitle = false;
|
|
let isEditingTitle = false;
|
|
let isCreatingSharedAlbum = false;
|
|
let isCreatingSharedAlbum = false;
|
|
let isShowShareInfoModal = false;
|
|
let isShowShareInfoModal = false;
|
|
|
|
+ let isShowAlbumOptions = false;
|
|
|
|
+ let isShowThumbnailSelection = false;
|
|
|
|
|
|
let selectedAsset: AssetResponseDto;
|
|
let selectedAsset: AssetResponseDto;
|
|
let currentViewAssetIndex = 0;
|
|
let currentViewAssetIndex = 0;
|
|
@@ -37,6 +44,7 @@
|
|
let currentAlbumName = '';
|
|
let currentAlbumName = '';
|
|
let currentUser: UserResponseDto;
|
|
let currentUser: UserResponseDto;
|
|
let titleInput: HTMLInputElement;
|
|
let titleInput: HTMLInputElement;
|
|
|
|
+ let contextMenuPosition = { x: 0, y: 0 };
|
|
|
|
|
|
$: isOwned = currentUser?.id == album.ownerId;
|
|
$: isOwned = currentUser?.id == album.ownerId;
|
|
|
|
|
|
@@ -165,7 +173,6 @@
|
|
if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {
|
|
if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {
|
|
api.albumApi
|
|
api.albumApi
|
|
.updateAlbumInfo(album.id, {
|
|
.updateAlbumInfo(album.id, {
|
|
- ownerId: album.ownerId,
|
|
|
|
albumName: album.albumName
|
|
albumName: album.albumName
|
|
})
|
|
})
|
|
.then(() => {
|
|
.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>
|
|
</script>
|
|
|
|
|
|
<section class="bg-immich-bg">
|
|
<section class="bg-immich-bg">
|
|
@@ -274,7 +303,7 @@
|
|
logo={FileImagePlusOutline}
|
|
logo={FileImagePlusOutline}
|
|
/>
|
|
/>
|
|
|
|
|
|
- <!-- Sharing only for owner -->
|
|
|
|
|
|
+ <!-- Share and remove album -->
|
|
{#if isOwned}
|
|
{#if isOwned}
|
|
<CircleIconButton
|
|
<CircleIconButton
|
|
title="Share"
|
|
title="Share"
|
|
@@ -283,6 +312,12 @@
|
|
/>
|
|
/>
|
|
<CircleIconButton title="Remove album" on:click={removeAlbum} logo={DeleteOutline} />
|
|
<CircleIconButton title="Remove album" on:click={removeAlbum} logo={DeleteOutline} />
|
|
{/if}
|
|
{/if}
|
|
|
|
+
|
|
|
|
+ <CircleIconButton
|
|
|
|
+ title="Album options"
|
|
|
|
+ on:click={(event) => showAlbumOptionsMenu(event)}
|
|
|
|
+ logo={DotsVertical}
|
|
|
|
+ />
|
|
{/if}
|
|
{/if}
|
|
|
|
|
|
{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
|
|
{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
|
|
@@ -418,3 +453,25 @@
|
|
on:user-deleted={sharedUserDeletedHandler}
|
|
on:user-deleted={sharedUserDeletedHandler}
|
|
/>
|
|
/>
|
|
{/if}
|
|
{/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}
|