Define color text by brightness

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>
This commit is contained in:
Gregoire Parant 2022-02-21 01:09:53 +01:00
parent 070ad6b993
commit 0943ec8991
5 changed files with 32 additions and 9 deletions

View File

@ -326,8 +326,6 @@
}
&.jitsi {
filter: invert(100%);
-webkit-filter: invert(100%);
padding: 7px;
}
}
@ -343,15 +341,18 @@
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.6);
top: -30px;
top: -40px;
left: -4px;
width: 0 !important;
min-height: 20px;
transition: all 0.2s ease;
overflow: hidden;
color: white;
padding: 2px;
padding: 4px;
border-radius: 4px;
p {
margin-bottom: 0;
}
}
}
</style>

View File

@ -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

View File

@ -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={""} />

View File

@ -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 {

View File

@ -95,7 +95,7 @@ export abstract class Character extends Container implements OutlineableInterfac
fontFamily: '"Press Start 2P"',
fontSize: "8px",
strokeThickness: 2,
stroke: "black",
stroke: "#14304C",
metrics: {
ascent: 20,
descent: 10,