diff options
Diffstat (limited to 'src/components/attachment')
| -rw-r--r-- | src/components/attachment/attachment.js | 52 | ||||
| -rw-r--r-- | src/components/attachment/attachment.vue | 102 |
2 files changed, 83 insertions, 71 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 18a03770..d16e5086 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -7,23 +7,25 @@ const Attachment = { 'attachment', 'nsfw', 'statusId', - 'size' + 'size', + 'setMedia' ], data () { return { nsfwImage: this.$store.state.config.nsfwCensorImage || nsfwImage, hideNsfwLocal: this.$store.state.config.hideNsfw, preloadImage: this.$store.state.config.preloadImage, - loopVideo: this.$store.state.config.loopVideo, - showHidden: false, loading: false, - img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img') + modalOpen: false } }, components: { StillImage }, computed: { + usePlaceHolder () { + return this.size === 'hide' || this.type === 'unknown' + }, referrerpolicy () { return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer' }, @@ -31,7 +33,7 @@ const Attachment = { return fileTypeService.fileType(this.attachment.mimetype) }, hidden () { - return this.nsfw && this.hideNsfwLocal && !this.showHidden + return this.nsfw && this.hideNsfwLocal }, isEmpty () { return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown' @@ -40,7 +42,7 @@ const Attachment = { return this.size === 'small' }, fullwidth () { - return fileTypeService.fileType(this.attachment.mimetype) === 'html' + return this.type === 'html' || this.type === 'audio' } }, methods: { @@ -49,38 +51,14 @@ const Attachment = { window.open(target.href, '_blank') } }, - toggleHidden () { - 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 - } - }, - onVideoDataLoad (e) { - if (typeof e.srcElement.webkitAudioDecodedByteCount !== 'undefined') { - // non-zero if video has audio track - if (e.srcElement.webkitAudioDecodedByteCount > 0) { - this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly - } - } else if (typeof e.srcElement.mozHasAudio !== 'undefined') { - // true if video has audio track - if (e.srcElement.mozHasAudio) { - this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly - } - } else if (typeof e.srcElement.audioTracks !== 'undefined') { - if (e.srcElement.audioTracks.length > 0) { - this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly - } + toggleModal (event) { + if (this.type !== 'image' && this.type !== 'video') { + return } + event.stopPropagation() + event.preventDefault() + this.setMedia() + this.$store.dispatch('setCurrent', this.attachment) } } } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index b80300b4..ad5120c0 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,19 +1,35 @@ <template> - <div v-if="size==='hide'"> + <div v-if="usePlaceHolder" @click="toggleModal"> <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, 'small-attachment': isSmall, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}" v-show="!isEmpty"> - <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()"> - <img :key="nsfwImage" :src="nsfwImage"/> + <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}"/> + <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)" class="image-attachment" :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"/> + + <a v-if="type === 'image' && (!hidden || preloadImage)" + class="image-attachment" + :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"/> </a> - <video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" @loadeddata="onVideoDataLoad" :src="attachment.url" controls :loop="loopVideo" playsinline></video> + <a class="video-container" + 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> + </a> <audio v-if="type === 'audio'" :src="attachment.url" controls></audio> @@ -34,18 +50,23 @@ <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: 300px; + max-height: $normalheight; max-width: 100%; } .placeholder { - margin-right: 0.5em; + margin-right: 8px; + margin-bottom: 4px; } .nsfw-placeholder { @@ -56,19 +77,12 @@ } } - .small-attachment { - &.image, &.video { - max-width: 35%; - } - max-height: 100px; - } - .attachment { position: relative; - flex: 1 0 30%; - margin: 0.5em 0.7em 0.6em 0.0em; + margin: 0.5em 0.5em 0em 0em; align-self: flex-start; line-height: 0; + flex-grow: 0; border-style: solid; border-width: 1px; @@ -86,6 +100,30 @@ line-height: 0; } + .video-container { + width: auto; + height: $normalheight; + max-width: $normalwidth; + } + + .video { + width: auto; + object-fit: cover; + } + + .play-icon { + position: absolute; + font-size: 64px; + top: calc(50% - 32px); + left: calc(50% - 32px); + color: rgba(255, 255, 255, 0.75); + text-shadow: 0 0 2px rgba(0, 0, 0, 0.4); + } + + .play-icon::before { + margin: 0; + } + &.html { flex-basis: 90%; width: 100%; @@ -105,12 +143,11 @@ } .small { - max-height: 100px; + max-height: $smallheight; } + video { - max-height: 500px; height: 100%; - width: 100%; z-index: 0; } @@ -120,7 +157,7 @@ img.media-upload { line-height: 0; - max-height: 300px; + max-height: $normalheight; max-width: 100%; } @@ -157,29 +194,26 @@ } .image-attachment { - display: flex; - flex: 1; + flex-grow: 0; &.hidden { display: none; } .still-image { - width: 100%; - height: 100%; } .small { img { - max-height: 100px; + height: $smallheight; } } img { - object-fit: contain; - width: 100%; - height: 100%; /* If this isn't here, chrome will stretch the images */ - max-height: 500px; + object-fit: cover; + height: $normalheight; + width: auto; + max-width: $normalwidth; image-orientation: from-image; } } |