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 @@
-
+
{{ 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 @@
-
+
@@ -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;
}
}