New full screen chat WIP + code refactoring.

client/utils/colors.ts

@@ -0,0 +1,46 @@
+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').trim(),
+    mainBackground: styles.getPropertyValue('--mainBackgroundColor').trim(),
+    greyForeground: styles.getPropertyValue('--greyForegroundColor').trim(),
+    greyBackground: styles.getPropertyValue('--greyBackgroundColor').trim(),
+    menuForeground: styles.getPropertyValue('--menuForegroundColor').trim(),
+    menuBackground: styles.getPropertyValue('--menuBackgroundColor').trim(),
+    inputForeground: styles.getPropertyValue('--inputForegroundColor').trim(),
+    inputBackground: styles.getPropertyValue('--inputBackgroundColor').trim(),
+    buttonForeground: buttonStyles.color.trim(),
+    buttonBackground: styles.getPropertyValue('--mainColor').trim(),
+    link: styles.getPropertyValue('--mainForegroundColor').trim(),
+    linkHover: styles.getPropertyValue('--mainForegroundColor').trim()
+  }
+  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
+}

client/utils/conversejs.ts

@@ -1,4 +1,5 @@
 import type { InitConverseJSParams } from 'shared/lib/types'
+import { computeAutoColors } from './colors'
 
 // declare global {
 //   interface Window {
@@ -18,6 +19,11 @@ declare global {
   }
 }
 
+/**
+ * load the ConverseJS CSS.
+ * TODO: always load them using plugin's package.json?
+ * @param url CSS url
+ */
 async function loadCSS (url: string): Promise<void> {
   return new Promise((resolve, reject) => {
     const css = document.createElement('link')
@@ -30,6 +36,10 @@ async function loadCSS (url: string): Promise<void> {
   })
 }
 
+/**
+ * Loads a JS script.
+ * @param url script url
+ */
 async function loadScript (url: string): Promise<void> {
   return new Promise((resolve, reject) => {
     const script = document.createElement('script')
@@ -41,7 +51,49 @@ async function loadScript (url: string): Promise<void> {
   })
 }
 
+/**
+ * Initialize needed CSS vars to apply the current Peertube theme to the livechat.
+ */
+function loadColors (): void {
+  const colors = computeAutoColors()
+  if (!colors) {
+    return
+  }
+  const body = document.querySelector('body')
+  if (!body) {
+    return
+  }
+  body.style.setProperty('--peertube-main-foreground', colors.mainForeground)
+  body.style.setProperty('--peertube-main-background', colors.mainBackground)
+  body.style.setProperty('--peertube-grey-foreground', colors.greyForeground)
+  body.style.setProperty('--peertube-grey-background', colors.greyBackground)
+  body.style.setProperty('--peertube-menu-foreground', colors.menuForeground)
+  body.style.setProperty('--peertube-menu-background', colors.menuBackground)
+  body.style.setProperty('--peertube-input-foreground', colors.inputForeground)
+  body.style.setProperty('--peertube-input-background', colors.inputBackground)
+  body.style.setProperty('--peertube-button-foreground', colors.buttonForeground)
+  body.style.setProperty('--peertube-button-background', colors.buttonBackground)
+  body.style.setProperty('--peertube-link', colors.link)
+  body.style.setProperty('--peertube-link-hover', colors.linkHover)
+}
+
+/**
+ * Loads ConverseJS.
+ * ConverseJS is loaded asyncrhonously for several reasons:
+ * * to avoid loading big JS files each time you open Peertube
+ * * we need ConverseJS in serveral different scopes
+ *   ('common' for the full page and 'videowatch' when you view a video).
+ *   So we don't want to bundle ConverseJS with scoped JS files.
+ * * for now, we can't build ConverseJS without webpack
+ *   (esbuild does not provide same alias as webpack, to customize ConverseJS).
+ *
+ * Once loadConverseJS has resolved, you can call window.initConverse.
+ * @param converseJSParams Params to apply to ConverseJS
+ */
 async function loadConverseJS (converseJSParams: InitConverseJSParams): Promise<void> {
+  // always loading colors, even if already done: so it will update if the current theme is changed.
+  loadColors()
+
   if (!window.converse) {
     await Promise.all([
       loadCSS(converseJSParams.staticBaseUrl + 'conversejs/converse.min.css'),

client/utils/logger.ts

@@ -0,0 +1,10 @@
+const logger = {
+  log: (s: string) => console.log('[peertube-plugin-livechat] ' + s),
+  info: (s: string) => console.info('[peertube-plugin-livechat] ' + s),
+  error: (s: string) => console.error('[peertube-plugin-livechat] ' + s),
+  warn: (s: string) => console.warn('[peertube-plugin-livechat] ' + s)
+}
+
+export {
+  logger
+}