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