self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-26 10:50:29 +02:00
Code Issues Releases Activity

fix(web): back button for gallery viewer (#7250)

Browse Source
This commit is contained in:
Michel Heusschen 2024-02-21 14:28:16 +01:00 committed by GitHub
parent f798e037d5
commit 855aa8e30a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
View File

@ -10,6 +10,7 @@
import justifiedLayout from 'justified-layout';
import { getAssetRatio } from '$lib/utils/asset-utils';
import { calculateWidth } from '$lib/utils/timeline-util';
import { pushState, replaceState } from '$app/navigation';
const dispatch = createEventDispatcher<{ intersected: { container: HTMLDivElement; position: BucketPosition } }>();
@ -31,7 +32,7 @@
currentViewAssetIndex = assets.findIndex((a) => a.id == asset.id);
selectedAsset = assets[currentViewAssetIndex];
$showAssetViewer = true;
pushState(selectedAsset.id);
updateAssetState(selectedAsset.id, false);
};
const selectAssetHandler = (event: CustomEvent) => {
@ -52,7 +53,7 @@
if (currentViewAssetIndex < assets.length - 1) {
currentViewAssetIndex++;
selectedAsset = assets[currentViewAssetIndex];
pushState(selectedAsset.id);
updateAssetState(selectedAsset.id);
}
} catch (error) {
handleError(error, 'Cannot navigate to the next asset');
@ -64,22 +65,26 @@
if (currentViewAssetIndex > 0) {
currentViewAssetIndex--;
selectedAsset = assets[currentViewAssetIndex];
pushState(selectedAsset.id);
updateAssetState(selectedAsset.id);
}
} catch (error) {
handleError(error, 'Cannot navigate to previous asset');
}
};
const pushState = (assetId: string) => {
// add a URL to the browser's history
// changes the current URL in the address bar but doesn't perform any SvelteKit navigation
history.pushState(null, '', `${$page.url.pathname}/photos/${assetId}`);
const updateAssetState = (assetId: string, replace = true) => {
const route = `${$page.url.pathname}/photos/${assetId}`;
if (replace) {
replaceState(route, {});
} else {
pushState(route, {});
}
};
const closeViewer = () => {
$showAssetViewer = false;
history.pushState(null, '', `${$page.url.pathname}`);
pushState(`${$page.url.pathname}${$page.url.search}`, {});
};
onDestroy(() => {
@ -105,6 +110,8 @@
})();
</script>
<svelte:window on:popstate|preventDefault={closeViewer} />
{#if assets.length > 0}
<div class="relative" style="height: {geometry.containerHeight}px;width: {geometry.containerWidth}px ">
{#each assets as asset, i (i)}