diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte index 2b41f143c3..0ca3c7dda1 100644 --- a/web/src/lib/components/album-page/album-viewer.svelte +++ b/web/src/lib/components/album-page/album-viewer.svelte @@ -526,7 +526,12 @@ {/if} {#if album.assetCount > 0} - + {:else}
diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte index 341d3cc434..6f8c8a8956 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte @@ -14,6 +14,8 @@ import ContentCopy from 'svelte-material-icons/ContentCopy.svelte'; import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte'; import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte'; + import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte'; + import ArchiveArrowUpOutline from 'svelte-material-icons/ArchiveArrowUpOutline.svelte'; import { page } from '$app/stores'; import { AssetResponseDto } from '../../../api'; @@ -49,6 +51,14 @@ dispatch('goBack')} />
+ {#if isOwner} + dispatch('toggleArchive')} + /> + {/if} + {#if showMotionPlayButton} {#if isMotionPhotoPlaying} { + try { + const { data } = await api.assetApi.updateAsset(asset.id, { + isArchived: !asset.isArchived + }); + + asset.isArchived = data.isArchived; + + if (data.isArchived) { + dispatch('archived', data); + } else { + dispatch('unarchived', data); + } + + notificationController.show({ + type: NotificationType.Info, + message: asset.isArchived ? `Added to archive` : `Removed from archive` + }); + } catch (error) { + console.error(error); + notificationController.show({ + type: NotificationType.Error, + message: `Error ${ + asset.isArchived ? 'archiving' : 'unarchiving' + } asset, check console for more details` + }); + } + };
openAlbumPicker(true)} on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)} on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)} + on:toggleArchive={toggleArchive} />
diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte index 6327bd86a7..6a4e5481ed 100644 --- a/web/src/lib/components/photos-page/asset-grid.svelte +++ b/web/src/lib/components/photos-page/asset-grid.svelte @@ -3,7 +3,7 @@ import IntersectionObserver from '../asset-viewer/intersection-observer.svelte'; import { assetGridState, assetStore, loadingBucketState } from '$lib/stores/assets.store'; - import { api, AssetCountByTimeBucketResponseDto, TimeGroupEnum } from '@api'; + import { api, AssetCountByTimeBucketResponseDto, AssetResponseDto, TimeGroupEnum } from '@api'; import AssetDateGroup from './asset-date-group.svelte'; import Portal from '../shared-components/portal/portal.svelte'; import AssetViewer from '../asset-viewer/asset-viewer.svelte'; @@ -89,6 +89,12 @@ const handleScrollbarDrag = (e: OnScrollbarDragDetail) => { assetGridElement.scrollTop = e.scrollTo; }; + + const handleArchiveSuccess = (e: CustomEvent) => { + const asset = e.detail as AssetResponseDto; + navigateToNextAsset(); + assetStore.removeAsset(asset.id); + }; {#if bucketInfo && viewportHeight && $assetGridState.timelineHeight > viewportHeight} @@ -149,6 +155,7 @@ on:close={() => { assetInteractionStore.setIsViewingAsset(false); }} + on:archived={handleArchiveSuccess} /> {/if} diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte index cd5faacfa8..79b4228d17 100644 --- a/web/src/lib/components/share-page/individual-shared-viewer.svelte +++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte @@ -147,6 +147,6 @@ {/if}
- +
diff --git a/web/src/lib/components/shared-components/fullscreen-container.svelte b/web/src/lib/components/shared-components/fullscreen-container.svelte index c37e93d554..4bf39362b0 100644 --- a/web/src/lib/components/shared-components/fullscreen-container.svelte +++ b/web/src/lib/components/shared-components/fullscreen-container.svelte @@ -18,7 +18,7 @@ {#if showMessage}
diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte index 14182c882a..e205c1980a 100644 --- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte +++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte @@ -1,3 +1,12 @@ + + {#if assets.length > 0} @@ -136,5 +157,6 @@ on:navigate-previous={navigateAssetBackward} on:navigate-next={navigateAssetForward} on:close={closeViewer} + on:unarchived={handleUnarchivedSuccess} /> {/if} diff --git a/web/src/lib/stores/archived-asset.store.ts b/web/src/lib/stores/archived-asset.store.ts new file mode 100644 index 0000000000..6168d29e9c --- /dev/null +++ b/web/src/lib/stores/archived-asset.store.ts @@ -0,0 +1,4 @@ +import { AssetResponseDto } from '@api'; +import { writable } from 'svelte/store'; + +export const archivedAsset = writable([]); diff --git a/web/src/routes/(user)/archive/+page.svelte b/web/src/routes/(user)/archive/+page.svelte index 2dae916617..4255ff7689 100644 --- a/web/src/routes/(user)/archive/+page.svelte +++ b/web/src/routes/(user)/archive/+page.svelte @@ -25,13 +25,14 @@ import { onMount } from 'svelte'; import { handleError } from '$lib/utils/handle-error'; import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte'; + import { archivedAsset } from '$lib/stores/archived-asset.store'; export let data: PageData; onMount(async () => { try { const { data: assets } = await api.assetApi.getAllAssets(undefined, true); - archived = assets; + $archivedAsset = assets; } catch { handleError(Error, 'Unable to load archived assets'); } @@ -54,7 +55,7 @@ for (const asset of deletedAssets) { if (asset.status == 'SUCCESS') { - archived = archived.filter((a) => a.id != asset.id); + $archivedAsset = $archivedAsset.filter((a) => a.id != asset.id); } } @@ -72,7 +73,6 @@ $: isMultiSelectionMode = selectedAssets.size > 0; let selectedAssets: Set = new Set(); - let archived: AssetResponseDto[] = []; let contextMenuPosition = { x: 0, y: 0 }; let isShowCreateSharedLinkModal = false; @@ -157,7 +157,7 @@ }); cnt = cnt + 1; - archived = archived.filter((a) => a.id != asset.id); + $archivedAsset = $archivedAsset.filter((a) => a.id != asset.id); } } @@ -181,7 +181,7 @@ - {#if archived.length === 0} + {#if $archivedAsset.length === 0} - + diff --git a/web/src/routes/(user)/favorites/+page.svelte b/web/src/routes/(user)/favorites/+page.svelte index 5e402ebf26..f23a9c1810 100644 --- a/web/src/routes/(user)/favorites/+page.svelte +++ b/web/src/routes/(user)/favorites/+page.svelte @@ -106,6 +106,6 @@ /> {/if} - + diff --git a/web/src/routes/(user)/search/+page.svelte b/web/src/routes/(user)/search/+page.svelte index 1cfdf225d7..f8ea502a65 100644 --- a/web/src/routes/(user)/search/+page.svelte +++ b/web/src/routes/(user)/search/+page.svelte @@ -38,7 +38,11 @@
{#if data.results?.assets?.items.length > 0}
- +
{:else}