-
- Unable to load account.
-
- {isString ? (
+ <>
+
+ {uiState === 'error' && (
+
- )}
- {uiState === 'loading' ? (
- <>
-
-
-
-
███████ ████ ████
-
████ ████████ ██████ █████████ ████ ██
-
-
-
-
-
-
-
-
-
-
-
- >
- ) : (
- info && (
- <>
- {!!moved && (
-
-
-
- {displayName} has indicated that their new account is
- now:
-
-
-
{
- e.stopPropagation();
- states.showAccount = moved;
- }}
- />
-
+
)}
- {!!header && !/missing\.png$/.test(header) && (
- {
- if (e.target.crossOrigin) {
- if (e.target.src !== headerStatic) {
+
+ )}
+ {uiState === 'loading' ? (
+ <>
+
+
+
+
███████ ████ ████
+
████ ████████ ██████ █████████ ████ ██
+
+
+
+
+
+
+
+
+
+
+
+ >
+ ) : (
+ info && (
+ <>
+ {!!moved && (
+
+
+
+ {displayName} has indicated that their new account
+ is now:
+
+
+
{
+ e.stopPropagation();
+ states.showAccount = moved;
+ }}
+ />
+
+ )}
+ {!!header && !/missing\.png$/.test(header) && (
+ {
+ if (e.target.crossOrigin) {
+ if (e.target.src !== headerStatic) {
+ e.target.src = headerStatic;
+ } else {
+ e.target.removeAttribute('crossorigin');
+ e.target.src = header;
+ }
+ } else if (e.target.src !== headerStatic) {
e.target.src = headerStatic;
} else {
- e.target.removeAttribute('crossorigin');
- e.target.src = header;
+ e.target.remove();
}
- } else if (e.target.src !== headerStatic) {
- e.target.src = headerStatic;
- } else {
- e.target.remove();
- }
- }}
- crossOrigin="anonymous"
- onLoad={(e) => {
- e.target.classList.add('loaded');
- try {
- // Get color from four corners of image
- const canvas = window.OffscreenCanvas
- ? new OffscreenCanvas(1, 1)
- : document.createElement('canvas');
- const ctx = canvas.getContext('2d', {
- willReadFrequently: true,
- });
- canvas.width = e.target.width;
- canvas.height = e.target.height;
- ctx.imageSmoothingEnabled = false;
- ctx.drawImage(e.target, 0, 0);
- // const colors = [
- // ctx.getImageData(0, 0, 1, 1).data,
- // ctx.getImageData(e.target.width - 1, 0, 1, 1).data,
- // ctx.getImageData(0, e.target.height - 1, 1, 1).data,
- // ctx.getImageData(
- // e.target.width - 1,
- // e.target.height - 1,
- // 1,
- // 1,
- // ).data,
- // ];
- // Get 10x10 pixels from corners, get average color from each
- const pixelDimension = 10;
- const colors = [
- ctx.getImageData(0, 0, pixelDimension, pixelDimension)
- .data,
- ctx.getImageData(
- e.target.width - pixelDimension,
- 0,
- pixelDimension,
- pixelDimension,
- ).data,
- ctx.getImageData(
- 0,
- e.target.height - pixelDimension,
- pixelDimension,
- pixelDimension,
- ).data,
- ctx.getImageData(
- e.target.width - pixelDimension,
- e.target.height - pixelDimension,
- pixelDimension,
- pixelDimension,
- ).data,
- ].map((data) => {
- let r = 0;
- let g = 0;
- let b = 0;
- let a = 0;
- for (let i = 0; i < data.length; i += 4) {
- r += data[i];
- g += data[i + 1];
- b += data[i + 2];
- a += data[i + 3];
- }
- const dataLength = data.length / 4;
- return [
- r / dataLength,
- g / dataLength,
- b / dataLength,
- a / dataLength,
- ];
- });
- const rgbColors = colors.map((color) => {
- const [r, g, b, a] = lightenRGB(color);
- return `rgba(${r}, ${g}, ${b}, ${a})`;
- });
- setHeaderCornerColors(rgbColors);
- console.log({ colors, rgbColors });
- } catch (e) {
- // Silently fail
- }
- }}
- />
- )}
-
- {standalone ? (
-
- {}}
- />
-