diff --git a/web/src/lib/components/album-page/album-summary.svelte b/web/src/lib/components/album-page/album-summary.svelte new file mode 100644 index 0000000000..4a49eeb444 --- /dev/null +++ b/web/src/lib/components/album-page/album-summary.svelte @@ -0,0 +1,32 @@ + + + +

{getDateRange(startDate, endDate)}

+

·

+

{album.assetCount} items

+
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte index 0e5abc1fac..9897125bcd 100644 --- a/web/src/lib/components/album-page/album-viewer.svelte +++ b/web/src/lib/components/album-page/album-viewer.svelte @@ -3,11 +3,9 @@ import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte'; import { assetViewingStore } from '$lib/stores/asset-viewing.store'; import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store'; - import { locale } from '$lib/stores/preferences.store'; import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader'; import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk'; import { onDestroy, onMount } from 'svelte'; - import { dateFormats } from '../../constants'; import { createAssetInteractionStore } from '../../stores/asset-interaction.store'; import { AssetStore } from '../../stores/assets.store'; import { downloadArchive } from '../../utils/asset-utils'; @@ -21,6 +19,7 @@ import { shouldIgnoreShortcut } from '$lib/utils/shortcut'; import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js'; import { handlePromiseError } from '$lib/utils'; + import AlbumSummary from './album-summary.svelte'; export let sharedLink: SharedLinkResponseDto; export let user: UserResponseDto | undefined = undefined; @@ -40,31 +39,6 @@ } }); - const getDateRange = () => { - const { startDate, endDate } = album; - - let start = ''; - let end = ''; - - if (startDate) { - start = new Date(startDate).toLocaleDateString($locale, dateFormats.album); - } - - if (endDate) { - end = new Date(endDate).toLocaleDateString($locale, dateFormats.album); - } - - if (startDate && endDate && start !== end) { - return `${start} - ${end}`; - } - - if (start) { - return start; - } - - return ''; - }; - const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event); onMount(() => { @@ -148,13 +122,8 @@ {album.albumName} - {#if album.assetCount > 0} - -

{getDateRange()}

-

·

-

{album.assetCount} items

-
+ {/if} diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte index 279054d915..05d94bf3e1 100644 --- a/web/src/routes/(user)/albums/[albumId]/+page.svelte +++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte @@ -31,7 +31,7 @@ notificationController, } from '$lib/components/shared-components/notification/notification'; import UserAvatar from '$lib/components/shared-components/user-avatar.svelte'; - import { AppRoute, dateFormats } from '$lib/constants'; + import { AppRoute } from '$lib/constants'; import { numberOfComments, setNumberOfComments, updateNumberOfComments } from '$lib/stores/activity.store'; import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store'; import { assetViewingStore } from '$lib/stores/asset-viewing.store'; @@ -74,6 +74,7 @@ import AlbumTitle from '$lib/components/album-page/album-title.svelte'; import AlbumDescription from '$lib/components/album-page/album-description.svelte'; import { handlePromiseError } from '$lib/utils'; + import AlbumSummary from '$lib/components/album-page/album-summary.svelte'; export let data: PageData; @@ -280,31 +281,6 @@ album = await getAlbumInfo({ id: album.id, withoutAssets: true }); }; - const getDateRange = () => { - const { startDate, endDate } = album; - - let start = ''; - let end = ''; - - if (startDate) { - start = new Date(startDate).toLocaleDateString($locale, dateFormats.album); - } - - if (endDate) { - end = new Date(endDate).toLocaleDateString($locale, dateFormats.album); - } - - if (startDate && endDate && start !== end) { - return `${start} - ${end}`; - } - - if (start) { - return start; - } - - return ''; - }; - const handleAddAssets = async () => { const assetIds = [...$timelineSelected].map((asset) => asset.id); @@ -389,6 +365,11 @@ } }; + const handleRemoveAssets = async (assetIds: string[]) => { + assetStore.removeAssets(assetIds); + await refreshAlbum(); + }; + const handleUpdateThumbnail = async (assetId: string) => { if (viewMode !== ViewMode.SELECT_THUMBNAIL) { return; @@ -429,10 +410,10 @@ {/if} {#if isOwned || isAllUserOwned} - assetStore.removeAssets(assetIds)} /> + {/if} {#if isAllUserOwned} - assetStore.removeAssets(assetIds)} /> + {/if} @@ -469,9 +450,7 @@ {#if viewMode === ViewMode.ALBUM_OPTIONS} - {#if album.assetCount !== 0} - - {/if} + (viewMode = ViewMode.SELECT_THUMBNAIL)} text="Set album cover" /> (viewMode = ViewMode.OPTIONS)} text="Options" /> @@ -485,7 +464,7 @@