New moderator app WIP:

* #144: moderator notes WIP,
* plugin size: adding an API,
* refactoring the code from the task app, to create a new MUC App
  system.

conversejs/custom/plugins/notes/components/muc-note-app-view.js

@@ -0,0 +1,21 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { api } from '@converse/headless'
+import { MUCApp } from '../../../shared/components/muc-app.js'
+import { tplMUCNoteApp } from '../templates/muc-note-app.js'
+
+/**
+ * Custom Element to display the Notes Application.
+ */
+export default class MUCNoteApp extends MUCApp {
+  enableSettingName = 'livechat_note_app_restore'
+  sessionStorangeShowKey = 'livechat-converse-note-app-show'
+
+  render () {
+    return tplMUCNoteApp(this, this.model)
+  }
+}
+
+api.elements.define('livechat-converse-muc-note-app', MUCNoteApp)

conversejs/custom/plugins/notes/constants.js

@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export const XMLNS_NOTE = 'urn:peertube-plugin-livechat:note'

conversejs/custom/plugins/notes/index.js

@@ -0,0 +1,57 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { _converse, converse } from '../../../src/headless/index.js'
+import { XMLNS_NOTE } from './constants.js'
+import { ChatRoomNote } from './note.js'
+import { ChatRoomNotes } from './notes.js'
+import { initOrDestroyChatRoomNotes, getHeadingButtons, getMessageActionButtons } from './utils.js'
+
+import './components/muc-note-app-view.js'
+
+converse.plugins.add('livechat-converse-notes', {
+  dependencies: ['converse-muc', 'converse-disco', 'converse-pubsub'],
+
+  initialize () {
+    Object.assign(
+      _converse.exports,
+      {
+        ChatRoomNotes,
+        ChatRoomNote
+      }
+    )
+
+    _converse.api.settings.extend({
+      livechat_note_app_enabled: false,
+      livechat_note_app_restore: false // should we open the app by default if it was previously oppened?
+    })
+
+    _converse.api.listen.on('chatRoomInitialized', muc => {
+      muc.session.on('change:connection_status', _session => {
+        // When joining a room, initializing the Notes object (if user has access),
+        // When disconnected from a room, destroying the Notes object:
+        initOrDestroyChatRoomNotes(muc)
+      })
+
+      // When the current user affiliation changes, we must also delete or initialize the TaskLists object:
+      muc.occupants.on('change:affiliation', occupant => {
+        if (occupant.get('jid') !== _converse.bare_jid) { // only for myself
+          return
+        }
+        initOrDestroyChatRoomNotes(muc)
+      })
+
+      // To be sure that everything works in any case, we also must listen for addition in muc.features.
+      muc.features.on('change:' + XMLNS_NOTE, () => {
+        initOrDestroyChatRoomNotes(muc)
+      })
+    })
+
+    // adding the "Notes" button in the MUC heading buttons:
+    _converse.api.listen.on('getHeadingButtons', getHeadingButtons)
+
+    // Adding buttons on message:
+    _converse.api.listen.on('getMessageActionButtons', getMessageActionButtons)
+  }
+})

conversejs/custom/plugins/notes/note.js

@@ -0,0 +1,29 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { Model } from '@converse/skeletor/src/model.js'
+
+/**
+ * A chat room note.
+ * @class
+ * @namespace _converse.exports.ChatRoomNote
+ * @memberof _converse
+ */
+class ChatRoomNote extends Model {
+  idAttribute = 'id'
+
+  async saveItem () {
+    console.log('Saving note ' + this.get('id') + '...')
+    await this.collection.chatroom.noteManager.saveItem(this)
+    console.log('Note ' + this.get('id') + ' saved.')
+  }
+
+  async deleteItem () {
+    return this.collection.chatroom.noteManager.deleteItems([this])
+  }
+}
+
+export {
+  ChatRoomNote
+}

conversejs/custom/plugins/notes/notes.js

@@ -0,0 +1,39 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { Collection } from '@converse/skeletor/src/collection.js'
+import { ChatRoomNote } from './note'
+import { initStorage } from '@converse/headless/utils/storage.js'
+
+/**
+ * A list of {@link _converse.exports.ChatRoomNote} instances, representing notes associated to a MUC.
+ * @class
+ * @namespace _converse.exports.ChatRoomNotes
+ * @memberOf _converse
+ */
+class ChatRoomNotes extends Collection {
+  model = ChatRoomNote
+  comparator = 'order'
+
+  initialize (models, options) {
+    this.model = ChatRoomNote // don't know why, must do it again here
+    super.initialize(arguments)
+    this.chatroom = options.chatroom
+
+    const id = `converse-livechat-notes-${this.chatroom.get('jid')}`
+    initStorage(this, id, 'session')
+
+    this.on('change:order', () => this.sort())
+  }
+
+  // async createNote (data) {
+  //   console.log('Creating note...')
+  //   await this.chatroom.NoteManager.createItem(this, Object.assign({}, data))
+  //   console.log('Note created.')
+  // }
+}
+
+export {
+  ChatRoomNotes
+}

conversejs/custom/plugins/notes/templates/muc-note-app.js

@@ -0,0 +1,51 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { converseLocalizedHelpUrl } from '../../../shared/lib/help'
+import { html } from 'lit'
+import { __ } from 'i18n'
+
+export function tplMUCNoteApp (el, mucModel) {
+  if (!mucModel) {
+    // should not happen
+    el.classList.add('hidden') // we must do this, otherwise will have CSS side effects
+    return html``
+  }
+  if (!mucModel.notes) {
+    // too soon, not initialized yet (this will happen)
+    el.classList.add('hidden') // we must do this, otherwise will have CSS side effects
+    return html``
+  }
+
+  if (!el.show) {
+    el.classList.add('hidden')
+    return html``
+  }
+
+  el.classList.remove('hidden')
+
+  // eslint-disable-next-line no-undef
+  const i18nNotes = __(LOC_moderator_notes)
+  // eslint-disable-next-line no-undef
+  const i18nHelp = __(LOC_online_help)
+  const helpUrl = converseLocalizedHelpUrl({
+    page: 'documentation/user/streamers/notes'
+  })
+
+  return html`
+    <div class="livechat-converse-muc-app-header">
+      <h5>${i18nNotes}</h5>
+      <a href="${helpUrl}" target="_blank"><converse-icon
+          class="fa fa-circle-question"
+          size="1em"
+          title="${i18nHelp}"
+      ></converse-icon></a>
+      <button class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}">
+          <converse-icon class="fa fa-times" size="1em"></converse-icon>
+      </button>
+    </div>
+    <div class="livechat-converse-muc-app-body">
+      <livechat-converse-muc-notes .model=${mucModel.notes}></livechat-converse-muc-notes>
+    </div>`
+}

conversejs/custom/plugins/notes/utils.js

@@ -0,0 +1,146 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { XMLNS_NOTE } from './constants.js'
+import { PubSubManager } from '../../shared/lib/pubsub-manager.js'
+import { converse, _converse, api } from '../../../src/headless/index.js'
+import { __ } from 'i18n'
+
+export function getHeadingButtons (view, buttons) {
+  const muc = view.model
+  if (muc.get('type') !== _converse.constants.CHATROOMS_TYPE) {
+    // only on MUC.
+    return buttons
+  }
+
+  if (!muc.notes) { // this is defined only if user has access (see initOrDestroyChatRoomNotes)
+    return buttons
+  }
+
+  // Adding a "Open moderator noteds" button.
+  buttons.unshift({
+    // eslint-disable-next-line no-undef
+    i18n_text: __(LOC_moderator_notes),
+    handler: async (ev) => {
+      ev.preventDefault()
+      // opening or closing the muc notes:
+      const NoteAppEl = ev.target.closest('converse-root').querySelector('livechat-converse-muc-note-app')
+      NoteAppEl.toggleApp()
+    },
+    a_class: '',
+    icon_class: 'fa-note-sticky',
+    name: 'muc-notes'
+  })
+
+  return buttons
+}
+
+export function getMessageActionButtons (messageActionsEl, buttons) {
+  const messageModel = messageActionsEl.model
+  if (messageModel.get('type') !== 'groupchat') {
+    // only on groupchat message.
+    return buttons
+  }
+
+  const muc = messageModel.collection?.chatbox
+  if (!muc?.notes) {
+    return buttons
+  }
+
+  // TODO: button to create a note from a message.
+  // // eslint-disable-next-line no-undef
+  // const i18nCreate = __(LOC_task_create)
+
+  // buttons.push({
+  //   i18n_text: i18nCreate,
+  //   handler: async (ev) => {
+  //     ev.preventDefault()
+  //     api.modal.show('livechat-converse-pick-task-list-modal', {
+  //       muc,
+  //       message: messageModel
+  //     }, ev)
+  //   },
+  //   button_class: '',
+  //   icon_class: 'fa fa-list-check',
+  //   name: 'muc-task-create-from-message'
+  // })
+
+  return buttons
+}
+
+function _initChatRoomNotes (mucModel) {
+  if (mucModel.noteManager) {
+    // already initiliazed
+    return
+  }
+
+  mucModel.notes = new _converse.exports.ChatRoomNotes(undefined, { chatroom: mucModel })
+
+  mucModel.noteManager = new PubSubManager(
+    mucModel.get('jid'),
+    'livechat-notes', // the node name
+    {
+      note: {
+        itemTag: 'note',
+        xmlns: XMLNS_NOTE,
+        collection: mucModel.notes,
+        fields: {
+          name: String,
+          description: String
+        },
+        attributes: {
+          order: Number
+        }
+      }
+    }
+  )
+  mucModel.noteManager.start().catch(err => console.log(err))
+
+  // We must requestUpdate for all message actions, to add the "create note" button.
+  // FIXME: this should not be done here (but it is simplier for now)
+  document.querySelectorAll('converse-message-actions').forEach(el => el.requestUpdate())
+}
+
+function _destroyChatRoomNotes (mucModel) {
+  if (!mucModel.noteManager) { return }
+
+  mucModel.noteManager.stop().catch(err => console.log(err))
+  mucModel.noteManager = undefined
+
+  mucModel.notes = undefined
+
+  // We must requestUpdate for all message actions, to remove the "create note" button.
+  // FIXME: this should not be done here (but it is simplier for now)
+  document.querySelectorAll('converse-message-actions').forEach(el => el.requestUpdate())
+}
+
+export function initOrDestroyChatRoomNotes (mucModel) {
+  if (mucModel.get('type') !== _converse.constants.CHATROOMS_TYPE) {
+    // only on MUC.
+    return _destroyChatRoomNotes(mucModel)
+  }
+
+  if (!api.settings.get('livechat_note_app_enabled')) {
+    // Feature disabled, no need to handle notes.
+    return _destroyChatRoomNotes(mucModel)
+  }
+
+  if (mucModel.session.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
+    return _destroyChatRoomNotes(mucModel)
+  }
+
+  // We must check disco features
+  // (if the chat is remote, the server could use a livechat version that does not support this feature)
+  if (!mucModel.features?.get?.(XMLNS_NOTE)) {
+    return _destroyChatRoomNotes(mucModel)
+  }
+
+  const myself = mucModel.getOwnOccupant()
+  if (!myself || !['admin', 'owner'].includes(myself.get('affiliation'))) {
+    // User must be admin or owner
+    return _destroyChatRoomNotes(mucModel)
+  }
+
+  return _initChatRoomNotes(mucModel)
+}

conversejs/custom/plugins/size/index.js

@@ -4,6 +4,8 @@
 
 import { _converse, converse, api } from '../../../src/headless/index.js'
 
+let currentSize
+
 /**
  * This plugin computes the available width of converse-root, and adds classes
  * and events so we can adapt the display of some elements to the current
@@ -16,6 +18,27 @@ converse.plugins.add('livechat-converse-size', {
   dependencies: [],
 
   initialize () {
+    Object.assign(api, {
+      livechat_size: {
+        current: () => {
+          return currentSize
+        },
+        width_is: (sizes) => {
+          if (!Array.isArray(sizes)) {
+            sizes = [sizes]
+          }
+          if (!currentSize) { return false }
+          return sizes.includes(currentSize.width)
+        },
+        height_is: (sizes) => {
+          if (!Array.isArray(sizes)) {
+            sizes = [sizes]
+          }
+          if (!currentSize) { return false }
+          return sizes.includes(currentSize.height)
+        }
+      }
+    })
     _converse.api.listen.on('connected', start)
     _converse.api.listen.on('reconnected', start)
     _converse.api.listen.on('disconnected', stop)
@@ -42,6 +65,7 @@ function start () {
 }
 
 function stop () {
+  currentSize = undefined
   rootResizeObserver.disconnect()
   const root = document.querySelector('converse-root')
   if (root) {
@@ -60,8 +84,9 @@ function handle (el) {
 
   el.setAttribute('livechat-converse-root-width', width)
   el.setAttribute('livechat-converse-root-height', height)
-  api.trigger('livechatSizeChanged', {
+  currentSize = {
     height: height,
     width: width
-  })
+  }
+  api.trigger('livechatSizeChanged', Object.assign({}, currentSize)) // cloning...
 }

conversejs/custom/plugins/tasks/components/muc-task-app-view.js

@@ -3,35 +3,19 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { api } from '@converse/headless'
-import { CustomElement } from 'shared/components/element.js'
+import { MUCApp } from '../../../shared/components/muc-app.js'
 import { tplMUCTaskApp } from '../templates/muc-task-app.js'
 
-import '../styles/muc-task-app.scss'
-
 /**
  * Custom Element to display the Task Application.
  */
-export default class MUCTaskApp extends CustomElement {
-  static get properties () {
-    return {
-      model: { type: Object, attribute: true }, // mucModel
-      show: { type: Boolean, attribute: false }
-    }
-  }
-
-  async initialize () {
-    this.show = api.settings.get('livechat_task_app_restore') &&
-      (window.sessionStorage?.getItem?.('livechat-converse-task-app-show') === '1')
-  }
+export default class MUCTaskApp extends MUCApp {
+  enableSettingName = 'livechat_task_app_restore'
+  sessionStorangeShowKey = 'livechat-converse-task-app-show'
 
   render () {
     return tplMUCTaskApp(this, this.model)
   }
-
-  toggleApp () {
-    this.show = !this.show
-    window.sessionStorage?.setItem?.('livechat-converse-task-app-show', this.show ? '1' : '')
-  }
 }
 
 api.elements.define('livechat-converse-muc-task-app', MUCTaskApp)

conversejs/custom/plugins/tasks/styles/muc-task-app.scss

@@ -1,51 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-.conversejs {
-  livechat-converse-muc-task-app {
-    border: var(--occupants-border-left);
-    display: flex;
-    flex-flow: column nowrap;
-    flex: 0 1 100%;
-    padding: var(--occupants-padding);
-
-    .livechat-converse-muc-app-header {
-      column-gap: 0.25em;
-      display: flex;
-      flex-flow: row nowrap;
-      justify-content: space-between;
-      font-family: var(--heading-font);
-      padding-left: 0;
-      margin-right: 1em;
-      width: 100%;
-
-      h5 {
-        color: var(--groupchats-header-color-dark);
-        display: inline;
-        flex-grow: 2;
-      }
-
-      .livechat-converse-muc-app-close {
-        background: unset;
-        border: 0;
-      }
-    }
-
-    .livechat-converse-muc-app-body {
-      padding-right: 2em; // let some place for the scrollbar.
-      overflow-y: auto;
-    }
-  }
-
-  &[livechat-converse-root-width="small"],
-  &[livechat-converse-root-width="medium"] {
-    converse-muc-chatarea livechat-converse-muc-task-app:not(.hidden) ~ * {
-      // on small and medium width, we hide all subsequent siblings of the task app
-      // (when app is not hidden)
-      display: none !important;
-    }
-  }
-}