From 8a2b0634899df2c35a940502ef9c5b0b0f5db293 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Thu, 18 Nov 2021 10:44:30 +0100
Subject: [PATCH] =?UTF-8?q?Settings:=20auto=20compute=20=C2=ABlist=20rooms?=
 =?UTF-8?q?=C2=BB=20button=20styles.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/admin-plugin-client-plugin.ts | 28 +++++++++++++++++++++++-----
 server/lib/settings.ts               |  2 +-
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/client/admin-plugin-client-plugin.ts b/client/admin-plugin-client-plugin.ts
index 86e80a85..fb5c9e0f 100644
--- a/client/admin-plugin-client-plugin.ts
+++ b/client/admin-plugin-client-plugin.ts
@@ -33,12 +33,30 @@ function register ({ registerHook, registerSettingsScript, peertubeHelpers }: Re
       })
       console.log('[peertube-plugin-livechat] Initializing prosody-list-rooms button')
       const listRoomsButtons: NodeListOf<HTMLAnchorElement> =
-        document.querySelectorAll('.peertube-plugin-livechat-prosody-list-rooms')
+        document.querySelectorAll('.peertube-plugin-livechat-prosody-list-rooms-btn')
+
+      try {
+        // Trying to copy Computed CSS for an input[type=submit] to the list rooms button
+        const tmpButton = document.querySelector('#content input[type=submit]')
+        if (window.getComputedStyle && tmpButton) {
+          const styles = window.getComputedStyle(tmpButton)
+          // Firerox has a bug: styles.cssText always returns "". https://bugzilla.mozilla.org/show_bug.cgi?id=137687
+          if (styles.cssText !== '') {
+            listRoomsButtons.forEach(listRoomsButton => { listRoomsButton.style.cssText = styles.cssText })
+          } else {
+            const cssText = Object.values(styles).reduce(
+              (css, propertyName) => `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`
+            )
+            listRoomsButtons.forEach(listRoomsButton => { listRoomsButton.style.cssText = cssText })
+          }
+        }
+      } catch (err) {
+        console.error('[peertube-plugin-livechat] Failed applying styles on the «list rooms» button.', err)
+      }
+
       listRoomsButtons.forEach(listRoomsButton => {
-        if (listRoomsButton.classList.contains('btn')) { return }
-        listRoomsButton.classList.add('btn')
-        listRoomsButton.classList.add('action-button')
-        listRoomsButton.classList.add('orange-button')
+        if (listRoomsButton.classList.contains('peertube-plugin-livechat-prosody-list-rooms-btn-binded')) { return }
+        listRoomsButton.classList.add('peertube-plugin-livechat-prosody-list-rooms-btn-binded')
         listRoomsButton.onclick = async (): Promise<void> => {
           console.log('[peertube-plugin-livechat] Opening the room list...')
           // TODO: use showModal (seems buggy with Peertube 3.2.1)
diff --git a/server/lib/settings.ts b/server/lib/settings.ts
index 4d608684..8a399dd5 100644
--- a/server/lib/settings.ts
+++ b/server/lib/settings.ts
@@ -96,7 +96,7 @@ Please read the
     name: 'prosody-list-rooms',
     label: 'List existing rooms',
     type: 'html',
-    descriptionHTML: '<a class="peertube-plugin-livechat-prosody-list-rooms">List rooms</a>',
+    descriptionHTML: '<a class="peertube-plugin-livechat-prosody-list-rooms-btn">List rooms</a>',
     private: true
   })