From 5828cdeea42a94f4ef1ab168add7e699c180d234 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Fri, 16 Feb 2024 15:44:39 +0100
Subject: [PATCH] Slow Mode WIP (#192): button to close the info box

---
 .../custom/shared/styles/_peertubetheme.scss  |  5 ++++
 .../custom/templates/muc-bottom-panel.js      | 26 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

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`
       <converse-icon class="fa fa-info-circle" size="1.2em"></converse-icon>
       ${__(
         'Slow mode is enabled, users can send a message every %1$s seconds.',
         this.model.config.get('slow_mode_duration')
-      )}`
+      )}
+      <i class="livechat-hide-slow-mode-info-box" @click=${this.closeSlowModeInfoBox}>
+        <converse-icon class="fa fa-times" size="1em"></converse-icon>
+      </i>`
+  }
+
+  closeSlowModeInfoBox (ev) {
+    ev?.preventDefault?.()
+    ev?.stopPropagation?.()
+    this.hideInfoBox = true
+    this.requestUpdate()
   }
 }
 api.elements.define('livechat-slow-mode', SlowMode)