From 11c32c274586917ec8ab734030714f054af74a0a Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Thu, 5 Oct 2023 14:44:39 +0300
Subject: [PATCH] navigate modal images with left / right / up / down keys

---
 .../app/src/Element/Deck/SpotlightMedia.tsx   | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/Element/Deck/SpotlightMedia.tsx b/packages/app/src/Element/Deck/SpotlightMedia.tsx
index 200d21090..1c748bb22 100644
--- a/packages/app/src/Element/Deck/SpotlightMedia.tsx
+++ b/packages/app/src/Element/Deck/SpotlightMedia.tsx
@@ -1,5 +1,5 @@
 import "./SpotlightMedia.css";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Modal from "Element/Modal";
 import Icon from "Icons/Icon";
 import { ProxyImg } from "Element/ProxyImg";
@@ -17,6 +17,24 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
     return props.images.at(idx % props.images.length);
   }, [idx, props]);
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          dec();
+          break;
+        case "ArrowRight":
+        case "ArrowDown":
+          inc();
+          break;
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
   function dec() {
     setIdx(s => {
       if (s - 1 === -1) {
@@ -36,6 +54,7 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
       }
     });
   }
+
   return (
     <div className="spotlight">
       <ProxyImg src={image} />