Update PostReactions partial, hide bookmark button unless post has public visibility

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

@@ -0,0 +1,251 @@
+<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.visibility === 'public'"
+					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>