From 3443c20e169aafa366b02a49622341a359cc8306 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Tue, 3 May 2022 01:53:13 +0900
Subject: [PATCH] refs #3300 Handle shortcut keys in ImageViewer

---
 .../components/TimelineSpace/Modals/ImageViewer.vue  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
index 0c46c194..3df1a0fc 100644
--- a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
+++ b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
@@ -23,6 +23,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
+import { useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/ImageViewer'
 import Media from './ImageViewer/Media.vue'
@@ -35,6 +36,7 @@ export default defineComponent({
   setup() {
     const space = 'TimelineSpace/Modals/ImageViewer'
     const store = useStore()
+    const { left, right, Escape } = useMagicKeys()
 
     const modalOpen = computed(() => store.state.TimelineSpace.Modals.ImageViewer.modalOpen)
     const imageURL = computed(() => store.getters[`${space}/imageURL`])
@@ -42,6 +44,16 @@ export default defineComponent({
     const showLeft = computed(() => store.getters[`${space}/showLeft`])
     const showRight = computed(() => store.getters[`${space}/showRight`])
 
+    whenever(left, () => {
+      decrementIndex()
+    })
+    whenever(right, () => {
+      incrementIndex()
+    })
+    whenever(Escape, () => {
+      close()
+    })
+
     const close = () => {
       store.dispatch(`${space}/${ACTION_TYPES.CLOSE_MODAL}`)
     }