6fdef479d0
~~(not intended for merging yet, just submitting this for preliminary review and discussion)~~ this patch adds a tab with recently used emojis to the emoji picker: https://akko.lain.gay/notice/ASoGCtyoiXbYPJjqpk there's a couple of things i'm ~~still trying to work out~~ not totally happy with and i'd appreciate any feedback on them: * the recentEmojis getter is called very frequently and has to do a possibly somewhat expensive lookup of emoji objects by their `displayName` each time, which i'm not sure is ideal * ~~emoji reactions on posts added through the picker are picked up by the recentEmojis module, but clicks on existing emoji reactions are not, because `addReaction` in `react_button.js` only currently receives the replacement and not the full emoji object (if there even is one wherever that method is called from)~~ this works now and does the same stupid full search of all emojis by their name which i guess is less bad because this only happens when you hit a reaction emoji button that already existed Reviewed-on: https://akkoma.dev/AkkomaGang/akkoma-fe/pulls/283 Co-authored-by: flisk <akkomadev.mvch71fq@flisk.xyz> Co-committed-by: flisk <akkomadev.mvch71fq@flisk.xyz>
81 lines
2.3 KiB
JavaScript
81 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
|