first ver

src/components/attachment/attachment.js

@@ -1,3 +1,4 @@
+import StillImage from '../still-image/still-image.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 
@@ -16,6 +17,9 @@ const Attachment = {
       img: document.createElement('img')
     }
   },
+  components: {
+    StillImage
+  },
   computed: {
     type () {
       return fileTypeService.fileType(this.attachment.mimetype)

src/components/attachment/attachment.vue

@@ -8,7 +8,7 @@
     </div>
 
     <a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank">
-      <img class="base03-border" referrerpolicy="no-referrer" :src="attachment.large_thumb_url || attachment.url"/>
+      <StillImage class="base03-border" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
     </a>
 
     <video class="base03" v-if="type === 'video' && !hidden" :src="attachment.url" controls loop></video>

src/components/still-image/still-image.js

@@ -0,0 +1,29 @@
+import fileTypeService from '../../services/file_type/file_type.service.js'
+
+const StillImage = {
+  props: [
+    'src',
+    'referrerpolicy',
+    'mimetype'
+  ],
+  data () {
+    return {
+      hideNsfwLocal: this.$store.state.config.hideNsfw,
+    }
+  },
+  computed: {
+    animated () {
+      return this.mimetype === 'image/gif'
+    }
+  },
+  methods: {
+    drawCanvas() {
+      const canvas = this.$refs.canvas
+      if (!canvas) return
+      const ctx = canvas.getContext('2d')
+      ctx.drawImage(this.$refs.src, 1, 1, canvas.width, canvas.height)
+    }
+  }
+}
+
+export default StillImage

src/components/still-image/still-image.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class='still-image' :class='{ animated: animated }' >
+    <canvas ref="canvas" v-if="animated"></canvas>
+    <img ref="src" :src="src" :referrerpolicy="referrerpolicy" v-on:load="drawCanvas"/>
+  </div>
+</template>
+
+<script src="./still-image.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+.still-image {
+    position: relative;
+    
+    &:hover canvas {
+        display: none;
+    }
+    
+    &.animated {
+        &:hover::before,
+        img {
+            visibility: hidden
+        }
+        
+        &:hover img {
+            visibility: visible
+        }
+
+        &::before {
+            content: 'gif';
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            background: rgba(255,255,255,.5);
+            display: block;
+            padding: 2px;
+            z-index: 2;
+        }
+    }
+
+    canvas {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>