pixelfed/resources/assets/components/partials/profile/ProfileFeed.vue

<template>
	<div class="profile-feed-component">
		<div class="profile-feed-component-nav d-flex justify-content-center justify-content-md-between align-items-center mb-4">
			<div class="d-none d-md-block border-bottom flex-grow-1 profile-nav-btns">
				<div class="btn-group">
					<button
						class="btn btn-link"
						:class="[ tabIndex === 1 ? 'active' : '' ]"
						@click="toggleTab(1)"
						>
						Posts
					</button>
					<!-- <button
						class="btn btn-link"
						:class="[ tabIndex === 3 ? 'text-dark font-weight-bold' : 'text-lighter' ]"
						@click="toggleTab(3)">
						Albums
					</button> -->

					<button
						v-if="isOwner"
						class="btn btn-link"
						:class="[ tabIndex === 'archives' ? 'active' : '' ]"
						@click="toggleTab('archives')">
						Archives
					</button>

					<button
						v-if="isOwner"
						class="btn btn-link"
						:class="[ tabIndex === 'bookmarks' ? 'active' : '' ]"
						@click="toggleTab('bookmarks')">
						Bookmarks
					</button>

					<button
						v-if="canViewCollections"
						class="btn btn-link"
						:class="[ tabIndex === 2 ? 'active' : '' ]"
						@click="toggleTab(2)">
						Collections
					</button>

					<button
						v-if="isOwner"
						class="btn btn-link"
						:class="[ tabIndex === 3 ? 'active' : '' ]"
						@click="toggleTab(3)">
						Likes
					</button>
				</div>
			</div>

			<div v-if="tabIndex === 1" class="btn-group layout-sort-toggle">
				<button
					class="btn btn-sm"
					:class="[ layoutIndex === 0 ? 'btn-dark' : 'btn-light' ]"
					@click="toggleLayout(0, true)">
					<i class="far fa-th fa-lg"></i>
				</button>

				<button
					class="btn btn-sm"
					:class="[ layoutIndex === 1 ? 'btn-dark' : 'btn-light' ]"
					@click="toggleLayout(1, true)">
					<i class="fas fa-th-large fa-lg"></i>
				</button>

				<button
					class="btn btn-sm"
					:class="[ layoutIndex === 2 ? 'btn-dark' : 'btn-light' ]"
					@click="toggleLayout(2, true)">
					<i class="far fa-bars fa-lg"></i>
				</button>
			</div>
		</div>

		<div v-if="tabIndex == 0" class="d-flex justify-content-center mt-5">
			<b-spinner />
		</div>

		<div v-else-if="tabIndex == 1" class="px-0 mx-0">
			<div v-if="layoutIndex === 0" class="row">
				<div class="col-4 p-1" v-for="(s, index) in feed" :key="'tlob:'+index+s.id">
					<a v-if="s.hasOwnProperty('pf_type') && s.pf_type == 'video'" class="card info-overlay card-md-border-0" :href="statusUrl(s)">
						<div class="square">
							<div v-if="s.sensitive" class="square-content">
								<div class="info-overlay-text-label">
									<h5 class="text-white m-auto font-weight-bold">
										<span>
											<span class="far fa-eye-slash fa-lg p-2 d-flex-inline"></span>
										</span>
									</h5>
								</div>
								<blur-hash-canvas
									width="32"
									height="32"
									:hash="s.media_attachments[0].blurhash">
								</blur-hash-canvas>
							</div>
							<div v-else class="square-content">
								<blur-hash-image
									width="32"
									height="32"
									:hash="s.media_attachments[0].blurhash"
									:src="s.media_attachments[0].preview_url">
								</blur-hash-image>
							</div>
							<div class="info-overlay-text">
								<div class="text-white m-auto">
									<p class="info-overlay-text-field font-weight-bold">
										<span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
										<span class="d-flex-inline">{{formatCount(s.favourites_count)}}</span>
									</p>

									<p class="info-overlay-text-field font-weight-bold">
										<span class="far fa-comment fa-lg p-2 d-flex-inline"></span>
										<span class="d-flex-inline">{{formatCount(s.reply_count)}}</span>
									</p>

									<p class="mb-0 info-overlay-text-field font-weight-bold">
										<span class="far fa-sync fa-lg p-2 d-flex-inline"></span>
										<span class="d-flex-inline">{{formatCount(s.reblogs_count)}}</span>
									</p>
								</div>
							</div>
						</div>

						<span class="badge badge-light video-overlay-badge">
							<i class="far fa-video fa-2x"></i>
						</span>

						<span class="badge badge-light timestamp-overlay-badge">
							{{ timeago(s.created_at) }}
						</span>
					</a>
					<a v-else class="card info-overlay card-md-border-0" :href="statusUrl(s)">
						<div class="square">
							<div v-if="s.sensitive" class="square-content">
								<div class="info-overlay-text-label">
									<h5 class="text-white m-auto font-weight-bold">
										<span>
											<span class="far fa-eye-slash fa-lg p-2 d-flex-inline"></span>
										</span>
									</h5>
								</div>
								<blur-hash-canvas
									width="32"
									height="32"
									:hash="s.media_attachments[0].blurhash">
								</blur-hash-canvas>
							</div>
							<div v-else class="square-content">
								<blur-hash-image
									width="32"
									height="32"
									:hash="s.media_attachments[0].blurhash"
									:src="s.media_attachments[0].url">
								</blur-hash-image>
							</div>
							<div class="info-overlay-text">
								<div class="text-white m-auto">
									<p class="info-overlay-text-field font-weight-bold">
										<span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
										<span class="d-flex-inline">{{formatCount(s.favourites_count)}}</span>
									</p>

									<p class="info-overlay-text-field font-weight-bold">
										<span class="far fa-comment fa-lg p-2 d-flex-inline"></span>
										<span class="d-flex-inline">{{formatCount(s.reply_count)}}</span>
									</p>

									<p class="mb-0 info-overlay-text-field font-weight-bold">
										<span class="far fa-sync fa-lg p-2 d-flex-inline"></span>
										<span class="d-flex-inline">{{formatCount(s.reblogs_count)}}</span>
									</p>
								</div>
							</div>
						</div>

						<span class="badge badge-light timestamp-overlay-badge">
							{{ timeago(s.created_at) }}
						</span>
					</a>
				</div>

				<intersect v-if="canLoadMore" @enter="enterIntersect">
					<div class="col-4 ph-wrapper">
						<div class="ph-item">
						   <div class="ph-picture big"></div>
					   </div>
				   </div>
			   </intersect>
			</div>

			<div v-else-if="layoutIndex === 1" class="row">
				<masonry
					:cols="{default: 3, 800: 2}"
					:gutter="{default: '5px'}">

					<div class="p-1" v-for="(s, index) in feed" :key="'tlog:'+index+s.id">
						<a v-if="s.hasOwnProperty('pf_type') && s.pf_type == 'video'" class="card info-overlay card-md-border-0" :href="statusUrl(s)">
							<div class="square">
								<div class="square-content">
									<blur-hash-image
										width="32"
										height="32"
										class="rounded"
										:hash="s.media_attachments[0].blurhash"
										:src="s.media_attachments[0].preview_url">
									</blur-hash-image>
								</div>
							</div>

							<span class="badge badge-light video-overlay-badge">
								<i class="far fa-video fa-2x"></i>
							</span>

							<span class="badge badge-light timestamp-overlay-badge">
								{{ timeago(s.created_at) }}
							</span>
						</a>

						<a v-else-if="s.sensitive" class="card info-overlay card-md-border-0" :href="statusUrl(s)">
							<div class="square">
								<div class="square-content">
									<div class="info-overlay-text-label rounded">
										<h5 class="text-white m-auto font-weight-bold">
											<span>
												<span class="far fa-eye-slash fa-lg p-2 d-flex-inline"></span>
											</span>
										</h5>
									</div>
									<blur-hash-canvas
										width="32"
										height="32"
										class="rounded"
										:hash="s.media_attachments[0].blurhash">
									</blur-hash-canvas>
								</div>
							</div>
						</a>

						<a v-else class="card info-overlay card-md-border-0" :href="statusUrl(s)">
							<img :src="previewUrl(s)" class="img-fluid w-100 rounded-lg" onerror="this.onerror=null;this.src='/storage/no-preview.png?v=0'">
							<span class="badge badge-light timestamp-overlay-badge">
								{{ timeago(s.created_at) }}
							</span>
						</a>
					</div>

					<intersect v-if="canLoadMore" @enter="enterIntersect">
						<div class="p-1 ph-wrapper">
							<div class="ph-item">
								<div class="ph-picture big"></div>
							</div>
						</div>
					</intersect>
				</masonry>
			</div>

			<div v-else-if="layoutIndex === 2" class="row justify-content-center">
				<div class="col-12 col-md-10">
					<status-card
						v-for="(s, index) in feed"
						:key="'prs'+s.id+':'+index"
						:profile="user"
						:status="s"
						v-on:like="likeStatus(index)"
						v-on:unlike="unlikeStatus(index)"
						v-on:share="shareStatus(index)"
						v-on:unshare="unshareStatus(index)"
						v-on:menu="openContextMenu(index)"
						v-on:counter-change="counterChange(index, $event)"
						v-on:likes-modal="openLikesModal(index)"
						v-on:shares-modal="openSharesModal(index)"
						v-on:comment-likes-modal="openCommentLikesModal"
						v-on:handle-report="handleReport" />
				</div>

				<intersect v-if="canLoadMore" @enter="enterIntersect">
					<div class="col-12 col-md-10">
						<status-placeholder style="margin-bottom: 10rem;" />
					 </div>
				</intersect>
			</div>

			<div v-if="feedLoaded && !feed.length">
				<div class="row justify-content-center">
					<div class="col-12 col-md-8 text-center">
						<img src="/img/illustrations/dk-nature-man-monochrome.svg" class="img-fluid" style="opacity: 0.6;">
						<p class="lead text-muted font-weight-bold">{{ $t('profile.emptyPosts') }}</p>
					</div>
				</div>
			</div>
		</div>

		<div v-else-if="tabIndex === 'private'" class="row justify-content-center">
			<div class="col-12 col-md-8 text-center">
				<img src="/img/illustrations/dk-secure-feed.svg" class="img-fluid" style="opacity: 0.6;">
				<p class="h3 text-dark font-weight-bold mt-3 py-3">This profile is private</p>
				<div class="lead text-muted px-3">
					Only approved followers can see <span class="font-weight-bold text-dark text-break">&commat;{{ profile.acct }}</span>'s <br />
					posts. To request access, click <span class="font-weight-bold">Follow</span>.
				</div>
			</div>
		</div>

		<div v-else-if="tabIndex == 2" class="row justify-content-center">
			<div class="col-12 col-md-8">
				<div class="list-group">
					<a
						v-for="(collection, index) in collections"
						class="list-group-item text-decoration-none text-dark"
						:href="collection.url">
						<div class="media">
							<img :src="collection.thumb" width="65" height="65" style="object-fit: cover;" class="rounded-lg border mr-3" onerror="this.onerror=null;this.src='/storage/no-preview.png';">
							<div class="media-body text-left">
								<p class="lead mb-0">{{ collection.title ? collection.title : 'Untitled' }}</p>
								<p class="small text-muted mb-1">{{ collection.description || 'No description available' }}</p>
								<p class="small text-lighter mb-0 font-weight-bold">
									<span>{{ collection.post_count }} posts</span>
									<span>&middot;</span>
									<span v-if="collection.visibility === 'public'" class="text-dark">Public</span>
									<span v-else-if="collection.visibility === 'private'" class="text-dark"><i class="far fa-lock fa-sm"></i> Followers Only</span>
									<span v-else-if="collection.visibility === 'draft'" class="primary"><i class="far fa-lock fa-sm"></i> Draft</span>
									<span>&middot;</span>
									<span v-if="collection.published_at">Created {{ timeago(collection.published_at) }} ago</span>
									<span v-else class="text-warning">UNPUBLISHED</span>
								</p>
							</div>
						</div>
					</a>
				</div>
			</div>

			<div v-if="collectionsLoaded && !collections.length" class="col-12 col-md-8 text-center">
				<img src="/img/illustrations/dk-nature-man-monochrome.svg" class="img-fluid" style="opacity: 0.6;">
				<p class="lead text-muted font-weight-bold">{{ $t('profile.emptyCollections') }}</p>
			</div>

			<div v-if="canLoadMoreCollections" class="col-12 col-md-8">
				<intersect @enter="enterCollectionsIntersect">
					<div class="d-flex justify-content-center mt-5">
						<b-spinner small />
					</div>
				</intersect>
			</div>
		</div>

		<div v-else-if="tabIndex == 3" class="px-0 mx-0">
			<div class="row justify-content-center">
				<div class="col-12 col-md-10">
					<status-card
						v-for="(s, index) in favourites"
						:key="'prs'+s.id+':'+index"
						:profile="user"
						:status="s"
						v-on:like="likeStatus(index)"
						v-on:unlike="unlikeStatus(index)"
						v-on:share="shareStatus(index)"
						v-on:unshare="unshareStatus(index)"
						v-on:counter-change="counterChange(index, $event)"
						v-on:likes-modal="openLikesModal(index)"
						v-on:comment-likes-modal="openCommentLikesModal"
						v-on:handle-report="handleReport" />
				</div>

				<div v-if="canLoadMoreFavourites" class="col-12 col-md-10">
					<intersect @enter="enterFavouritesIntersect">
						<status-placeholder style="margin-bottom: 10rem;" />
					</intersect>
				</div>
			</div>

			<div v-if="!favourites || !favourites.length" class="row justify-content-center">
				<div class="col-12 col-md-8 text-center">
					<img src="/img/illustrations/dk-nature-man-monochrome.svg" class="img-fluid" style="opacity: 0.6;">
					<p class="lead text-muted font-weight-bold">We can't seem to find any posts you have liked</p>
				</div>
			</div>
		</div>

		<div v-else-if="tabIndex == 'bookmarks'" class="px-0 mx-0">
			<div class="row justify-content-center">
				<div class="col-12 col-md-10">
					<status-card
						v-for="(s, index) in bookmarks"
						:key="'prs'+s.id+':'+index"
						:profile="user"
						:new-reactions="true"
						:status="s"
						v-on:menu="openContextMenu(index)"
						v-on:counter-change="counterChange(index, $event)"
						v-on:likes-modal="openLikesModal(index)"
						v-on:bookmark="handleBookmark(index)"
						v-on:comment-likes-modal="openCommentLikesModal"
						v-on:handle-report="handleReport" />
				</div>

				<div class="col-12 col-md-10">
					<intersect v-if="canLoadMoreBookmarks" @enter="enterBookmarksIntersect">
						<status-placeholder style="margin-bottom: 10rem;" />
					</intersect>
				</div>
			</div>

			<div v-if="!bookmarks || !bookmarks.length" class="row justify-content-center">
				<div class="col-12 col-md-8 text-center">
					<img src="/img/illustrations/dk-nature-man-monochrome.svg" class="img-fluid" style="opacity: 0.6;">
					<p class="lead text-muted font-weight-bold">We can't seem to find any posts you have bookmarked</p>
				</div>
			</div>
		</div>

		<div v-else-if="tabIndex == 'archives'" class="px-0 mx-0">
			<div class="row justify-content-center">
				<div class="col-12 col-md-10">
					<status-card
						v-for="(s, index) in archives"
						:key="'prarc'+s.id+':'+index"
						:profile="user"
						:new-reactions="true"
						:reaction-bar="false"
						:status="s"
						v-on:menu="openContextMenu(index, 'archive')"
						/>
				</div>

				<div v-if="canLoadMoreArchives" class="col-12 col-md-10">
					<intersect @enter="enterArchivesIntersect">
						<status-placeholder style="margin-bottom: 10rem;" />
					</intersect>
				</div>
			</div>

			<div v-if="!archives || !archives.length" class="row justify-content-center">
				<div class="col-12 col-md-8 text-center">
					<img src="/img/illustrations/dk-nature-man-monochrome.svg" class="img-fluid" style="opacity: 0.6;">
					<p class="lead text-muted font-weight-bold">We can't seem to find any posts you have bookmarked</p>
				</div>
			</div>
		</div>

		<context-menu
			v-if="showMenu"
			ref="contextMenu"
			:status="contextMenuPost"
			:profile="user"
			v-on:moderate="commitModeration"
			v-on:delete="deletePost"
			v-on:archived="handleArchived"
			v-on:unarchived="handleUnarchived"
			v-on:report-modal="handleReport"
		/>

		<likes-modal
			v-if="showLikesModal"
			ref="likesModal"
			:status="likesModalPost"
			:profile="user"
		/>

		<shares-modal
			v-if="showSharesModal"
			ref="sharesModal"
			:status="sharesModalPost"
			:profile="profile"
		/>

		<report-modal
			ref="reportModal"
			:key="reportedStatusId"
			:status="reportedStatus"
		/>
	</div>
</template>

<script type="text/javascript">
	import Intersect from 'vue-intersect'
	import StatusCard from './../TimelineStatus.vue';
	import StatusPlaceholder from './../StatusPlaceholder.vue';
	import BlurHashCanvas from './../BlurhashCanvas.vue';
	import ContextMenu from './../../partials/post/ContextMenu.vue';
	import LikesModal from './../../partials/post/LikeModal.vue';
	import SharesModal from './../../partials/post/ShareModal.vue';
	import ReportModal from './../../partials/modal/ReportPost.vue';
	import { parseLinkHeader } from '@web3-storage/parse-link-header';

	export default {
		props: {
			profile: {
				type: Object
			},

			relationship: {
				type: Object
			}
		},

		components: {
			"intersect": Intersect,
			"status-card": StatusCard,
			"bh-canvas": BlurHashCanvas,
			"status-placeholder": StatusPlaceholder,
			"context-menu": ContextMenu,
			"likes-modal": LikesModal,
			"shares-modal": SharesModal,
			"report-modal": ReportModal
		},

		data() {
			return {
				isLoaded: false,
				user: {},
				isOwner: false,
				layoutIndex: 0,
				tabIndex: 0,
				ids: [],
				feed: [],
				feedLoaded: false,
				collections: [],
				collectionsLoaded: false,
				canLoadMore: false,
				max_id: 1,
				isIntersecting: false,
				postIndex: 0,
				showMenu: false,
				showLikesModal: false,
				likesModalPost: {},
				showReportModal: false,
				reportedStatus: {},
				reportedStatusId: 0,
				favourites: [],
				favouritesLoaded: false,
				favouritesPage: 1,
				canLoadMoreFavourites: false,
				bookmarks: [],
				bookmarksLoaded: false,
				bookmarksPage: 1,
				bookmarksCursor: undefined,
				canLoadMoreBookmarks: false,
				canLoadMoreCollections: false,
				collectionsPage: 1,
				isCollectionsIntersecting: false,
				canViewCollections: false,
				showSharesModal: false,
				sharesModalPost: {},
				archives: [],
				archivesLoaded: false,
				archivesPage: 1,
				canLoadMoreArchives: false,
				contextMenuPost: {}
			}
		},

		mounted() {
			this.init();
		},

		methods: {
			init() {
				this.user = window._sharedData.user;

				if(this.$store.state.profileLayout != 'grid') {
					let index = this.$store.state.profileLayout === 'masonry' ? 1 : 2;
					this.toggleLayout(index);
				}

				if(this.user) {
					this.isOwner = this.user.id == this.profile.id;
					if(this.isOwner) {
						this.canViewCollections = true;
					}
				}

				if(this.profile.locked) {
					this.privateProfileCheck();
				} else {
					if(this.profile.local) {
						this.canViewCollections = true;
					}
					this.fetchFeed();
				}
			},

			privateProfileCheck() {
				if(this.relationship.following || this.isOwner) {
					this.canViewCollections = true;
					this.fetchFeed();
				} else {
					this.tabIndex = 'private';
					this.isLoaded = true;
				}
			},

			fetchFeed() {
				axios.get('/api/pixelfed/v1/accounts/' + this.profile.id + '/statuses', {
					params: {
						limit: 9,
						only_media: true,
						min_id: 1
					}
				})
				.then(res => {
					this.tabIndex = 1;
					let data = res.data.filter(status => status.media_attachments.length > 0);
					let ids = data.map(status => status.id);
					this.ids = ids;
					this.max_id = Math.min(...ids);
					data.forEach(s => {
						this.feed.push(s);
					});
					setTimeout(() => {
					   this.canLoadMore = res.data.length > 1;
					   this.feedLoaded = true;
					}, 500);
				});
			},

			enterIntersect() {
				if(this.isIntersecting) {
					return;
				}
				this.isIntersecting = true;

				axios.get('/api/pixelfed/v1/accounts/' + this.profile.id + '/statuses', {
					params: {
						limit: 9,
						only_media: true,
						max_id: this.max_id,
					}
				})
				.then(res => {
					if(!res.data || !res.data.length) {
						this.canLoadMore = false;
					}
					let data = res.data
						.filter(status => status.media_attachments.length > 0)
						.filter(status => this.ids.indexOf(status.id) == -1)

					if(!data || !data.length) {
						this.canLoadMore = false;
						this.isIntersecting = false;
						return;
					}

					let filtered = data.forEach(status => {
							if(status.id < this.max_id) {
								this.max_id = status.id;
							} else {
								this.max_id--;
							}
							this.ids.push(status.id);
							this.feed.push(status);
						});
					this.isIntersecting = false;
					this.canLoadMore = res.data.length >= 1;
				}).catch(err => {
					this.canLoadMore = false;
				});
			},

			toggleLayout(idx, blur = false) {
				if(blur) {
					event.currentTarget.blur();
				}
				this.layoutIndex = idx;
				this.isIntersecting = false;
			},

			toggleTab(idx) {
				event.currentTarget.blur();

				switch(idx) {
					case 1:
						this.isIntersecting = false;
						this.tabIndex = 1;
					break;

					case 2:
						this.fetchCollections();
					break;

					case 3:
						this.fetchFavourites();
					break;

					case 'bookmarks':
						this.fetchBookmarks();
					break;

					case 'archives':
						this.fetchArchives();
					break;
				}
			},

			fetchCollections() {
				if(this.collectionsLoaded) {
					this.tabIndex = 2;
				}

				axios.get('/api/local/profile/collections/' + this.profile.id)
				.then(res => {
					this.collections = res.data;
					this.collectionsLoaded = true;
					this.tabIndex = 2;
					this.collectionsPage++;
					this.canLoadMoreCollections = res.data.length === 9;
				})
			},

			enterCollectionsIntersect() {
				if(this.isCollectionsIntersecting) {
					return;
				}
				this.isCollectionsIntersecting = true;

				axios.get('/api/local/profile/collections/' + this.profile.id, {
					params: {
						limit: 9,
						page: this.collectionsPage
					}
				})
				.then(res => {
					if(!res.data || !res.data.length) {
						this.canLoadMoreCollections = false;
					}
					this.collectionsLoaded = true;
					this.collections.push(...res.data);
					this.collectionsPage++;
					this.canLoadMoreCollections = res.data.length > 0;
					this.isCollectionsIntersecting = false;
				}).catch(err => {
					this.canLoadMoreCollections = false;
					this.isCollectionsIntersecting = false;
				});
			},

			fetchFavourites() {
				this.tabIndex = 0;
				axios.get('/api/pixelfed/v1/favourites')
				.then(res => {
					this.tabIndex = 3;
					this.favourites = res.data;
					this.favouritesPage++;
					this.favouritesLoaded = true;

					if(res.data.length != 0) {
						this.canLoadMoreFavourites = true;
					}
				})
			},

			enterFavouritesIntersect() {
				if(this.isIntersecting) {
					return;
				}
				this.isIntersecting = true;

				axios.get('/api/pixelfed/v1/favourites', {
					params: {
						page: this.favouritesPage,
					}
				})
				.then(res => {
					this.favourites.push(...res.data);
					this.favouritesPage++;
					this.canLoadMoreFavourites = res.data.length != 0;
					this.isIntersecting = false;
				})
				.catch(err => {
					this.canLoadMoreFavourites = false;
				})
			},

			fetchBookmarks() {
				this.tabIndex = 0;
				axios.get('/api/v1/bookmarks', {
					params: {
						'_pe': 1
					}
				})
				.then(res => {
					this.tabIndex = 'bookmarks';
					this.bookmarks = res.data;

					if(res.headers && res.headers.link) {
						const links = parseLinkHeader(res.headers.link);
						if(links.next) {
							this.bookmarksPage = links.next.cursor;
							this.canLoadMoreBookmarks = true;
						} else {
							this.canLoadMoreBookmarks = false;
						}
					}

					this.bookmarksLoaded = true;
				})
			},

			enterBookmarksIntersect() {
				if(this.isIntersecting) {
					return;
				}
				this.isIntersecting = true;

				axios.get('/api/v1/bookmarks', {
					params: {
						'_pe': 1,
						cursor: this.bookmarksPage,
					}
				})
				.then(res => {
					this.bookmarks.push(...res.data);
					if(res.headers && res.headers.link) {
						const links = parseLinkHeader(res.headers.link);
						if(links.next) {
							this.bookmarksPage = links.next.cursor;
							this.canLoadMoreBookmarks = true;
						} else {
							this.canLoadMoreBookmarks = false;
						}
					}
					this.isIntersecting = false;
				})
				.catch(err => {
					this.canLoadMoreBookmarks = false;
				})
			},

			fetchArchives() {
				this.tabIndex = 0;
				axios.get('/api/pixelfed/v2/statuses/archives')
				.then(res => {
					this.tabIndex = 'archives';
					this.archives = res.data;
					this.archivesPage++;
					this.archivesLoaded = true;

					if(res.data.length != 0) {
						this.canLoadMoreArchives = true;
					}
				})
			},

			formatCount(val) {
				return App.util.format.count(val);
			},

			statusUrl(s) {
				return '/i/web/post/' + s.id;
			},

			previewUrl(status) {
				return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].url;
			},

			timeago(ts) {
				return App.util.format.timeAgo(ts);
			},

			likeStatus(index) {
				let status = this.feed[index];
				let state = status.favourited;
				let count = status.favourites_count;
				this.feed[index].favourites_count = count + 1;
				this.feed[index].favourited = !status.favourited;

				axios.post('/api/v1/statuses/' + status.id + '/favourite')
				.catch(err => {
					this.feed[index].favourites_count = count;
					this.feed[index].favourited = false;
				})
			},

			unlikeStatus(index) {
				let status = this.feed[index];
				let state = status.favourited;
				let count = status.favourites_count;
				this.feed[index].favourites_count = count - 1;
				this.feed[index].favourited = !status.favourited;

				axios.post('/api/v1/statuses/' + status.id + '/unfavourite')
				.catch(err => {
					this.feed[index].favourites_count = count;
					this.feed[index].favourited = false;
				})
			},

			openContextMenu(idx, type = 'feed') {
				switch(type) {
					case 'feed':
						this.postIndex = idx;
						this.contextMenuPost = this.feed[idx];
					break;

					case 'archive':
						this.postIndex = idx;
						this.contextMenuPost = this.archives[idx];
					break;
				}
				this.showMenu = true;
				this.$nextTick(() => {
					this.$refs.contextMenu.open();
				});
			},

			openLikesModal(idx) {
				this.postIndex = idx;
				this.likesModalPost = this.feed[this.postIndex];
				this.showLikesModal = true;
				this.$nextTick(() => {
					this.$refs.likesModal.open();
				});
			},

			openSharesModal(idx) {
				this.postIndex = idx;
				this.sharesModalPost = this.feed[this.postIndex];
				this.showSharesModal = true;
				this.$nextTick(() => {
					this.$refs.sharesModal.open();
				});
			},

			commitModeration(type) {
				let idx = this.postIndex;

				switch(type) {
					case 'addcw':
						this.feed[idx].sensitive = true;
					break;

					case 'remcw':
						this.feed[idx].sensitive = false;
					break;

					case 'unlist':
						this.feed.splice(idx, 1);
					break;

					case 'spammer':
						let id = this.feed[idx].account.id;

						this.feed = this.feed.filter(post => {
							return post.account.id != id;
						});
					break;
				}
			},

			counterChange(index, type) {
				switch(type) {
					case 'comment-increment':
						this.feed[index].reply_count = this.feed[index].reply_count + 1;
					break;

					case 'comment-decrement':
						this.feed[index].reply_count = this.feed[index].reply_count - 1;
					break;
				}
			},

			openCommentLikesModal(post) {
				this.likesModalPost = post;
				this.showLikesModal = true;
				this.$nextTick(() => {
					this.$refs.likesModal.open();
				});
			},

			shareStatus(index) {
				let status = this.feed[index];
				let state = status.reblogged;
				let count = status.reblogs_count;
				this.feed[index].reblogs_count = count + 1;
				this.feed[index].reblogged = !status.reblogged;

				axios.post('/api/v1/statuses/' + status.id + '/reblog')
				.catch(err => {
					this.feed[index].reblogs_count = count;
					this.feed[index].reblogged = false;
				})
			},

			unshareStatus(index) {
				let status = this.feed[index];
				let state = status.reblogged;
				let count = status.reblogs_count;
				this.feed[index].reblogs_count = count - 1;
				this.feed[index].reblogged = !status.reblogged;

				axios.post('/api/v1/statuses/' + status.id + '/unreblog')
				.catch(err => {
					this.feed[index].reblogs_count = count;
					this.feed[index].reblogged = false;
				})
			},

			handleReport(post) {
				this.reportedStatusId = post.id;
				this.$nextTick(() => {
					this.reportedStatus = post;
					this.$refs.reportModal.open();
				});
			},

			deletePost() {
				this.feed.splice(this.postIndex, 1);
			},

			handleArchived(id) {
				this.feed.splice(this.postIndex, 1);
			},

			handleUnarchived(id) {
				this.feed = [];
				this.fetchFeed();
			},

			enterArchivesIntersect() {
				if(this.isIntersecting) {
					return;
				}
				this.isIntersecting = true;

				axios.get('/api/pixelfed/v2/statuses/archives', {
					params: {
						page: this.archivesPage
					}
				})
				.then(res => {
					this.archives.push(...res.data);
					this.archivesPage++;
					this.canLoadMoreArchives = res.data.length != 0;
					this.isIntersecting = false;
				})
				.catch(err => {
					this.canLoadMoreArchives = false;
				})
			},

			handleBookmark(index) {
				if(!window.confirm('Are you sure you want to unbookmark this post?')) {
					return;
				}

				let p = this.bookmarks[index];

				axios.post('/i/bookmark', {
					item: p.id
				})
				.then(res => {
					this.bookmarks = this.bookmarks.map(post => {
						if(post.id == p.id) {
							post.bookmarked = false;
							delete post.bookmarked_at;
						}
						return post;
					});
					this.bookmarks.splice(index, 1);
				})
				.catch(err => {
					this.$bvToast.toast('Cannot bookmark post at this time.', {
						title: 'Bookmark Error',
						variant: 'danger',
						autoHideDelay: 5000
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	.profile-feed-component {
		margin-top: 0;

		.ph-wrapper {
			padding: 0.25rem;

			.ph-item {
				margin: 0;
				padding: 0;
				border: none;
				background-color: transparent;

				.ph-picture {
					height: auto;
					padding-bottom: 100%;
					border-radius: 5px;
				}

				& > * {
					margin-bottom: 0;
				}
			}
		}

		.info-overlay-text-field {
			font-size: 13.5px;
			margin-bottom: 2px;

			@media (min-width: 768px) {
				font-size: 20px;
				margin-bottom: 15px;
			}
		}

		.video-overlay-badge {
			position: absolute;
			top: 10px;
			right: 10px;
			opacity: 0.6;
			color: var(--dark);
			padding-bottom: 1px;
		}

		.timestamp-overlay-badge {
			position: absolute;
			bottom: 10px;
			right: 10px;
			opacity: 0.6;
		}

		.profile-nav-btns {
			margin-right: 1rem;

			.btn-group {
				min-height: 45px;
			}

			.btn-link {
				color: var(--text-lighter);
				font-size: 14px;
				border-radius: 0;
				margin-right: 1rem;
				font-weight: bold;

				&:hover {
					color: var(--text-muted);
					text-decoration: none;
				}

				&.active {
					color: var(--dark);
					border-bottom: 1px solid var(--dark);
					transition: border-bottom 250ms ease-in-out;
				}
			}
		}

		.layout-sort-toggle {
			.btn {
				border: none;

				&.btn-light {
					opacity: 0.4;
				}
			}
		}
	}
</style>