Auto viewer mode (WIP).

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')
     }