Task lists WIP:

* initializing some code parts
* mechanism to add font-awesome icons to the defaults one that
  ConverseJS uses
* new way to override ConverseJS index.js (to add new custom plugins,
  that are directly build into ConverseJS)

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+TODO: add documentation link for the task-list in the CHANGELOG.
+
+## ??? (Not Released Yet)
+
+### New features
+
+* #177: streamer's task/to-do lists: streamers, and their room's moderators, can handle task lists directly. This can be used to handle viewers questions, moderation actions, ... More info in the documentation.
+
 ## 9.0.3
 
 ### Minor changes and fixes

conversejs/build-conversejs.sh

@@ -85,6 +85,8 @@ rm -rf "$converse_build_dir/custom/"
 echo "Adding the custom files..."
 cp -r "$src_dir/custom/" "$converse_build_dir/custom/"
 mv "$converse_build_dir/custom/webpack.livechat.js" "$converse_build_dir/"
+# overriding original index.js file:
+mv "$converse_build_dir/custom/index.js" "$converse_build_dir/src/"
 cp "$src_dir/loc.keys.js" "$converse_build_dir/"
 
 echo "Patching i18n files to add custom labels..."

conversejs/custom/index.js

@@ -0,0 +1,61 @@
+/**
+ * @description This files will override the original ConverseJS index.js file.
+ */
+
+import '@converse/headless'
+import './i18n/index.js'
+import 'shared/registry.js'
+import { CustomElement } from 'shared/components/element'
+import { VIEW_PLUGINS } from './shared/constants.js'
+import { _converse, converse } from '@converse/headless/core'
+
+import 'shared/styles/index.scss'
+
+/* START: Removable plugins
+ * ------------------------
+ * Any of the following plugin imports may be removed if the plugin is not needed
+ *
+ * Comments line were removed for the peertube-plugin-livechat.
+ */
+import './plugins/modal/index.js'
+import './plugins/adhoc-views/index.js' // Views for XEP-0050 Ad-Hoc commands
+import './plugins/bookmark-views/index.js' // Views for XEP-0048 Bookmarks
+import './plugins/chatview/index.js' // Renders standalone chat boxes for single user chat
+import './plugins/controlbox/index.js' // The control box
+import './plugins/headlines-view/index.js'
+import './plugins/mam-views/index.js'
+import './plugins/muc-views/index.js' // Views related to MUC
+// import './plugins/minimize/index.js'       // Allows chat boxes to be minimized
+// import './plugins/notifications/index.js'
+// import './plugins/profile/index.js'
+// import './plugins/omemo/index.js'
+// import './plugins/push/index.js'           // XEP-0357 Push Notifications
+import './plugins/register/index.js' // XEP-0077 In-band registration
+// import './plugins/roomslist/index.js'      // Show currently open chat rooms
+import './plugins/rootview/index.js'
+import './plugins/rosterview/index.js'
+import './plugins/singleton/index.js'
+// import './plugins/dragresize/index.js'     // Allows chat boxes to be resized by dragging them
+import './plugins/fullscreen/index.js'
+
+import '../custom/plugins/tasks/index.js'
+/* END: Removable components */
+
+// We must add our custom plugins to CORE_PLUGINS (so it is white listed):
+import { CORE_PLUGINS } from './headless/shared/constants.js'
+CORE_PLUGINS.push('livechat-converse-tasks')
+
+_converse.CustomElement = CustomElement
+
+const initialize = converse.initialize
+
+converse.initialize = function (settings, callback) {
+  if (Array.isArray(settings.whitelisted_plugins)) {
+    settings.whitelisted_plugins = settings.whitelisted_plugins.concat(VIEW_PLUGINS)
+  } else {
+    settings.whitelisted_plugins = VIEW_PLUGINS
+  }
+  return initialize(settings, callback)
+}
+
+export default converse

conversejs/custom/plugins/tasks/index.js

@@ -0,0 +1,15 @@
+import { _converse, converse } from '../../../src/headless/core.js'
+import { ChatRoomTaskLists } from './task-lists.js'
+import { ChatRoomTaskList } from './task-list.js'
+import { getHeadingButtons } from './utils.js'
+
+converse.plugins.add('livechat-converse-tasks', {
+  dependencies: ['converse-muc', 'converse-disco'], // TODO: add converse-pubsub
+
+  initialize () {
+    _converse.ChatRoomTaskLists = ChatRoomTaskLists
+    _converse.ChatRoomTaskList = ChatRoomTaskList
+
+    _converse.api.listen.on('getHeadingButtons', getHeadingButtons)
+  }
+})

conversejs/custom/plugins/tasks/task-list.js

@@ -0,0 +1,15 @@
+import { Model } from '@converse/skeletor/src/model.js'
+
+/**
+ * A chat room task list.
+ * @class
+ * @namespace _converse.ChatRoomTaskList
+ * @memberof _converse
+ */
+class ChatRoomTaskList extends Model {
+
+}
+
+export {
+  ChatRoomTaskList
+}

conversejs/custom/plugins/tasks/task-lists.js

@@ -0,0 +1,16 @@
+import { Collection } from '@converse/skeletor/src/collection.js'
+import { ChatRoomTaskList } from './task-list'
+
+/**
+ * A list of {@link _converse.ChatRoomTaskList} instances, representing task lists associated to a MUC.
+ * @class
+ * @namespace _converse.ChatRoomTaskLists
+ * @memberOf _converse
+ */
+class ChatRoomTaskLists extends Collection {
+  model = ChatRoomTaskList
+}
+
+export {
+  ChatRoomTaskLists
+}

conversejs/custom/plugins/tasks/utils.js

@@ -0,0 +1,32 @@
+import { _converse } from '../../../src/headless/core.js'
+import { __ } from 'i18n'
+
+export function getHeadingButtons (view, buttons) {
+  const muc = view.model
+  if (muc.get('type') !== _converse.CHATROOMS_TYPE) {
+    // only on MUC.
+    return buttons
+  }
+
+  const myself = muc.getOwnOccupant()
+  if (!myself || !myself.isModerator()) {
+    // User must be moderator
+    return buttons
+  }
+
+  // Adding a "Open task list" button.
+  buttons.unshift({
+    i18n_text: __('Tasks'),
+    handler: async (ev) => {
+      ev.preventDefault()
+      ev.stopPropagation()
+
+      // TODO.
+    },
+    a_class: '',
+    icon_class: 'fa-list', // FIXME
+    name: 'muc-tasks'
+  })
+
+  return buttons
+}

conversejs/custom/shared/components/font-awesome.js

@@ -0,0 +1,22 @@
+/* eslint-disable max-len */
+import { html } from 'lit'
+import tplIcons from '../../../src/shared/templates/icons.js'
+
+export default () => {
+  // Here we are adding some additonal icons to ConverseJS defaults
+  const converseJsIcons = tplIcons()
+
+  return html`
+    ${converseJsIcons}
+
+    <!--
+    Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
+    License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+    -->
+    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+    <symbol id="icon-list" viewBox="0 0 448 512">
+      <path d="M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z"></path>
+    </symbol>
+    </svg>
+  `
+}

conversejs/custom/webpack.livechat.js

@@ -38,6 +38,8 @@ module.exports = merge(prod, {
       './templates/muc-head.js': path.resolve(__dirname, 'custom/templates/muc-head.js'),
       '../../templates/background_logo.js$': path.resolve(__dirname, 'custom/templates/background_logo.js'),
 
+      '../templates/icons.js': path.resolve(__dirname, 'custom/shared/components/font-awesome.js'),
+
       'shared/styles/index.scss$': path.resolve(__dirname, 'custom/shared/styles/livechat.scss'),
 
       'shared/modals/livechat-external-login.js': path.resolve(

conversejs/loc.keys.js

@@ -15,7 +15,8 @@ const locKeys = [
   'login_remote_peertube_video_not_found_try_anyway',
   'login_remote_peertube_video_not_found_try_anyway_button',
   'login_remote_peertube_video_open_failed',
-  'login_external_auth_alert_message'
+  'login_external_auth_alert_message',
+  'tasks'
 ]
 
 module.exports = locKeys

languages/en.yml

@@ -434,3 +434,5 @@ login_remote_peertube_video_not_found_try_anyway: "In some cases, the video can
 login_remote_peertube_video_not_found_try_anyway_button: "Try anyway to open the video on the Peertube instance"
 login_remote_peertube_video_open_failed: "Your browser has blocked the opening on the remote instance, please try to open manually this link:"
 login_external_auth_alert_message: "Authentication failed"
+
+tasks: Tasks