fix "who reacted" emoji display

fixes #80

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) {

src/components/emoji_reactions/emoji_reactions.vue

@@ -2,12 +2,13 @@
   <div class="emoji-reactions">
     <UserListPopover
       v-for="(reaction) in emojiReactions"
-      :key="reaction.name"
+      :key="reaction.url || reaction.name"
-      :users="accountsForEmoji[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()"
       >

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 (mfmHtml.content.firstChild) {
-        if (el.dataset.speed) {
+        Array.from(mfmHtml.content.firstChild.getElementsByClassName('mfm')).map((el) => {
-          el.style.animationDuration = el.dataset.speed
+          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 (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
     }