Refactoring + new embedded chat:

* moving conversejs plugin in separate files
* disconnecting embedded chat on navigation-end

conversejs/lib/plugins/livechat-specific.ts

@@ -0,0 +1,56 @@
+export const livechatSpecificsPlugin = {
+  dependencies: ['converse-muc', 'converse-muc-views'],
+  initialize: function (this: any) {
+    const _converse = this._converse
+    _converse.api.listen.on('chatRoomViewInitialized', function (this: any, _model: any): void {
+      // Remove the spinner if present...
+      document.getElementById('livechat-loading-spinner')?.remove()
+    })
+
+    // Adding a methode on window.converse, so we can close the chat on navigation-end event
+    // (when chatIncludeMode is peertube-*)
+    window.converse.livechatDisconnect = function livechatDisconnect () {
+      console.log('[livechatSpecificsPlugin] disconnecting converseJS...')
+      _converse.api.user.logout()
+      window.converse.livechatDisconnect = undefined // will be set again on next initialize.
+    }
+  },
+  overrides: {
+    ChatRoom: {
+      getActionInfoMessage: function (this: any, code: string, nick: string, actor: any): any {
+        if (code === '303') {
+          // When there is numerous anonymous users joining at the same time,
+          // they can all change their nicknames at the same time, generating a log of action messages.
+          // To mitigate this, will don't display nickname changes if the previous nick is something like
+          // 'Anonymous 12345'.
+          if (/^Anonymous \d+$/.test(nick)) {
+            // To avoid displaying the message, we just have to return an empty one
+            // (createInfoMessage will ignore if !data.message).
+            return null
+          }
+        }
+        return this.__super__.getActionInfoMessage(code, nick, actor)
+      }
+    },
+    ChatRoomMessage: {
+      /* By default, ConverseJS groups messages from the same users for a 10 minutes period.
+       * This make no sense in a livechat room. So we override isFollowup to ignore. */
+      isFollowup: function isFollowup () { return false }
+    },
+    ChatRoomOccupants: {
+      comparator: function (this: any, occupant1: any, occupant2: any): Number {
+        // Overriding Occupants comparators, to display anonymous users at the end of the list.
+        const nick1: string = occupant1.getDisplayName()
+        const nick2: string = occupant2.getDisplayName()
+        const b1 = nick1.startsWith('Anonymous ')
+        const b2 = nick2.startsWith('Anonymous ')
+        if (b1 === b2) {
+          // Both startswith anonymous, or non of it: fallback to the standard comparator.
+          return this.__super__.comparator(occupant1, occupant2)
+        }
+        // Else: Anonymous always last.
+        return b1 ? 1 : -1
+      }
+    }
+  }
+}

conversejs/lib/plugins/livechat-viewer-mode.ts

@@ -0,0 +1,59 @@
+import { randomNick, getPreviousAnonymousNick, setPreviousAnonymousNick } from '../nick'
+
+export const livechatViewerModePlugin = {
+  dependencies: ['converse-muc', 'converse-muc-views'],
+  initialize: function (this: any) {
+    const _converse = this._converse
+
+    const previousNickname = getPreviousAnonymousNick()
+
+    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) ?? previousNickname ?? randomNick('Anonymous')
+        }
+      })
+    }
+
+    function refreshViewerMode (canChat: boolean): void {
+      console.log('[livechatViewerModePlugin] refreshViewerMode: ' + (canChat ? 'off' : 'on'))
+      if (canChat) {
+        document.querySelector('body')?.setAttribute('livechat-viewer-mode', 'off')
+      } else {
+        document.querySelector('body')?.setAttribute('livechat-viewer-mode', 'on')
+      }
+    }
+
+    if (previousNickname === null) {
+      _converse.api.settings.update({
+        livechat_viewer_mode: true
+      })
+    }
+
+    _converse.api.listen.on('livechatViewerModeSetNickname', () => refreshViewerMode(true))
+
+    _converse.ChatRoomOccupants.prototype.on('change:nick', (data: any, nick: string) => {
+      try {
+        // On nick change, if the user is_me, storing the new nickname
+        if (nick && data?.attributes?.is_me === true) {
+          console.log('Nickname change, storing to previousAnonymousNick')
+          setPreviousAnonymousNick(nick)
+        }
+      } catch (err) {
+        console.error('Error on nick change handling...', err)
+      }
+    })
+
+    _converse.api.listen.on('chatRoomInitialized', function (this: any, model: any): void {
+      // When room is initialized, if user has chosen a nickname, set viewermode to off.
+      // Note: when previousNickname is set, model.get('nick') has not the nick yet...
+      // It will only come after receiving a presence stanza.
+      // So we use previousNickname before trying to read the model.
+      const nick = previousNickname ?? (model?.get ? model.get('nick') : '')
+      refreshViewerMode(nick && !/^Anonymous /.test(nick))
+    })
+  }
+}

conversejs/lib/plugins/slow-mode.ts

@@ -0,0 +1,48 @@
+/**
+ * Slow Mode plugin definition.
+ * This code should be published to ConverseJS upstream once the XEP for the slow mode feature is proposed.
+ * Note: part of the code is also in the custom muc-bottom-panel template.
+ */
+export const slowModePlugin = {
+  dependencies: ['converse-muc', 'converse-muc-views'],
+  async initialize (this: any) {
+    const _converse = this._converse
+    _converse.api.listen.on('sendMessage', function (this: any, options: any): void {
+      // disabling the message form/textarea after each new message, for X seconds.
+      const { chatbox } = options
+
+      // bypass for moderators.
+      const self = chatbox.getOwnOccupant()
+      if (self.isModerator()) {
+        return
+      }
+
+      const slowModeDuration = parseInt(chatbox?.config?.get('slow_mode_duration'))
+      if (!(slowModeDuration > 0)) { // undefined, NaN, ...  are not considered > 0.
+        return
+      }
+
+      console.log(`Slow mode is enabled, disabling the message field for ${slowModeDuration} seconds.`)
+      // FIXME: we should search the chat-textarea related to chatbox.
+      // I did not find how to get it. As for now there is only one chatbox, we can ignore.
+      // FIXME: we disable the field after 100ms, because otherwise ConverseJS will re-enable it before.
+      setTimeout(() => {
+        document.querySelectorAll('.chat-textarea').forEach((textarea) => {
+          // FIXME: field could be enabled by something else (another event in ConverseJS).
+          // This is not very important: the server will reject messages anyway.
+
+          textarea.classList.add('disabled')
+          textarea.setAttribute('disabled', 'disabled')
+          // Note: we are adding a 100ms delay.
+          // To minimize the risk that user can send a message before the server will accept it
+          // (if the first message lagged for example)
+          setTimeout(() => {
+            textarea.classList.remove('disabled')
+            textarea.removeAttribute('disabled');
+            (textarea as HTMLTextAreaElement).focus()
+          }, slowModeDuration * 1000 + 100)
+        })
+      }, 100)
+    })
+  }
+}

conversejs/lib/plugins/window-title.ts

@@ -0,0 +1,21 @@
+export const windowTitlePlugin = {
+  dependencies: ['converse-muc-views'],
+  overrides: {
+    ChatRoomView: {
+      requestUpdate: function (this: any): any {
+        console.log('[livechatWindowTitlePlugin] updating the document title.')
+        try {
+          if (this.model?.getDisplayName) {
+            const title = this.model.getDisplayName()
+            if (document.title !== title) {
+              document.title = title
+            }
+          }
+        } catch (err) {
+          console.error('[livechatWindowTitlePlugin] Failed updating the window title', err)
+        }
+        return this.__super__.requestUpdate.apply(this)
+      }
+    }
+  }
+}