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

<template>
	<div class="px-3 my-3" style="z-index:3;">
		<div v-if="(status.favourites_count || status.reblogs_count) && ((status.hasOwnProperty('liked_by') && status.liked_by.url) || (status.hasOwnProperty('reblogs_count') && status.reblogs_count))" class="mb-0 d-flex justify-content-between">
			<p v-if="!hideCounts && status.favourites_count" class="mb-2 reaction-liked-by">
				Liked by
				<span v-if="status.favourites_count == 1 && status.favourited == true" class="font-weight-bold">me</span>
				<span v-else>
					<router-link :to="'/i/web/profile/' + status.liked_by.id" class="primary font-weight-bold"">&commat;{{ status.liked_by.username}}</router-link>
					<span v-if="status.liked_by.others || status.favourites_count > 1">
						and <a href="#" class="primary font-weight-bold" @click.prevent="showLikes()">{{ count(status.favourites_count - 1) }} others</a>
					</span>
				</span>
			</p>

			<p v-if="!hideCounts && status.reblogs_count" class="mb-2 reaction-liked-by">
				Shared by
				<span v-if="status.reblogs_count == 1 && status.reblogged == true" class="font-weight-bold">me</span>
				<a v-else class="primary font-weight-bold" href="#" @click.prevent="showShares()">
					{{ count(status.reblogs_count) }} {{ status.reblogs_count > 1 ? 'others' : 'other' }}
				</a>
			</p>
		</div>

		<div class="d-flex justify-content-between" style="font-size: 14px !important;">
			<div>
				<button type="button" class="btn btn-light font-weight-bold rounded-pill mr-2" @click.prevent="like()">
					<span v-if="status.favourited" class="primary">
						<i class="fas fa-heart mr-md-1 text-danger fa-lg"></i>
					</span>
					<span v-else>
						<i class="far fa-heart mr-md-2"></i>
					</span>
					<span v-if="likesCount && !hideCounts">
						{{ count(likesCount)}}
						<span class="d-none d-md-inline">{{ likesCount == 1 ? $t('common.like') : $t('common.likes') }}</span>
					</span>
					<span v-else>
						<span class="d-none d-md-inline">{{ $t('common.like') }}</span>
					</span>
				</button>

				<button v-if="!status.comments_disabled" type="button" class="btn btn-light font-weight-bold rounded-pill mr-2 px-3" @click="showComments()">
					<i class="far fa-comment mr-md-2"></i>
					<span v-if="replyCount && !hideCounts">
						{{ count(replyCount) }}
						<span class="d-none d-md-inline">{{ replyCount == 1 ? $t('common.comment') : $t('common.comments') }}</span>
					</span>
					<span v-else>
						<span class="d-none d-md-inline">{{ $t('common.comment') }}</span>
					</span>
				</button>

			</div>
			<div>
				<button
					type="button"
					class="btn btn-light font-weight-bold rounded-pill"
					:disabled="isReblogging"
					@click="handleReblog()">
					<span v-if="isReblogging">
						<b-spinner variant="warning" small />
					</span>
					<span v-else>
						<i v-if="status.reblogged == true" class="fas fa-retweet fa-lg text-warning"></i>
						<i v-else class="far fa-retweet"></i>

						<span v-if="status.reblogs_count && !hideCounts" class="ml-md-2">
							{{ count(status.reblogs_count) }}
						</span>
					</span>
				</button>

				<button
					v-if="!status.in_reply_to_id && !status.reblog_of_id"
					type="button"
					class="btn btn-light font-weight-bold rounded-pill ml-3"
					:disabled="isBookmarking"
					@click="handleBookmark()">
					<span v-if="isBookmarking">
						<b-spinner variant="warning" small />
					</span>
					<span v-else>
						<i v-if="status.hasOwnProperty('bookmarked_at') || (status.hasOwnProperty('bookmarked') && status.bookmarked == true)" class="fas fa-bookmark fa-lg text-warning"></i>
						<i v-else class="far fa-bookmark"></i>
					</span>
				</button>

				<button v-if="admin" type="button" class="ml-3 btn btn-light font-weight-bold rounded-pill" v-b-tooltip.hover title="Moderation Tools" @click="openModTools()">
					<i class="far fa-user-crown"></i>
				</button>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	import CommentDrawer from './CommentDrawer.vue';
	import ProfileHoverCard from './../profile/ProfileHoverCard.vue';

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

			profile: {
				type: Object
			},

			admin: {
				type: Boolean,
				default: false
			}
		},

		components: {
			"comment-drawer": CommentDrawer,
			"profile-hover-card": ProfileHoverCard
		},

		data() {
			return {
				key: 1,
				menuLoading: true,
				sensitive: false,
				isReblogging: false,
				isBookmarking: false,
				owner: false,
				license: false
			}
		},

		computed: {
			hideCounts: {
				get() {
					return this.$store.state.hideCounts == true;
				}
			},

			autoloadComments: {
				get() {
					return this.$store.state.autoloadComments == true;
				}
			},

			newReactions: {
				get() {
					return this.$store.state.newReactions;
				},
			},

			likesCount: function() {
				return this.status.favourites_count;
			},

			replyCount: function() {
				return this.status.reply_count;
			}
		},

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

			like() {
				event.currentTarget.blur();
				if(this.status.favourited) {
					this.$emit('unlike');
				} else {
					this.$emit('like');
				}
			},

			showLikes() {
				event.currentTarget.blur();
				this.$emit('likes-modal');
			},

			showShares() {
				event.currentTarget.blur();
				this.$emit('shares-modal');
			},

			showComments() {
				event.currentTarget.blur();
				this.$emit('toggle-comments');
			},

			copyLink() {
				event.currentTarget.blur();
				App.util.clipboard(this.status.url);
			},

			shareToOther() {
				if (navigator.canShare) {
					navigator.share({
						url: this.status.url
					})
					.then(() => console.log('Share was successful.'))
					.catch((error) => console.log('Sharing failed', error));
				} else {
					swal('Not supported', 'Your current device does not support native sharing.', 'error');
				}
			},

			counterChange(type) {
				this.$emit('counter-change', type);
			},

			showCommentLikes(post) {
				this.$emit('comment-likes-modal', post);
			},

			handleReblog() {
				this.isReblogging = true;
				if(this.status.reblogged) {
					this.$emit('unshare');
				} else {
					this.$emit('share');
				}

				setTimeout(() => {
					this.isReblogging = false;
				}, 5000);
			},

			handleBookmark() {
				event.currentTarget.blur();
				this.isBookmarking = true;
				this.$emit('bookmark');

				setTimeout(() => {
					this.isBookmarking = false;
				}, 5000);
			},

			getStatusAvatar() {
				if(window._sharedData.user.id == this.status.account.id) {
					return window._sharedData.user.avatar;
				}

				return this.status.account.avatar;
			},

			openModTools() {
				this.$emit('mod-tools');
			}
		}
	}
</script>