@@ -105,9 +105,11 @@ export default {
105105 };
106106 },
107107 mounted () {
108+ console .log (" !!! Participant mounted" );
108109 this .updateFontColor ();
109110 },
110111 updated () {
112+ console .log (" !!! Participant updated" );
111113 this .updateFontColor ();
112114 },
113115 computed: {
@@ -134,13 +136,7 @@ export default {
134136 if (! this .entity .color ) {
135137 return undefined ;
136138 }
137- // TODO: review this decision later; tinycolor2 should be considered as recommended by openai
138- // Remove alpha for such a case:
139- // 1. Background color for parent has low brightness (e.g. #000)
140- // 2. Alpha is low (e.g. 0.1)
141- // 3. Entity background has high brightness (e.g. #fff)
142- // If we do not remove alpha, the computed background color will be bright while the perceived brightness is low.
143- // This will cause issue when calculating font color.
139+ // removing alpha is a compromise to simplify the logic of determining the background color and font color
144140 return this .entity .color && removeAlpha (this .entity .color );
145141 } catch (e) {
146142 return undefined ;
@@ -152,15 +148,16 @@ export default {
152148 this .$store .commit (" onSelect" , this .entity .name );
153149 },
154150 updateFontColor () {
155- // Returning `undefined` so that background-color is not set at all in the style attribute
156151 if (! this .backgroundColor ) {
157- return undefined ;
152+ this .color = " inherit" ;
153+ return ;
158154 }
159155 let bgColor = window
160156 .getComputedStyle (this .$refs .participant )
161157 .getPropertyValue (" background-color" );
162158 if (! bgColor) {
163- return undefined ;
159+ this .color = " inherit" ;
160+ return ;
164161 }
165162 let b = brightnessIgnoreAlpha (bgColor);
166163 this .color = b > 128 ? " #000" : " #fff" ;
0 commit comments