- {#key current.asset.id}
- {#if current.asset.isVideo}
-
+ {#key current.asset.id}
+ {#if current.asset.isVideo}
+
+
+
- handlePromiseError(handleAction('ContextMenuClick', 'pause'))}
+ direction="left"
+ size="medium"
+ align="bottom-right"
+ >
+ handleDeleteMemory()} text={$t('remove_memory')} icon={mdiCardsOutline} />
+ handleDeleteMemoryAsset()}
+ text={$t('remove_photo_from_memory')}
+ icon={mdiImageMinusOutline}
+ />
+
+
-
+
+
- handleSaveMemory()}
- class="w-12 h-12"
- />
-
- handlePromiseError(handleAction('ContextMenuClick', 'pause'))}
- direction="left"
- size="medium"
- align="bottom-right"
- >
- handleDeleteMemory()} text={$t('remove_memory')} icon={mdiCardsOutline} />
- handleDeleteMemoryAsset()}
- text={$t('remove_photo_from_memory')}
- icon={mdiImageMinusOutline}
- />
-
-
-
-
-
- {#await currentMemoryAssetFull then asset}
- {#if asset}
-
+
+ {#await currentMemoryAssetFull then asset}
+ {#if asset}
+
+
{#if current.previous}
-
+
+
-
-
-
+ - {fromISODateTimeUTC(current.memory.assets[0].localDateTime).toLocaleString(DateTime.DATE_FULL, { - locale: $locale, - })} -
-- {#await currentMemoryAssetFull then asset} - {asset?.exifInfo?.city || ''} - {asset?.exifInfo?.country || ''} - {/await} -
-
+
+ {fromISODateTimeUTC(current.memory.assets[0].localDateTime).toLocaleString(DateTime.DATE_FULL, { + locale: $locale, + })} +
++ {#await currentMemoryAssetFull then asset} + {asset?.exifInfo?.city || ''} + {asset?.exifInfo?.country || ''} + {/await} +
+
{:else}
+
@@ -680,8 +888,6 @@
diff --git a/web/src/lib/managers/ViewTransitionManager.svelte.spec.ts b/web/src/lib/managers/ViewTransitionManager.svelte.spec.ts
index 245b2ff9f0..f7bffa8097 100644
--- a/web/src/lib/managers/ViewTransitionManager.svelte.spec.ts
+++ b/web/src/lib/managers/ViewTransitionManager.svelte.spec.ts
@@ -48,21 +48,34 @@ describe('ViewTransitionManager', () => {
});
describe('when a transition is already active', () => {
- it('should skip the second transition', async () => {
- let resolveFinished!: () => void;
- const finished = new Promise((resolve) => {
- resolveFinished = resolve;
- });
- let resolveUpdate!: () => void;
- const updateCallbackDone = new Promise((resolve) => {
- resolveUpdate = resolve;
+ it('should skip the first transition and run the second', async () => {
+ let resolveFirstUpdate!: () => void;
+ const firstUpdateCallbackDone = new Promise((resolve) => {
+ resolveFirstUpdate = resolve;
});
+ const firstFinished = new Promise(() => {});
+ const firstSkipTransition = vi.fn();
+ let callCount = 0;
// eslint-disable-next-line tscompat/tscompat
document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
+ callCount++;
const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise }).update;
void updateFn();
- return { updateCallbackDone, finished, ready: Promise.resolve(), skipTransition: vi.fn() };
+ if (callCount === 1) {
+ return {
+ updateCallbackDone: firstUpdateCallbackDone,
+ finished: firstFinished,
+ ready: Promise.resolve(),
+ skipTransition: firstSkipTransition,
+ };
+ }
+ return {
+ updateCallbackDone: Promise.resolve(),
+ finished: Promise.resolve(),
+ ready: Promise.resolve(),
+ skipTransition: vi.fn(),
+ };
});
const secondPerformUpdate = vi.fn().mockResolvedValue(undefined);
@@ -75,13 +88,13 @@ describe('ViewTransitionManager', () => {
// Flush microtasks so the first transition reaches the startViewTransition call
await new Promise((r) => queueMicrotask(r));
- // While first is active, try a second — should be skipped
+ // While first is active, start a second — should skip the first and proceed
await manager.startTransition({ performUpdate: secondPerformUpdate });
- expect(secondPerformUpdate).not.toHaveBeenCalled();
+ expect(firstSkipTransition).toHaveBeenCalledOnce();
+ expect(secondPerformUpdate).toHaveBeenCalledOnce();
- // Clean up
- resolveUpdate();
- resolveFinished();
+ // Clean up first promise
+ resolveFirstUpdate();
await firstPromise;
});
});
diff --git a/web/src/lib/managers/ViewTransitionManager.svelte.ts b/web/src/lib/managers/ViewTransitionManager.svelte.ts
index af5f06e4aa..fd8256f29c 100644
--- a/web/src/lib/managers/ViewTransitionManager.svelte.ts
+++ b/web/src/lib/managers/ViewTransitionManager.svelte.ts
@@ -10,6 +10,7 @@ interface TransitionRequest {
export class ViewTransitionManager {
#activeViewTransition = $state(null);
+ #activeOnFinished: (() => void) | undefined;
get activeViewTransition() {
return this.#activeViewTransition;
@@ -23,6 +24,9 @@ export class ViewTransitionManager {
const skipped = !!this.#activeViewTransition;
this.#activeViewTransition?.skipTransition();
this.#activeViewTransition = null;
+ const onFinished = this.#activeOnFinished;
+ this.#activeOnFinished = undefined;
+ onFinished?.();
return skipped;
}
@@ -34,7 +38,7 @@ export class ViewTransitionManager {
onFinished,
}: TransitionRequest) {
if (this.#activeViewTransition) {
- return;
+ this.skipTransitions();
}
if (!this.isSupported()) {
@@ -68,6 +72,7 @@ export class ViewTransitionManager {
}
this.#activeViewTransition = transition;
+ this.#activeOnFinished = onFinished;
// eslint-disable-next-line tscompat/tscompat
void transition.ready.catch((error: unknown) => {
@@ -80,8 +85,11 @@ export class ViewTransitionManager {
void transition.finished
.catch(() => {})
.finally(() => {
- this.#activeViewTransition = null;
- onFinished?.();
+ if (this.#activeViewTransition === transition) {
+ this.#activeViewTransition = null;
+ this.#activeOnFinished = undefined;
+ onFinished?.();
+ }
});
// Wait only until the DOM update completes (both snapshots captured),
diff --git a/web/src/lib/utils/transition-utils.ts b/web/src/lib/utils/transition-utils.ts
index d25921390f..006272378d 100644
--- a/web/src/lib/utils/transition-utils.ts
+++ b/web/src/lib/utils/transition-utils.ts
@@ -2,15 +2,16 @@ import { eventManager } from '$lib/managers/event-manager.svelte';
import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
import { tick } from 'svelte';
-export function startViewerTransition(
- assetId: string,
+function startHeroTransition(
+ type: string,
+ id: string,
navigate: () => void,
setTransitionId: (id: string | null) => void,
) {
void viewTransitionManager.startTransition({
- types: ['viewer'],
+ types: [type],
prepareOldSnapshot: () => {
- setTransitionId(assetId);
+ setTransitionId(id);
},
performUpdate: async (signal) => {
setTransitionId(null);
@@ -23,6 +24,22 @@ export function startViewerTransition(
});
}
+export function startViewerTransition(
+ assetId: string,
+ navigate: () => void,
+ setTransitionId: (id: string | null) => void,
+) {
+ startHeroTransition('viewer', assetId, navigate, setTransitionId);
+}
+
+export function startMemoryTransition(
+ memoryId: string,
+ navigate: () => void,
+ setTransitionId: (id: string | null) => void,
+) {
+ startHeroTransition('memory-enter', memoryId, navigate, setTransitionId);
+}
+
let activeOverlay: HTMLElement | undefined;
export function removeCrossfadeOverlay() {
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
index 31a991fa8f..972c81d342 100644
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@@ -1,5 +1,5 @@
@@ -112,7 +123,33 @@
withStacked
>
{#if $preferences.memories.enabled}
- 
+
+ openFileUploadDialog()} class="mt-10 mx-auto" />
{$t('up_next')}
{$memoryLaneTitle(current.nextMemory)}
+ {item.title} +
+ + {/snippet} +