From 6d66bbbc5d140eb802de59f56371e65261e87732 Mon Sep 17 00:00:00 2001 From: Anthony Fu 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 @@ + + + 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(() => {
- +
- +

@{{ account.acct }}

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

@{{ account.acct }}

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<{ 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, + }, }, 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<{ 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 @@