From 58c6b6349cb0124bac629ec713f78aeb2febbcb2 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 8 Aug 2023 15:34:24 +0800
Subject: [PATCH] Time to embrace prefers-reduced-motion with picture

---
 src/components/emoji-text.jsx | 24 ++++++++++++++----------
 src/utils/emojify-text.js     |  2 +-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/emoji-text.jsx b/src/components/emoji-text.jsx
index caa94215..d904f727 100644
--- a/src/components/emoji-text.jsx
+++ b/src/components/emoji-text.jsx
@@ -9,17 +9,21 @@ function EmojiText({ text, emojis }) {
   const elements = text.split(regex).map((word) => {
     const emoji = emojis.find((e) => e.shortcode === word);
     if (emoji) {
+      const { url, staticUrl } = emoji;
       return (
-        <img
-          key={word}
-          src={emoji.url}
-          alt={word}
-          class="shortcode-emoji emoji"
-          width="12"
-          height="12"
-          loading="lazy"
-          decoding="async"
-        />
+        <picture>
+          <source srcset={staticUrl} media="(prefers-reduced-motion: reduce)" />
+          <img
+            key={word}
+            src={url}
+            alt={word}
+            class="shortcode-emoji emoji"
+            width="12"
+            height="12"
+            loading="lazy"
+            decoding="async"
+          />
+        </picture>
       );
     }
     return word;
diff --git a/src/utils/emojify-text.js b/src/utils/emojify-text.js
index 9f4ae50f..d2b4ab44 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'),
-      `<img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="12" height="12" loading="lazy" decoding="async" />`,
+      `<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>`,
     );
   });
   // console.log(text, emojis);