Define color text by brightness

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>

front/src/Components/Video/ScreenSharingMediaBox.svelte

@@ -4,13 +4,15 @@
     import type { Streamable } from "../../Stores/StreamableCollectionStore";
 
     import type { ScreenSharingPeer } from "../../WebRtc/ScreenSharingPeer";
-    import { getColorByString, srcObject } from "./utils";
+    import { getColorByString, srcObject, getTextColorByBackgroundColor } from "./utils";
 
     export let clickable = false;
 
     export let peer: ScreenSharingPeer;
     let streamStore = peer.streamStore;
     let name = peer.userName;
+    let backGroundColor = getColorByString(peer.userName);
+    let textColor = getTextColorByBackgroundColor(backGroundColor);
     let statusStore = peer.statusStore;
 
     let embedScreen: EmbedScreen;
@@ -32,7 +34,7 @@
     {/if}
     {#if $streamStore !== null}
         <i class="container">
-            <span style="background-color: {getColorByString(name)};">{name}</span>
+            <span style="background-color: {backGroundColor}; color: {textColor};">{name}</span>
         </i>
         <!-- svelte-ignore a11y-media-has-caption -->
         <video

front/src/Components/Video/VideoMediaBox.svelte

@@ -5,7 +5,7 @@
     import reportImg from "./images/report.svg";
     import blockSignImg from "./images/blockSign.svg";
     import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
-    import { getColorByString, srcObject } from "./utils";
+    import { getColorByString, getTextColorByBackgroundColor, srcObject } from "./utils";
     import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
     import type { EmbedScreen } from "../../Stores/EmbedScreensStore";
     import type { Streamable } from "../../Stores/StreamableCollectionStore";
@@ -19,6 +19,8 @@
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
     let name = peer.userName;
+    let backGroundColor = getColorByString(peer.userName);
+    let textColor = getTextColorByBackgroundColor(backGroundColor);
     let statusStore = peer.statusStore;
     let constraintStore = peer.constraintsStore;
 
@@ -64,7 +66,7 @@
     {/if}
     <!-- {#if !$constraintStore || $constraintStore.video === false} -->
     <i class="container">
-        <span style="background-color: {getColorByString(name)};">{name}</span>
+        <span style="background-color: {backGroundColor}; color: {textColor};">{name}</span>
     </i>
     <div class="woka-icon {($constraintStore && $constraintStore.video !== false) || minimized ? '' : 'no-video'}">
         <Woka userId={peer.userId} placeholderSrc={""} />

front/src/Components/Video/utils.ts

@@ -18,6 +18,24 @@ export function getColorByString(str: string): string | null {
     return color;
 }
 
+/**
+ * @param color: string
+ * @return string
+ */
+export function getTextColorByBackgroundColor(color: string | null): string {
+    if (!color) {
+        return "white";
+    }
+    const rgb = color.slice(1);
+    const brightness = Math.round(
+        (parseInt(rgb[0] + rgb[1], 16) * 299 +
+            parseInt(rgb[2] + rgb[3], 16) * 587 +
+            parseInt(rgb[4] + rgb[5], 16) * 114) /
+            1000
+    );
+    return brightness > 125 ? "black" : "white";
+}
+
 export function srcObject(node: HTMLVideoElement, stream: MediaStream | null) {
     node.srcObject = stream;
     return {