pixelfed/resources/assets/components/partials/post/MediaContainer.vue

<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>