External webchat tool: new placeholder CHANNEL_ID in the webchat url.

CHANGELOG.md

@@ -4,7 +4,9 @@
 
 ### Features
 
-* Builtin ConverseJS on external XMPP server: new placeholders for the room name: CHANNEL_ID, CHANNEL_NAME.
+* Possibility to have webchat per channel (see [this request](https://github.com/JohnXLivingston/peertube-plugin-livechat/issues/58))
+  * Builtin ConverseJS on external XMPP server: new placeholders for the room name: CHANNEL_ID, CHANNEL_NAME.
+  * External webchat tool: new placeholder CHANNEL_ID in the webchat url.
 
 ## v3.2.0
 

client/@types/peertube.d.ts

@@ -67,4 +67,13 @@ interface Video {
   name: string
   originInstanceUrl: string
   uuid: string
+  channel: Channel
+}
+
+interface Channel {
+  id: number
+  name: string
+  displayName: string
+  url: string
+  host: string
 }

client/videowatch-client-plugin.ts

@@ -28,7 +28,7 @@ function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
     return staticBase.replace(/\/static.*$/, '/router')
   }
 
-  function getIframeUri (uuid: string): string | null {
+  function getIframeUri (video: Video): string | null {
     if (!settings) {
       logger.error('Settings are not initialized, too soon to compute the iframeUri')
       return null
@@ -37,10 +37,17 @@ function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
     const chatType: ChatType = (settings['chat-type'] ?? 'disabled') as ChatType
     if (chatType === 'builtin-prosody' || chatType === 'builtin-converse') {
       // Using the builtin converseJS
-      iframeUri = getBaseRoute() + '/webchat/room/' + encodeURIComponent(uuid)
+      iframeUri = getBaseRoute() + '/webchat/room/' + encodeURIComponent(video.uuid)
     } else if (chatType === 'external-uri') {
       iframeUri = settings['chat-uri'] || ''
-      iframeUri = iframeUri.replace(/{{VIDEO_UUID}}/g, encodeURIComponent(uuid))
+      iframeUri = iframeUri.replace(/{{VIDEO_UUID}}/g, encodeURIComponent(video.uuid))
+      if (iframeUri.includes('{{CHANNEL_ID}}')) {
+        if (!video.channel || !video.channel.id) {
+          logger.error('Missing channel info in video object.')
+          return null
+        }
+        iframeUri = iframeUri.replace(/{{CHANNEL_ID}}/g, encodeURIComponent(video.channel.id))
+      }
       if (!/^https?:\/\//.test(iframeUri)) {
         logger.error('The webchaturi must begin with https://')
         return null
@@ -85,7 +92,7 @@ function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
     buttonContainer.append(button)
   }
 
-  async function insertChatDom (container: HTMLElement, uuid: string, showOpenBlank: boolean): Promise<void> {
+  async function insertChatDom (container: HTMLElement, video: Video, showOpenBlank: boolean): Promise<void> {
     logger.log('Adding livechat in the DOM...')
     const p = new Promise<void>((resolve, reject) => {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -98,7 +105,7 @@ function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
         const labelOpenBlank = labels[1]
         const labelClose = labels[2]
 
-        const iframeUri = getIframeUri(uuid)
+        const iframeUri = getIframeUri(video)
         if (!iframeUri) {
           return reject(new Error('No uri, cant display the buttons.'))
         }
@@ -107,7 +114,7 @@ function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
         buttonContainer.classList.add('peertube-plugin-livechat-buttons')
         container.append(buttonContainer)
 
-        displayButton(buttonContainer, 'open', labelOpen, () => openChat(uuid), 'talking.svg')
+        displayButton(buttonContainer, 'open', labelOpen, () => openChat(video), 'talking.svg')
         if (showOpenBlank) {
           displayButton(buttonContainer, 'openblank', labelOpenBlank, () => {
             closeChat()
@@ -122,14 +129,14 @@ function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
     return p
   }
 
-  function openChat (uuid: string): void | boolean {
+  function openChat (video: Video): void | boolean {
-    if (!uuid) {
+    if (!video) {
-      logger.log('No current uuid.')
+      logger.log('No video.')
       return false
     }
 
-    logger.info('Trying to load the chat for video ' + uuid + '.')
+    logger.info('Trying to load the chat for video ' + video.uuid + '.')
-    const iframeUri = getIframeUri(uuid)
+    const iframeUri = getIframeUri(video)
     if (!iframeUri) {
       logger.error('Incorrect iframe uri')
       return false
@@ -202,9 +209,9 @@ function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
         return
       }
 
-      insertChatDom(container as HTMLElement, video.uuid, !!settings['chat-open-blank']).then(() => {
+      insertChatDom(container as HTMLElement, video, !!settings['chat-open-blank']).then(() => {
         if (settings['chat-auto-display']) {
-          openChat(video.uuid)
+          openChat(video)
         } else if (container) {
           container.setAttribute('peertube-plugin-livechat-state', 'closed')
         }

documentation/conversejs.md

@@ -30,7 +30,7 @@ You can have a single room for all webchats, or you can use any of there placeho
 - ```{{CHANNEL_ID}}``` to insert the channel numerical ID and have a custom room for each channel.
 - ```{{CHANNEL_NAME}}``` to insert the channel name (see the Peertube's documentation for possible characters) and have a custom room for each channel.
 
-You can mix several placeholder.
+You can mix several placeholders.
 
 Example: ```room_{{VIDEO_UUID}}@room.peertube.im.your_domain```
 

documentation/external.md

@@ -14,10 +14,16 @@ Speficy here the url for you chat application.
 
 You can add the string {{VIDEO_UUID}} in the url, it will be replaced by the video UUID.
 
-It is possible to use a single chat for all your videos if you omit this parameter.
+You can also use {{CHANNEL_ID}} to add the channel id, so you can group webchats per user channel.
+
+It is possible to use a single chat for all your videos if you omit these parameters.
 
 Example:
 ```https://peertube.im.your_domain?room={{VIDEO_UUID}}```
+or
+```https://peertube.im.your_domain?room={{CHANNEL_ID}}```
+
+NB: when using CHANNEL_ID with remote videos, you can have unexpected results. You should consider disabling webchat for remote videos.
 
 ### Chat behaviour
 

server/lib/settings.ts

@@ -165,9 +165,12 @@ You must at least have a BOSH or a Websocket uri.`,
     default: '',
     descriptionHTML:
 `Put here your webchat url. An iframe will be created pointing to this url.
-The placeholder {{VIDEO_UUID}} will be replace by the video UUID if present.
+You can use following placeholders to inject video metadata in the url:
-Example : https://my_domain/conversejs.html?room=video_{{VIDEO_UUID}}.<br>
+<ul>
-If this field is empty, it will use the builtin ConverseJS webchat.`,
+  <li>{{VIDEO_UUID}} to add the video UUID.</li>
+  <li>{{CHANNEL_ID}} to add the CHANNEL numerical ID.</li>
+</ul>
+Example : https://my_domain/conversejs.html?room=video_{{VIDEO_UUID}}.`,
     private: false
   })