keyboard shortcut

tjhorner · Sep 21, 2024 · c3f68ff · c3f68ff
1 parent f249b85
commit c3f68ff
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/packages/frontend/src/lib/components/SequenceViewer.svelte b/packages/frontend/src/lib/components/SequenceViewer.svelte
@@ -38,10 +38,24 @@
     link.click()
   }
 
+  function handleKeyboardShortcuts(
+    event: KeyboardEvent & { currentTarget: EventTarget & Window }
+  ) {
+    if (event.key === "ArrowLeft" && hasPrevious) {
+      dispatch("previous")
+    } else if (event.key === "ArrowRight" && hasNext) {
+      dispatch("next")
+    }
+  }
+
   $: projection = new EquirectProjection({ src: imageUrl })
 </script>
 
-<div bind:this={el} class="sequence-viewer" transition:fly|global={{ duration: 500, y: 500 }}>
+<div
+  bind:this={el}
+  class="sequence-viewer"
+  transition:fly|global={{ duration: 500, y: 500 }}
+>
   <button
     title="Close Image Viewer"
     class="close"
@@ -83,6 +97,8 @@
   />
 </div>
 
+<svelte:window on:keydown={handleKeyboardShortcuts} />
+
 <style>
   .sequence-viewer {
     height: 100%;