<template> <div class="feed-media-container bg-black"> <div class="text-muted" style="max-height: 400px;"> <div> <div v-if="post.pf_type === 'photo'"> <div v-if="post.sensitive == true" class="content-label-wrapper"> <div class="text-light content-label"> <p class="text-center"> <i class="far fa-eye-slash fa-2x"></i> </p> <p class="h4 font-weight-bold text-center"> {{ $t('common.sensitiveContent') }} </p> <p class="text-center py-2 content-label-text"> {{ post.spoiler_text ? post.spoiler_text : $t('common.sensitiveContentWarning') }} </p> <p class="mb-0"> <button class="btn btn-outline-light btn-block btn-sm font-weight-bold" @click="toggleContentWarning()">See Post</button> </p> </div> <blur-hash-image width="32" height="32" :punch="1" class="blurhash-wrapper" :hash="post.media_attachments[0].blurhash" /> </div> <div v-else class="content-label-wrapper"> <blur-hash-image :key="key" width="32" height="32" :punch="1" :hash="post.media_attachments[0].blurhash" :src="post.media_attachments[0].url" class="blurhash-wrapper" /> <p v-if="!post.sensitive && sensitive" @click="post.sensitive = true" style=" margin-top: 0; padding: 10px; color: #000; font-size: 10px; text-align: right; position: absolute; top: 0; right: 0; border-radius: 11px; cursor: pointer; background: rgba(255, 255, 255,.5); "> <i class="fas fa-eye-slash fa-lg"></i> </p> </div> </div> <!-- <div v-else-if="post.pf_type === 'photo:album'"> <img :src="media[mediaIndex].url" style="width: 100%;height: 500px;object-fit: contain;"> <div class="d-flex mt-3 justify-content-center"> <div v-for="(thumb, index) in media" class="mr-2 border rounded p-1" :class="[ index === mediaIndex ? 'border-light' : 'border-dark' ]" @click="mediaIndex = index"> <img :src="thumb.preview_url" width="60" height="40" style="object-fit:cover;"> </div> </div> </div> --> <!-- <photo-album-presenter :status="post" v-on:togglecw="post.sensitive = false"/> --> <!-- <video-presenter v-else-if="post.pf_type === 'video'" :status="post" v-on:togglecw="post.sensitive = false" /> --> </div> </div> </div> </template> <script type="text/javascript"> export default { props: { post: { type: Object }, profile: { type: Object }, user: { type: Object }, media: { type: Array }, showArrows: { type: Boolean, default: true } }, data() { return { loading: false, shortcuts: undefined, sensitive: false, mediaIndex: 0 } }, mounted() { this.initShortcuts(); }, beforeDestroy() { document.removeEventListener('keyup', this.shortcuts); }, methods: { navPrev() { // event.currentTarget.blur(); if(this.mediaIndex == 0) { this.loading = true; axios.get('/api/v1/accounts/' + this.profile.id + '/statuses', { params: { limit: 1, max_id: this.post.id } }).then(res => { if(!res.data.length) { this.mediaIndex = this.media.length - 1; this.loading = false; return; } this.$emit('navigate', res.data[0]); this.mediaIndex = 0; // this.post = res.data[0]; // this.media = this.post.media_attachments; // this.fetchState(this.post.account.username, this.post.id); // this.loading = false; let url = window.location.origin + `/@${this.post.account.username}/post/${this.post.id}`; history.pushState(null, null, url); }).catch(err => { this.mediaIndex = this.media.length - 1; this.loading = false; }); return; } this.mediaIndex--; }, navNext() { // event.currentTarget.blur(); if(this.mediaIndex == this.media.length - 1) { this.loading = true; axios.get('/api/v1/accounts/' + this.profile.id + '/statuses', { params: { limit: 1, min_id: this.post.id } }).then(res => { if(!res.data.length) { this.mediaIndex = 0; this.loading = false; return; } this.$emit('navigate', res.data[0]); this.mediaIndex = 0; // this.post = res.data[0]; // this.media = this.post.media_attachments; // this.fetchState(this.post.account.username, this.post.id); // this.loading = false; let url = window.location.origin + `/@${this.post.account.username}/post/${this.post.id}`; history.pushState(null, null, url); }).catch(err => { this.mediaIndex = 0; this.loading = false; }); return; } this.mediaIndex++; }, initShortcuts() { this.shortcuts = document.addEventListener('keyup', event => { if (event.key === 'ArrowLeft') { this.navPrev(); } if (event.key === 'ArrowRight') { this.navNext(); } }); }, } } </script> <style lang="scss"> .feed-media-container { .blurhash-wrapper { img { border-radius:15px; max-height: 400px; object-fit: contain; background-color: #000; } canvas { border-radius: 15px; max-height: 400px; } } .content-label-wrapper { position: relative; } .content-label { margin: 0; position: absolute; top:0; left:0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 400px; z-index: 2; border-radius: 15px; background: rgba(0, 0, 0, 0.2) } } </style>