feat: automatically jump to the next photo when deleting while previewing (filebrowser#1143)

Author: chief8192

frontend/src/components/files/Preview.vue

@@ -133,16 +133,29 @@ export default {
     }
   },
   async mounted () {
-    window.addEventListener('keyup', this.key)
+    window.addEventListener('keydown', this.key)
     this.$store.commit('setPreviewMode', true)
     this.listing = this.oldReq.items
+    this.$root.$on('preview-deleted', this.deleted)
     this.updatePreview()
   },
   beforeDestroy () {
-    window.removeEventListener('keyup', this.key)
+    window.removeEventListener('keydown', this.key)
     this.$store.commit('setPreviewMode', false)
+    this.$root.$off('preview-deleted', this.deleted)
   },
   methods: {
+    deleted () {
+      this.listing = this.listing.filter(item => item.name !== this.name)
+
+      if (this.hasNext) {
+        this.next()
+      } else if (!this.hasPrevious && !this.hasNext) {
+        this.back()
+      } else {
+        this.prev()
+      }
+    },
     back () {
       this.$store.commit('setPreviewMode', false)
       let uri = url.removeLastDir(this.$route.path) + '/'
@@ -155,7 +168,6 @@ export default {
       this.$router.push({ path: this.nextLink })
     },
     key (event) {
-      event.preventDefault()
 
       if (this.show !== null) {
         return

frontend/src/components/prompts/Delete.vue

@@ -20,7 +20,6 @@
 <script>
 import {mapGetters, mapMutations, mapState} from 'vuex'
 import { files as api } from '@/api'
-import url from '@/utils/url'
 import buttons from '@/utils/buttons'
 
 export default {
@@ -32,17 +31,20 @@ export default {
   methods: {
     ...mapMutations(['closeHovers']),
     submit: async function () {
-      this.closeHovers()
       buttons.loading('delete')
 
       try {
         if (!this.isListing) {
           await api.remove(this.$route.path)
           buttons.success('delete')
-          this.$router.push({ path: url.removeLastDir(this.$route.path) + '/' })
+
+          this.$root.$emit('preview-deleted')
+          this.closeHovers()
           return
         }
 
+        this.closeHovers()
+
         if (this.selectedCount === 0) {
           return
         }