From eee07da1e3b09ed67382b1820a97ec363969bc37 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Thu, 11 Apr 2024 15:14:50 +0200
Subject: [PATCH] Fix button cloning method.

---
 assets/styles/style.scss                         |  7 +++----
 conversejs/custom/templates/muc-head.js          |  8 ++++++++
 conversejs/lib/plugins/livechat-mini-muc-head.ts | 11 +++++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index 56657060..21f3a560 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -40,10 +40,9 @@
   }
 }
 
-.peertube-plugin-livechat-buttons-open {
-  // So that buttons will be behind chatbox (buttons are then cloned by our custom muc-head template):
-  position: fixed;
-  right: 0;
+.peertube-plugin-livechat-buttons-cloned {
+  // Hidding buttons when cloned by the ConverseJS mini-muc-head plugin.
+  display: none;
 }
 
 [peertube-plugin-livechat-state="initializing"] {
diff --git a/conversejs/custom/templates/muc-head.js b/conversejs/custom/templates/muc-head.js
index 60bce68c..92c8a09a 100644
--- a/conversejs/custom/templates/muc-head.js
+++ b/conversejs/custom/templates/muc-head.js
@@ -20,6 +20,10 @@ function getPeertubeButtons () {
   )
   if (!buttonsContainer) { return html`` }
 
+  // We must remove this class, in case it is already here.
+  // Otherwise, the trick with offsetParent (see the forEach loop) will not work.
+  buttonsContainer.classList.remove('peertube-plugin-livechat-buttons-cloned')
+
   const buttons = []
   buttonsContainer.childNodes.forEach(button => {
     try {
@@ -39,6 +43,10 @@ function getPeertubeButtons () {
     return html``
   }
 
+  // Hidding original buttons:
+  console.log('[peertube-plugin-livechat] Adding class peertube-plugin-livechat-buttons-cloned')
+  buttonsContainer.classList.add('peertube-plugin-livechat-buttons-cloned')
+
   return html`
     ${repeat(buttons, (node) => html`
       <a
diff --git a/conversejs/lib/plugins/livechat-mini-muc-head.ts b/conversejs/lib/plugins/livechat-mini-muc-head.ts
index 7c71cc08..5a7b986d 100644
--- a/conversejs/lib/plugins/livechat-mini-muc-head.ts
+++ b/conversejs/lib/plugins/livechat-mini-muc-head.ts
@@ -21,5 +21,16 @@ export const livechatMiniMucHeadPlugin = {
       buttons = buttons.filter(b => b.name !== 'toggle-topic')
       return buttons
     })
+
+    const restoreClonedButtons = (): void => {
+      console.log('[peertube-plugin-livechat] Removing class peertube-plugin-livechat-buttons-cloned')
+      document.querySelectorAll(
+        '.peertube-plugin-livechat-buttons-cloned'
+      ).forEach(el => el.classList.remove('peertube-plugin-livechat-buttons-cloned'))
+    }
+
+    // muc-head can hide buttons that are cloned, so we restore them on disconnection and chatbox closing.
+    _converse.api.listen.on('disconnected', restoreClonedButtons)
+    _converse.api.listen.on('chatBoxClosed', restoreClonedButtons)
   }
 }