feat(web): assets now have a permanent URL ()

* Remove asest redirect pages

* Rename route paths to handle optional assetId

* Update old references to new routes

* Load and display asset from all routes that can show assetId

* Add <main> in base layout, update portals to target it

* Wire up updating navigation in response to open/close/prev/next

* Replace events with navigation functions

* Add types to param matcher

* misc cleanup

* Fix reload on /search pages

* Avoid loading bar between photos nav. Delay loading bar by 200ms for all navigations

* Update url for maps routes. Note: on page reload, next/prev is not available

* Dynamically load asset-viewer on map page

* When reloading a url with assetUrl, hide background page to prevent flash during load

* Mostly style, review comments

* Load buckets for assets on demand

* Forgot this update call

* typo

* fix test

* Fix carelessness

* Review comment

* merge main

* remove assets

* fix submodule

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
This commit is contained in:
Min Idzelis 2024-04-24 15:24:19 -04:00 committed by GitHub
parent 1e004611e4
commit a78260296c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
48 changed files with 289 additions and 190 deletions
web/src/lib/components/photos-page

View file

@ -22,6 +22,7 @@
import DeleteAssetDialog from './delete-asset-dialog.svelte';
import { handlePromiseError } from '$lib/utils';
import { selectAllAssets } from '$lib/utils/asset-utils';
import { navigate } from '$lib/utils/navigation';
export let isSelectionMode = false;
export let singleSelect = false;
@ -48,6 +49,10 @@
$: isEmpty = $assetStore.initialized && $assetStore.buckets.length === 0;
$: idsSelectedAssets = [...$selectedAssets].filter((a) => !a.isExternal).map((a) => a.id);
$: {
void assetStore.updateViewport(viewport);
}
const dispatch = createEventDispatcher<{ select: AssetResponseDto; escape: void }>();
onMount(async () => {
@ -142,22 +147,24 @@
}
const handlePrevious = async () => {
const previousAsset = await assetStore.getPreviousAsset($viewingAsset.id);
const previousAsset = await assetStore.getPreviousAsset($viewingAsset);
if (previousAsset) {
const preloadAsset = await assetStore.getPreviousAsset(previousAsset.id);
const preloadAsset = await assetStore.getPreviousAsset(previousAsset);
assetViewingStore.setAsset(previousAsset, preloadAsset ? [preloadAsset] : []);
await navigate({ targetRoute: 'current', assetId: previousAsset.id });
}
return !!previousAsset;
};
const handleNext = async () => {
const nextAsset = await assetStore.getNextAsset($viewingAsset.id);
const nextAsset = await assetStore.getNextAsset($viewingAsset);
if (nextAsset) {
const preloadAsset = await assetStore.getNextAsset(nextAsset.id);
const preloadAsset = await assetStore.getNextAsset(nextAsset);
assetViewingStore.setAsset(nextAsset, preloadAsset ? [preloadAsset] : []);
await navigate({ targetRoute: 'current', assetId: nextAsset.id });
}
return !!nextAsset;
@ -462,8 +469,8 @@
<Portal target="body">
{#if $showAssetViewer}
{#await import('../asset-viewer/asset-viewer.svelte') then AssetViewer}
<AssetViewer.default
{#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
<AssetViewer
{withStacked}
{assetStore}
asset={$viewingAsset}