Redo everything in the MR

src/components/attachment/attachment.js

@@ -1,4 +1,5 @@
 import StillImage from '../still-image/still-image.vue'
+import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 
@@ -8,6 +9,7 @@ const Attachment = {
     'nsfw',
     'statusId',
     'size',
+    'allowPlay',
     'setMedia'
   ],
   data () {
@@ -16,11 +18,14 @@ const Attachment = {
       hideNsfwLocal: this.$store.state.config.hideNsfw,
       preloadImage: this.$store.state.config.preloadImage,
       loading: false,
-      modalOpen: false
+      img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
+      modalOpen: false,
+      showHidden: false
     }
   },
   components: {
-    StillImage
+    StillImage,
+    VideoAttachment
   },
   computed: {
     usePlaceHolder () {
@@ -33,7 +38,7 @@ const Attachment = {
       return fileTypeService.fileType(this.attachment.mimetype)
     },
     hidden () {
-      return this.nsfw && this.hideNsfwLocal
+      return this.nsfw && this.hideNsfwLocal && !this.showHidden
     },
     isEmpty () {
       return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
@@ -51,14 +56,38 @@ const Attachment = {
         window.open(target.href, '_blank')
       }
     },
-    toggleModal (event) {
-      if (this.type !== 'image' && this.type !== 'video') {
+    openModal (event) {
+      const modalTypes = this.$store.state.config.playVideosInline
+        ? ['image']
+        : ['image', 'video']
+      if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
+        this.usePlaceHolder
+      ) {
+        event.stopPropagation()
+        event.preventDefault()
+        this.setMedia()
+        this.$store.dispatch('setCurrent', this.attachment)
+      }
+    },
+    toggleHidden (event) {
+      if (this.$store.state.config.useOneClickNsfw && !this.showHidden) {
+        this.openModal(event)
         return
       }
-      event.stopPropagation()
-      event.preventDefault()
-      this.setMedia()
-      this.$store.dispatch('setCurrent', this.attachment)
+      if (this.img && !this.preloadImage) {
+        if (this.img.onload) {
+          this.img.onload()
+        } else {
+          this.loading = true
+          this.img.src = this.attachment.url
+          this.img.onload = () => {
+            this.loading = false
+            this.showHidden = !this.showHidden
+          }
+        }
+      } else {
+        this.showHidden = !this.showHidden
+      }
     }
   }
 }