From e53a70c672dc26cef7ac4677fd261e4c6d525c1b Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Tue, 17 Jan 2023 01:53:45 +0000
Subject: [PATCH] Display custom emojis

---
 CHANGELOG.md                   |  1 +
 src/api/posts.ts               |  7 +++++++
 src/components/PostContent.vue | 19 ++++++++++++++++++-
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dce8fa8..a0c7f88 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Added "Experiments" section to Settings page (includes "Move Followers" feature).
 - Show error message if moving of followers fails.
 - Added "Import Follows" page.
+- Display custom emojis.
 
 ### Changed
 
diff --git a/src/api/posts.ts b/src/api/posts.ts
index 9830649..b4620b6 100644
--- a/src/api/posts.ts
+++ b/src/api/posts.ts
@@ -52,6 +52,11 @@ export interface Tag {
   url: string;
 }
 
+export interface CustomEmoji {
+  shortcode: string,
+  url: string,
+}
+
 export interface Post {
   id: string;
   uri: string;
@@ -68,6 +73,7 @@ export interface Post {
   media_attachments: Attachment[];
   mentions: Mention[];
   tags: Tag[];
+  emojis: CustomEmoji[];
   favourited: boolean;
   reblogged: boolean;
   ipfs_cid: string | null;
@@ -186,6 +192,7 @@ export async function previewPost(
     media_attachments: [],
     mentions: [],
     tags: [],
+    emojis: [],
     favourited: false,
     reblogged: false,
     ipfs_cid: null,
diff --git a/src/components/PostContent.vue b/src/components/PostContent.vue
index e6a8b07..e69ed6a 100644
--- a/src/components/PostContent.vue
+++ b/src/components/PostContent.vue
@@ -70,7 +70,18 @@ function configureInlineLinks() {
 }
 
 function getContent(): string {
-  const content = addGreentext(props.post.content)
+  let content = addGreentext(props.post.content)
+  // Replace emoji shortcodes
+  content = content.replace(/:([\w.]+):/g, (match, shortcode) => {
+    const emoji = props.post.emojis.find((emoji) => {
+      return emoji.shortcode === shortcode
+    })
+    if (emoji) {
+      return `<img class="emoji" title=":${emoji.shortcode}:" alt=":${emoji.shortcode}:" src="${emoji.url}">`
+    } else {
+      return match
+    }
+  })
   return content
 }
 </script>
@@ -155,5 +166,11 @@ function getContent(): string {
       float: left;
     }
   }
+
+  :deep(.emoji) {
+    height: 32px;
+    vertical-align: middle;
+    width: 32px;
+  }
 }
 </style>