Redo everything in the MR
This commit is contained in:
shpuld
parent
8761e039d0
commit
3978aaef84
19 changed files with 563 additions and 92 deletions
|
|
@ -1,4 +1,5 @@
|
|||
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'
|
||||
|
||||
|
|
@ -8,6 +9,7 @@ const Attachment = {
|
|||
'nsfw',
|
||||
'statusId',
|
||||
'size',
|
||||
'allowPlay',
|
||||
'setMedia'
|
||||
],
|
||||
data () {
|
||||
|
|
@ -16,11 +18,14 @@ const Attachment = {
|
|||
hideNsfwLocal: this.$store.state.config.hideNsfw,
|
||||
preloadImage: this.$store.state.config.preloadImage,
|
||||
loading: false,
|
||||
modalOpen: false
|
||||
img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
|
||||
modalOpen: false,
|
||||
showHidden: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
StillImage
|
||||
StillImage,
|
||||
VideoAttachment
|
||||
},
|
||||
computed: {
|
||||
usePlaceHolder () {
|
||||
|
|
@ -33,7 +38,7 @@ const Attachment = {
|
|||
return fileTypeService.fileType(this.attachment.mimetype)
|
||||
},
|
||||
hidden () {
|
||||
return this.nsfw && this.hideNsfwLocal
|
||||
return this.nsfw && this.hideNsfwLocal && !this.showHidden
|
||||
},
|
||||
isEmpty () {
|
||||
return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
|
||||
|
|
@ -51,14 +56,38 @@ const Attachment = {
|
|||
window.open(target.href, '_blank')
|
||||
}
|
||||
},
|
||||
toggleModal (event) {
|
||||
if (this.type !== 'image' && this.type !== 'video') {
|
||||
openModal (event) {
|
||||
const modalTypes = this.$store.state.config.playVideosInline
|
||||
? ['image']
|
||||
: ['image', 'video']
|
||||
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.state.config.useOneClickNsfw && !this.showHidden) {
|
||||
this.openModal(event)
|
||||
return
|
||||
}
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
this.setMedia()
|
||||
this.$store.dispatch('setCurrent', this.attachment)
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,43 @@
|
|||
<template>
|
||||
<div v-if="usePlaceHolder" @click="toggleModal">
|
||||
<a class="placeholder" v-if="type !== 'html'" target="_blank" :href="attachment.url">[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]</a>
|
||||
<div v-if="usePlaceHolder" @click="openModal">
|
||||
<a class="placeholder"
|
||||
v-if="type !== 'html'"
|
||||
target="_blank" :href="attachment.url"
|
||||
>
|
||||
[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
v-else class="attachment"
|
||||
:class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
|
||||
v-show="!isEmpty"
|
||||
@click="toggleModal"
|
||||
>
|
||||
<a class="image-attachment" v-if="hidden" :href="attachment.url">
|
||||
<img :key="nsfwImage" :src="nsfwImage" :class="{'small': isSmall}"/>
|
||||
<a class="image-attachment" v-if="hidden" :href="attachment.url" @click.prevent="toggleHidden">
|
||||
<img class="nsfw" :key="nsfwImage" :src="nsfwImage" :class="{'small': isSmall}"/>
|
||||
<i v-if="type === 'video'" class="play-icon icon-play-circled"></i>
|
||||
</a>
|
||||
<div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
|
||||
<a href="#" @click.prevent="toggleHidden">Hide</a>
|
||||
</div>
|
||||
|
||||
<a v-if="type === 'image' && (!hidden || preloadImage)"
|
||||
@click="openModal"
|
||||
class="image-attachment"
|
||||
:class="{'hidden': hidden && preloadImage}"
|
||||
:class="{'hidden': hidden && preloadImage }"
|
||||
:href="attachment.url" target="_blank"
|
||||
:title="attachment.description"
|
||||
>
|
||||
<StillImage :class="{'small': isSmall}" referrerpolicy="referrerPolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
|
||||
<StillImage referrerpolicy="referrerPolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
|
||||
</a>
|
||||
|
||||
<a class="video-container"
|
||||
@click="openModal"
|
||||
v-if="type === 'video' && !hidden"
|
||||
:class="{'small': isSmall}"
|
||||
:href="attachment.url"
|
||||
>
|
||||
<video class="video" :src="attachment.url"></video>
|
||||
<i class="play-icon icon-play-circled"></i>
|
||||
<VideoAttachment class="video" :attachment="attachment" :controls="allowPlay" />
|
||||
<i v-if="!allowPlay" class="play-icon icon-play-circled"></i>
|
||||
</a>
|
||||
|
||||
<audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
|
||||
|
|
@ -50,18 +59,18 @@
|
|||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
$normalheight: 140px;
|
||||
$normalwidth: 180px;
|
||||
$smallheight: 80px;
|
||||
|
||||
.attachments {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.attachment.media-upload-container {
|
||||
flex: 0 0 auto;
|
||||
max-height: $normalheight;
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
video {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
|
|
@ -82,7 +91,6 @@ $smallheight: 80px;
|
|||
margin: 0.5em 0.5em 0em 0em;
|
||||
align-self: flex-start;
|
||||
line-height: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
|
@ -92,6 +100,28 @@ $smallheight: 80px;
|
|||
border-color: var(--border, $fallback--border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.non-gallery.attachment {
|
||||
&.video {
|
||||
flex: 1 0 40%;
|
||||
}
|
||||
.nsfw {
|
||||
height: 260px;
|
||||
}
|
||||
.small {
|
||||
height: 120px;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.video {
|
||||
height: 260px;
|
||||
display: flex;
|
||||
}
|
||||
video {
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
|
@ -101,14 +131,12 @@ $smallheight: 80px;
|
|||
}
|
||||
|
||||
.video-container {
|
||||
width: auto;
|
||||
height: $normalheight;
|
||||
max-width: $normalwidth;
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: auto;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
|
|
@ -132,6 +160,7 @@ $smallheight: 80px;
|
|||
|
||||
.hider {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
background: rgba(230,230,230,0.6);
|
||||
|
|
@ -142,12 +171,7 @@ $smallheight: 80px;
|
|||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
}
|
||||
|
||||
.small {
|
||||
max-height: $smallheight;
|
||||
}
|
||||
|
||||
video {
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
|
@ -157,7 +181,7 @@ $smallheight: 80px;
|
|||
|
||||
img.media-upload {
|
||||
line-height: 0;
|
||||
max-height: $normalheight;
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -194,26 +218,20 @@ $smallheight: 80px;
|
|||
}
|
||||
|
||||
.image-attachment {
|
||||
flex-grow: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.still-image {
|
||||
}
|
||||
|
||||
.small {
|
||||
img {
|
||||
height: $smallheight;
|
||||
}
|
||||
.nsfw {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
height: $normalheight;
|
||||
width: auto;
|
||||
max-width: $normalwidth;
|
||||
image-orientation: from-image;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue