From d33795f7a11baf7ef047c542bcb0d3db260213ea Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Tue, 1 Aug 2023 17:01:09 +0200
Subject: [PATCH] Code refactoring WIP:

Cleaning the way ConverseJS parameters are given to the full page.
---
 conversejs/builtin.ts             |  6 ++--
 conversejs/index.html             | 21 ++----------
 conversejs/lib/converse-params.ts | 24 ++++++++------
 conversejs/lib/dom.ts             |  4 +--
 conversejs/lib/types.ts           | 23 -------------
 server/lib/routers/webchat.ts     | 54 ++++++++++++++++---------------
 shared/lib/types.ts               | 20 ++++++++++++
 7 files changed, 71 insertions(+), 81 deletions(-)
 delete mode 100644 conversejs/lib/types.ts

diff --git a/conversejs/builtin.ts b/conversejs/builtin.ts
index f4e44927..d9fcf0fe 100644
--- a/conversejs/builtin.ts
+++ b/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(
diff --git a/conversejs/index.html b/conversejs/index.html
index 1063191f..db7af1be 100644
--- a/conversejs/index.html
+++ b/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({
-    isRemoteChat: '{{IS_REMOTE_CHAT}}' === 'true',
-    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'
-  })
+  initConverse(
+    {INIT_CONVERSE_PARAMS}
+  )
 </script>
 </body>
 </html>
diff --git a/conversejs/lib/converse-params.ts b/conversejs/lib/converse-params.ts
index e650762a..87be89e6 100644
--- a/conversejs/lib/converse-params.ts
+++ b/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
 }
diff --git a/conversejs/lib/dom.ts b/conversejs/lib/dom.ts
index 6c8705dd..db947adc 100644
--- a/conversejs/lib/dom.ts
+++ b/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) {
diff --git a/conversejs/lib/types.ts b/conversejs/lib/types.ts
deleted file mode 100644
index 4751e2a1..00000000
--- a/conversejs/lib/types.ts
+++ /dev/null
@@ -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
-}
diff --git a/server/lib/routers/webchat.ts b/server/lib/routers/webchat.ts
index 76fd713d..a7bd6703 100644
--- a/server/lib/routers/webchat.ts
+++ b/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 converseJSTheme: string = settings['converse-theme'] as string
+      let forceReadonly: boolean | 'noscroll' = false
+      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']
-        ? ''
-        : (getWSUri(options) ?? '')
+        ? null
+        : (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.
-      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)
+      // ... then some CSS in the page.
       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)
diff --git a/shared/lib/types.ts b/shared/lib/types.ts
index e164ee23..08cae5e3 100644
--- a/shared/lib/types.ts
+++ b/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
 }