diff options
Diffstat (limited to 'src/components/attachment')
| -rw-r--r-- | src/components/attachment/attachment.js | 47 | ||||
| -rw-r--r-- | src/components/attachment/attachment.vue | 94 |
2 files changed, 94 insertions, 47 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index d16e5086..0ae8f71a 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -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 + } } } } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index ad5120c0..56a49d2d 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -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; } } |