Still gifs See merge request pleroma/pleroma-fe!193environments/dev/deployments/93
commit
e4b2fdf124
@ -0,0 +1,26 @@
|
||||
const StillImage = {
|
||||
props: [
|
||||
'src',
|
||||
'referrerpolicy',
|
||||
'mimetype'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
stopGifs: this.$store.state.config.stopGifs
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
animated () {
|
||||
return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onLoad () {
|
||||
const canvas = this.$refs.canvas
|
||||
if (!canvas) return
|
||||
canvas.getContext('2d').drawImage(this.$refs.src, 1, 1, canvas.width, canvas.height)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default StillImage
|
@ -0,0 +1,62 @@
|
||||
<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="onLoad"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./still-image.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
.still-image {
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
&.animated {
|
||||
&:hover::before,
|
||||
img {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
visibility: visible
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: 'gif';
|
||||
position: absolute;
|
||||
line-height: 10px;
|
||||
font-size: 10px;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
background: rgba(127,127,127,.5);
|
||||
color: #FFF;
|
||||
display: block;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in new issue