- {' '}
+ {' '}
{!!verifiedAt && }
diff --git a/src/components/avatar.css b/src/components/avatar.css
index 1a874941..aea50bf0 100644
--- a/src/components/avatar.css
+++ b/src/components/avatar.css
@@ -13,7 +13,7 @@
border-radius: 0;
}
.avatar:not(.has-alpha).squircle {
- border-radius: 12px;
+ border-radius: 25%;
}
.avatar img {
diff --git a/src/components/avatar.jsx b/src/components/avatar.jsx
index a9fef01d..3c30d4bc 100644
--- a/src/components/avatar.jsx
+++ b/src/components/avatar.jsx
@@ -13,6 +13,11 @@ const SIZES = {
const alphaCache = {};
+const canvas = window.OffscreenCanvas
+ ? new OffscreenCanvas(1, 1)
+ : document.createElement('canvas');
+const ctx = canvas.getContext('2d');
+
function Avatar({ url, size, alt = '', squircle, ...props }) {
size = SIZES[size] || size || SIZES.m;
const avatarRef = useRef();
@@ -37,6 +42,7 @@ function Avatar({ url, size, alt = '', squircle, ...props }) {
height={size}
alt={alt}
loading="lazy"
+ decoding="async"
crossOrigin={
alphaCache[url] === undefined && !isMissing
? 'anonymous'
@@ -54,17 +60,11 @@ function Avatar({ url, size, alt = '', squircle, ...props }) {
if (isMissing) return;
try {
// Check if image has alpha channel
- const canvas = document.createElement('canvas');
- const ctx = canvas.getContext('2d');
- canvas.width = e.target.width;
- canvas.height = e.target.height;
+ const { width, height } = e.target;
+ if (canvas.width !== width) canvas.width = width;
+ if (canvas.height !== height) canvas.height = height;
ctx.drawImage(e.target, 0, 0);
- const allPixels = ctx.getImageData(
- 0,
- 0,
- canvas.width,
- canvas.height,
- );
+ const allPixels = ctx.getImageData(0, 0, width, height);
// At least 10% of pixels have alpha <= 128
const hasAlpha =
allPixels.data.filter((pixel, i) => i % 4 === 3 && pixel <= 128)
@@ -76,6 +76,7 @@ function Avatar({ url, size, alt = '', squircle, ...props }) {
avatarRef.current.classList.add('has-alpha');
}
alphaCache[url] = hasAlpha;
+ ctx.clearRect(0, 0, width, height);
} catch (e) {
// Silent fail
alphaCache[url] = false;
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 4515b469..a1030959 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -1415,7 +1415,7 @@ function MediaAttachment({
const suffixType = type.split('/')[0];
const debouncedOnDescriptionChange = useDebouncedCallback(
onDescriptionChange,
- 500,
+ 250,
);
const [showModal, setShowModal] = useState(false);
diff --git a/src/components/emoji-text.jsx b/src/components/emoji-text.jsx
new file mode 100644
index 00000000..041f3c62
--- /dev/null
+++ b/src/components/emoji-text.jsx
@@ -0,0 +1,42 @@
+function EmojiText({ text, emojis }) {
+ if (!text) return '';
+ if (!emojis?.length) return text;
+ if (text.indexOf(':') === -1) return text;
+
+ const components = [];
+ let lastIndex = 0;
+
+ emojis.forEach((shortcodeObj) => {
+ const { shortcode, staticUrl, url } = shortcodeObj;
+ const regex = new RegExp(`:${shortcode}:`, 'g');
+ let match;
+
+ while ((match = regex.exec(text))) {
+ const beforeText = text.substring(lastIndex, match.index);
+ if (beforeText) {
+ components.push(beforeText);
+ }
+ components.push(
+ 
,
+ );
+ lastIndex = match.index + match[0].length;
+ }
+ });
+
+ const afterText = text.substring(lastIndex);
+ if (afterText) {
+ components.push(afterText);
+ }
+
+ return components;
+}
+
+export default EmojiText;
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index 8f569aa5..0c70fbbc 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -191,7 +191,7 @@ function MediaModal({
align="end"
position="anchor"
boundingBoxPadding="8 8 8 8"
- offsetY={4}
+ gap={4}
menuClassName="glass-menu"
menuButton={