feat: have all emojis respect prefers-reduced-motion (#962)

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)
   }
 }

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
+<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:\\"
-  class=\\"custom-emoji\\"
-  data-emoji-id=\\"nuxt\\"
-/>
+/></picture>
 "
 `;
 

tests/__snapshots__/html-parse.test.ts.snap

@@ -48,12 +48,16 @@ const a = hello
 
 exports[`html-parse > custom emoji > html 1`] = `
 "Daniel Roe
+<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:\\"
-  class=\\"custom-emoji\\"
-  data-emoji-id=\\"nuxt\\"
-/>
+/></picture>
 "
 `;