diff --git a/conversejs/custom/shared/styles/_peertubetheme.scss b/conversejs/custom/shared/styles/_peertubetheme.scss
index 1c1809c1..db637c87 100644
--- a/conversejs/custom/shared/styles/_peertubetheme.scss
+++ b/conversejs/custom/shared/styles/_peertubetheme.scss
@@ -21,6 +21,11 @@
border-top: var(--chatroom-message-input-border-top);
color: var(--peertube-main-foreground);
background-color: var(--peertube-main-background);
+
+ .livechat-hide-slow-mode-info-box {
+ cursor: pointer;
+ font-size: var(--font-size-small);
+ }
}
converse-chat-toolbar {
diff --git a/conversejs/custom/templates/muc-bottom-panel.js b/conversejs/custom/templates/muc-bottom-panel.js
index e0b26540..dbf2ecaa 100644
--- a/conversejs/custom/templates/muc-bottom-panel.js
+++ b/conversejs/custom/templates/muc-bottom-panel.js
@@ -23,12 +23,23 @@ class SlowMode extends CustomElement {
}
}
+ hideInfoBox = false
+
async connectedCallback () {
super.connectedCallback()
this.model = _converse.chatboxes.get(this.jid)
await this.model.initialized
+ let previousDuration = this.model.config.get('slow_mode_duration')
this.listenTo(this.model.config, 'change:slow_mode_duration', () => {
+ if (this.hideInfoBox) {
+ const duration = this.model.config.get('slow_mode_duration')
+ if (duration !== previousDuration) {
+ previousDuration = duration
+ // Duration changed, opening the infobox again.
+ this.hideInfoBox = false
+ }
+ }
this.requestUpdate()
})
}
@@ -37,12 +48,25 @@ class SlowMode extends CustomElement {
if (!(parseInt(this.model.config.get('slow_mode_duration')) > 0)) { // This includes NaN, for which ">0"===false
return html``
}
+ if (this.hideInfoBox) {
+ return html``
+ }
return html`
${__(
'Slow mode is enabled, users can send a message every %1$s seconds.',
this.model.config.get('slow_mode_duration')
- )}`
+ )}
+
+
+ `
+ }
+
+ closeSlowModeInfoBox (ev) {
+ ev?.preventDefault?.()
+ ev?.stopPropagation?.()
+ this.hideInfoBox = true
+ this.requestUpdate()
}
}
api.elements.define('livechat-slow-mode', SlowMode)