Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-22 16:46:28 +01:00
Code Issues Projects Releases Packages Wiki Activity

Time to embrace prefers-reduced-motion with picture

Browse source
This commit is contained in:
Lim Chee Aun 2023-08-08 15:34:24 +08:00
parent fb798ce895
commit 58c6b6349c
2 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/emoji-text.jsx
View file

@ -9,10 +9,13 @@ function EmojiText({ text, emojis }) {
const elements = text.split(regex).map((word) => { const elements = text.split(regex).map((word) => {
const emoji = emojis.find((e) => e.shortcode === word); const emoji = emojis.find((e) => e.shortcode === word);
if (emoji) { if (emoji) {
const { url, staticUrl } = emoji;
return ( return (
<picture>
<source srcset={staticUrl} media="(prefers-reduced-motion: reduce)" />
<img <img
key={word} key={word}
src={emoji.url} src={url}
alt={word} alt={word}
class="shortcode-emoji emoji" class="shortcode-emoji emoji"
width="12" width="12"
@ -20,6 +23,7 @@ function EmojiText({ text, emojis }) {
loading="lazy" loading="lazy"
decoding="async" decoding="async"
/> />
</picture>
); );
} }
return word; return word;

2
src/utils/emojify-text.js
View file

@ -8,7 +8,7 @@ function emojifyText(text, emojis = []) {
const { shortcode, staticUrl, url } = emoji; const { shortcode, staticUrl, url } = emoji;
text = text.replace( text = text.replace(
new RegExp(`:${shortcode}:`, 'g'), 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); // console.log(text, emojis);