Initialize prosody-list-rooms button.

client/@types/peertube.d.ts

@@ -11,6 +11,7 @@ interface RegisterClientHelpers {
   // NB: getBaseRouterRoute will come with Peertube > 3.2.1 (3.3.0?)
   getBaseRouterRoute?: () => string
   isLoggedIn: () => boolean
+  getAuthHeader: () => { 'Authorization': string } | undefined
   getSettings: () => Promise<{ [ name: string ]: string }>
   notifier: {
     info: (text: string, title?: string, timeout?: number) => void

client/admin-plugin-client-plugin.ts

@@ -1,4 +1,4 @@
-import type { ChatType } from 'shared/lib/types'
+import type { ChatType, ProsodyListRoomsResult } from 'shared/lib/types'
 
 interface ActionPluginSettingsParams {
   npmName: string
@@ -31,6 +31,59 @@ function register ({ registerHook, registerSettingsScript, peertubeHelpers }: Re
         diagButton.setAttribute('href', getBaseRoute() + '/settings/diagnostic')
         diagButton.setAttribute('target', '_blank')
       })
+      console.log('[peertube-plugin-livechat] Initializing prosody-list-rooms button')
+      const listRoomsButtons: NodeListOf<HTMLAnchorElement> =
+        document.querySelectorAll('.peertube-plugin-livechat-prosody-list-rooms')
+      listRoomsButtons.forEach(listRoomsButton => {
+        if (listRoomsButton.classList.contains('btn')) { return }
+        listRoomsButton.classList.add('btn')
+        listRoomsButton.classList.add('action-button')
+        listRoomsButton.classList.add('orange-button')
+        listRoomsButton.onclick = async (): Promise<void> => {
+          console.log('[peertube-plugin-livechat] Opening the room list...')
+          // TODO: use showModal (seems buggy with Peertube 3.2.1)
+
+          try {
+            document.querySelectorAll('.peertube-plugin-livechat-prosody-list-rooms-content')
+              .forEach(dom => dom.remove())
+            const container = document.createElement('div')
+            container.classList.add('peertube-plugin-livechat-prosody-list-rooms-content')
+            container.textContent = '...'
+            listRoomsButton.after(container)
+
+            const response = await fetch(getBaseRoute() + '/settings/prosody-list-rooms', {
+              method: 'GET',
+              headers: peertubeHelpers.getAuthHeader()
+            })
+            if (!response.ok) {
+              throw new Error('Response is not ok')
+            }
+            const json: ProsodyListRoomsResult = await response.json()
+            if (!json.ok) {
+              container.textContent = json.error
+              container.classList.add('peertube-plugin-livechat-error')
+            } else {
+              container.textContent = ''
+              const table = document.createElement('table')
+              container.append(table)
+              json.rooms.forEach(room => {
+                const lineEl = document.createElement('tr')
+                const nameEl = document.createElement('td')
+                const aEl = document.createElement('a')
+                aEl.textContent = room.name
+                aEl.href = room.href
+                aEl.target = '_blank'
+                nameEl.append(aEl)
+                lineEl.append(nameEl)
+                table.append(lineEl)
+              })
+            }
+          } catch (error) {
+            console.error(error)
+            peertubeHelpers.notifier.error('Room list failed')
+          }
+        }
+      })
     }
   })
   registerSettingsScript({
@@ -41,6 +94,7 @@ function register ({ registerHook, registerSettingsScript, peertubeHelpers }: Re
           return options.formValues['chat-type'] !== ('disabled' as ChatType)
         case 'prosody-port':
         case 'chat-type-help-builtin-prosody':
+        case 'prosody-list-rooms':
           return options.formValues['chat-type'] !== ('builtin-prosody' as ChatType)
         case 'chat-server':
         case 'chat-room':