Fix #48: Proper 404 and 403 pages when trying to open non-existant chatroom (WIP).

client/@types/global.d.ts

@@ -76,3 +76,4 @@ declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME: string
 declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_FOR_MORE_INFO: string
 
 declare const LOC_INVALID_VALUE: string
+declare const LOC_CHATROOM_NOT_ACCESSIBLE: string

client/common/room/register.ts

@@ -26,8 +26,12 @@ async function registerRoom (clientOptions: RegisterClientOptions): Promise<void
         await displayConverseJS(clientOptions, container, roomKey, 'peertube-fullpage', forceType)
       } catch (err) {
         console.error('[peertube-plugin-livechat] ' + (err as string))
-        // FIXME: do a better error page.
-        rootEl.innerText = await peertubeHelpers.translate(LOC_NOT_FOUND)
+        // Displaying an error page.
+        rootEl.innerHTML = ''
+        const message = document.createElement('div')
+        message.classList.add('peertube-plugin-livechat-error-message')
+        message.innerText = await peertubeHelpers.translate(LOC_CHATROOM_NOT_ACCESSIBLE)
+        rootEl.append(message)
       }
     }
   })

client/utils/conversejs.ts

@@ -155,7 +155,7 @@ async function displayConverseJS (
     }
   )
   if (!response.ok) {
-    throw new Error('Can\'t get channel configuration options.')
+    throw new Error('Can\'t get room configuration.')
   }
   const converseJSParams: InitConverseJSParams = await (response).json()
 

client/videowatch-client-plugin.ts

@@ -214,7 +214,15 @@ function register (registerOptions: RegisterClientOptions): void {
       // Loading converseJS...
       await displayConverseJS(registerOptions, container, roomkey, 'peertube-video', false)
     } catch (err) {
+      // Displaying an error page.
+      if (container) {
+        const message = document.createElement('div')
+        message.classList.add('peertube-plugin-livechat-error-message')
+        message.innerText = await peertubeHelpers.translate(LOC_CHATROOM_NOT_ACCESSIBLE)
+        container.append(message)
+      }
 
+      hackStyles(false)
     }
   }
 
@@ -229,7 +237,9 @@ function register (registerOptions: RegisterClientOptions): void {
     if (window.converse?.livechatDisconnect) { window.converse.livechatDisconnect() }
 
     // Removing from the DOM
-    container.querySelectorAll('converse-root, .livechat-spinner').forEach(dom => dom.remove())
+    container.querySelectorAll(
+      'converse-root, .livechat-spinner, .peertube-plugin-livechat-error-message'
+    ).forEach(dom => dom.remove())
 
     container.setAttribute('peertube-plugin-livechat-state', 'closed')