tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-31 14:35:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): persist albums page scroll position

Browse Source
This commit is contained in:
Calum Dingwall 2024-07-26 17:59:36 -06:00
parent 819b92500e
commit b630e4fb4a
3 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/layouts/user-page-layout.svelte
View File

@ -11,7 +11,7 @@
export let scrollbar = true;
export let admin = false;
export let scrollSlot: HTMLDivElement;
export let scrollSlot: HTMLDivElement | undefined = undefined;
$: scrollbarClass = scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden';
$: hasTitleClass = title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full';

24
web/src/routes/(user)/albums/+page.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import type { PageData } from './$types';
import { beforeNavigate } from '$app/navigation';
import { AlbumFilter, albumViewSettings } from '$lib/stores/preferences.store';
import { createAlbumAndRedirect } from '$lib/utils/album-utils';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
@ -8,15 +9,36 @@
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import GroupTab from '$lib/components/elements/group-tab.svelte';
import SearchBar from '$lib/components/elements/search-bar.svelte';
import { AppRoute, SessionStorageKey } from '$lib/constants';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
export let data: PageData;
let scrollSlot: HTMLDivElement;
beforeNavigate(({ to }) => {
// Save current scroll information when going into a person page.
if (to && to.url.pathname.startsWith(AppRoute.ALBUMS)) {
sessionStorage.setItem(SessionStorageKey.SCROLL_POSITION, scrollSlot.scrollTop.toString());
} else {
sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
}
});
onMount(() => {
let newScroll = sessionStorage.getItem(SessionStorageKey.SCROLL_POSITION);
if (newScroll)
scrollSlot.scroll({
top: parseFloat(newScroll),
behavior: 'instant',
});
sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
});
let searchQuery = '';
let albumGroups: string[] = [];
</script>
<UserPageLayout title={data.meta.title}>
<UserPageLayout title={data.meta.title} bind:scrollSlot>
<div class="flex place-items-center gap-2" slot="buttons">
<AlbumsControls {albumGroups} bind:searchQuery />
</div>

11
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { afterNavigate, goto, onNavigate } from '$app/navigation';
import { afterNavigate, beforeNavigate, goto, onNavigate } from '$app/navigation';
import AlbumDescription from '$lib/components/album-page/album-description.svelte';
import AlbumOptions from '$lib/components/album-page/album-options.svelte';
import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
@ -32,7 +32,7 @@
notificationController,
} from '$lib/components/shared-components/notification/notification';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import { AppRoute } from '$lib/constants';
import { AppRoute, SessionStorageKey } 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';
@ -138,6 +138,13 @@
$: albumHasViewers = album.albumUsers.some(({ role }) => role === AlbumUserRole.Viewer);
beforeNavigate(({ to }) => {
// Forget scroll position from albums page if going somewhere else.
if (to && !to.url.pathname.startsWith(AppRoute.ALBUMS)) {
sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
}
});
afterNavigate(({ from }) => {
let url: string | undefined = from?.url?.pathname;