From 95dda1fdb6ad51463345d8ae060d30d03b24a0a4 Mon Sep 17 00:00:00 2001
From: Darius Kruythoff <dkruythoff@gmail.com>
Date: Mon, 16 Jan 2023 01:51:52 +0100
Subject: [PATCH] feat: have all emojis respect prefers-reduced-motion (#962)

---
 composables/content-parse.ts                  | 29 +++++++++++++++++--
 tests/__snapshots__/content-rich.test.ts.snap | 16 ++++++----
 tests/__snapshots__/html-parse.test.ts.snap   | 16 ++++++----
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/composables/content-parse.ts b/composables/content-parse.ts
index 6ab6954a..d5db2fe9 100644
--- a/composables/content-parse.ts
+++ b/composables/content-parse.ts
@@ -169,7 +169,7 @@ export function treeToText(input: Node): string {
   if ('children' in input)
     body = (input.children as Node[]).map(n => treeToText(n)).join('')
 
-  if (input.name === 'img') {
+  if (input.name === 'img' || input.name === 'picture') {
     if (input.attributes.class?.includes('custom-emoji'))
       return `:${input.attributes['data-emoji-id']}:`
     if (input.attributes.class?.includes('iconify-emoji'))
@@ -326,11 +326,34 @@ function replaceCustomEmoji(customEmojis: Record<string, mastodon.v1.CustomEmoji
       if (i % 2 === 0)
         return name
 
-      const emoji = customEmojis[name]
+      const emoji = customEmojis[name] as mastodon.v1.CustomEmoji
       if (!emoji)
         return `:${name}:`
 
-      return h('img', { 'src': emoji.url, 'alt': `:${name}:`, 'class': 'custom-emoji', 'data-emoji-id': name })
+      return h(
+        'picture',
+        {
+          'alt': `:${name}:`,
+          'class': 'custom-emoji',
+          'data-emoji-id': name,
+        },
+        [
+          h(
+            'source',
+            {
+              srcset: emoji.staticUrl,
+              media: '(prefers-reduced-motion: reduce)',
+            },
+          ),
+          h(
+            'img',
+            {
+              src: emoji.url,
+              alt: `:${name}:`,
+            },
+          ),
+        ],
+      )
     }).filter(Boolean)
   }
 }
diff --git a/tests/__snapshots__/content-rich.test.ts.snap b/tests/__snapshots__/content-rich.test.ts.snap
index 07c1f655..a48b9ec2 100644
--- a/tests/__snapshots__/content-rich.test.ts.snap
+++ b/tests/__snapshots__/content-rich.test.ts.snap
@@ -58,12 +58,16 @@ exports[`content-rich > code frame no lang 1`] = `"<p><pre class=\\"code-block\\
 
 exports[`content-rich > custom emoji 1`] = `
 "Daniel Roe
-<img
-  src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
-  alt=\\":nuxt:\\"
-  class=\\"custom-emoji\\"
-  data-emoji-id=\\"nuxt\\"
-/>
+<picture alt=\\":nuxt:\\" class=\\"custom-emoji\\" data-emoji-id=\\"nuxt\\"
+  ><source
+    srcset=\\"
+      https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/static/c96ba3cb0e0e1eac.png
+    \\"
+    media=\\"(prefers-reduced-motion: reduce)\\" />
+  <img
+    src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
+    alt=\\":nuxt:\\"
+/></picture>
 "
 `;
 
diff --git a/tests/__snapshots__/html-parse.test.ts.snap b/tests/__snapshots__/html-parse.test.ts.snap
index df59da5a..b2546e6b 100644
--- a/tests/__snapshots__/html-parse.test.ts.snap
+++ b/tests/__snapshots__/html-parse.test.ts.snap
@@ -48,12 +48,16 @@ const a = hello
 
 exports[`html-parse > custom emoji > html 1`] = `
 "Daniel Roe
-<img
-  src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
-  alt=\\":nuxt:\\"
-  class=\\"custom-emoji\\"
-  data-emoji-id=\\"nuxt\\"
-/>
+<picture alt=\\":nuxt:\\" class=\\"custom-emoji\\" data-emoji-id=\\"nuxt\\"
+  ><source
+    srcset=\\"
+      https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/static/c96ba3cb0e0e1eac.png
+    \\"
+    media=\\"(prefers-reduced-motion: reduce)\\" />
+  <img
+    src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
+    alt=\\":nuxt:\\"
+/></picture>
 "
 `;