matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplier colors detection (using css vars).

Browse Source
This commit is contained in:
John Livingston 2021-11-22 13:30:55 +01:00
parent 8999133dcc
commit ede36695cd
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
2 changed files with 15 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
client/videowatch-client-plugin.ts
View File

@ -86,44 +86,22 @@ function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
logger.warn('[AutoColors] getComputedStyle is not available, aborting.') logger.warn('[AutoColors] getComputedStyle is not available, aborting.')
return null return null
} }
// Searching for one of these button:
const button = document.querySelector('.publish-button, .peertube-button-link')
if (!button) {
logger.warn('[AutoColors] Cant find a button, aborting.')
return null
}
const buttonStyles = window.getComputedStyle(button)
logger.info('[AutoColors] found button styles')
const main = document.querySelector('#content') const styles = window.getComputedStyle(document.body)
if (!main) {
logger.warn('[AutoColors] Cant find main, aborting.')
return null
}
const mainStyles = window.getComputedStyle(main)
logger.info('[AutoColors] found main styles')
const menu = document.querySelector('.menu-link')
if (!menu) {
logger.warn('[AutoColors] Cant find menu, aborting.')
return null
}
const menuStyles = window.getComputedStyle(menu)
logger.info('[AutoColors] found menu styles')
const autocolors: AutoColors = { const autocolors: AutoColors = {
mainForeground: mainStyles.color, mainForeground: styles.getPropertyValue('--mainColor'),
mainBackground: mainStyles.backgroundColor, mainBackground: styles.getPropertyValue('--mainBackgroundColor'),
greyForeground: '#000', greyForeground: styles.getPropertyValue('--greyForegroundColor'),
greyBackground: '#000', greyBackground: styles.getPropertyValue('--greyBackgroundColor'),
menuForeground: menuStyles.color, menuForeground: styles.getPropertyValue('--menuForegroundColor'),
menuBackground: menuStyles.backgroundColor, menuBackground: styles.getPropertyValue('--menuBackgroundColor'),
inputForeground: '#000', inputForeground: styles.getPropertyValue('--inputForegroundColor'),
inputBackground: '#000', inputBackground: styles.getPropertyValue('--inputBackgroundColor'),
buttonForeground: buttonStyles.color, buttonForeground: styles.getPropertyValue('--mainColor'),
buttonBackground: buttonStyles.backgroundColor, buttonBackground: styles.getPropertyValue('--mainBackgroundColor'),
link: '#000', link: styles.getPropertyValue('--mainForegroundColor'),
linkHover: '#000' linkHover: styles.getPropertyValue('--mainForegroundColor')
} }
const autoColorsTest = areAutoColorsValid(autocolors) const autoColorsTest = areAutoColorsValid(autocolors)
if (autoColorsTest !== true) { if (autoColorsTest !== true) {

3
shared/lib/autocolors.ts
View File

@ -41,7 +41,8 @@ function areAutoColorsValid (autocolors: AutoColors): true | string[] {
if ( if (
!/^rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\)$/.test(color) && !/^rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\)$/.test(color) &&
!/^rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*(1|0|0?.\d+)\)$/.test(color) && !/^rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*(1|0|0?.\d+)\)$/.test(color) &&
!/^#[0-9a-fA-F]{3,6}$/.test(color) !/^#[0-9a-fA-F]{3,6}$/.test(color) &&
!/^[a-z]+$/
) { ) {
errors.push(color) errors.push(color)
} }