From 2c924e4c1c4b92844a6abc18028c6725b75f8e1a Mon Sep 17 00:00:00 2001
From: Krisjanis Lejejs <krisjanis.lejejs@gmail.com>
Date: Wed, 21 Jun 2023 23:28:58 +0300
Subject: [PATCH] feature (web): Add keyboard event support to memory view
 (#2890)

* Add keyboard event support to memory view in web

* Implement PR suggestions
---
 .../memory-page/memory-viewer.svelte          | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index 23876578e2..5ddb09c102 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;
 </script>
 
+<svelte:window on:keydown={handleKeyDown} />
+
 <section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}>
 	{#if currentMemory}
 		<ControlAppBar on:close-button-click={() => goto(AppRoute.PHOTOS)} forceDark>
@@ -190,7 +206,7 @@
 						<div class="absolute h-full flex justify-between w-full">
 							<div class="flex h-full flex-col place-content-center place-items-center ml-4">
 								<div class="inline-block">
-									{#if previousMemory || previousAsset}
+									{#if canGoBack}
 										<CircleIconButton
 											logo={ChevronLeft}
 											backgroundColor="#202123"
@@ -201,7 +217,7 @@
 							</div>
 							<div class="flex h-full flex-col place-content-center place-items-center mr-4">
 								<div class="inline-block">
-									{#if canAdvance}
+									{#if canGoForward}
 										<CircleIconButton
 											logo={ChevronRight}
 											backgroundColor="#202123"