More fixes and adjustments for the avatars

src/components/account-info.css

@@ -62,20 +62,24 @@
   text-shadow: -8px 0 12px -6px var(--bg-color), 8px 0 12px -6px var(--bg-color),
     -8px 0 24px var(--header-color-3, --bg-color),
     8px 0 24px var(--header-color-4, --bg-color);
-  animation: fade-in 0.5s both ease-in-out 0.1s;
+  animation: fade-in 0.3s both ease-in-out 0.1s;
 }
 .account-container header .avatar {
   /* box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
     8px 0 24px var(--header-color-4, --bg-color); */
-  filter: drop-shadow(-8px 0 24px var(--header-color-3, --bg-color))
+  overflow: initial;
-    drop-shadow(8px 0 24px var(--header-color-4, --bg-color));
+  filter: drop-shadow(-2px 0 4px var(--header-color-3, --bg-color))
+    drop-shadow(2px 0 4px var(--header-color-4, --bg-color));
+}
+.account-container header .avatar:not(.has-alpha) img {
+  border-radius: 50%;
 }
 
 .account-container main > *:first-child {
-  animation: fade-in 0.5s both ease-in-out 0.2s;
+  animation: fade-in 0.3s both ease-in-out 0.15s;
 }
 .account-container main > *:first-child ~ * {
-  animation: fade-in 0.5s both ease-in-out 0.3s;
+  animation: fade-in 0.3s both ease-in-out 0.2s;
 }
 
 .account-container .note {
@@ -165,10 +169,14 @@
 }
 .timeline-start .account-container header {
   padding: 16px 16px 1px;
+  animation: none;
 }
 .timeline-start .account-container main {
   padding: 1px 16px 1px;
 }
+.timeline-start .account-container main > * {
+  animation: none;
+}
 .timeline-start .account-container .account-block .account-block-acct {
   opacity: 0.5;
 }
@@ -245,5 +253,7 @@
   .timeline-start .account-container header .account-block .avatar {
     width: 112px !important;
     height: 112px !important;
+    filter: drop-shadow(-8px 0 8px var(--header-color-3, --bg-color))
+      drop-shadow(8px 0 8px var(--header-color-4, --bg-color));
   }
 }

src/components/account-info.jsx

@@ -529,14 +529,13 @@ function RelatedActions({ info, instance, authenticated }) {
 function lightenRGB([r, g, b]) {
   const luminence = 0.2126 * r + 0.7152 * g + 0.0722 * b;
   console.log('luminence', luminence);
-  // Follow this range
-  // luminence = 0, alpha = 0.01
-  // luminence = 220, alpha = 1
   let alpha;
   if (luminence >= 220) {
     alpha = 1;
+  } else if (luminence <= 50) {
+    alpha = 0.1;
   } else {
-    alpha = (luminence / 255) * 0.99 + 0.01;
+    alpha = luminence / 255;
   }
   alpha = Math.min(1, alpha);
   return [r, g, b, alpha];

src/components/avatar.css

@@ -9,6 +9,9 @@
   flex-shrink: 0;
   vertical-align: middle;
 }
+.avatar.has-alpha {
+  border-radius: 0;
+}
 
 .avatar img {
   width: 100%;
@@ -17,8 +20,8 @@
   background-color: var(--img-bg-color);
 }
 
-.avatar.loaded,
+.avatar[data-loaded],
-.avatar.loaded img {
+.avatar[data-loaded] img {
   box-shadow: none;
   background-color: transparent;
 }

src/components/avatar.jsx

@@ -11,13 +11,15 @@ const SIZES = {
   xxxl: 64,
 };
 
+const alphaCache = {};
+
 function Avatar({ url, size, alt = '', ...props }) {
   size = SIZES[size] || size || SIZES.m;
   const avatarRef = useRef();
   return (
     <span
       ref={avatarRef}
-      class="avatar"
+      class={`avatar ${alphaCache[url] ? 'has-alpha' : ''}`}
       style={{
         width: size,
         height: size,
@@ -32,8 +34,36 @@ function Avatar({ url, size, alt = '', ...props }) {
           height={size}
           alt={alt}
           loading="lazy"
+          crossOrigin={alphaCache[url] === undefined ? 'anonymous' : undefined}
+          onError={(e) => {
+            e.target.crossOrigin = null;
+            e.target.src = url;
+          }}
           onLoad={(e) => {
-            avatarRef.current.classList.add('loaded');
+            avatarRef.current.dataset.loaded = true;
+            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;
+              ctx.drawImage(e.target, 0, 0);
+              const allPixels = ctx.getImageData(
+                0,
+                0,
+                canvas.width,
+                canvas.height,
+              );
+              const hasAlpha = allPixels.data.some((pixel, i) => {
+                return i % 4 === 3 && pixel !== 255;
+              });
+              if (hasAlpha) {
+                avatarRef.current.classList.add('has-alpha');
+                alphaCache[url] = true;
+              }
+            } catch (e) {
+              // Ignore
+            }
           }}
         />
       )}