From 6d66bbbc5d140eb802de59f56371e65261e87732 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 23 Nov 2022 07:42:20 +0800
Subject: [PATCH] feat: support custom emojis from other servers

---
 components/account/AccountAvatar.vue     | 11 +++++++++++
 components/account/AccountHeader.vue     |  4 ++--
 components/account/AccountInfo.vue       |  4 ++--
 components/account/AccountInlineInfo.vue |  4 ++--
 components/common/RichContent.ts         | 12 ++++++++++--
 components/status/StatusBody.vue         |  2 +-
 composables/servers.ts                   |  3 ++-
 composables/utils.ts                     |  6 ++++++
 pages/@[user]/[post].vue                 |  6 ++++--
 pages/@[user]/followers.vue              |  4 ----
 10 files changed, 40 insertions(+), 16 deletions(-)
 create mode 100644 components/account/AccountAvatar.vue

diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue
new file mode 100644
index 00000000..afa37727
--- /dev/null
+++ b/components/account/AccountAvatar.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <img :src="account.avatar" :alt="account.username" rounded bg-gray:10>
+</template>
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index ed33e688..a6b71e1d 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -21,11 +21,11 @@ const createdAt = $computed(() => {
         <div flex flex-col gap-2>
           <div p1>
             <NuxtLink :to="`/@${account.acct}`">
-              <img :src="account.avatar" rounded w-20 h-20>
+              <AccountAvatar :account="account" w-20 h-20 />
             </NuxtLink>
           </div>
           <NuxtLink flex flex-col :to="`/@${account.acct}`">
-            <CommonRichContent font-bold :content="getDisplayName(account)" />
+            <CommonRichContent font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
             <p op50>
               @{{ account.acct }}
             </p>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 8d2e8af1..ab229e8a 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -11,11 +11,11 @@ const { link = true } = defineProps<{
   <div flex gap-2>
     <div p1>
       <NuxtLink :to="link ? `/@${account.acct}` : null">
-        <img :src="account.avatar" rounded w-10 h-10 bg-gray:10>
+        <AccountAvatar :account="account" w-10 h-10 />
       </NuxtLink>
     </div>
     <NuxtLink flex flex-col :to="link ? `/@${account.acct}` : null">
-      <CommonRichContent font-bold :content="getDisplayName(account)" />
+      <CommonRichContent font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
       <p op35 text-sm>
         @{{ account.acct }}
       </p>
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index a1ddad14..5dd91468 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
   <NuxtLink :href="`/@${account.acct}`" flex gap-2 font-bold items-center>
-    <img :src="account.avatar" class="w-5 h-5 rounded">
-    <CommonRichContent :content="getDisplayName(account)" />
+    <AccountAvatar :account="account" w-5 h-5 />
+    <CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
   </NuxtLink>
 </template>
diff --git a/components/common/RichContent.ts b/components/common/RichContent.ts
index aacd687e..4422cc51 100644
--- a/components/common/RichContent.ts
+++ b/components/common/RichContent.ts
@@ -1,16 +1,24 @@
+import type { Emoji } from 'masto'
+import type { PropType } from 'vue'
+import { emojisArrayToObject } from '~/composables/utils'
+
 export default defineComponent({
   props: {
     content: {
       type: String,
       required: true,
     },
+    emojis: {
+      type: Array as PropType<Emoji[]>,
+    },
   },
   setup(props) {
-    const serverInfos = useServerInfo(currentServer.value)
+    const emojiObject = emojisArrayToObject(props.emojis || [])
+
     return () => h(
       'div',
       { class: 'rich-content' },
-      contentToVNode(props.content, undefined, serverInfos.value?.customEmojis),
+      contentToVNode(props.content, undefined, emojiObject),
     )
   },
 })
diff --git a/components/status/StatusBody.vue b/components/status/StatusBody.vue
index 7e104f5f..0d52a7e1 100644
--- a/components/status/StatusBody.vue
+++ b/components/status/StatusBody.vue
@@ -8,6 +8,6 @@ const { status } = defineProps<{
 
 <template>
   <div class="status-body">
-    <CommonRichContent :content="status.content" />
+    <CommonRichContent :content="status.content" :emojis="status.emojis" />
   </div>
 </template>
diff --git a/composables/servers.ts b/composables/servers.ts
index 0cc3359e..dba1a978 100644
--- a/composables/servers.ts
+++ b/composables/servers.ts
@@ -1,3 +1,4 @@
+import { emojisArrayToObject } from './utils'
 import type { ServerInfo } from '~/types'
 
 const ServerInfoTTL = 60 * 60 * 1000 * 12 // 12 hour
@@ -19,7 +20,7 @@ async function _fetchServerInfo(server: string) {
         Object.assign(serverInfos.value[server], r)
       }),
       masto.customEmojis.fetchAll().then((r) => {
-        serverInfos.value[server].customEmojis = Object.fromEntries(r.map(i => [i.shortcode, i]))
+        serverInfos.value[server].customEmojis = emojisArrayToObject(r)
       }),
     ])
   }
diff --git a/composables/utils.ts b/composables/utils.ts
index ba066592..11bc5fa7 100644
--- a/composables/utils.ts
+++ b/composables/utils.ts
@@ -1,3 +1,5 @@
+import type { Emoji } from 'masto'
+
 export function getDataUrlFromArr(arr: Uint8ClampedArray, w: number, h: number) {
   if (typeof w === 'undefined' || typeof h === 'undefined')
     w = h = Math.sqrt(arr.length / 4)
@@ -14,3 +16,7 @@ export function getDataUrlFromArr(arr: Uint8ClampedArray, w: number, h: number)
 
   return canvas.toDataURL()
 }
+
+export function emojisArrayToObject(emojis: Emoji[]) {
+  return Object.fromEntries(emojis.map(i => [i.shortcode, i]))
+}
diff --git a/pages/@[user]/[post].vue b/pages/@[user]/[post].vue
index ae1a5674..9246267f 100644
--- a/pages/@[user]/[post].vue
+++ b/pages/@[user]/[post].vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import AccountAvatar from '~~/components/account/AccountAvatar.vue'
+
 const params = useRoute().params
 const id = computed(() => params.post as string)
 
@@ -12,8 +14,8 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
       <StatusCard :status="comment" border="t border" pt-4 />
     </template>
     <StatusDetails :status="status" border="t border" pt-4 />
-    <div border="t border" p6 flex gap-4>
-      <img :src="currentUser?.account?.avatar" rounded w-10 h-10 bg-gray:10>
+    <div v-if="currentUser" border="t border" p6 flex gap-4>
+      <AccountAvatar :account="currentUser.account" w-10 h-10 />
       <PublishWidget
         w-full
         :draft-key="`reply-${id}`"
diff --git a/pages/@[user]/followers.vue b/pages/@[user]/followers.vue
index 6a7adebf..0cb70199 100644
--- a/pages/@[user]/followers.vue
+++ b/pages/@[user]/followers.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-const props = defineProps<{
-  modelValue?: boolean
-}>()
-
 const params = useRoute().params
 const user = $computed(() => params.user as string)