Room list: using new chat page

client/admin-plugin-client-plugin.ts

@@ -160,8 +160,7 @@ function register (clientOptions: RegisterClientOptions): void {
                   // Here we have a channel chat room
                   // The backend should have added informations here
                   // (because the Peertube API can't work with channelId...)
-                  const href = getBaseRoute(clientOptions) +
-                    '/webchat/room/' + encodeURIComponent(localpart) + '?forcetype=1'
+                  const href = '/p/livechat/room?room=' + encodeURIComponent(localpart) + '&forcetype=1'
                   if (room.channel?.name) {
                     aEl.href = href // here we know that the channel still exists, so we can open the webchat.
                     const aVideoEl = document.createElement('a')
@@ -176,8 +175,7 @@ function register (clientOptions: RegisterClientOptions): void {
                 } else if (/^[a-zA-A0-9-]+$/.test(localpart)) {
                   // localpart must be a video uuid.
                   const uuid = localpart
-                  const href = getBaseRoute(clientOptions) +
-                    '/webchat/room/' + encodeURIComponent(uuid) + '?forcetype=1'
+                  const href = '/p/livechat/room?room=' + encodeURIComponent(uuid) + '&forcetype=1'
                   const p = fetch('/api/v1/videos/' + uuid, {
                     method: 'GET',
                     headers: peertubeHelpers.getAuthHeader()

client/common-client-plugin.ts

@@ -1,6 +1,7 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import type { RegisterClientFormFieldOptions } from '@peertube/peertube-types'
 import { registerConfiguration } from './common/configuration/register'
+import { registerRoom } from './common/room/register'
 
 async function register (clientOptions: RegisterClientOptions): Promise<void> {
   const { peertubeHelpers, registerHook, registerVideoField } = clientOptions
@@ -56,7 +57,10 @@ async function register (clientOptions: RegisterClientOptions): Promise<void> {
   registerVideoField(webchatFieldOptions, { type: 'update' })
   registerVideoField(webchatFieldOptions, { type: 'go-live' })
 
-  await registerConfiguration(clientOptions)
+  await Promise.all([
+    registerRoom(clientOptions),
+    registerConfiguration(clientOptions)
+  ])
 }
 
 export {

client/common/configuration/register.ts

@@ -1,7 +1,6 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { renderConfigurationHome } from './templates/home'
 import { renderConfigurationChannel } from './templates/channel'
-import { displayConverseJS } from '../../utils/conversejs'
 
 /**
  * Registers stuff related to the user's configuration pages.
@@ -13,29 +12,6 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro
   const settings = await peertubeHelpers.getSettings()
   if (settings['disable-channel-configuration']) { return }
 
-  registerClientRoute({
-    route: 'livechat/room',
-    onMount: async ({ rootEl }) => {
-      try {
-        const urlParams = new URLSearchParams(window.location.search)
-        const roomKey = urlParams.get('room')
-        if (!roomKey) {
-          throw new Error('missing room parameter')
-        }
-
-        const container = document.createElement('div')
-        container.classList.add('livechat-embed-fullpage')
-        rootEl.append(container)
-
-        await displayConverseJS(clientOptions, container, roomKey, 'peertube-fullpage')
-      } catch (err) {
-        console.error('[peertube-plugin-livechat] ' + (err as string))
-        // FIXME: do a better error page.
-        rootEl.innerText = await peertubeHelpers.translate(LOC_NOT_FOUND)
-      }
-    }
-  })
-
   registerClientRoute({
     route: 'livechat/configuration',
     onMount: async ({ rootEl }) => {

client/common/room/register.ts

@@ -0,0 +1,38 @@
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import { displayConverseJS } from '../../utils/conversejs'
+
+/**
+ * Registers stuff related to "room" page.
+ * @param clientOptions Peertube client options
+ */
+async function registerRoom (clientOptions: RegisterClientOptions): Promise<void> {
+  const { peertubeHelpers, registerClientRoute } = clientOptions
+
+  registerClientRoute({
+    route: 'livechat/room',
+    onMount: async ({ rootEl }) => {
+      try {
+        const urlParams = new URLSearchParams(window.location.search)
+        const roomKey = urlParams.get('room')
+        if (!roomKey) {
+          throw new Error('missing room parameter')
+        }
+        const forceType = urlParams.get('forcetype') === '1'
+
+        const container = document.createElement('div')
+        container.classList.add('livechat-embed-fullpage')
+        rootEl.append(container)
+
+        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)
+      }
+    }
+  })
+}
+
+export {
+  registerRoom
+}

client/utils/conversejs.ts

@@ -116,12 +116,14 @@ async function loadConverseJS (converseJSParams: InitConverseJSParams): Promise<
  * @param container the dom element where to insert the chat
  * @param roomKey the room to join
  * @param chatIncludeMode the include mode
+ * @param forceType only usable for admins/moderators, to enter rooms that have not the current type (channel/video)
  */
 async function displayConverseJS (
   clientOptions: RegisterClientOptions,
   container: HTMLElement,
   roomKey: string,
-  chatIncludeMode: ChatPeertubeIncludeMode
+  chatIncludeMode: ChatPeertubeIncludeMode,
+  forceType: boolean
 ): Promise<void> {
   const peertubeHelpers = clientOptions.peertubeHelpers
 
@@ -139,7 +141,9 @@ async function displayConverseJS (
   const authHeader = peertubeHelpers.getAuthHeader()
 
   const response = await fetch(
-    getBaseRoute(clientOptions) + '/api/configuration/room/' + encodeURIComponent(roomKey),
+    getBaseRoute(clientOptions) + '/api/configuration/room/' +
+      encodeURIComponent(roomKey) +
+      (forceType ? '?forcetype=1' : ''),
     {
       method: 'GET',
       headers: peertubeHelpers.getAuthHeader()

client/videowatch-client-plugin.ts

@@ -204,7 +204,7 @@ function register (registerOptions: RegisterClientOptions): void {
       }
 
       // Loading converseJS...
-      await displayConverseJS(registerOptions, container, roomkey, 'peertube-video')
+      await displayConverseJS(registerOptions, container, roomkey, 'peertube-video', false)
 
       if (additionalStyles) {
         container.setAttribute('style', additionalStyles)

server/lib/routers/api/configuration.ts

@@ -18,7 +18,9 @@ async function initConfigurationApiRouter (options: RegisterServerOptions, route
   router.get('/configuration/room/:roomKey', asyncMiddleware(
     async (req: Request, res: Response, _next: NextFunction): Promise<void> => {
       const roomKey = req.params.roomKey
-      const initConverseJSParam = await getConverseJSParams(options, roomKey, {})
+      const initConverseJSParam = await getConverseJSParams(options, roomKey, {
+        forcetype: req.query.forcetype === '1'
+      })
       if (('isError' in initConverseJSParam) && initConverseJSParam.isError) {
         res.sendStatus(initConverseJSParam.code)
         return