mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
480 lines
15 KiB
Svelte
480 lines
15 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { groupBy, orderBy } from 'lodash-es';
|
|
import { addUsersToAlbum, deleteAlbum, type AlbumUserAddDto, type AlbumResponseDto, isHttpError } from '@immich/sdk';
|
|
import { mdiDeleteOutline, mdiShareVariantOutline, mdiFolderDownloadOutline, mdiRenameOutline } from '@mdi/js';
|
|
import Icon from '$lib/components/elements/icon.svelte';
|
|
import EditAlbumForm from '$lib/components/forms/edit-album-form.svelte';
|
|
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
|
|
import {
|
|
NotificationType,
|
|
notificationController,
|
|
} from '$lib/components/shared-components/notification/notification';
|
|
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
|
import RightClickContextMenu from '$lib/components/shared-components/context-menu/right-click-context-menu.svelte';
|
|
import AlbumsTable from '$lib/components/album-page/albums-table.svelte';
|
|
import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
|
|
import UserSelectionModal from '$lib/components/album-page/user-selection-modal.svelte';
|
|
import { handleError } from '$lib/utils/handle-error';
|
|
import { downloadAlbum } from '$lib/utils/asset-utils';
|
|
import { normalizeSearchString } from '$lib/utils/string-utils';
|
|
import { getSelectedAlbumGroupOption, type AlbumGroup } from '$lib/utils/album-utils';
|
|
import type { ContextMenuPosition } from '$lib/utils/context-menu';
|
|
import { user } from '$lib/stores/user.store';
|
|
import {
|
|
AlbumGroupBy,
|
|
AlbumSortBy,
|
|
AlbumFilter,
|
|
AlbumViewMode,
|
|
SortOrder,
|
|
locale,
|
|
type AlbumViewSettings,
|
|
} from '$lib/stores/preferences.store';
|
|
import { goto } from '$app/navigation';
|
|
import { AppRoute } from '$lib/constants';
|
|
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
|
|
|
|
export let ownedAlbums: AlbumResponseDto[] = [];
|
|
export let sharedAlbums: AlbumResponseDto[] = [];
|
|
export let searchQuery: string = '';
|
|
export let userSettings: AlbumViewSettings;
|
|
export let allowEdit = false;
|
|
export let showOwner = false;
|
|
export let albumGroupIds: string[] = [];
|
|
|
|
interface AlbumGroupOption {
|
|
[option: string]: (order: SortOrder, albums: AlbumResponseDto[]) => AlbumGroup[];
|
|
}
|
|
|
|
interface AlbumSortOption {
|
|
[option: string]: (order: SortOrder, albums: AlbumResponseDto[]) => AlbumResponseDto[];
|
|
}
|
|
|
|
const groupOptions: AlbumGroupOption = {
|
|
/** No grouping */
|
|
[AlbumGroupBy.None]: (order, albums): AlbumGroup[] => {
|
|
return [
|
|
{
|
|
id: 'Albums',
|
|
name: 'Albums',
|
|
albums,
|
|
},
|
|
];
|
|
},
|
|
|
|
/** Group by year */
|
|
[AlbumGroupBy.Year]: (order, albums): AlbumGroup[] => {
|
|
const unknownYear = 'Unknown Year';
|
|
const useStartDate = userSettings.sortBy === AlbumSortBy.OldestPhoto;
|
|
|
|
const groupedByYear = groupBy(albums, (album) => {
|
|
const date = useStartDate ? album.startDate : album.endDate;
|
|
return date ? new Date(date).getFullYear() : unknownYear;
|
|
});
|
|
|
|
const sortSign = order === SortOrder.Desc ? -1 : 1;
|
|
const sortedByYear = Object.entries(groupedByYear).sort(([a], [b]) => {
|
|
// We make sure empty albums stay at the end of the list
|
|
if (a === unknownYear) {
|
|
return 1;
|
|
} else if (b === unknownYear) {
|
|
return -1;
|
|
} else {
|
|
return (Number.parseInt(a) - Number.parseInt(b)) * sortSign;
|
|
}
|
|
});
|
|
|
|
return sortedByYear.map(([year, albums]) => ({
|
|
id: year,
|
|
name: year,
|
|
albums,
|
|
}));
|
|
},
|
|
|
|
/** Group by owner */
|
|
[AlbumGroupBy.Owner]: (order, albums): AlbumGroup[] => {
|
|
const currentUserId = $user.id;
|
|
const groupedByOwnerIds = groupBy(albums, 'ownerId');
|
|
|
|
const sortSign = order === SortOrder.Desc ? -1 : 1;
|
|
const sortedByOwnerNames = Object.entries(groupedByOwnerIds).sort(([ownerA, albumsA], [ownerB, albumsB]) => {
|
|
// We make sure owned albums stay either at the beginning or the end
|
|
// of the list
|
|
if (ownerA === currentUserId) {
|
|
return -sortSign;
|
|
} else if (ownerB === currentUserId) {
|
|
return sortSign;
|
|
} else {
|
|
return albumsA[0].owner.name.localeCompare(albumsB[0].owner.name, $locale) * sortSign;
|
|
}
|
|
});
|
|
|
|
return sortedByOwnerNames.map(([ownerId, albums]) => ({
|
|
id: ownerId,
|
|
name: ownerId === currentUserId ? 'My albums' : albums[0].owner.name,
|
|
albums,
|
|
}));
|
|
},
|
|
};
|
|
|
|
const sortOptions: AlbumSortOption = {
|
|
/** Sort by album title */
|
|
[AlbumSortBy.Title]: (order, albums) => {
|
|
const sortSign = order === SortOrder.Desc ? -1 : 1;
|
|
return albums.slice().sort((a, b) => a.albumName.localeCompare(b.albumName, $locale) * sortSign);
|
|
},
|
|
|
|
/** Sort by asset count */
|
|
[AlbumSortBy.ItemCount]: (order, albums) => {
|
|
return orderBy(albums, 'assetCount', [order]);
|
|
},
|
|
|
|
/** Sort by last modified */
|
|
[AlbumSortBy.DateModified]: (order, albums) => {
|
|
return orderBy(albums, [({ updatedAt }) => new Date(updatedAt)], [order]);
|
|
},
|
|
|
|
/** Sort by creation date */
|
|
[AlbumSortBy.DateCreated]: (order, albums) => {
|
|
return orderBy(albums, [({ createdAt }) => new Date(createdAt)], [order]);
|
|
},
|
|
|
|
/** Sort by the most recent photo date */
|
|
[AlbumSortBy.MostRecentPhoto]: (order, albums) => {
|
|
albums = orderBy(albums, [({ endDate }) => (endDate ? new Date(endDate) : '')], [order]);
|
|
return albums.sort(sortUnknownYearAlbums);
|
|
},
|
|
|
|
/** Sort by the oldest photo date */
|
|
[AlbumSortBy.OldestPhoto]: (order, albums) => {
|
|
albums = orderBy(albums, [({ startDate }) => (startDate ? new Date(startDate) : '')], [order]);
|
|
return albums.sort(sortUnknownYearAlbums);
|
|
},
|
|
};
|
|
|
|
let albums: AlbumResponseDto[] = [];
|
|
let filteredAlbums: AlbumResponseDto[] = [];
|
|
let groupedAlbums: AlbumGroup[] = [];
|
|
|
|
let albumGroupOption: string = AlbumGroupBy.None;
|
|
|
|
let showShareByURLModal = false;
|
|
|
|
let albumToEdit: AlbumResponseDto | null = null;
|
|
let albumToShare: AlbumResponseDto | null = null;
|
|
let albumToDelete: AlbumResponseDto | null = null;
|
|
|
|
let contextMenuPosition: ContextMenuPosition = { x: 0, y: 0 };
|
|
let contextMenuTargetAlbum: AlbumResponseDto | null = null;
|
|
|
|
// Step 1: Filter between Owned and Shared albums, or both.
|
|
$: {
|
|
switch (userSettings.filter) {
|
|
case AlbumFilter.Owned: {
|
|
albums = ownedAlbums;
|
|
break;
|
|
}
|
|
case AlbumFilter.Shared: {
|
|
albums = sharedAlbums;
|
|
break;
|
|
}
|
|
default: {
|
|
const userId = $user.id;
|
|
const nonOwnedAlbums = sharedAlbums.filter((album) => album.ownerId !== userId);
|
|
albums = nonOwnedAlbums.length > 0 ? ownedAlbums.concat(nonOwnedAlbums) : ownedAlbums;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Step 2: Filter using the given search query.
|
|
$: {
|
|
if (searchQuery) {
|
|
const searchAlbumNormalized = normalizeSearchString(searchQuery);
|
|
|
|
filteredAlbums = albums.filter((album) => {
|
|
return normalizeSearchString(album.albumName).includes(searchAlbumNormalized);
|
|
});
|
|
} else {
|
|
filteredAlbums = albums;
|
|
}
|
|
}
|
|
|
|
// Step 3: Group albums.
|
|
$: {
|
|
albumGroupOption = getSelectedAlbumGroupOption(userSettings);
|
|
const groupFunc = groupOptions[albumGroupOption] ?? groupOptions[AlbumGroupBy.None];
|
|
groupedAlbums = groupFunc(stringToSortOrder(userSettings.groupOrder), filteredAlbums);
|
|
}
|
|
|
|
// Step 4: Sort albums amongst each group.
|
|
$: {
|
|
const defaultSortOption = AlbumSortBy.DateModified;
|
|
const selectedSortOption = userSettings.sortBy ?? defaultSortOption;
|
|
|
|
const sortFunc = sortOptions[selectedSortOption] ?? sortOptions[defaultSortOption];
|
|
const sortOrder = stringToSortOrder(userSettings.sortOrder);
|
|
|
|
groupedAlbums = groupedAlbums.map((group) => ({
|
|
id: group.id,
|
|
name: group.name,
|
|
albums: sortFunc(sortOrder, group.albums),
|
|
}));
|
|
|
|
albumGroupIds = groupedAlbums.map(({ id }) => id);
|
|
}
|
|
|
|
$: showContextMenu = !!contextMenuTargetAlbum;
|
|
$: showFullContextMenu = allowEdit && contextMenuTargetAlbum && contextMenuTargetAlbum.ownerId === $user.id;
|
|
|
|
onMount(async () => {
|
|
if (allowEdit) {
|
|
await removeAlbumsIfEmpty();
|
|
}
|
|
});
|
|
|
|
const sortUnknownYearAlbums = (a: AlbumResponseDto, b: AlbumResponseDto) => {
|
|
if (!a.endDate) {
|
|
return 1;
|
|
}
|
|
if (!b.endDate) {
|
|
return -1;
|
|
}
|
|
return 0;
|
|
};
|
|
|
|
const stringToSortOrder = (order: string) => {
|
|
return order === 'desc' ? SortOrder.Desc : SortOrder.Asc;
|
|
};
|
|
|
|
const showAlbumContextMenu = (contextMenuDetail: ContextMenuPosition, album: AlbumResponseDto) => {
|
|
contextMenuTargetAlbum = album;
|
|
contextMenuPosition = {
|
|
x: contextMenuDetail.x,
|
|
y: contextMenuDetail.y,
|
|
};
|
|
};
|
|
|
|
const closeAlbumContextMenu = () => {
|
|
contextMenuTargetAlbum = null;
|
|
};
|
|
|
|
const handleDownloadAlbum = async () => {
|
|
if (contextMenuTargetAlbum) {
|
|
const album = contextMenuTargetAlbum;
|
|
closeAlbumContextMenu();
|
|
await downloadAlbum(album);
|
|
}
|
|
};
|
|
|
|
const handleDeleteAlbum = async (albumToDelete: AlbumResponseDto) => {
|
|
try {
|
|
await deleteAlbum({
|
|
id: albumToDelete.id,
|
|
});
|
|
} catch (error) {
|
|
// In rare cases deleting an album completes after the list of albums has been requested,
|
|
// leading to a bad request error.
|
|
// Since the album is already deleted, the error is ignored.
|
|
const isBadRequest = isHttpError(error) && error.status === 400;
|
|
if (!isBadRequest) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
ownedAlbums = ownedAlbums.filter(({ id }) => id !== albumToDelete.id);
|
|
sharedAlbums = sharedAlbums.filter(({ id }) => id !== albumToDelete.id);
|
|
};
|
|
|
|
const setAlbumToDelete = async () => {
|
|
albumToDelete = contextMenuTargetAlbum ?? null;
|
|
closeAlbumContextMenu();
|
|
await deleteSelectedAlbum();
|
|
};
|
|
|
|
const handleEdit = (album: AlbumResponseDto) => {
|
|
albumToEdit = album;
|
|
closeAlbumContextMenu();
|
|
};
|
|
|
|
const deleteSelectedAlbum = async () => {
|
|
if (!albumToDelete) {
|
|
return;
|
|
}
|
|
|
|
const isConfirmed = await dialogController.show({
|
|
id: 'delete-album',
|
|
prompt: `Are you sure you want to delete the album ${albumToDelete.albumName}?\nIf this album is shared, other users will not be able to access it anymore.`,
|
|
});
|
|
|
|
if (!isConfirmed) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await handleDeleteAlbum(albumToDelete);
|
|
} catch {
|
|
notificationController.show({
|
|
message: 'Error deleting album',
|
|
type: NotificationType.Error,
|
|
});
|
|
} finally {
|
|
albumToDelete = null;
|
|
}
|
|
};
|
|
|
|
const removeAlbumsIfEmpty = async () => {
|
|
const albumsToRemove = ownedAlbums.filter((album) => album.assetCount === 0 && !album.albumName);
|
|
await Promise.allSettled(albumsToRemove.map((album) => handleDeleteAlbum(album)));
|
|
};
|
|
|
|
const updateAlbumInfo = (album: AlbumResponseDto) => {
|
|
ownedAlbums[ownedAlbums.findIndex(({ id }) => id === album.id)] = album;
|
|
sharedAlbums[sharedAlbums.findIndex(({ id }) => id === album.id)] = album;
|
|
};
|
|
|
|
const successEditAlbumInfo = (album: AlbumResponseDto) => {
|
|
albumToEdit = null;
|
|
|
|
notificationController.show({
|
|
message: 'Album info updated',
|
|
type: NotificationType.Info,
|
|
button: {
|
|
text: 'View Album',
|
|
onClick() {
|
|
return goto(`${AppRoute.ALBUMS}/${album.id}`);
|
|
},
|
|
},
|
|
});
|
|
|
|
updateAlbumInfo(album);
|
|
};
|
|
|
|
const handleAddUsers = async (albumUsers: AlbumUserAddDto[]) => {
|
|
if (!albumToShare) {
|
|
return;
|
|
}
|
|
try {
|
|
const album = await addUsersToAlbum({
|
|
id: albumToShare.id,
|
|
addUsersDto: {
|
|
albumUsers,
|
|
},
|
|
});
|
|
updateAlbumInfo(album);
|
|
} catch (error) {
|
|
handleError(error, 'Error adding users to album');
|
|
} finally {
|
|
albumToShare = null;
|
|
}
|
|
};
|
|
|
|
const handleSharedLinkCreated = (album: AlbumResponseDto) => {
|
|
album.shared = true;
|
|
album.hasSharedLink = true;
|
|
updateAlbumInfo(album);
|
|
};
|
|
|
|
const openShareModal = () => {
|
|
albumToShare = contextMenuTargetAlbum;
|
|
closeAlbumContextMenu();
|
|
};
|
|
|
|
const closeShareModal = () => {
|
|
albumToShare = null;
|
|
showShareByURLModal = false;
|
|
};
|
|
</script>
|
|
|
|
{#if albums.length > 0}
|
|
{#if userSettings.view === AlbumViewMode.Cover}
|
|
<!-- Album Cards -->
|
|
{#if albumGroupOption === AlbumGroupBy.None}
|
|
<AlbumCardGroup
|
|
albums={groupedAlbums[0].albums}
|
|
{showOwner}
|
|
showDateRange
|
|
showItemCount
|
|
onShowContextMenu={showAlbumContextMenu}
|
|
/>
|
|
{:else}
|
|
{#each groupedAlbums as albumGroup (albumGroup.id)}
|
|
<AlbumCardGroup
|
|
albums={albumGroup.albums}
|
|
group={albumGroup}
|
|
{showOwner}
|
|
showDateRange
|
|
showItemCount
|
|
onShowContextMenu={showAlbumContextMenu}
|
|
/>
|
|
{/each}
|
|
{/if}
|
|
{:else if userSettings.view === AlbumViewMode.List}
|
|
<!-- Album Table -->
|
|
<AlbumsTable {groupedAlbums} {albumGroupOption} onShowContextMenu={showAlbumContextMenu} />
|
|
{/if}
|
|
{:else}
|
|
<!-- Empty Message -->
|
|
<slot name="empty" />
|
|
{/if}
|
|
|
|
<!-- Context Menu -->
|
|
<RightClickContextMenu {...contextMenuPosition} isOpen={showContextMenu} onClose={closeAlbumContextMenu}>
|
|
{#if showFullContextMenu}
|
|
<MenuOption on:click={() => contextMenuTargetAlbum && handleEdit(contextMenuTargetAlbum)}>
|
|
<p class="flex gap-2">
|
|
<Icon path={mdiRenameOutline} size="18" />
|
|
Edit
|
|
</p>
|
|
</MenuOption>
|
|
<MenuOption on:click={() => openShareModal()}>
|
|
<p class="flex gap-2">
|
|
<Icon path={mdiShareVariantOutline} size="18" />
|
|
Share
|
|
</p>
|
|
</MenuOption>
|
|
{/if}
|
|
<MenuOption on:click={() => handleDownloadAlbum()}>
|
|
<p class="flex gap-2">
|
|
<Icon path={mdiFolderDownloadOutline} size="18" />
|
|
Download
|
|
</p>
|
|
</MenuOption>
|
|
{#if showFullContextMenu}
|
|
<MenuOption on:click={() => setAlbumToDelete()}>
|
|
<p class="flex gap-2">
|
|
<Icon path={mdiDeleteOutline} size="18" />
|
|
Delete
|
|
</p>
|
|
</MenuOption>
|
|
{/if}
|
|
</RightClickContextMenu>
|
|
|
|
{#if allowEdit}
|
|
<!-- Edit Modal -->
|
|
{#if albumToEdit}
|
|
<EditAlbumForm
|
|
album={albumToEdit}
|
|
onEditSuccess={successEditAlbumInfo}
|
|
onCancel={() => (albumToEdit = null)}
|
|
onClose={() => (albumToEdit = null)}
|
|
/>
|
|
{/if}
|
|
|
|
<!-- Share Modal -->
|
|
{#if albumToShare}
|
|
{#if showShareByURLModal}
|
|
<CreateSharedLinkModal
|
|
albumId={albumToShare.id}
|
|
onClose={() => closeShareModal()}
|
|
on:created={() => albumToShare && handleSharedLinkCreated(albumToShare)}
|
|
/>
|
|
{:else}
|
|
<UserSelectionModal
|
|
album={albumToShare}
|
|
on:select={({ detail: users }) => handleAddUsers(users)}
|
|
on:share={() => (showShareByURLModal = true)}
|
|
onClose={() => closeShareModal()}
|
|
/>
|
|
{/if}
|
|
{/if}
|
|
{/if}
|