From e8e99c2646851bd0fc2d380e41b25bd1c9ac3e53 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 27 Apr 2020 19:35:38 +0200
Subject: [PATCH] Use color values for default avatar backgrounds

We still need to convert them to URLs for the notification icon,
so use a canvas (with a cache in front of it) to do that.
---
 res/img/03b381.png | Bin 169 -> 0 bytes
 res/img/368bd6.png | Bin 171 -> 0 bytes
 res/img/ac3ba8.png | Bin 170 -> 0 bytes
 src/Avatar.js      |  28 ++++++++++++++++++++++++++--
 4 files changed, 26 insertions(+), 2 deletions(-)
 delete mode 100644 res/img/03b381.png
 delete mode 100644 res/img/368bd6.png
 delete mode 100644 res/img/ac3ba8.png

diff --git a/res/img/03b381.png b/res/img/03b381.png
deleted file mode 100644
index cf28fc7e5972c64194cf0d3523f88ccc4029b0b5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 169
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEEa{HEjtmSN`?>!lvI6-Do-U3d
z5u9%?ZR9<mAi(0tGj+F`c!o;UjFyCx;Z?lf*S!CG{Ahk$&27uI%wOAud;(av<TrD!
zYWS9G;3#@wAFtX9rd!(&vV=PPHk+}4E8{+!a0uhu+X+ot3u>i7itjH<WokQPE+z-G
Oi^0>?&t;ucLK6VpHaVC8

diff --git a/res/img/368bd6.png b/res/img/368bd6.png
deleted file mode 100644
index a2700bd0aefa3f3240ba4bae80953d9968bd78e4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 171
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEEa{HEjtmSN`?>!lvI6-@o-U3d
z5u9%?ZR9<mAi(126KL}C-<`gR8Hqwos_`#P?`*#JUS52E<;UFTTllWXdl@*2Uf9R0
zwu0%__Jb^;4!_N2Ea1wx&n6tg`1W=}lh%S-X`cYrE&0uys~W!Lf)v*=3raFQ+r9Z>
Q8PGNcPgg&ebxsLQ0Ia4vrT_o{

diff --git a/res/img/ac3ba8.png b/res/img/ac3ba8.png
deleted file mode 100644
index 031471d85a1d9cf5ab90194d788c26a1b90f8de7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 170
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEEa{HEjtmSN`?>!lvI6;uo-U3d
z5u9%?ZR9<mAi(126K(S5fUQ)gn3`h5r>Sv=ZSPn8FZ?)L{C=6=YlpuJS%gCv-`-AW
z(ppd}?GwPdCBK<-Rl~Pj14q#d`*_t>Fx}dIkR{aNx7myZTp9P-K#I*h>X_~YE;#!f
PXc>d2tDnm{r-UW|94|Wi

diff --git a/src/Avatar.js b/src/Avatar.js
index 217b196348..52bdbc1a50 100644
--- a/src/Avatar.js
+++ b/src/Avatar.js
@@ -53,13 +53,37 @@ export function avatarUrlForUser(user, width, height, resizeMethod) {
     return url;
 }
 
+function urlForColor(color) {
+    const size = 40;
+    const canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, size, size);
+    return canvas.toDataURL();
+}
+
+// XXX: Ideally we'd clear this cache when the theme changes
+// but since this function is at global scope, it's a bit
+// hard to install a listener here, even if there were a clear event to listen to
+const colorToDataURLCache = new Map();
+
 export function defaultAvatarUrlForString(s) {
-    const images = ['03b381', '368bd6', 'ac3ba8'];
+    const defaultColors = ['#03b381', '#368bd6', '#ac3ba8'];
     let total = 0;
     for (let i = 0; i < s.length; ++i) {
         total += s.charCodeAt(i);
     }
-    return require('../res/img/' + images[total % images.length] + '.png');
+    const colorIndex = total % defaultColors.length;
+    // overwritten color value in custom themes
+    const color = defaultColors[colorIndex];
+    let dataUrl = colorToDataURLCache.get(color);
+    if (!dataUrl) {
+        dataUrl = urlForColor(color);
+        colorToDataURLCache.set(color, dataUrl);
+    }
+    return dataUrl;
 }
 
 /**