Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-10 13:37:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add text color based off luminance for full video label

Browse Source
This commit is contained in:
Ajay
2022-02-05 22:23:11 -05:00
parent 0ac4ef7a4b
commit e8307a2af7
3 changed files with 55 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/CategoryPillComponent.tsx
View File

@@ -35,8 +35,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
const style: React.CSSProperties = {
backgroundColor: this.getColor(),
display: this.state.show ? "flex" : "none",
color: this.state.segment?.category === "sponsor"
|| this.state.segment?.category === "exclusive_access" ? "white" : "black",
color: this.getTextColor(),
}
return (
@@ -116,6 +115,26 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
return configObject?.color;
}
private getTextColor(): string {
const color = this.getColor();
if (!color) return null;
const existingCalculatedColor = Config.config.categoryPillColors[this.state.segment?.category];
if (existingCalculatedColor && existingCalculatedColor.lastColor === color) {
return existingCalculatedColor.textColor;
} else {
const luminance = GenericUtils.getLuminance(color);
console.log(luminance)
const textColor = luminance > 128 ? "black" : "white";
Config.config.categoryPillColors[this.state.segment?.category] = {
lastColor: color,
textColor
};
return textColor;
}
}
getTitleText(): string {
const shortDescription = chrome.i18n.getMessage(`category_${this.state.segment?.category}_pill`);
return (shortDescription ? shortDescription + ". ": "") + chrome.i18n.getMessage("categoryPillTitleText");