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">{{ 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;
}, 2000);
},
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>