+
{@render children?.()}
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 9a2d36ed95..9010efe535 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -46,7 +46,6 @@
import { getGlobalActions } from '$lib/services/app.service';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
- import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
import { preferences, user } from '$lib/stores/user.store';
import { handlePromiseError } from '$lib/utils';
@@ -86,14 +85,9 @@
}
let { data = $bindable() }: Props = $props();
-
- let { isViewing: showAssetViewer, setAssetId, gridScrollTarget } = assetViewingStore;
let { slideshowState, slideshowNavigation } = slideshowStore;
-
let oldAt: AssetGridRouteSearchParams | null | undefined = $state();
-
let viewMode: AlbumPageViewMode = $state(AlbumPageViewMode.VIEW);
-
let timelineManager = $state
() as TimelineManager;
let showAlbumUsers = $derived(timelineManager?.showAssetOwners ?? false);
@@ -114,7 +108,9 @@
? await timelineManager.getRandomAsset()
: timelineManager.months[0]?.dayGroups[0]?.viewerAssets[0]?.asset;
if (asset) {
- handlePromiseError(setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)));
+ handlePromiseError(
+ assetViewerManager.setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)),
+ );
}
};
@@ -128,7 +124,7 @@
await handleCloseSelectAssets();
return;
}
- if ($showAssetViewer) {
+ if (assetViewerManager.isViewing) {
return;
}
if (assetInteraction.selectionActive) {
@@ -240,7 +236,7 @@
const isShared = $derived(viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : album.albumUsers.length > 0);
$effect(() => {
- if ($showAssetViewer || !isShared) {
+ if (assetViewerManager.isViewing || !isShared) {
return;
}
@@ -252,7 +248,9 @@
let isOwned = $derived($user.id == album.ownerId);
let showActivityStatus = $derived(
- album.albumUsers.length > 0 && !$showAssetViewer && (album.isActivityEnabled || activityManager.commentCount > 0),
+ album.albumUsers.length > 0 &&
+ !assetViewerManager.isViewing &&
+ (album.isActivityEnabled || activityManager.commentCount > 0),
);
let isEditor = $derived(
album.albumUsers.find(({ user: { id } }) => id === $user.id)?.role === AlbumUserRole.Editor ||
@@ -322,7 +320,7 @@
type: $t('command'),
icon: mdiArrowLeft,
onAction: handleEscape,
- $if: () => !$showAssetViewer,
+ $if: () => !assetViewerManager.isViewing,
shortcuts: { key: 'Escape' },
});
@@ -518,7 +516,7 @@
onclick={async () => {
timelineManager.suspendTransitions = true;
viewMode = AlbumPageViewMode.SELECT_ASSETS;
- oldAt = { at: $gridScrollTarget?.at };
+ oldAt = { at: assetViewerManager.gridScrollTarget?.at };
await navigate(
{ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: { at: null } },
{ replaceState: true },
@@ -621,7 +619,7 @@
{/if}
{/if}
());
let selectedClusterBBox = $state.raw();
let isTimelinePanelVisible = $state(false);
@@ -34,7 +31,7 @@
}
onDestroy(() => {
- assetViewingStore.showAssetViewer(false);
+ assetViewerManager.showAssetViewer(false);
});
if (!featureFlagsManager.value.map) {
@@ -42,7 +39,7 @@
}
async function onViewAssets(assetIds: string[]) {
- await setAssetId(assetIds[0]);
+ await assetViewerManager.setAssetId(assetIds[0]);
closeTimelinePanel();
}
@@ -50,7 +47,7 @@
selectedClusterIds = new Set(assetIds);
selectedClusterBBox = bbox;
isTimelinePanelVisible = true;
- assetViewingStore.showAssetViewer(false);
+ assetViewerManager.showAssetViewer(false);
handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
}
@@ -89,13 +86,13 @@
- {#if $showAssetViewer}
+ {#if assetViewerManager.isViewing}
{#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
{
- assetViewingStore.showAssetViewer(false);
+ assetViewerManager.showAssetViewer(false);
handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
}}
isShared={false}
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
index 31a991fa8f..4d1775d7dc 100644
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@@ -20,11 +20,11 @@
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AssetAction } from '$lib/constants';
+ import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import { Route } from '$lib/route';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
- import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
import { memoryStore } from '$lib/stores/memory.store.svelte';
import { preferences, user } from '$lib/stores/user.store';
@@ -43,7 +43,6 @@
import { mdiDotsVertical } from '@mdi/js';
import { t } from 'svelte-i18n';
- let { isViewing: showAssetViewer } = assetViewingStore;
let timelineManager = $state() as TimelineManager;
const options = { visibility: AssetVisibility.Timeline, withStacked: true, withPartners: true };
@@ -62,7 +61,7 @@
});
const handleEscape = () => {
- if ($showAssetViewer) {
+ if (assetViewerManager.isViewing) {
return;
}
if (assetInteraction.selectionActive) {
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
index c7c0c146ad..c7d30febc7 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -4,11 +4,11 @@
import { shortcuts } from '$lib/actions/shortcut';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import DuplicatesCompareControl from '$lib/components/utilities-page/duplicates/duplicates-compare-control.svelte';
+ import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
import DuplicatesInformationModal from '$lib/modals/DuplicatesInformationModal.svelte';
import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
import { Route } from '$lib/route';
- import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { locale } from '$lib/stores/preferences.store';
import { stackAssets } from '$lib/utils/asset-utils';
import { suggestDuplicate } from '$lib/utils/duplicate-utils';
@@ -57,7 +57,6 @@
};
let duplicates = $state(data.duplicates);
- const { isViewing: showAssetViewer } = assetViewingStore;
const correctDuplicatesIndex = (index: number) => {
return Math.max(0, Math.min(index, duplicates.length - 1));
@@ -186,7 +185,7 @@
{
if (asset) {
- setAsset(asset);
+ assetViewerManager.setAsset(asset);
}
});
@@ -39,7 +39,7 @@
const onAction = (payload: Action) => {
if (payload.type == 'trash') {
assets = assets.filter((a) => a.id != payload.asset.id);
- $showAssetViewer = false;
+ assetViewerManager.showAssetViewer(false);
}
};
@@ -48,9 +48,9 @@
};
const assetCursor = $derived({
- current: $viewingAsset,
- nextAsset: getNextAsset(assets, $viewingAsset),
- previousAsset: getPreviousAsset(assets, $viewingAsset),
+ current: assetViewerManager.asset!,
+ nextAsset: getNextAsset(assets, assetViewerManager.asset),
+ previousAsset: getPreviousAsset(assets, assetViewerManager.asset),
});
@@ -68,7 +68,7 @@
-{#if $showAssetViewer}
+{#if assetViewerManager.isViewing}
{#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}