New full screen chat WIP + code refactoring.

CHANGELOG.md

@@ -9,6 +9,10 @@ TODO: replace commit_id by a tag in build-conversejs
 * #143: User colors: implementing [XEP-0392](https://xmpp.org/extensions/xep-0392.html) to have random colors on users nicknames
 * Fullscreen chat: now uses a custom page (in other words: when opening the chat in a new tab, you will have the Peertube menu).
 
+### Minor changes and fixes
+
+* Some code refactoring.
+
 ## 8.4.0
 
 * Fix #87: updating chat room title when video/channel title is changed.

assets/styles/style.scss

@@ -169,11 +169,3 @@ table.peertube-plugin-livechat-prosody-list-rooms td {
     min-height: 60px;
   }
 }
-
-.livechat-embed-fullpage {
-  converse-root {
-    display: block;
-    height: 90vh;
-    min-height: 400px;
-  }
-}

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/videowatch-client-plugin.ts

@@ -2,7 +2,7 @@ import type { Video } from '@peertube/peertube-types'
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { videoHasWebchat, videoHasRemoteWebchat } from 'shared/lib/video'
 import { localizedHelpUrl } from './utils/help'
-import { logger } from './videowatch/logger'
+import { logger } from './utils/logger'
 import { closeSVG, openBlankChatSVG, openChatSVG, shareChatUrlSVG, helpButtonSVG } from './videowatch/buttons'
 import { displayButton, displayButtonOptions } from './videowatch/button'
 import { shareChatUrl } from './videowatch/share'

client/videowatch/button.ts

@@ -1,5 +1,5 @@
 import type { SVGButton } from './buttons'
-import { logger } from './logger'
+import { logger } from '../utils/logger'
 
 interface displayButtonOptionsBase {
   buttonContainer: HTMLElement

client/videowatch/share.ts

@@ -1,7 +1,7 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import type { Video } from '@peertube/peertube-types'
 import { helpButtonSVG } from './buttons'
-import { logger } from './logger'
+import { logger } from '../utils/logger'
 import { getIframeUri, getXMPPAddr, UriOptions } from './uri'
 import { isAutoColorsAvailable } from 'shared/lib/autocolors'
 import { localizedHelpUrl } from '../utils/help'

client/videowatch/uri.ts

@@ -2,8 +2,8 @@ import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import type { Video } from '@peertube/peertube-types'
 import { AutoColors, isAutoColorsAvailable } from 'shared/lib/autocolors'
 import { getBaseRoute } from '../utils/uri'
-import { logger } from './logger'
-import { computeAutoColors } from './colors'
+import { logger } from '../utils/logger'
+import { computeAutoColors } from '../utils/colors'
 
 interface UriOptions {
   readonly?: boolean | 'noscroll'

conversejs/custom/shared/styles/_variables.scss

@@ -1,4 +1,5 @@
-:root {
+body.converse-fullscreen,
+body.converse-embedded {
   --peertube-main-foreground: #000;
   --peertube-main-background: #fff;
   --peertube-grey-foreground: #585858;
@@ -16,10 +17,20 @@
   --livechat-transparent: rgba(0 0 0 / 0%);
 }
 
+/* Chat embedded in a full client page. */
+.livechat-embed-fullpage {
+  converse-root {
+    display: block;
+    height: 90vh;
+    min-height: 400px;
+  }
+}
+
 .conversejs.theme-peertube,
 .conversejs-bg.theme-peertube,
 #conversejs-bg.theme-peertube,
-body.converse-fullscreen.theme-peertube {
+body.converse-fullscreen.theme-peertube,
+body.converse-embedded converse-root.theme-peertube {
   --foreground: var(--peertube-main-foreground);
   --background: var(--peertube-main-background);
   --subdued-color: #a8aba1;