parent
cd3bf461db
commit
b10787d23c
@ -0,0 +1,29 @@
|
|||||||
|
import fileTypeService from '../../services/file_type/file_type.service.js'
|
||||||
|
|
||||||
|
const StillImage = {
|
||||||
|
props: [
|
||||||
|
'src',
|
||||||
|
'referrerpolicy',
|
||||||
|
'mimetype'
|
||||||
|
],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
hideNsfwLocal: this.$store.state.config.hideNsfw,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
animated () {
|
||||||
|
return this.mimetype === 'image/gif'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
drawCanvas() {
|
||||||
|
const canvas = this.$refs.canvas
|
||||||
|
if (!canvas) return
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
ctx.drawImage(this.$refs.src, 1, 1, canvas.width, canvas.height)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StillImage
|
@ -0,0 +1,51 @@
|
|||||||
|
<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"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./still-image.js"></script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../_variables.scss';
|
||||||
|
.still-image {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover canvas {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.animated {
|
||||||
|
&:hover::before,
|
||||||
|
img {
|
||||||
|
visibility: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover img {
|
||||||
|
visibility: visible
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: 'gif';
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 5px;
|
||||||
|
background: rgba(255,255,255,.5);
|
||||||
|
display: block;
|
||||||
|
padding: 2px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue