unfinished fetch() version that doesn't work
This commit is contained in:
parent
b10787d23c
commit
3257991f41
5 changed files with 45 additions and 12 deletions
|
@ -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;
|
||||
|
|
|
@ -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}) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue