diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte index 23876578e..5ddb09c10 100644 --- a/web/src/lib/components/memory-page/memory-viewer.svelte +++ b/web/src/lib/components/memory-page/memory-viewer.svelte @@ -34,7 +34,8 @@ $: currentAsset = currentMemory?.assets[assetIndex]; $: nextAsset = currentMemory?.assets[assetIndex + 1]; - $: canAdvance = !!(nextMemory || nextAsset); + $: canGoForward = !!(nextMemory || nextAsset); + $: canGoBack = !!(previousMemory || previousAsset); const toNextMemory = () => goto(`?memory=${memoryIndex + 1}`); const toPreviousMemory = () => goto(`?memory=${memoryIndex - 1}`); @@ -61,7 +62,7 @@ $: paused ? pause() : play(); // Progress should be paused when it's no longer possible to advance. - $: paused ||= !canAdvance; + $: paused ||= !canGoForward; // Advance to the next asset or memory when progress is complete. $: $progress === 1 && toNext(); @@ -72,6 +73,19 @@ // Progress should be reset when the current memory or asset changes. $: memoryIndex, assetIndex, reset(); + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'ArrowRight' && canGoForward) { + e.preventDefault(); + toNext(); + } else if (e.key === 'ArrowLeft' && canGoBack) { + e.preventDefault(); + toPrevious(); + } else if (e.key === 'Escape') { + e.preventDefault(); + goto(AppRoute.PHOTOS); + } + }; + onMount(async () => { if (!$memoryStore) { const { data } = await api.assetApi.getMemoryLane({ @@ -86,6 +100,8 @@ let galleryInView = false; + +
{#if currentMemory} goto(AppRoute.PHOTOS)} forceDark> @@ -190,7 +206,7 @@
- {#if previousMemory || previousAsset} + {#if canGoBack}
- {#if canAdvance} + {#if canGoForward}