ConverseJS Readonly mode. Changing muc_mention_autocomplete_min_chars.

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Features
 
+* Builtin Prosody: Readonly mode. You can open the chat in readonly mode. Could be used to integrate in OBS for example.
 * Builtin Prosody: you can now allow «external XMPP components» to connect. This can be used for exemple to connect bots or bridges. For now, only connections from localhost will be allowed.
 
 ### Minor changes and fixes
@@ -11,6 +12,7 @@
 * Spanish translations (thanks [rnek0](https://github.com/rnek0)).
 * Hide secret keys in diagnostic tool.
 * Builtin ConverseJS mode: fix advanced controls hiding.
+* Builtin Prosody & Builtin ConverseJS: muc_mention_autocomplete_min_chars set to 2 (3 previously)
 
 ## v5.0.2
 

conversejs/builtin.ts

@@ -82,6 +82,7 @@ interface InitConverseParams {
   websocketServiceUrl: string
   authenticationUrl: string
   advancedControls: boolean
+  forceReadonly: boolean
   theme: string
 }
 window.initConverse = async function initConverse ({
@@ -92,18 +93,22 @@ window.initConverse = async function initConverse ({
   websocketServiceUrl,
   authenticationUrl,
   advancedControls,
+  forceReadonly,
   theme
 }: InitConverseParams) {
   const isInIframe = inIframe()
 
-  if (isInIframe) {
   const body = document.querySelector('body')
+  if (isInIframe) {
     if (body) {
       body.classList.add('livechat-iframe')
       // prevent horizontal scrollbar when in iframe. (don't know why, but does not work if done by CSS)
       body.style.overflowX = 'hidden'
     }
   }
+  if (forceReadonly) {
+    body?.classList.add('livechat-readonly')
+  }
 
   const params: any = {
     assets_path: assetsPath,
@@ -125,7 +130,7 @@ window.initConverse = async function initConverse ({
     auto_focus: !isInIframe,
     hide_muc_participants: isInIframe,
     play_sounds: false,
-    muc_mention_autocomplete_min_chars: 3,
+    muc_mention_autocomplete_min_chars: 2,
     muc_mention_autocomplete_filter: 'contains',
     muc_instant_rooms: true,
     show_client_info: false,
@@ -172,6 +177,9 @@ window.initConverse = async function initConverse ({
 
   if (!isAuthenticated) {
     console.log('User is not authenticated.')
+    if (forceReadonly) {
+      params.nickname = 'Viewer ' + (new Date()).getTime().toString()
+    }
     // TODO: try to make these params work
     // params.muc_nickname_from_jid = true => compute the muc nickname from the jid (will be random here)
     // params.auto_register_muc_nickname = true => maybe not relevant here (dont do what i thought)

conversejs/custom/sass/livechat.scss

@@ -15,3 +15,13 @@ body.livechat-iframe #conversejs .chat-head {
     }
   }
 }
+
+// Readonly mode
+body.livechat-readonly #conversejs {
+  .chat-head,
+  .bottom-panel,
+  converse-message-actions,
+  converse-muc-sidebar {
+    display: none !important;
+  }
+}

conversejs/index.html

@@ -22,7 +22,8 @@
     websocketServiceUrl: '{{WS_SERVICE_URL}}',
     authenticationUrl: '{{AUTHENTICATION_URL}}',
     advancedControls: '{{ADVANCEDCONTROLS}}' === 'true',
-    theme: '{{CONVERSEJS_THEME}}'
+    theme: '{{CONVERSEJS_THEME}}',
+    forceReadonly: '{{FORCEREADONLY}}' === 'true'
   })
 </script>
 </body>

server/lib/routers/webchat.ts

@@ -53,6 +53,7 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
       let wsUri: string
       let authenticationUrl: string = ''
       let advancedControls: boolean = false
+      let forceReadonly: boolean = false
       let converseJSTheme: string = settings['converse-theme'] as string
       if (!/^\w+$/.test(converseJSTheme)) {
         converseJSTheme = 'peertube'
@@ -85,6 +86,9 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
           getBaseRouterRoute(options) +
           'api/auth'
         advancedControls = true
+        if (req.query._readonly === 'true') {
+          forceReadonly = true
+        }
       } else if (chatType === 'builtin-converse') {
         if (!settings['chat-server']) {
           throw new Error('Missing chat-server settings.')
@@ -197,6 +201,7 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
       } else {
         peertubeHelpers.logger.debug('No AutoColors.')
       }
+
       // ... then inject it in the page.
       page = page.replace(/{{ROOM}}/g, room)
       page = page.replace(/{{BOSH_SERVICE_URL}}/g, boshUri)
@@ -205,6 +210,7 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
       page = page.replace(/{{ADVANCEDCONTROLS}}/g, advancedControls ? 'true' : 'false')
       page = page.replace(/{{CONVERSEJS_THEME}}/g, converseJSTheme)
       page = page.replace(/{{CONVERSEJS_AUTOCOLORS}}/g, autocolorsStyles)
+      page = page.replace(/{{FORCEREADONLY}}/g, forceReadonly ? 'true' : 'false')
 
       res.status(200)
       res.type('html')