mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-09-20 13:03:45 +02:00
Add text color based off luminance for full video label
This commit is contained in:
parent
0ac4ef7a4b
commit
e8307a2af7
3 changed files with 55 additions and 3 deletions
|
@ -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");
|
||||
|
|
|
@ -54,6 +54,14 @@ interface SBConfig {
|
|||
categoryPillUpdate: boolean,
|
||||
darkMode: boolean,
|
||||
|
||||
// Used to cache calculated text color info
|
||||
categoryPillColors: {
|
||||
[key in Category]: {
|
||||
lastColor: string,
|
||||
textColor: string
|
||||
}
|
||||
}
|
||||
|
||||
skipKeybind: Keybind,
|
||||
startSponsorKeybind: Keybind,
|
||||
submitKeybind: Keybind,
|
||||
|
@ -210,6 +218,8 @@ const Config: SBObject = {
|
|||
categoryPillUpdate: false,
|
||||
darkMode: true,
|
||||
|
||||
categoryPillColors: {},
|
||||
|
||||
/**
|
||||
* Default keybinds should not set "code" as that's gonna be different based on the user's locale. They should also only use EITHER ctrl OR alt modifiers (or none).
|
||||
* Using ctrl+alt, or shift may produce a different character that we will not be able to recognize in different locales.
|
||||
|
|
|
@ -44,7 +44,30 @@ function getErrorMessage(statusCode: number, responseText: string): string {
|
|||
return errorMessage + postFix;
|
||||
}
|
||||
|
||||
/* Gets percieved luminance of a color */
|
||||
function getLuminance(color: string): number {
|
||||
const {r, g, b} = hexToRgb(color);
|
||||
return Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
|
||||
}
|
||||
|
||||
/* From https://stackoverflow.com/a/5624139 */
|
||||
function hexToRgb(hex: string): {r: number, g: number, b: number} {
|
||||
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
|
||||
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
|
||||
return r + r + g + g + b + b;
|
||||
});
|
||||
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
export const GenericUtils = {
|
||||
wait,
|
||||
getErrorMessage
|
||||
getErrorMessage,
|
||||
getLuminance
|
||||
}
|
Loading…
Reference in a new issue