feat: have all emojis respect prefers-reduced-motion (#962)
This commit is contained in:
parent
97a02ef837
commit
95dda1fdb6
|
@ -169,7 +169,7 @@ export function treeToText(input: Node): string {
|
||||||
if ('children' in input)
|
if ('children' in input)
|
||||||
body = (input.children as Node[]).map(n => treeToText(n)).join('')
|
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'))
|
if (input.attributes.class?.includes('custom-emoji'))
|
||||||
return `:${input.attributes['data-emoji-id']}:`
|
return `:${input.attributes['data-emoji-id']}:`
|
||||||
if (input.attributes.class?.includes('iconify-emoji'))
|
if (input.attributes.class?.includes('iconify-emoji'))
|
||||||
|
@ -326,11 +326,34 @@ function replaceCustomEmoji(customEmojis: Record<string, mastodon.v1.CustomEmoji
|
||||||
if (i % 2 === 0)
|
if (i % 2 === 0)
|
||||||
return name
|
return name
|
||||||
|
|
||||||
const emoji = customEmojis[name]
|
const emoji = customEmojis[name] as mastodon.v1.CustomEmoji
|
||||||
if (!emoji)
|
if (!emoji)
|
||||||
return `:${name}:`
|
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)
|
}).filter(Boolean)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -58,12 +58,16 @@ exports[`content-rich > code frame no lang 1`] = `"<p><pre class=\\"code-block\\
|
||||||
|
|
||||||
exports[`content-rich > custom emoji 1`] = `
|
exports[`content-rich > custom emoji 1`] = `
|
||||||
"Daniel Roe
|
"Daniel Roe
|
||||||
<img
|
<picture alt=\\":nuxt:\\" class=\\"custom-emoji\\" data-emoji-id=\\"nuxt\\"
|
||||||
src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
|
><source
|
||||||
alt=\\":nuxt:\\"
|
srcset=\\"
|
||||||
class=\\"custom-emoji\\"
|
https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/static/c96ba3cb0e0e1eac.png
|
||||||
data-emoji-id=\\"nuxt\\"
|
\\"
|
||||||
/>
|
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>
|
||||||
"
|
"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
|
@ -48,12 +48,16 @@ const a = hello
|
||||||
|
|
||||||
exports[`html-parse > custom emoji > html 1`] = `
|
exports[`html-parse > custom emoji > html 1`] = `
|
||||||
"Daniel Roe
|
"Daniel Roe
|
||||||
<img
|
<picture alt=\\":nuxt:\\" class=\\"custom-emoji\\" data-emoji-id=\\"nuxt\\"
|
||||||
src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
|
><source
|
||||||
alt=\\":nuxt:\\"
|
srcset=\\"
|
||||||
class=\\"custom-emoji\\"
|
https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/static/c96ba3cb0e0e1eac.png
|
||||||
data-emoji-id=\\"nuxt\\"
|
\\"
|
||||||
/>
|
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>
|
||||||
"
|
"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue