unfinished fetch() version that doesn't work

src/components/attachment/attachment.vue

@@ -127,7 +127,6 @@
               flex: 1;
 
               img {
-                  object-fit: contain;
                   width: 100%;
                   height: 100%; /* If this isn't here, chrome will stretch the images */
                   max-height: 500px;

src/components/status/status.js

@@ -4,6 +4,7 @@ import RetweetButton from '../retweet_button/retweet_button.vue'
 import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
+import StillImage from '../still-image/still-image.vue'
 import { filter, find } from 'lodash'
 
 const Status = {
@@ -76,7 +77,8 @@ const Status = {
     RetweetButton,
     DeleteButton,
     PostStatusForm,
-    UserCardContent
+    UserCardContent,
+    StillImage
   },
   methods: {
     linkClicked ({target}) {

src/components/status/status.vue

@@ -34,7 +34,7 @@
       <div class="media status container">
         <div class="media-left">
           <a :href="status.user.statusnet_profile_url">
-            <img @click.prevent="toggleUserExpanded" :class="{retweeted: retweet}" class='avatar' :src="status.user.profile_image_url_original">
+            <StillImage @click.native.prevent="toggleUserExpanded" :class="{retweeted: retweet}" class='avatar' :src="status.user.profile_image_url_original"/>
             <img v-if="retweet" class='avatar-retweeter' :src="statusoid.user.profile_image_url_original"></img>
           </a>
         </div>
@@ -84,7 +84,7 @@
             </div>
 
             <div class="status-preview base00-background base03-border" v-if="showPreview && preview">
-              <img class="avatar" :src="preview.user.profile_image_url_original">
+              <StillImage class="avatar" :src="preview.user.profile_image_url_original"/>
               <div class="text">
                 <h4>
                   {{ preview.user.name }}
@@ -146,6 +146,7 @@
     box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
     margin-top: 0.5em;
     margin-left: 1em;
+    z-index: 50;
 
     .avatar {
       flex-shrink: 0;
@@ -266,7 +267,6 @@
         margin: 0.2em 0.3em 0 0;
         img {
           float: right;
-          border-radius: 5px;
         }
      }
 
@@ -330,6 +330,17 @@
  .status .avatar {
    width: 48px;
    height: 48px;
+   border-radius: 5px;
+   overflow: hidden;
+
+   img {
+       width: 100%;
+       height: 100%;
+   }
+
+   &.animated::before {
+       display: none;
+   }
 
    &.retweeted {
      width: 40px;
@@ -339,6 +350,15 @@
    }
  }
 
+ .status:hover .animated.avatar {
+     canvas {
+         display: none;
+     }
+     img {
+         visibility: visible;
+     }
+ }
+
  .status img.avatar-retweeter {
    width: 24px;
    height: 24px;

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

@@ -12,16 +12,27 @@ const StillImage = {
     }
   },
   computed: {
-    animated () {
+    animated: {
-      return this.mimetype === 'image/gif'
+      get () {
+        // If mimetype is gif then it is certainly animated, if it's undefined - we don't know YET
+        return this.mimetype === 'image/gif' ? true : this.mimetype == null ? 'maybe' : false
+      },
+      set (val) {
+        this.mimetype = val
+      }
     }
   },
   methods: {
-    drawCanvas() {
+    onLoad () {
       const canvas = this.$refs.canvas
       if (!canvas) return
-      const ctx = canvas.getContext('2d')
+      canvas.getContext('2d').drawImage(this.$refs.src, 1, 1, canvas.width, canvas.height)
-      ctx.drawImage(this.$refs.src, 1, 1, canvas.width, canvas.height)
+      if (this.animated === 'maybe') {
+        fetch(this.src).then((data) => {
+          console.log(data)
+          this.animated = data.type
+        })
+      }
     }
   }
 }

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

@@ -1,7 +1,7 @@
 <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"/>
+    <img ref="src" :src="src" :referrerpolicy="referrerpolicy" v-on:load="onLoad"/>
   </div>
 </template>
 
@@ -31,9 +31,10 @@
             position: absolute;
             top: 5px;
             left: 5px;
-            background: rgba(255,255,255,.5);
+            background: rgba(127,127,127,.7);
             display: block;
             padding: 2px;
+            border-radius: 3px;
             z-index: 2;
         }
     }