unfinished fetch() version that doesn't work

This commit is contained in:
Henry Jameson 2018-02-03 19:55:45 +03:00
parent b10787d23c
commit 3257991f41
5 changed files with 45 additions and 12 deletions

View file

@ -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;

View file

@ -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}) {

View file

@ -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;

View file

@ -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
})
}
}
}
}

View file

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