peertube-plugin-livechat/client/videowatch/colors.ts
2021-12-14 15:54:36 +01:00

47 lines
1.8 KiB
TypeScript

import { logger } from './logger'
import { AutoColors, areAutoColorsValid } from 'shared/lib/autocolors'
function computeAutoColors (): AutoColors | null {
if (!window.getComputedStyle) {
logger.warn('[AutoColors] getComputedStyle is not available, aborting.')
return null
}
const styles = window.getComputedStyle(document.body)
// Peertube has no CSS variable for the button color...
// Computing by hand.
// Searching for one of these button:
const button = document.querySelector('.publish-button') ?? document.querySelector('.peertube-button-link')
if (!button) {
logger.warn('[AutoColors] Cant find a button, aborting.')
return null
}
const buttonStyles = window.getComputedStyle(button)
const autocolors: AutoColors = {
mainForeground: styles.getPropertyValue('--mainForegroundColor'),
mainBackground: styles.getPropertyValue('--mainBackgroundColor'),
greyForeground: styles.getPropertyValue('--greyForegroundColor'),
greyBackground: styles.getPropertyValue('--greyBackgroundColor'),
menuForeground: styles.getPropertyValue('--menuForegroundColor'),
menuBackground: styles.getPropertyValue('--menuBackgroundColor'),
inputForeground: styles.getPropertyValue('--inputForegroundColor'),
inputBackground: styles.getPropertyValue('--inputBackgroundColor'),
buttonForeground: buttonStyles.color,
buttonBackground: styles.getPropertyValue('--mainColor'),
link: styles.getPropertyValue('--mainForegroundColor'),
linkHover: styles.getPropertyValue('--mainForegroundColor')
}
const autoColorsTest = areAutoColorsValid(autocolors)
if (autoColorsTest !== true) {
logger.warn('[AutoColors] Computed colors are not valid, dropping. Invalid values: ' + autoColorsTest.join(', '))
return null
}
return autocolors
}
export {
computeAutoColors
}