Terms&Conditions (#18) WIP:

* Converse module to display terms.
* Prosody module to send terms.

conversejs/custom/index.js

@@ -46,6 +46,7 @@ import './plugins/fullscreen/index.js'
 
 import '../custom/plugins/size/index.js'
 import '../custom/plugins/tasks/index.js'
+import '../custom/plugins/terms/index.js'
 /* END: Removable components */
 
 import { CORE_PLUGINS } from './headless/shared/constants.js'
@@ -53,6 +54,7 @@ import { ROOM_FEATURES } from './headless/plugins/muc/constants.js'
 // We must add our custom plugins to CORE_PLUGINS (so it is white listed):
 CORE_PLUGINS.push('livechat-converse-size')
 CORE_PLUGINS.push('livechat-converse-tasks')
+CORE_PLUGINS.push('livechat-converse-terms')
 // We must also add our custom ROOM_FEATURES, so that they correctly resets
 // (see headless/plugins/muc, getDiscoInfoFeatures, which loops on this const)
 ROOM_FEATURES.push('x_peertubelivechat_mute_anonymous')

conversejs/custom/plugins/terms/components/muc-terms.js

@@ -0,0 +1,62 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { CustomElement } from 'shared/components/element.js'
+import { api } from '@converse/headless/core'
+import { html } from 'lit'
+import { __ } from 'i18n'
+
+import '../styles/muc-terms.scss'
+
+export default class MUCTermsView extends CustomElement {
+  static get properties () {
+    return {
+      model: { type: Object, attribute: true },
+      termstype: { type: String, attribute: true }
+    }
+  }
+
+  async initialize () {
+    if (!this.model) {
+      return
+    }
+    this.listenTo(this.model, 'change:x_livechat_terms_' + this.termstype, () => this.requestUpdate())
+  }
+
+  render () {
+    const terms = this.model?.get('x_livechat_terms_' + this.termstype)
+    return html`
+      ${terms && terms.body && !this._hideInfoBox(terms.body)
+        ? html`
+          <div>
+            <converse-rich-text text=${terms.body} render_styling></converse-rich-text>
+            <i class="livechat-hide-terms-info-box" @click=${this.closeInfoBox} title=${__('Close')}>
+              <converse-icon class="fa fa-times" size="1em"></converse-icon>
+            </i>
+          </div>`
+        : ''
+      }`
+  }
+
+  closeInfoBox (ev) {
+    ev.preventDefault()
+    const terms = this.model?.get('x_livechat_terms_' + this.termstype)
+    if (terms) {
+      localStorage?.setItem('x_livechat_terms_' + this.termstype + '_hidden', terms.body)
+    }
+    this.requestUpdate()
+  }
+
+  _hideInfoBox (body) {
+    // When hiding the infobox, we store in localStorage the current body, so we will show it again if message change.
+    // Note: for termstype=global we don't store the MUC server, so if user join chat from different instances,
+    // it will show terms again
+    // Note: same for termstype=muc, we don't store the MUC JID, so if user changes channel,
+    // it will probably show terms again
+    const lsHideInfoBox = localStorage?.getItem('x_livechat_terms_' + this.termstype + '_hidden')
+    return lsHideInfoBox === body
+  }
+}
+
+api.elements.define('livechat-converse-muc-terms', MUCTermsView)

conversejs/custom/plugins/terms/index.js

@@ -0,0 +1,48 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { converse, api } from '../../../src/headless/core.js'
+import './components/muc-terms.js'
+
+const { sizzle } = converse.env
+
+converse.plugins.add('livechat-converse-terms', {
+  dependencies: ['converse-muc'],
+  initialize () {
+    api.listen.on('parseMUCMessage', (stanza, attrs) => {
+      const livechatTerms = sizzle('x-livechat-terms', stanza)
+      if (!livechatTerms.length) {
+        return attrs
+      }
+      return Object.assign(
+        attrs,
+        {
+          x_livechat_terms: livechatTerms[0].getAttribute('type')
+        }
+      )
+    })
+  },
+  overrides: {
+    ChatRoom: {
+      onMessage: function onMessage (attrs) {
+        if (!attrs.x_livechat_terms) {
+          return this.__super__.onMessage(attrs)
+        }
+        // We received a x-livechat-terms message, we don't forward it to standard onMessage,
+        // but we just update the room attribute.
+        const type = attrs.x_livechat_terms
+        if (type !== 'global' && type !== 'muc') {
+          console.error('Invalid x-livechat-terms type: ', type)
+          return
+        }
+        // console.info('Received a x-livechat-terms message', attrs)
+        const options = {}
+        options['x_livechat_terms_' + type] = attrs
+        this.set(options)
+        // this will be displayed by the livechat-converse-muc-terms custom element,
+        // which is inserted in the DOM by the muc.js template overload.
+      }
+    }
+  }
+})

conversejs/custom/plugins/terms/styles/muc-terms.scss

@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.conversejs {
+  livechat-converse-muc-terms {
+    background-color: var(--peertube-main-background);
+    color: var(--peertube-main-foreground);
+
+    div {
+      align-items: center;
+      border: 1px solid var(--peertube-menu-background);
+      display: flex;
+      flex-flow: row;
+      justify-content: space-between;
+      margin: 5px;
+      padding: 5px;
+
+      converse-rich-text {
+        flex-grow: 2;
+        max-height: 5em;
+        overflow-y: scroll;
+        white-space: pre-wrap;
+      }
+
+      .livechat-hide-terms-info-box {
+        cursor: pointer;
+        font-size: var(--font-size-small);
+        flex-shrink: 2;
+      }
+    }
+  }
+}
+
+.livechat-readonly .conversejs {
+  livechat-converse-muc-terms {
+    display: none !important;
+  }
+}

conversejs/custom/templates/muc-bottom-panel.js

@@ -63,7 +63,7 @@ class SlowMode extends CustomElement {
         LOC_slow_mode_info,
         this.model.config.get('slow_mode_duration')
       )}
-      <i class="livechat-hide-slow-mode-info-box" @click=${this.closeSlowModeInfoBox}>
+      <i class="livechat-hide-slow-mode-info-box" @click=${this.closeSlowModeInfoBox} title=${__('Close')}>
         <converse-icon class="fa fa-times" size="1em"></converse-icon>
       </i>
     </div>`

conversejs/custom/templates/muc.js

@@ -0,0 +1,27 @@
+// SPDX-FileCopyrightText: 2013-2024 JC Brand <https://github.com/conversejs/converse.js/>
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: MPL-2.0
+// SPDX-License-Identifier: AGPL-3.0-only
+
+// Must import the original muc.js, because it imports some custom elements files.
+import '../../src/plugins/muc-views/templates/muc.js'
+import { getChatRoomBodyTemplate } from '../../src/plugins/muc-views/utils.js'
+import { html } from 'lit'
+
+// Overloading the original muc.js, to add some custom elements.
+export default (o) => {
+  return html`
+      <div class="flyout box-flyout">
+          <converse-dragresize></converse-dragresize>
+          ${
+            o.model
+              ? html`
+                <converse-muc-heading jid="${o.model.get('jid')}" class="chat-head chat-head-chatroom row no-gutters">
+                </converse-muc-heading>
+                <livechat-converse-muc-terms .model=${o.model} termstype="global"></livechat-converse-muc-terms>
+                <livechat-converse-muc-terms .model=${o.model} termstype="muc"></livechat-converse-muc-terms>
+                <div class="chat-body chatroom-body row no-gutters">${getChatRoomBodyTemplate(o)}</div>`
+              : ''}
+      </div>`
+}

conversejs/custom/webpack.livechat.js

@@ -40,6 +40,7 @@ module.exports = merge(prod, {
     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/muc.js': path.resolve(__dirname, 'custom/templates/muc.js'),
       '../../templates/background_logo.js$': path.resolve(__dirname, 'custom/templates/background_logo.js'),
       './templates/muc-chatarea.js': path.resolve('custom/templates/muc-chatarea.js'),