diff --git a/CHANGELOG.md b/CHANGELOG.md index 76246a95..1290c021 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/conversejs/builtin.ts b/conversejs/builtin.ts index 94a05d74..2e065e5e 100644 --- a/conversejs/builtin.ts +++ b/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'], diff --git a/conversejs/custom/shared/styles/_peertubetheme.scss b/conversejs/custom/shared/styles/_peertubetheme.scss index 59bf6e83..1c1809c1 100644 --- a/conversejs/custom/shared/styles/_peertubetheme.scss +++ b/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); diff --git a/conversejs/custom/templates/muc-bottom-panel.js b/conversejs/custom/templates/muc-bottom-panel.js index 494edd8e..69d85c60 100644 --- a/conversejs/custom/templates/muc-bottom-panel.js +++ b/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` + + ${__( + '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`` +} + export default (o) => { if (api.settings.get('livechat_viewer_mode')) { const model = o.model @@ -39,7 +75,11 @@ export default (o) => { + ${tplSlowMode(o)} ${tplMucBottomPanel(o)}` } - return tplMucBottomPanel(o) + + return html` + ${tplSlowMode(o)} + ${tplMucBottomPanel(o)}` } diff --git a/conversejs/lib/converse-params.ts b/conversejs/lib/converse-params.ts index 705dd38c..a5de427b 100644 --- a/conversejs/lib/converse-params.ts +++ b/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, diff --git a/conversejs/lib/slow-mode/plugin.ts b/conversejs/lib/slow-mode/plugin.ts new file mode 100644 index 00000000..6f5a58bf --- /dev/null +++ b/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. + }) + } +} diff --git a/languages/en.yml b/languages/en.yml index 276d2305..b500cc05 100644 --- a/languages/en.yml +++ b/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."