Work in progress: builtin converseJS.

client/videowatch-client-plugin.js

@@ -1,17 +1,18 @@
 'use strict'
 
-const logger = {
+function register ({ registerHook, peertubeHelpers }) {
+  const logger = {
     log: (s) => console.log('[peertube-plugin-livechat] ' + s),
     info: (s) => console.info('[peertube-plugin-livechat] ' + s),
     error: (s) => console.error('[peertube-plugin-livechat] ' + s),
     warn: (s) => console.warn('[peertube-plugin-livechat] ' + s)
-}
+  }
 
-const videoCache = {}
+  const videoCache = {}
-let lastUUID = null
+  let lastUUID = null
-let settings = {}
+  let settings = {}
 
-function parseUUIDs (s) {
+  function parseUUIDs (s) {
     if (!s) {
       return []
     }
@@ -22,27 +23,44 @@ function parseUUIDs (s) {
         .replace(/\s+$/, '')
     })
     return a.filter(line => line !== '')
-}
+  }
 
-function getIframeUri (uuid) {
+  function getBaseRoute () {
+    // FIXME: should be provided by PeertubeHelpers (does not exists for now)
+    return '/plugins/livechat/router'
+  }
+
+  function getIframeUri (uuid) {
     if (!settings) {
       logger.error('Settings are not initialized, too soon to compute the iframeUri')
       return null
     }
-  let iframeUri = settings['chat-uri'] || ''
+    let iframeUri = ''
-  if (iframeUri === '') {
+    if (!settings['chat-use-builtin']) {
-    logger.error('No iframe uri')
+      iframeUri = settings['chat-uri'] || ''
-    return null
-  }
       iframeUri = iframeUri.replace('{{VIDEO_UUID}}', uuid)
       if (!/^https?:\/\//.test(iframeUri)) {
         logger.error('The webchaturi must begin with https://')
         return null
       }
+    } else {
+      // Using the builtin converseJS
+      // FIXME: with Peertube 3.0.1 there is no loadByIdOrUUID method,
+      // we need to pass the complete url.
+      const video = videoCache[uuid]
+      if (video) {
+        const url = video.originInstanceUrl + '/videos/watch/' + uuid
+        iframeUri = getBaseRoute() + '/webchat?url=' + encodeURIComponent(url)
+      }
+    }
+    if (iframeUri === '') {
+      logger.error('No iframe uri')
+      return null
+    }
     return iframeUri
-}
+  }
 
-function displayButton (buttons, name, label, callback) {
+  function displayButton (buttons, name, label, callback) {
     const button = document.createElement('button')
     button.classList.add(
       'action-button',
@@ -53,11 +71,11 @@ function displayButton (buttons, name, label, callback) {
     button.textContent = label
     button.onclick = callback
     buttons.prepend(button)
-}
+  }
 
-function displayChatButtons (peertubeHelpers, uuid) {
+  function displayChatButtons (peertubeHelpers, uuid) {
     logger.log('Adding buttons in the DOM...')
-  const p = new Promise((resolve) => {
+    const p = new Promise((resolve, reject) => {
       Promise.all([
         peertubeHelpers.translate('Open chat'),
         peertubeHelpers.translate('Open chat in a new window'),
@@ -68,9 +86,13 @@ function displayChatButtons (peertubeHelpers, uuid) {
         const labelClose = labels[2]
         const buttons = document.querySelector('.video-actions')
 
+        const iframeUri = getIframeUri(uuid)
+        if (!iframeUri) {
+          return reject(new Error('No uri, cant display the buttons.'))
+        }
         displayButton(buttons, 'openblank', labelOpenBlank, () => {
           closeChat()
-        window.open(getIframeUri(uuid))
+          window.open(iframeUri)
         })
         displayButton(buttons, 'open', labelOpen, () => openChat())
         displayButton(buttons, 'close', labelClose, () => closeChat())
@@ -80,18 +102,18 @@ function displayChatButtons (peertubeHelpers, uuid) {
       })
     })
     return p
-}
+  }
 
-function toggleShowHideButtons (chatOpened) {
+  function toggleShowHideButtons (chatOpened) {
     // showing/hiding buttons...
     document.querySelectorAll('.peertube-plugin-livechat-button-open')
       .forEach(button => (button.style.display = (chatOpened === true || chatOpened === null ? 'none' : '')))
 
     document.querySelectorAll('.peertube-plugin-livechat-button-close')
       .forEach(button => (button.style.display = (chatOpened === false || chatOpened === null ? 'none' : '')))
-}
+  }
 
-function openChat () {
+  function openChat () {
     const p = new Promise((resolve, reject) => {
       const uuid = lastUUID
       if (!uuid) {
@@ -131,17 +153,17 @@ function openChat () {
       resolve()
     })
     return p
-}
+  }
 
-function closeChat () {
+  function closeChat () {
     document.querySelectorAll('.peertube-plugin-livechat-iframe-stuff')
       .forEach(dom => dom.remove())
 
     // showing/hiding buttons...
     toggleShowHideButtons(false)
-}
+  }
 
-function initChat (peertubeHelpers) {
+  function initChat () {
     const el = document.querySelector('#videojs-wrapper')
     if (!el) {
       logger.error('The required div is not present in the DOM.')
@@ -159,11 +181,6 @@ function initChat (peertubeHelpers) {
       const liveOn = !!settings['chat-all-lives']
       const nonLiveOn = !!settings['chat-all-non-lives']
       const uuids = parseUUIDs(settings['chat-videos-list'])
-    const iframeUri = settings['chat-uri'] || ''
-    if (iframeUri === '') {
-      logger.log('no uri, can\'t add chat.')
-      return
-    }
       if (!uuids.length && !liveOn && !nonLiveOn) {
         logger.log('not activated.')
         return
@@ -195,9 +212,8 @@ function initChat (peertubeHelpers) {
         }
       })
     })
-}
+  }
 
-function register ({ registerHook, peertubeHelpers }) {
   registerHook({
     target: 'filter:api.video-watch.video.get.result',
     handler: (video) => {
@@ -208,7 +224,7 @@ function register ({ registerHook, peertubeHelpers }) {
       // FIXME: this should be made in action:video-watch.video.loaded.
       // But with Peertube 3.0.1, this hook is not called for lives
       // in WAITING_FOR_LIVE and LIVE_ENDED states.
-      initChat(peertubeHelpers)
+      initChat()
       return video
     }
   })
@@ -216,7 +232,7 @@ function register ({ registerHook, peertubeHelpers }) {
   // registerHook({
   //   target: 'action:video-watch.video.loaded',
   //   handler: () => {
-  //     initChat(peertubeHelpers)
+  //     initChat()
   //   }
   // })
 }

main.js

@@ -5,7 +5,9 @@ async function register ({
   _storageManager,
   _videoCategoryManager,
   _videoLicenceManager,
-  _videoLanguageManager
+  _videoLanguageManager,
+  getRouter,
+  peertubeHelpers
 }) {
   registerSetting({
     name: 'chat-auto-display',
@@ -41,16 +43,39 @@ async function register ({
       'Don\'t add private videos, the UUIDs will be send to frontend.',
     private: false
   })
+
+  registerSetting({
+    name: 'chat-use-builtin',
+    label: 'Use builtin ConverseJS',
+    type: 'input-checkbox',
+    default: true,
+    private: false,
+    descriptionHTML: 'If checked, use a builtin ConverseJS iframe.<br>' +
+    'You still have to configure an external XMPP service. Please see the documentation.'
+  })
+  registerSetting({
+    name: 'chat-bosh-uri',
+    label: 'Builtin webchat: BOSH uri',
+    type: 'input',
+    default: true,
+    descriptionHTML: 'When using the built-in converseJS webchat:<br>' +
+      'URI of the external BOSH server. Please make sure it accept cross origin request from your domain.',
+    private: true
+  })
+
   registerSetting({
     name: 'chat-uri',
     label: 'Webchat url',
     type: 'input',
     default: '',
-    descriptionHTML: 'The webchat url. An iframe will be created pointing to this url. ' +
+    descriptionHTML: '<b>If you dont want to use the builtin ConverseJS webchat:</b><br>' +
+      '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. ' +
-      'Example : https://my_domain/conversejs.html?room=video_{{VIDEO_UUID}}.',
+      'Example : https://my_domain/conversejs.html?room=video_{{VIDEO_UUID}}.<br>' +
+      'If this field is empty, it will use the builtin ConverseJS webchat.',
     private: false
   })
+
   registerSetting({
     name: 'chat-style',
     label: 'Webchat iframe style attribute',
@@ -60,6 +85,35 @@ async function register ({
       'Example: height:400px;',
     private: false
   })
+
+  const router = getRouter()
+  router.get('/ping', (req, res) => res.json({ message: 'pong' }))
+  router.get('/webchat', async (req, res, next) => {
+    try {
+      // FIXME: with Peertube 3.0.1 the following method is not available...
+      // When loadByIdOrUUID is available, change the entry point to
+      // be /webchat/:videoId
+      // const id = req.param('videoId')
+      // const video = await peertubeHelpers.videos.loadByIdOrUUID(id)
+      let url = req.query.url
+      if (!url) {
+        throw new Error('Missing url parameter)')
+      }
+      let video = await peertubeHelpers.videos.loadByUrl(url)
+      if (!video) {
+        // FIXME: remove this when loadByIdOrUUID will be available...
+        // This is a dirty Hack for dev environnements...
+        url = url.replace(/^https:/, 'http:')
+        video = await peertubeHelpers.videos.loadByUrl(url)
+      }
+      if (!video) {
+        throw new Error('Video not found')
+      }
+      res.send('ok')
+    } catch (error) {
+      return next(error)
+    }
+  })
 }
 
 async function unregister () {