forked from AkkomaGang/akkoma-fe
83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
import UserAvatar from '../user_avatar/user_avatar.vue'
|
|
import UserListPopover from '../user_list_popover/user_list_popover.vue'
|
|
|
|
const EMOJI_REACTION_COUNT_CUTOFF = 12
|
|
|
|
const findEmojiByReplacement = (state, replacement) => {
|
|
const allEmojis = state.instance.emoji.concat(state.instance.customEmoji)
|
|
return allEmojis.find(emoji => emoji.replacement === replacement)
|
|
}
|
|
|
|
const EmojiReactions = {
|
|
name: 'EmojiReactions',
|
|
components: {
|
|
UserAvatar,
|
|
UserListPopover
|
|
},
|
|
props: ['status'],
|
|
data: () => ({
|
|
showAll: false
|
|
}),
|
|
computed: {
|
|
tooManyReactions() {
|
|
return this.status.emoji_reactions.length > EMOJI_REACTION_COUNT_CUTOFF
|
|
},
|
|
emojiReactions() {
|
|
return this.showAll
|
|
? this.status.emoji_reactions
|
|
: this.status.emoji_reactions.slice(0, EMOJI_REACTION_COUNT_CUTOFF)
|
|
},
|
|
showMoreString() {
|
|
return `+${
|
|
this.status.emoji_reactions.length - EMOJI_REACTION_COUNT_CUTOFF
|
|
}`
|
|
},
|
|
accountsForEmoji() {
|
|
return this.status.emoji_reactions.reduce((acc, reaction) => {
|
|
if (reaction.url) {
|
|
acc[reaction.url] = reaction.accounts || []
|
|
} else {
|
|
acc[reaction.name] = reaction.accounts || []
|
|
}
|
|
return acc
|
|
}, {})
|
|
},
|
|
loggedIn() {
|
|
return !!this.$store.state.users.currentUser
|
|
}
|
|
},
|
|
methods: {
|
|
toggleShowAll() {
|
|
this.showAll = !this.showAll
|
|
},
|
|
reactedWith(emoji) {
|
|
return this.status.emoji_reactions.find((r) => r.name === emoji).me
|
|
},
|
|
fetchEmojiReactionsByIfMissing() {
|
|
const hasNoAccounts = this.status.emoji_reactions.find((r) => !r.accounts)
|
|
if (hasNoAccounts) {
|
|
this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
|
|
}
|
|
},
|
|
reactWith(emoji) {
|
|
this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
|
|
const emojiObject = findEmojiByReplacement(this.$store.state, emoji)
|
|
this.$store.commit('emojiUsed', emojiObject)
|
|
},
|
|
unreact(emoji) {
|
|
this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
|
|
},
|
|
emojiOnClick(emoji, event) {
|
|
if (!this.loggedIn) return
|
|
|
|
if (this.reactedWith(emoji)) {
|
|
this.unreact(emoji)
|
|
} else {
|
|
this.reactWith(emoji)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export default EmojiReactions
|