ConverseJS: theme settings.

client/admin-plugin-client-plugin.ts

@@ -221,6 +221,12 @@ function register ({ registerHook, registerSettingsScript, peertubeHelpers }: Re
         case 'chat-ws-uri':
         case 'chat-type-help-builtin-converse':
           return options.formValues['chat-type'] !== ('builtin-converse' as ChatType)
+        case 'converse-advanced':
+        case 'converse-theme':
+          return !(
+            options.formValues['chat-type'] === ('builtin-converse' as ChatType) ||
+            options.formValues['chat-type'] === ('builtin-prosody' as ChatType)
+          )
         case 'chat-uri':
         case 'chat-type-help-external-uri':
           return options.formValues['chat-type'] !== ('external-uri' as ChatType)

conversejs/builtin.ts

@@ -79,6 +79,7 @@ interface InitConverseParams {
   websocketServiceUrl: string
   authenticationUrl: string
   advancedControls: 'true' | 'false'
+  theme: string
 }
 window.initConverse = async function initConverse ({
   jid,
@@ -87,7 +88,8 @@ window.initConverse = async function initConverse ({
   boshServiceUrl,
   websocketServiceUrl,
   authenticationUrl,
-  advancedControls
+  advancedControls,
+  theme
 }: InitConverseParams) {
   const isInIframe = inIframe()
 
@@ -135,7 +137,7 @@ window.initConverse = async function initConverse ({
       emoji: true,
       toggle_occupants: true
     },
-    theme: 'peertube',
+    theme: theme || 'peertube',
     persistent_store: 'sessionStorage'
   }
 

conversejs/index.html

@@ -20,7 +20,8 @@
     boshServiceUrl: '{{BOSH_SERVICE_URL}}',
     websocketServiceUrl: '{{WS_SERVICE_URL}}',
     authenticationUrl: '{{AUTHENTICATION_URL}}',
-    advancedControls: '{{ADVANCEDCONTROLS}}'
+    advancedControls: '{{ADVANCEDCONTROLS}}',
+    theme: '{{CONVERSEJS_THEME}}'
   })
 </script>
 </body>

documentation/common.md

@@ -45,3 +45,16 @@ You can add some custom styles that will be added to the iframe.
 For example a custom width:
 
 ```width:400px;```
+
+### ConverseJS advanced settings
+
+These settings are available if you are in mode «Prosody server controlled by Peertube»
+or «Connect to an existing XMPP server with ConverseJS».
+
+#### ConverseJS theme
+
+You can choose which theme to use for ConverseJS:
+
+- Peertube theme: this is a special theme, made especially for peertube's integration.
+- Default ConverseJS theme: this is the default ConverseJS theme.
+- ConverseJS concord theme: this is a theme provided by ConverseJS.

server/lib/routers/webchat.ts

@@ -1,6 +1,8 @@
 import type { Router, RequestHandler, Request, Response, NextFunction } from 'express'
 import type { ProxyOptions } from 'express-http-proxy'
-import type { ChatType, ProsodyListRoomsResult, ProsodyListRoomsResultRoom } from '../../../shared/lib/types'
+import type {
+  ChatType, ProsodyListRoomsResult, ProsodyListRoomsResultRoom
+} from '../../../shared/lib/types'
 import { getBaseRouterRoute, getBaseStaticRoute, isUserAdmin } from '../helpers'
 import { asyncMiddleware } from '../middlewares/async'
 import { getProsodyDomain } from '../prosody/config/domain'
@@ -39,7 +41,8 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
       const settings = await settingsManager.getSettings([
         'chat-type', 'chat-room', 'chat-server',
         'chat-bosh-uri', 'chat-ws-uri',
-        'prosody-room-type'
+        'prosody-room-type',
+        'converse-theme'
       ])
       const chatType: ChatType = (settings['chat-type'] ?? 'disabled') as ChatType
 
@@ -49,6 +52,10 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
       let wsUri: string
       let authenticationUrl: string = ''
       let advancedControls: boolean = false
+      let converseJSTheme: string = settings['converse-theme'] as string
+      if (!/^\w+$/.test(converseJSTheme)) {
+        converseJSTheme = 'peertube'
+      }
       if (chatType === 'builtin-prosody') {
         const prosodyDomain = await getProsodyDomain(options)
         jid = 'anon.' + prosodyDomain
@@ -148,6 +155,7 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
       page = page.replace(/{{WS_SERVICE_URL}}/g, wsUri)
       page = page.replace(/{{AUTHENTICATION_URL}}/g, authenticationUrl)
       page = page.replace(/{{ADVANCEDCONTROLS}}/g, advancedControls ? 'true' : 'false')
+      page = page.replace(/{{CONVERSEJS_THEME}}/g, converseJSTheme)
 
       res.status(200)
       res.type('html')

server/lib/settings.ts

@@ -1,5 +1,5 @@
 import { ensureProsodyRunning, ensureProsodyNotRunning } from './prosody/ctl'
-import type { ChatType } from '../../shared/lib/types'
+import type { ChatType, ConverseJSTheme } from '../../shared/lib/types'
 
 function initSettings (options: RegisterServerOptions): void {
   const { peertubeHelpers, registerSetting, settingsManager } = options
@@ -269,6 +269,28 @@ Example: height:400px;`,
     private: false
   })
 
+  // ********** ConverseJS advanced settings
+  registerSetting({
+    name: 'converse-advanced',
+    type: 'html',
+    private: true,
+    descriptionHTML: '<h3>ConverseJS advanced settings</h3>'
+  })
+
+  registerSetting({
+    name: 'converse-theme',
+    label: 'ConverseJS theme',
+    type: 'select',
+    default: 'peertube' as ConverseJSTheme,
+    private: true,
+    options: [
+      { value: 'peertube', label: 'Peertube theme' },
+      { value: 'default', label: 'Default ConverseJS theme' },
+      { value: 'concord', label: 'ConverseJS concord theme' }
+    ] as Array<{value: ConverseJSTheme, label: string}>,
+    descriptionHTML: 'Please choose the converseJS theme you want to use.'
+  })
+
   // ********** Built-in Prosody advanced settings
   registerSetting({
     name: 'prosody-advanced',

shared/lib/types.ts

@@ -1,4 +1,5 @@
 type ChatType = 'disabled' | 'builtin-prosody' | 'builtin-converse' | 'external-uri'
+type ConverseJSTheme = 'peertube' | 'default' | 'concord'
 
 interface ProsodyListRoomsResultError {
   ok: false
@@ -28,6 +29,7 @@ type ProsodyListRoomsResult = ProsodyListRoomsResultError | ProsodyListRoomsResu
 
 export {
   ChatType,
+  ConverseJSTheme,
   ProsodyListRoomsResult,
   ProsodyListRoomsResultRoom
 }