Code refactoring WIP:

Cleaning the way ConverseJS parameters are given to the full page.

conversejs/builtin.ts

@@ -1,4 +1,4 @@
-import type { InitConverseParams } from './lib/types'
+import type { InitConverseJSParams } from 'shared/lib/types'
 import { inIframe } from './lib/utils'
 import { initDom } from './lib/dom'
 import {
@@ -19,11 +19,11 @@ declare global {
         add: (name: string, plugin: any) => void
       }
     }
-    initConverse: (args: InitConverseParams) => Promise<void>
+    initConverse: (args: InitConverseJSParams) => Promise<void>
   }
 }
 
-window.initConverse = async function initConverse (initConverseParams: InitConverseParams): Promise<void> {
+window.initConverse = async function initConverse (initConverseParams: InitConverseJSParams): Promise<void> {
   // First, fixing relative websocket urls.
   if (initConverseParams.localWebsocketServiceUrl?.startsWith('/')) {
     initConverseParams.localWebsocketServiceUrl = new URL(

conversejs/index.html

@@ -14,24 +14,9 @@
 <noscript>You need to enable JavaScript to run the Converse.js chat app.</noscript>
 <div id="conversejs-bg" class="theme-peertube"></div>
 <script type="text/javascript">
-  initConverse({
+  initConverse(
-    isRemoteChat: '{{IS_REMOTE_CHAT}}' === 'true',
+    {INIT_CONVERSE_PARAMS}
-    localAnonymousJID: '{{LOCAL_ANONYMOUS_JID}}',
+  )
-    remoteAnonymousJID: '{{REMOTE_ANONYMOUS_JID}}' === '' ? null : '{{REMOTE_ANONYMOUS_JID}}',
-    remoteAnonymousXMPPServer: '{{REMOTE_ANONYMOUS_XMPP_SERVER}}' === 'true',
-    remoteAuthenticatedXMPPServer: '{{REMOTE_AUTHENTICATED_XMPP_SERVER}}' === 'true',
-    assetsPath : '{{BASE_STATIC_URL}}conversejs/',
-    room: '{{ROOM}}',
-    localBoshServiceUrl: '{{LOCAL_BOSH_SERVICE_URL}}' === '' ? null : '{{LOCAL_BOSH_SERVICE_URL}}',
-    localWebsocketServiceUrl: '{{LOCAL_WS_SERVICE_URL}}' === '' ? null : '{{LOCAL_WS_SERVICE_URL}}',
-    remoteBoshServiceUrl: '{{REMOTE_BOSH_SERVICE_URL}}' === '' ? null : '{{REMOTE_BOSH_SERVICE_URL}}',
-    remoteWebsocketServiceUrl: '{{REMOTE_WS_SERVICE_URL}}' === '' ? null : '{{REMOTE_WS_SERVICE_URL}}',
-    authenticationUrl: '{{AUTHENTICATION_URL}}',
-    autoViewerMode: '{{AUTOVIEWERMODE}}' === 'true',
-    theme: '{{CONVERSEJS_THEME}}',
-    forceReadonly: '{{FORCEREADONLY}}' === 'noscroll' ? '{{FORCEREADONLY}}' : '{{FORCEREADONLY}}' === 'true',
-    transparent: '{{TRANSPARENT}}' === 'true'
-  })
 </script>
 </body>
 </html>

conversejs/lib/converse-params.ts

@@ -1,4 +1,4 @@
-import type { InitConverseParams } from './types'
+import type { InitConverseJSParams } from 'shared/lib/types'
 import type { AuthentInfos } from './auth'
 
 /**
@@ -9,7 +9,7 @@ import type { AuthentInfos } from './auth'
  * @returns default parameters to provide to ConverseJS.
  */
 function defaultConverseParams (
-  { forceReadonly, theme, assetsPath, room }: InitConverseParams,
+  { forceReadonly, theme, assetsPath, room }: InitConverseJSParams,
   isInIframe: boolean
 ): any {
   const mucShowInfoMessages = forceReadonly
@@ -96,7 +96,10 @@ function defaultConverseParams (
  * @param auth authent infos.
  * @param params ConverseJS parameters to fill
  */
-function localRoomAuthenticatedParams (initConverseParams: InitConverseParams, auth: AuthentInfos, params: any): void {
+function localRoomAuthenticatedParams (
+  initConverseParams: InitConverseJSParams,
+  auth: AuthentInfos, params: any
+): void {
   _fillAuthenticatedParams(initConverseParams, auth, params)
   _fillLocalProtocols(initConverseParams, params)
 }
@@ -106,7 +109,7 @@ function localRoomAuthenticatedParams (initConverseParams: InitConverseParams, a
  * @param initConverseParams global parameters
  * @param params ConverseJS parameters to fill
  */
-function localRoomAnonymousParams (initConverseParams: InitConverseParams, params: any): void {
+function localRoomAnonymousParams (initConverseParams: InitConverseJSParams, params: any): void {
   params.jid = initConverseParams.localAnonymousJID
   _fillLocalProtocols(initConverseParams, params)
 }
@@ -117,7 +120,10 @@ function localRoomAnonymousParams (initConverseParams: InitConverseParams, param
  * @param auth authent infos.
  * @param params ConverseJS parameters to fill
  */
-function remoteRoomAuthenticatedParams (initConverseParams: InitConverseParams, auth: AuthentInfos, params: any): void {
+function remoteRoomAuthenticatedParams (
+  initConverseParams: InitConverseJSParams,
+  auth: AuthentInfos, params: any
+): void {
   _fillAuthenticatedParams(initConverseParams, auth, params)
   _fillLocalProtocols(initConverseParams, params)
 }
@@ -129,7 +135,7 @@ function remoteRoomAuthenticatedParams (initConverseParams: InitConverseParams,
  * @param params ConverseJS parameters to fill
  */
 function remoteRoomAnonymousParams (
-  initConverseParams: InitConverseParams,
+  initConverseParams: InitConverseJSParams,
   auth: AuthentInfos | null,
   params: any
 ): void {
@@ -140,7 +146,7 @@ function remoteRoomAnonymousParams (
   _fillRemoteProtocols(initConverseParams, params)
 }
 
-function _fillAuthenticatedParams (initConverseParams: InitConverseParams, auth: AuthentInfos, params: any): void {
+function _fillAuthenticatedParams (initConverseParams: InitConverseJSParams, auth: AuthentInfos, params: any): void {
   params.authentication = 'login'
   params.auto_login = true
   params.jid = auth.jid
@@ -155,12 +161,12 @@ function _fillAuthenticatedParams (initConverseParams: InitConverseParams, auth:
   // FIXME: use params.oauth_providers?
 }
 
-function _fillLocalProtocols (initConverseParams: InitConverseParams, params: any): void {
+function _fillLocalProtocols (initConverseParams: InitConverseJSParams, params: any): void {
   params.bosh_service_url = initConverseParams.localBoshServiceUrl
   params.websocket_url = initConverseParams.localWebsocketServiceUrl
 }
 
-function _fillRemoteProtocols (initConverseParams: InitConverseParams, params: any): void {
+function _fillRemoteProtocols (initConverseParams: InitConverseJSParams, params: any): void {
   params.bosh_service_url = initConverseParams.remoteBoshServiceUrl
   params.websocket_url = initConverseParams.remoteWebsocketServiceUrl
 }

conversejs/lib/dom.ts

@@ -1,6 +1,6 @@
-import type { InitConverseParams } from './types'
+import type { InitConverseJSParams } from 'shared/lib/types'
 
-function initDom ({ forceReadonly, transparent }: InitConverseParams, isInIframe: boolean): void {
+function initDom ({ forceReadonly, transparent }: InitConverseJSParams, isInIframe: boolean): void {
   const body = document.querySelector('body')
   if (isInIframe) {
     if (body) {

conversejs/lib/types.ts

@@ -1,23 +0,0 @@
-interface InitConverseParams {
-  isRemoteChat: boolean
-  localAnonymousJID: string
-  remoteAnonymousJID: string | null
-  remoteAnonymousXMPPServer: boolean
-  remoteAuthenticatedXMPPServer: boolean
-  assetsPath: string
-  room: string
-  localBoshServiceUrl: string | null
-  localWebsocketServiceUrl: string | null
-  remoteBoshServiceUrl: string | null
-  remoteWebsocketServiceUrl: string | null
-  authenticationUrl: string
-  autoViewerMode: boolean
-  forceReadonly: boolean | 'noscroll'
-  noScroll: boolean
-  theme: string
-  transparent: boolean
-}
-
-export {
-  InitConverseParams
-}

server/lib/routers/webchat.ts

@@ -1,7 +1,8 @@
 import type { RegisterServerOptions, MVideoThumbnail, SettingEntries } from '@peertube/peertube-types'
 import type { Router, Request, Response, NextFunction } from 'express'
 import type {
-  ProsodyListRoomsResult, ProsodyListRoomsResultRoom
+  ProsodyListRoomsResult, ProsodyListRoomsResultRoom,
+  InitConverseJSParams, ConverseJSTheme
 } from '../../../shared/lib/types'
 import { createProxyServer } from 'http-proxy'
 import {
@@ -59,8 +60,8 @@ async function initWebchatRouter (options: RegisterServerOptionsV5): Promise<Rou
       ])
 
       let autoViewerMode: boolean = false
-      let forceReadonly: 'true' | 'false' | 'noscroll' = 'false'
+      let forceReadonly: boolean | 'noscroll' = false
-      let converseJSTheme: string = settings['converse-theme'] as string
+      let converseJSTheme: ConverseJSTheme = settings['converse-theme'] as ConverseJSTheme
       let transparent: boolean = false
       if (!/^\w+$/.test(converseJSTheme)) {
         converseJSTheme = 'peertube'
@@ -70,7 +71,7 @@ async function initWebchatRouter (options: RegisterServerOptionsV5): Promise<Rou
         getBaseRouterRoute(options) +
         'api/auth'
       if (req.query._readonly === 'true') {
-        forceReadonly = 'true'
+        forceReadonly = true
       } else if (req.query._readonly === 'noscroll') {
         forceReadonly = 'noscroll'
       } else {
@@ -119,8 +120,8 @@ async function initWebchatRouter (options: RegisterServerOptionsV5): Promise<Rou
       const localAnonymousJID = 'anon.' + prosodyDomain
       const localBoshUri = getBoshUri(options)
       const localWsUri = settings['disable-websocket']
-        ? ''
+        ? null
-        : (getWSUri(options) ?? '')
+        : (getWSUri(options) ?? null)
 
       let remoteConnectionInfos: WCRemoteConnectionInfos | undefined
       let roomJID: string
@@ -146,10 +147,6 @@ async function initWebchatRouter (options: RegisterServerOptionsV5): Promise<Rou
         )
       }
 
-      page = page.replace(/{{IS_REMOTE_CHAT}}/g, video?.remote ? 'true' : 'false')
-      page = page.replace(/{{LOCAL_ANONYMOUS_JID}}/g, localAnonymousJID)
-      page = page.replace(/{{REMOTE_ANONYMOUS_JID}}/g, remoteConnectionInfos?.anonymous?.userJID ?? '')
-
       let autocolorsStyles = ''
       if (
         settings['converse-autocolors'] &&
@@ -201,24 +198,29 @@ async function initWebchatRouter (options: RegisterServerOptionsV5): Promise<Rou
         peertubeHelpers.logger.debug('No AutoColors.')
       }
 
-      // ... then inject it in the page.
+      // ... then some CSS in the page.
-      page = page.replace(/{{ROOM}}/g, roomJID)
-      page = page.replace(/{{LOCAL_BOSH_SERVICE_URL}}/g, localBoshUri)
-      page = page.replace(/{{LOCAL_WS_SERVICE_URL}}/g, localWsUri ?? '')
-      page = page.replace(/{{REMOTE_BOSH_SERVICE_URL}}/g, remoteConnectionInfos?.anonymous?.boshUri ?? '')
-      page = page.replace(/{{REMOTE_WS_SERVICE_URL}}/g, remoteConnectionInfos?.anonymous?.wsUri ?? '')
-      page = page.replace(/{{REMOTE_ANONYMOUS_XMPP_SERVER}}/g, remoteConnectionInfos?.anonymous ? 'true' : 'false')
-      page = page.replace(
-        /{{REMOTE_AUTHENTICATED_XMPP_SERVER}}/g,
-        remoteConnectionInfos?.authenticated ? 'true' : 'false'
-      )
-      page = page.replace(/{{AUTHENTICATION_URL}}/g, authenticationUrl)
-      page = page.replace(/{{AUTOVIEWERMODE}}/g, autoViewerMode ? 'true' : 'false')
-      page = page.replace(/{{CONVERSEJS_THEME}}/g, converseJSTheme)
       page = page.replace(/{{CONVERSEJS_AUTOCOLORS}}/g, autocolorsStyles)
-      page = page.replace(/{{FORCEREADONLY}}/g, forceReadonly)
-      page = page.replace(/{{TRANSPARENT}}/g, transparent ? 'true' : 'false')
 
+      // ... and finaly inject all other parameters
+      const initConverseJSParam: InitConverseJSParams = {
+        assetsPath: baseStaticUrl + 'conversejs/',
+        isRemoteChat: !!(video?.remote),
+        localAnonymousJID: localAnonymousJID,
+        remoteAnonymousJID: remoteConnectionInfos?.anonymous?.userJID ?? null,
+        remoteAnonymousXMPPServer: !!(remoteConnectionInfos?.anonymous),
+        remoteAuthenticatedXMPPServer: !!(remoteConnectionInfos?.authenticated),
+        room: roomJID,
+        localBoshServiceUrl: localBoshUri,
+        localWebsocketServiceUrl: localWsUri,
+        remoteBoshServiceUrl: remoteConnectionInfos?.anonymous?.boshUri ?? null,
+        remoteWebsocketServiceUrl: remoteConnectionInfos?.anonymous?.wsUri ?? null,
+        authenticationUrl: authenticationUrl,
+        autoViewerMode,
+        theme: converseJSTheme,
+        forceReadonly,
+        transparent
+      }
+      page = page.replace('{INIT_CONVERSE_PARAMS}', JSON.stringify(initConverseJSParam))
       res.status(200)
       res.type('html')
       res.send(page)

shared/lib/types.ts

@@ -1,5 +1,24 @@
 type ConverseJSTheme = 'peertube' | 'default' | 'concord'
 
+interface InitConverseJSParams {
+  isRemoteChat: boolean
+  localAnonymousJID: string
+  remoteAnonymousJID: string | null
+  remoteAnonymousXMPPServer: boolean
+  remoteAuthenticatedXMPPServer: boolean
+  assetsPath: string
+  room: string
+  localBoshServiceUrl: string | null
+  localWebsocketServiceUrl: string | null
+  remoteBoshServiceUrl: string | null
+  remoteWebsocketServiceUrl: string | null
+  authenticationUrl: string
+  autoViewerMode: boolean
+  forceReadonly: boolean | 'noscroll'
+  theme: ConverseJSTheme
+  transparent: boolean
+}
+
 interface ProsodyListRoomsResultError {
   ok: false
   error: string
@@ -28,6 +47,7 @@ type ProsodyListRoomsResult = ProsodyListRoomsResultError | ProsodyListRoomsResu
 
 export type {
   ConverseJSTheme,
+  InitConverseJSParams,
   ProsodyListRoomsResult,
   ProsodyListRoomsResultRoom
 }