From d4dca0e81fc98d8e41785c3095e0d6f4474cbf68 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 24 Sep 2023 15:45:01 +0800
Subject: [PATCH] =?UTF-8?q?Support=20non-rectangular=20custom=20emojis=20?=
 =?UTF-8?q?=F0=9F=98=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Platforms like Misskey have irregularly-shaped custom emojis (emojos?)

- So far this handles horizontally-wide emojis, not tall ones (haven't seen any)
- text-overflow: ellipsis is not used because it can't ellipsis-fy wide emoji images
---
 src/components/compose.jsx    | 25 +++++++++++++++++--------
 src/components/emoji-text.jsx |  4 ++--
 src/components/status.css     | 17 ++++++++++++-----
 src/utils/emojify-text.js     |  2 +-
 4 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index fc4174aa..cb064c15 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -1893,14 +1893,23 @@ function CustomEmojisModal({
                           }}
                           title={`:${emoji.shortcode}:`}
                         >
-                          <img
-                            src={emoji.url || emoji.staticUrl}
-                            alt={emoji.shortcode}
-                            width="16"
-                            height="16"
-                            loading="lazy"
-                            decoding="async"
-                          />
+                          <picture>
+                            {!!emoji.staticUrl && (
+                              <source
+                                srcset={emoji.staticUrl}
+                                media="(prefers-reduced-motion: reduce)"
+                              />
+                            )}
+                            <img
+                              class="shortcode-emoji"
+                              src={emoji.url || emoji.staticUrl}
+                              alt={emoji.shortcode}
+                              width="16"
+                              height="16"
+                              loading="lazy"
+                              decoding="async"
+                            />
+                          </picture>
                         </button>
                       ))}
                     </section>
diff --git a/src/components/emoji-text.jsx b/src/components/emoji-text.jsx
index d904f727..e32e73d0 100644
--- a/src/components/emoji-text.jsx
+++ b/src/components/emoji-text.jsx
@@ -18,8 +18,8 @@ function EmojiText({ text, emojis }) {
             src={url}
             alt={word}
             class="shortcode-emoji emoji"
-            width="12"
-            height="12"
+            width="16"
+            height="16"
             loading="lazy"
             decoding="async"
           />
diff --git a/src/components/status.css b/src/components/status.css
index c62bf94b..fe7f0f82 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -283,8 +283,8 @@
 
 .status > .container > .meta {
   display: flex;
-  gap: 8px;
-  justify-content: space-between;
+  gap: 4px;
+  /* justify-content: space-between; */
   white-space: nowrap;
 }
 .status.small > .container > .meta {
@@ -293,7 +293,11 @@
 .status > .container > .meta > * {
   min-width: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
+  /* text-overflow: ellipsis; */
+}
+.status > .container > .meta .name-text {
+  mask-image: linear-gradient(to left, transparent, black 16px);
+  flex-grow: 1;
 }
 .status.large > .container > .meta {
   min-height: 50px;
@@ -1473,10 +1477,13 @@ a.card:is(:hover, :focus):visited {
 }
 
 .shortcode-emoji {
-  width: 1.2em;
+  width: auto;
+  min-width: 1.2em;
+  max-width: 100%;
   height: 1.2em;
   vertical-align: text-bottom;
-  object-fit: scale-down;
+  object-fit: cover;
+  object-position: left;
 }
 
 /* EDIT HISTORY */
diff --git a/src/utils/emojify-text.js b/src/utils/emojify-text.js
index d2b4ab44..757920fb 100644
--- a/src/utils/emojify-text.js
+++ b/src/utils/emojify-text.js
@@ -8,7 +8,7 @@ function emojifyText(text, emojis = []) {
     const { shortcode, staticUrl, url } = emoji;
     text = text.replace(
       new RegExp(`:${shortcode}:`, 'g'),
-      `<picture><source srcset="${staticUrl}" media="(prefers-reduced-motion: reduce)"></source><img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="12" height="12" loading="lazy" decoding="async" /></picture>`,
+      `<picture><source srcset="${staticUrl}" media="(prefers-reduced-motion: reduce)"></source><img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="16" height="16" loading="lazy" decoding="async" /></picture>`,
     );
   });
   // console.log(text, emojis);