diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js index bb11b840..549b9517 100644 --- a/src/components/emoji_reactions/emoji_reactions.js +++ b/src/components/emoji_reactions/emoji_reactions.js @@ -27,7 +27,11 @@ const EmojiReactions = { }, accountsForEmoji () { return this.status.emoji_reactions.reduce((acc, reaction) => { - acc[reaction.name] = reaction.accounts || [] + if (reaction.url) { + acc[reaction.url] = reaction.accounts || [] + } else { + acc[reaction.name] = reaction.accounts || [] + } return acc }, {}) }, @@ -42,6 +46,14 @@ const EmojiReactions = { reactedWith (emoji) { return this.status.emoji_reactions.find(r => r.name === emoji).me }, + isLocalReaction (emojiUrl) { + if (!emojiUrl) return true + const reacted = this.accountsForEmoji[emojiUrl] + if (reacted.length === 0) { + return true + } + return reacted[0].is_local + }, fetchEmojiReactionsByIfMissing () { const hasNoAccounts = this.status.emoji_reactions.find(r => !r.accounts) if (hasNoAccounts) { diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue index e76560bc..edc57d89 100644 --- a/src/components/emoji_reactions/emoji_reactions.vue +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -2,12 +2,13 @@ <div class="emoji-reactions"> <UserListPopover v-for="(reaction) in emojiReactions" - :key="reaction.name" - :users="accountsForEmoji[reaction.name]" + :key="reaction.url || reaction.name" + :users="accountsForEmoji[reaction.url || reaction.name]" > <button class="emoji-reaction btn button-default" :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }" + :disabled="!isLocalReaction(reaction.url)" @click="emojiOnClick(reaction.name, $event)" @mouseenter="fetchEmojiReactionsByIfMissing()" > diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index 0d553485..0d4127b6 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -148,20 +148,22 @@ export default { mfmHtml.innerHTML = marked.parse(content) // Add options with set values to CSS - Array.from(mfmHtml.content.firstChild.getElementsByClassName('mfm')).map((el) => { - if (el.dataset.speed) { - el.style.animationDuration = el.dataset.speed - } - if (el.dataset.deg) { - el.style.transform = `rotate(${el.dataset.deg}deg)` - } - if (Array.from(el.classList).includes('_mfm_font_')) { - const font = Object.keys(el.dataset)[0] - if (['serif', 'monospace', 'cursive', 'fantasy', 'emoji', 'math'].includes(font)) { - el.style.fontFamily = font + if (mfmHtml.content.firstChild) { + Array.from(mfmHtml.content.firstChild.getElementsByClassName('mfm')).map((el) => { + if (el.dataset.speed) { + el.style.animationDuration = el.dataset.speed } - } - }) + if (el.dataset.deg) { + el.style.transform = `rotate(${el.dataset.deg}deg)` + } + if (Array.from(el.classList).includes('_mfm_font_')) { + const font = Object.keys(el.dataset)[0] + if (['serif', 'monospace', 'cursive', 'fantasy', 'emoji', 'math'].includes(font)) { + el.style.fontFamily = font + } + } + }) + } return mfmHtml.innerHTML }