Fix 355: Make the ConverseJS dropdown menu available everywhere (WIP)

assets/styles/style.scss

@@ -9,12 +9,13 @@
   }
 }
 
-.peertube-plugin-livechat-buttons {
+.peertube-plugin-livechat-buttons,
+.livechat-mini-muc-bar-buttons {
   align-items: center;
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-end;
-  padding-right: 12px; // to avoid being under the window scrollbar.
+  padding-right: 12px !important; // to avoid being under the window scrollbar.
 }
 
 .peertube-plugin-livechat-button {
@@ -30,10 +31,19 @@
   }
 }
 
-.peertube-plugin-livechat-buttons-open .peertube-plugin-livechat-button {
-  height: 18px !important;
-  margin: 2px !important;
-  padding: 1px !important;
+.peertube-plugin-livechat-buttons-open,
+.livechat-mini-muc-bar-buttons {
+  .peertube-plugin-livechat-button {
+    height: 18px !important;
+    margin: 2px !important;
+    padding: 1px !important;
+  }
+}
+
+.peertube-plugin-livechat-buttons-open {
+  // So that buttons will be behind chatbox (buttons are then cloned by our custom muc-head template):
+  position: fixed;
+  right: 0;
 }
 
 [peertube-plugin-livechat-state="initializing"] {

conversejs/builtin.ts

@@ -14,6 +14,7 @@ import { slowModePlugin } from './lib/plugins/slow-mode'
 import { windowTitlePlugin } from './lib/plugins/window-title'
 import { livechatSpecificsPlugin } from './lib/plugins/livechat-specific'
 import { livechatViewerModePlugin } from './lib/plugins/livechat-viewer-mode'
+import { livechatMiniMucHeadPlugin } from './lib/plugins/livechat-mini-muc-head'
 
 declare global {
   interface Window {
@@ -48,6 +49,11 @@ function initConversePlugins (peertubeEmbedded: boolean): void {
   // livechatSpecifics plugins add some customization for the livechat plugin.
   converse.plugins.add('livechatSpecifics', livechatSpecificsPlugin)
 
+  if (peertubeEmbedded) {
+    // This plugins handles some buttons that are generated by Peertube, to include them in the MUC menu.
+    converse.plugins.add('livechatMiniMucHeadPlugin', livechatMiniMucHeadPlugin)
+  }
+
   // Viewer mode (anonymous accounts, before they have chosen their nickname).
   converse.plugins.add('livechatViewerModePlugin', livechatViewerModePlugin)
 }
@@ -154,6 +160,10 @@ async function initConverse (
   // no viewer mode if authenticated.
   params.livechat_enable_viewer_mode = autoViewerMode && !isAuthenticated && !isRemoteWithNicknameSet
 
+  if (chatIncludeMode === 'peertube-video') {
+    params.livechat_mini_muc_head = true // we must replace the muc-head by the custom buttons toolbar.
+  }
+
   try {
     if (window.reconnectConverse) { // this is set in the livechatSpecificsPlugin
       window.reconnectConverse(params)

conversejs/custom/shared/styles/livechat.scss

@@ -2,14 +2,26 @@
 @import "shared/styles/index";
 @import "./peertubetheme";
 
-body.livechat-iframe,
-#peertube-plugin-livechat-container {
+body.livechat-iframe {
   #conversejs .chat-head {
-    // Hidding the chat-head when the plugin is displayed in an iframe or besides a video.
+    // Hidding the chat-head when the plugin is displayed in an iframe
     display: none;
   }
 }
 
+#peertube-plugin-livechat-container #conversejs .chat-head {
+  // When besides a video, reduce the size of the toolbar.
+  padding: 0 !important;
+}
+
+#conversejs .livechat-mini-muc-bar-buttons {
+  a.orange-button {
+    // force these colors...
+    color: var(--peertube-button-foreground);
+    background-color: var(--peertube-button-background);
+  }
+}
+
 #conversejs-bg {
   // We are using a custom template that differs from the original, this is required.
   .converse-brand__heading {

conversejs/custom/templates/muc-head.js

@@ -0,0 +1,77 @@
+
+import { html } from 'lit'
+import { api } from '@converse/headless/core'
+import { until } from 'lit/directives/until.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js'
+import tplMucHead from '../../src/plugins/muc-views/templates/muc-head.js'
+
+/**
+ * Clones the Peertube buttons, and add them in the template.
+ */
+function getPeertubeButtons () {
+  // searching original buttons in the DOM, and if found:
+  // - clone a button in ConverseJS, that triggers the original button click event.
+  // Note: original buttons will be hidden behind ConverseJS, so no need to hide them.
+
+  const buttonsContainer = document.querySelector(
+    '.peertube-plugin-livechat-buttons.peertube-plugin-livechat-buttons-open'
+  )
+  if (!buttonsContainer) { return html`` }
+
+  const buttons = []
+  buttonsContainer.childNodes.forEach(button => {
+    try {
+      if (button.offsetParent === null) {
+        // Trick to detect if element is hidden
+        // (see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetParent)
+        return
+      }
+
+      buttons.push(button)
+    } catch (err) {
+      console.error(err)
+    }
+  })
+
+  if (!buttons.length) {
+    return html``
+  }
+
+  return html`
+    ${repeat(buttons, (node) => html`
+      <a
+        href="#"
+        class="${
+          // adding original classes
+          node.className
+        }"
+        @click=${() => {
+          // triggering the original button click
+          node.click()
+        }}
+      >
+        ${unsafeHTML(node.innerHTML)}
+      </a>
+    `)}
+  `
+}
+
+export default (el) => {
+  if (!api.settings.get('livechat_mini_muc_head')) {
+    // original Template (this settings comes with livechatMiniMucHeadPlugin)
+    return html`${tplMucHead(el)}`
+  }
+
+  // Custom template, with only the buttons.
+  const subjectHidden = true
+  const headingButtonsPromise = el.getHeadingButtons(subjectHidden)
+  return html`
+    <div class="livechat-mini-muc-bar-buttons">
+      ${getPeertubeButtons()}
+      ${until(getStandaloneButtons(headingButtonsPromise), '')}
+      ${until(getDropdownButtons(headingButtonsPromise), '')}
+    </div>
+  `
+}

conversejs/custom/webpack.livechat.js

@@ -35,8 +35,11 @@ module.exports = merge(prod, {
     extensions: ['.js'],
     alias: {
       './templates/muc-bottom-panel.js': path.resolve('custom/templates/muc-bottom-panel.js'),
+      './templates/muc-head.js': path.resolve(__dirname, 'custom/templates/muc-head.js'),
       '../../templates/background_logo.js$': path.resolve(__dirname, 'custom/templates/background_logo.js'),
+
       'shared/styles/index.scss$': path.resolve(__dirname, 'custom/shared/styles/livechat.scss'),
+
       'shared/modals/livechat-external-login.js': path.resolve(
         __dirname,
         'custom/shared/modals/livechat-external-login.js'

conversejs/lib/converse-params.ts

@@ -77,6 +77,7 @@ function defaultConverseParams (
     whitelisted_plugins: [
       'livechatWindowTitlePlugin',
       'livechatSpecifics',
+      'livechatMiniMucHeadPlugin',
       'livechatViewerModePlugin',
       'livechatDisconnectOnUnloadPlugin',
       'converse-slow-mode'

conversejs/lib/plugins/livechat-mini-muc-head.ts

@@ -0,0 +1,25 @@
+/**
+ * Plugin to add buttons (help, close, open in another window) in the muc menu,
+ * when we are embedded in Peertube.
+ */
+export const livechatMiniMucHeadPlugin = {
+  dependencies: ['converse-muc', 'converse-muc-views'],
+  initialize: function (this: any) {
+    const _converse = this._converse
+    _converse.api.settings.extend({
+      // tells the overloaded template to render differently.
+      livechat_mini_muc_head: false
+    })
+
+    _converse.api.listen.on('getHeadingButtons', (view: any, buttons: any[]) => {
+      if (view.model.get('type') !== _converse.CHATROOMS_TYPE) {
+        // only on MUC.
+        return
+      }
+
+      // removing the 'show/hide topic' buttons
+      buttons = buttons.filter(b => b.name !== 'toggle-topic')
+      return buttons
+    })
+  }
+}