From bb6ee79e3e21be928e9a02c150b77197424d6adf Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Thu, 11 Aug 2022 18:14:05 +0100
Subject: [PATCH] fix "who reacted" emoji display

fixes #80
---
 .../emoji_reactions/emoji_reactions.js        | 14 +++++++++-
 .../emoji_reactions/emoji_reactions.vue       |  5 ++--
 src/components/rich_content/rich_content.jsx  | 28 ++++++++++---------
 3 files changed, 31 insertions(+), 16 deletions(-)

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 57e00817..2d7cfb54 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 187600cf..3ef7d28f 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -141,20 +141,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
     }