oreolek/phanpy
1
0
Fork 0
Code 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

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

@ -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;

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

@ -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);