From b10787d23ca645932e89383ebb39402d1eb84700 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 29 Jan 2018 10:47:26 +0300
Subject: first ver

---
 src/components/attachment/attachment.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/attachment/attachment.vue')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index d6a51ffd..2810e205 100644
--- a/src/components/attachment/attachment.vue
+++ b/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>
-- 
cgit v1.2.3-70-g09d2


From 3257991f4196cb6c2c77b3f81ec9f1850e243211 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 3 Feb 2018 19:55:45 +0300
Subject: unfinished fetch() version that doesn't work

---
 src/components/attachment/attachment.vue   |  1 -
 src/components/status/status.js            |  4 +++-
 src/components/status/status.vue           | 26 +++++++++++++++++++++++---
 src/components/still-image/still-image.js  | 21 ++++++++++++++++-----
 src/components/still-image/still-image.vue |  5 +++--
 5 files changed, 45 insertions(+), 12 deletions(-)

(limited to 'src/components/attachment/attachment.vue')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 2810e205..4ee5153b 100644
--- a/src/components/attachment/attachment.vue
+++ b/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;
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 12f3bb25..7397e80c 100644
--- a/src/components/status/status.js
+++ b/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}) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 28272b0b..999adb21 100644
--- a/src/components/status/status.vue
+++ b/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;
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index fa027bc4..e674b932 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -12,16 +12,27 @@ const StillImage = {
     }
   },
   computed: {
-    animated () {
-      return this.mimetype === 'image/gif'
+    animated: {
+      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')
-      ctx.drawImage(this.$refs.src, 1, 1, canvas.width, canvas.height)
+      canvas.getContext('2d').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
+        })
+      }
     }
   }
 }
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index fa086e51..cc426fff 100644
--- a/src/components/still-image/still-image.vue
+++ b/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;
         }
     }
-- 
cgit v1.2.3-70-g09d2


From 55bc1a3414ac15b08554a43c00f7f631ca1d304a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 3 Feb 2018 20:32:13 +0300
Subject: fixed stretched spurdo in notifications, misc fixes, detect gif by
 extension for now

---
 src/components/attachment/attachment.vue        |  6 ++++++
 src/components/notifications/notifications.scss |  4 ++++
 src/components/still-image/still-image.js       | 16 ++--------------
 src/components/still-image/still-image.vue      |  1 +
 4 files changed, 13 insertions(+), 14 deletions(-)

(limited to 'src/components/attachment/attachment.vue')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 4ee5153b..a1b35d91 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -126,7 +126,13 @@
               display: flex;
               flex: 1;
 
+              .still-image {
+                  width: 100%;
+                  height: 100%;
+              }
+
               img {
+                  object-fit: contain;
                   width: 100%;
                   height: 100%; /* If this isn't here, chrome will stretch the images */
                   max-height: 500px;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 241f10b4..4fda255b 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -104,6 +104,10 @@
     max-height: 12em;
     overflow-y: hidden;
     //text-overflow: ellipsis;
+
+    img {
+        object-fit: contain;
+    }
   }
 
   .notification-gradient {
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index e674b932..595652f2 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -12,14 +12,8 @@ const StillImage = {
     }
   },
   computed: {
-    animated: {
-      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
-      }
+    animated () {
+      return this.mimetype === 'image/gif' || this.src.endsWith('.gif')
     }
   },
   methods: {
@@ -27,12 +21,6 @@ const StillImage = {
       const canvas = this.$refs.canvas
       if (!canvas) return
       canvas.getContext('2d').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
-        })
-      }
     }
   }
 }
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index cc426fff..b141cdaf 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -11,6 +11,7 @@
 @import '../../_variables.scss';
 .still-image {
     position: relative;
+    line-height: 0;
     
     &:hover canvas {
         display: none;
-- 
cgit v1.2.3-70-g09d2