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