Merge commit '6e3bf5fbf9558dcfcfb12f65890391945e554f7e' into feature-clean

apps/app-frontend/src/pages/project/Gallery.vue

@@ -20,14 +20,14 @@
       </span>
     </Card>
   </div>
-  <div v-if="expandedGalleryItem" class="expanded-image-modal" @click="expandedGalleryItem = null">
+  <div v-if="expandedGalleryItem" class="expanded-image-modal" @click="hideImage">
     <div class="content">
       <img
         class="image"
         :class="{ 'zoomed-in': zoomedIn }"
         :src="
-          expandedGalleryItem.url
-            ? expandedGalleryItem.url
+          expandedGalleryItem.raw_url
+            ? expandedGalleryItem.raw_url
             : 'https://cdn.modrinth.com/placeholder-banner.svg'
         "
         :alt="expandedGalleryItem.title ? expandedGalleryItem.title : 'gallery-image'"
@@ -45,15 +45,15 @@
         </div>
         <div class="controls">
           <div class="buttons">
-            <Button class="close" icon-only @click="expandedGalleryItem = null">
+            <Button class="close" icon-only @click="hideImage">
               <XIcon aria-hidden="true" />
             </Button>
             <a
               class="open btn icon-only"
               target="_blank"
               :href="
-                expandedGalleryItem.url
-                  ? expandedGalleryItem.url
+                expandedGalleryItem.raw_url
+                  ? expandedGalleryItem.raw_url
                   : 'https://cdn.modrinth.com/placeholder-banner.svg'
               "
             >
@@ -102,9 +102,13 @@ const props = defineProps({
   },
 })
 
-let expandedGalleryItem = ref(null)
-let expandedGalleryIndex = ref(0)
-let zoomedIn = ref(false)
+const expandedGalleryItem = ref(null)
+const expandedGalleryIndex = ref(0)
+const zoomedIn = ref(false)
+
+const hideImage = () => {
+  expandedGalleryItem.value = null
+}
 
 const nextImage = () => {
   expandedGalleryIndex.value++
@@ -140,6 +144,20 @@ const expandImage = (item, index) => {
     url: item.url,
   })
 }
+
+function keyListener(e) {
+  if (expandedGalleryItem.value) {
+    e.preventDefault()
+    if (e.key === 'Escape') {
+      hideImage()
+    } else if (e.key === 'ArrowLeft') {
+      previousImage()
+    } else if (e.key === 'ArrowRight') {
+      nextImage()
+    }
+  }
+}
+document.addEventListener('keypress', keyListener)
 </script>
 
 <style scoped lang="scss">