Auto viewer mode (WIP).

conversejs/builtin.ts

@@ -82,6 +82,7 @@ interface InitConverseParams {
   websocketServiceUrl: string
   authenticationUrl: string
   advancedControls: boolean
+  autoViewerMode: boolean
   forceReadonly: boolean | 'noscroll'
   noScroll: boolean
   theme: string
@@ -94,6 +95,7 @@ window.initConverse = async function initConverse ({
   websocketServiceUrl,
   authenticationUrl,
   advancedControls,
+  autoViewerMode,
   forceReadonly,
   theme
 }: InitConverseParams) {
@@ -155,7 +157,7 @@ window.initConverse = async function initConverse ({
     persistent_store: 'sessionStorage',
     show_images_inline: false, // for security reason, and to avoid bugs when image is larger that iframe
     render_media: false, // for security reason, and to avoid bugs when image is larger that iframe
-    whitelisted_plugins: ['livechatWindowTitlePlugin']
+    whitelisted_plugins: ['livechatWindowTitlePlugin', 'livechatViewerModePlugin']
   }
 
   // TODO: params.clear_messages_on_reconnection = true when muc_mam will be available.
@@ -229,6 +231,44 @@ window.initConverse = async function initConverse ({
         }
       }
     })
+
+    if (autoViewerMode && !isAuthenticated) {
+      window.converse.plugins.add('livechatViewerModePlugin', {
+        dependencies: ['converse-muc', 'converse-muc-views'],
+        initialize: function () {
+          const _converse = this._converse
+          const getDefaultMUCNickname = _converse.getDefaultMUCNickname
+          if (!getDefaultMUCNickname) {
+            console.error('[livechatViewerModePlugin] getDefaultMUCNickname is not initialized.')
+          } else {
+            Object.assign(_converse, {
+              getDefaultMUCNickname: function (this: any): any {
+                return getDefaultMUCNickname.apply(this, arguments) ?? 'Anonymous ' + (new Date()).getTime().toString()
+              }
+            })
+          }
+          _converse.api.settings.update({
+            livechat_viewer_mode: true
+          })
+
+          function refreshViewerMode (canChat: boolean): void {
+            console.log('[livechatViewerModePlugin] refreshViewerMode: ' + (canChat ? 'off' : 'on'))
+            if (canChat) {
+              body?.setAttribute('livechat-viewer-mode', 'off')
+            } else {
+              body?.setAttribute('livechat-viewer-mode', 'on')
+            }
+          }
+
+          _converse.api.listen.on('livechatViewerModeSetNickname', () => refreshViewerMode(true))
+          _converse.api.listen.on('chatRoomInitialized', function (this: any, model: any): void {
+            const nick = model?.get ? model.get('nick') : ''
+            refreshViewerMode(nick && !/^Anonymous /.test(nick))
+          })
+        }
+      })
+    }
+
     window.converse.initialize(params)
   } catch (error) {
     console.error('Failed initializing converseJS', error)

conversejs/custom/shared/styles/livechat.scss

@@ -36,3 +36,18 @@ body.livechat-readonly.livechat-noscroll {
     display: none;
   }
 }
+
+// Viewer mode
+.livechat-viewer-mode-nick {
+  display: none;
+}
+
+body[livechat-viewer-mode="on"] {
+  .livechat-viewer-mode-nick {
+    display: initial;
+  }
+
+  .livechat-viewer-mode-panel {
+    display: none;
+  }
+}

conversejs/custom/templates/muc-bottom-panel.js

@@ -0,0 +1,40 @@
+import { __ } from 'i18n'
+import { _converse, api } from '@converse/headless/core'
+import { html } from 'lit'
+import tplMucBottomPanel from '../../src/plugins/muc-views/templates/muc-bottom-panel.js'
+
+async function setNickname (ev, model) {
+  ev.preventDefault()
+  const nick = ev.target.nick.value.trim()
+  nick && await model.setNickname(nick)
+  _converse.api.trigger('livechatViewerModeSetNickname')
+}
+
+export default (o) => {
+  if (api.settings.get('livechat_viewer_mode')) {
+    const model = o.model
+    const i18nNickname = __('Nickname')
+    const i18nJoin = __('Enter groupchat')
+    return html`
+    <div class="livechat-viewer-mode-nick chatroom-form-container muc-nickname-form"
+            @submit=${ev => setNickname(ev, model)}>
+        <form class="converse-form chatroom-form converse-centered-form">
+            <fieldset class="form-group">
+                <input type="text"
+                    required="required"
+                    name="nick"
+                    value=""
+                    class="form-control"
+                    placeholder="${i18nNickname}"/>
+            </fieldset>
+            <fieldset class="form-group">
+                <input type="submit" class="btn btn-primary" name="join" value="${i18nJoin}"/>
+            </fieldset>
+        </form>
+    </div>
+    <span class="livechat-viewer-mode-panel">
+      ${tplMucBottomPanel(o)}
+    </span>`
+  }
+  return tplMucBottomPanel(o)
+}

conversejs/custom/webpack.livechat.js

@@ -7,8 +7,7 @@ module.exports = merge(prod, {
   resolve: {
     extensions: ['.js'],
     alias: {
-      // To override a template, use this syntax:
-      // 'templates/muc_sidebar.js': path.resolve(__dirname, 'custom/templates/muc_sidebar.js')
+      './templates/muc-bottom-panel.js': path.resolve('custom/templates/muc-bottom-panel.js'),
       '../../templates/background_logo.js$': path.resolve(__dirname, 'custom/templates/background_logo.js'),
       'shared/styles/index.scss$': path.resolve(__dirname, 'custom/shared/styles/livechat.scss')
     }

conversejs/index.html

@@ -22,6 +22,7 @@
     websocketServiceUrl: '{{WS_SERVICE_URL}}',
     authenticationUrl: '{{AUTHENTICATION_URL}}',
     advancedControls: '{{ADVANCEDCONTROLS}}' === 'true',
+    autoViewerMode: '{{AUTOVIEWERMODE}}' === 'true',
     theme: '{{CONVERSEJS_THEME}}',
     forceReadonly: '{{FORCEREADONLY}}' === 'noscroll' ? '{{FORCEREADONLY}}' : '{{FORCEREADONLY}}' === 'true'
   })

server/lib/routers/webchat.ts

@@ -52,7 +52,8 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
       let boshUri: string
       let wsUri: string
       let authenticationUrl: string = ''
-      let advancedControls: boolean = false
+      let advancedControls: boolean = false // auto join the chat in viewer mode, if not logged in
+      let autoViewerMode: boolean = false
       let forceReadonly: 'true' | 'false' | 'noscroll' = 'false'
       let converseJSTheme: string = settings['converse-theme'] as string
       if (!/^\w+$/.test(converseJSTheme)) {
@@ -90,6 +91,8 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
           forceReadonly = 'true'
         } else if (req.query._readonly === 'noscroll') {
           forceReadonly = 'noscroll'
+        } else {
+          autoViewerMode = true // auto join the chat in viewer mode, if not logged in
         }
       } else if (chatType === 'builtin-converse') {
         if (!settings['chat-server']) {
@@ -210,6 +213,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(/{{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)