b66564a30d
* upstream/develop: (89 commits) remove needless ref show preview popover when hover numbered replies refactor conditions do not make too many nested div add fetchStatus action refactor status loading logic split status preview popover into a separate component uninstall mobile-detect library listen both events minor css fix restrict distance at top side only set different trigger event in desktop and mobile by default fix eslint warnings fix popper go behind the top bar migrate Popper to v-popover fix popper go behind the top bar fix eslint warnings reset font-size to normal text size using rem use top placement by default hide status preview popper when hover popper content ...
102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
import StillImage from '../still-image/still-image.vue'
|
|
import VideoAttachment from '../video_attachment/video_attachment.vue'
|
|
import nsfwImage from '../../assets/nsfw.png'
|
|
import fileTypeService from '../../services/file_type/file_type.service.js'
|
|
|
|
const Attachment = {
|
|
props: [
|
|
'attachment',
|
|
'nsfw',
|
|
'statusId',
|
|
'size',
|
|
'allowPlay',
|
|
'setMedia',
|
|
'naturalSizeLoad'
|
|
],
|
|
data () {
|
|
return {
|
|
nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
|
|
hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
|
|
preloadImage: this.$store.getters.mergedConfig.preloadImage,
|
|
loading: false,
|
|
img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
|
|
modalOpen: false,
|
|
showHidden: false
|
|
}
|
|
},
|
|
components: {
|
|
StillImage,
|
|
VideoAttachment
|
|
},
|
|
computed: {
|
|
usePlaceHolder () {
|
|
return this.size === 'hide' || this.type === 'unknown'
|
|
},
|
|
referrerpolicy () {
|
|
return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
|
|
},
|
|
type () {
|
|
return fileTypeService.fileType(this.attachment.mimetype)
|
|
},
|
|
hidden () {
|
|
return this.nsfw && this.hideNsfwLocal && !this.showHidden
|
|
},
|
|
isEmpty () {
|
|
return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
|
|
},
|
|
isSmall () {
|
|
return this.size === 'small'
|
|
},
|
|
fullwidth () {
|
|
return this.type === 'html' || this.type === 'audio'
|
|
}
|
|
},
|
|
methods: {
|
|
linkClicked ({ target }) {
|
|
if (target.tagName === 'A') {
|
|
window.open(target.href, '_blank')
|
|
}
|
|
},
|
|
openModal (event) {
|
|
const modalTypes = this.$store.getters.mergedConfig.playVideosInModal
|
|
? ['image', 'video']
|
|
: ['image']
|
|
if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
|
|
this.usePlaceHolder
|
|
) {
|
|
event.stopPropagation()
|
|
event.preventDefault()
|
|
this.setMedia()
|
|
this.$store.dispatch('setCurrent', this.attachment)
|
|
}
|
|
},
|
|
toggleHidden (event) {
|
|
if (this.$store.getters.mergedConfig.useOneClickNsfw && !this.showHidden) {
|
|
this.openModal(event)
|
|
return
|
|
}
|
|
if (this.img && !this.preloadImage) {
|
|
if (this.img.onload) {
|
|
this.img.onload()
|
|
} else {
|
|
this.loading = true
|
|
this.img.src = this.attachment.url
|
|
this.img.onload = () => {
|
|
this.loading = false
|
|
this.showHidden = !this.showHidden
|
|
}
|
|
}
|
|
} else {
|
|
this.showHidden = !this.showHidden
|
|
}
|
|
},
|
|
onImageLoad (image) {
|
|
const width = image.naturalWidth
|
|
const height = image.naturalHeight
|
|
this.naturalSizeLoad && this.naturalSizeLoad({ width, height })
|
|
}
|
|
}
|
|
}
|
|
|
|
export default Attachment
|