<template> <div v-if="status.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"> Sensitive Content </p> <p class="text-center py-2 content-label-text"> {{ status.spoiler_text ? status.spoiler_text : 'This album may contain sensitive content.'}} </p> <p class="mb-0"> <button @click="toggleContentWarning()" class="btn btn-outline-light btn-block btn-sm font-weight-bold">See Post</button> </p> </div> <blur-hash-image width="32" height="32" :punch="1" :hash="status.media_attachments[0].blurhash" :alt="altText(status)"/> </div> <div v-else class="w-100 h-100 p-0 album-wrapper"> <carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0" :id="'carousel-' + status.id"> <slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="" style="background: #000; display: flex;align-items: center;" :title="img.description"> <img class="img-fluid w-100 p-0" :src="img.url" :alt="altText(img)" loading="lazy" :data-bp="img.url" onerror="this.onerror=null;this.src='/storage/no-preview.png'"> </slide> </carousel> <div class="album-overlay"> <p v-if="!status.sensitive && sensitive" @click="status.sensitive = true" style=" margin-top: 0; padding: 10px; color: #fff; font-size: 10px; text-align: right; position: absolute; top: 0; right: 0; border-top-left-radius: 5px; cursor: pointer; background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)); "> <i class="fas fa-eye-slash fa-lg"></i> </p> <p @click.prevent="toggleLightbox" style=" margin-top: 0; padding: 10px; color: #fff; font-size: 10px; text-align: right; position: absolute; left: 0; top: 0; border-bottom-right-radius: 5px; cursor: pointer; background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)); "> <i class="fas fa-expand fa-lg"></i> </p> <p v-if="status.media_attachments[0].license" style=" margin-bottom: 0; padding: 0 5px; color: #fff; font-size: 10px; text-align: right; position: absolute; bottom: 0; right: 0; border-top-left-radius: 5px; background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)); "> <a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">@{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a> </p> </div> </div> </template> <script type="text/javascript"> import BigPicture from 'bigpicture'; export default { props: ['status'], data() { return { sensitive: this.status.sensitive, cursor: 0 } }, created() { // window.addEventListener("keydown", this.keypressNavigation); }, beforeDestroy() { // window.removeEventListener("keydown", this.keypressNavigation); }, methods: { toggleContentWarning(status) { this.$emit('togglecw'); }, toggleLightbox(e) { BigPicture({ el: e.target, gallery: '#carousel-' + this.status.id, position: this.$refs.carousel.currentPage }) }, altText(img) { let desc = img.description; if(desc) { return desc; } return 'Photo was not tagged with any alt text.'; }, keypressNavigation(e) { let ref = this.$refs.carousel; if (e.keyCode == "37") { e.preventDefault(); let direction = "backward"; ref.advancePage(direction); ref.$emit("navigation-click", direction); } if (e.keyCode == "39") { e.preventDefault(); let direction = "forward"; ref.advancePage(direction); ref.$emit("navigation-click", direction); } } } } </script> <style type="text/css" scoped> .card-img-top { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .content-label-wrapper { position: relative; } .content-label { margin: 0; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 2; background: rgba(0, 0, 0, 0.2) } .album-wrapper { position: relative; } </style>