Slow Mode WIP (#192):

* frontend: display an infobox when slow mode is active (WIP)

CHANGELOG.md

@@ -8,6 +8,7 @@
   * new option in room configuration to set the slow mode delay (new prosody module mod_muc_slow_mode).
   * default delay is configurable in channel's chat rooms options.
   * backend rejects messages when the slow mode is not respected.
+  * frontend: display an infobox when slow mode is active.
 
 ### Minor changes and fixes
 

conversejs/builtin.ts

@@ -10,6 +10,7 @@ import {
 } from './lib/converse-params'
 import { getLocalAuthentInfos } from './lib/auth'
 import { randomNick, getPreviousAnonymousNick, setPreviousAnonymousNick } from './lib/nick'
+import { slowModePlugin } from './lib/slow-mode/plugin'
 
 declare global {
   interface Window {
@@ -109,6 +110,8 @@ window.initConverse = async function initConverse (initConverseParams: InitConve
       }
     })
 
+    converse.plugins.add('converse-slow-mode', slowModePlugin)
+
     // livechatSpecifics plugins add some customization for the livechat plugin.
     converse.plugins.add('livechatSpecifics', {
       dependencies: ['converse-muc', 'converse-muc-views'],

conversejs/custom/shared/styles/_peertubetheme.scss

@@ -16,6 +16,13 @@
   }
 
   .chatbox {
+    // Slow mode info box
+    livechat-slow-mode {
+      border-top: var(--chatroom-message-input-border-top);
+      color: var(--peertube-main-foreground);
+      background-color: var(--peertube-main-background);
+    }
+
     converse-chat-toolbar {
       color: var(--peertube-main-foreground);
       background-color: var(--peertube-main-background);

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

@@ -2,6 +2,7 @@ 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'
+import { CustomElement } from 'shared/components/element.js'
 
 async function setNickname (ev, model) {
   ev.preventDefault()
@@ -15,6 +16,41 @@ async function setNickname (ev, model) {
   })
 }
 
+class SlowMode extends CustomElement {
+  static get properties () {
+    return {
+      jid: { type: String }
+    }
+  }
+
+  async connectedCallback () {
+    super.connectedCallback()
+    this.model = _converse.chatboxes.get(this.jid)
+    await this.model.initialized
+
+    this.listenTo(this.model.config, 'change:slow_mode_delay', () => {
+      this.requestUpdate()
+    })
+  }
+
+  render () {
+    if (!(parseInt(this.model.config.get('slow_mode_delay')) > 0)) { // This includes NaN, for which ">0"===false
+      return html``
+    }
+    return html`
+      <converse-icon class="fa fa-info-circle" size="1.2em"></converse-icon>
+      ${__(
+        'Slow mode is enabled, you have to wait %1$s seconds between two messages.',
+        this.model.config.get('slow_mode_delay')
+      )}`
+  }
+}
+api.elements.define('livechat-slow-mode', SlowMode)
+
+const tplSlowMode = (o) => {
+  return html`<livechat-slow-mode jid=${o.model.get('jid')}>`
+}
+
 export default (o) => {
   if (api.settings.get('livechat_viewer_mode')) {
     const model = o.model
@@ -39,7 +75,11 @@ export default (o) => {
             </fieldset>
         </form>
     </div>
+    ${tplSlowMode(o)}
     ${tplMucBottomPanel(o)}`
   }
-  return tplMucBottomPanel(o)
+
+  return html`
+    ${tplSlowMode(o)}
+    ${tplMucBottomPanel(o)}`
 }

conversejs/lib/converse-params.ts

@@ -78,7 +78,8 @@ function defaultConverseParams (
       'livechatWindowTitlePlugin',
       'livechatSpecifics',
       'livechatViewerModePlugin',
-      'livechatDisconnectOnUnloadPlugin'
+      'livechatDisconnectOnUnloadPlugin',
+      'converse-slow-mode'
     ],
     show_retraction_warning: false, // No need to use this warning (except if we open to external clients?)
     muc_show_info_messages: mucShowInfoMessages,

conversejs/lib/slow-mode/plugin.ts

@@ -0,0 +1,14 @@
+/**
+ * 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('chatRoomInitialized', function (this: any, _model: any): void {
+      // TODO: disable the textarea after each new message, for X seconds.
+    })
+  }
+}

languages/en.yml

@@ -387,3 +387,5 @@ livechat_configuration_channel_banned_jids_label: "Banned users and patterns"
 livechat_configuration_channel_bot_nickname: "Bot nickname"
 
 invalid_value: "Invalid value."
+
+slow_mode_info: "Slow mode is enabled, you have to wait 10 seconds between two messages."