Custom channel emoticons WIP (#130)

conversejs/build-conversejs.sh

@@ -36,8 +36,10 @@ CONVERSE_COMMIT=""
 # - Removing unecessary plugins: headless/pubsub, minimize, notifications, profile, omemo, push, roomlist, dragresize.
 # - Destroy room: remove the challenge, and the new JID
 # - New config option [colorize_username](https://conversejs.org/docs/html/configuration.html#colorize_username)
+# - New loadEmojis hook, to customize emojis at runtime.
+# - Fix custom emojis path when assets_path is not the default path.
 CONVERSE_VERSION="livechat-10.0.0"
-# CONVERSE_COMMIT="821b41e189b25316b9a044cb41ecc9b3f1910172"
+CONVERSE_COMMIT="4402fcc3fc60f6c9334f86528c33a0b463371d12"
 CONVERSE_REPO="https://github.com/JohnXLivingston/converse.js"
 
 rootdir="$(pwd)"

conversejs/builtin.ts

@@ -19,6 +19,7 @@ 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'
+import { livechatEmojisPlugin } from './lib/plugins/livechat-emojis'
 
 declare global {
   interface Window {
@@ -27,6 +28,7 @@ declare global {
       plugins: {
         add: (name: string, plugin: any) => void
       }
+      emojis: any
       livechatDisconnect?: Function
     }
     initConversePlugins: typeof initConversePlugins
@@ -54,6 +56,9 @@ function initConversePlugins (peertubeEmbedded: boolean): void {
   // livechatSpecifics plugins add some customization for the livechat plugin.
   converse.plugins.add('livechatSpecifics', livechatSpecificsPlugin)
 
+  // Channels emojis.
+  converse.plugins.add('livechatEmojis', livechatEmojisPlugin)
+
   if (peertubeEmbedded) {
     // This plugins handles some buttons that are generated by Peertube, to include them in the MUC menu.
     converse.plugins.add('livechatMiniMucHeadPlugin', livechatMiniMucHeadPlugin)

conversejs/lib/converse-params.ts

@@ -14,7 +14,8 @@ import type { AuthentInfos } from './auth'
 function defaultConverseParams (
   {
     forceReadonly, theme, assetsPath, room, forceDefaultHideMucParticipants, autofocus,
-    peertubeVideoOriginalUrl, peertubeVideoUUID
+    peertubeVideoOriginalUrl, peertubeVideoUUID,
+    customEmojisUrl
   }: InitConverseJSParams
 ): any {
   const mucShowInfoMessages = forceReadonly
@@ -84,7 +85,8 @@ function defaultConverseParams (
       'livechatMiniMucHeadPlugin',
       'livechatViewerModePlugin',
       'livechatDisconnectOnUnloadPlugin',
-      'converse-slow-mode'
+      'converse-slow-mode',
+      'livechatEmojis'
     ],
     show_retraction_warning: false, // No need to use this warning (except if we open to external clients?)
     muc_show_info_messages: mucShowInfoMessages,
@@ -98,7 +100,9 @@ function defaultConverseParams (
     livechat_load_all_vcards: !!forceReadonly,
 
     livechat_peertube_video_original_url: peertubeVideoOriginalUrl,
-    livechat_peertube_video_uuid: peertubeVideoUUID
+    livechat_peertube_video_uuid: peertubeVideoUUID,
+
+    livechat_custom_emojis_url: customEmojisUrl
   }
 
   // TODO: params.clear_messages_on_reconnection = true when muc_mam will be available.
@@ -110,6 +114,29 @@ function defaultConverseParams (
   params.clear_cache_on_logout = true
   params.allow_user_trust_override = false
 
+  // We must enable custom emoji category, that ConverseJS disables by default.
+  // We put it last by default, but first if there are any custom emojis for this chat.
+  params.emoji_categories = Object.assign(
+    {},
+    customEmojisUrl
+      ? { custom: ':xmpp:' } // TODO: put here the default custom emoji
+      : {},
+    {
+      smileys: ':grinning:',
+      people: ':thumbsup:',
+      activity: ':soccer:',
+      travel: ':motorcycle:',
+      objects: ':bomb:',
+      nature: ':rainbow:',
+      food: ':hotdog:',
+      symbols: ':musical_note:',
+      flags: ':flag_ac:'
+    },
+    !customEmojisUrl
+      ? { custom: ':converse:' }
+      : {}
+  )
+
   return params
 }
 

conversejs/lib/plugins/livechat-emojis.ts

@@ -0,0 +1,89 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { CustomEmojiDefinition, ChannelEmojis } from 'shared/lib/types'
+
+/**
+ * livechat emojis ConverseJS plugin:
+ * this plugin handles custom channel emojis (if enabled).
+ */
+export const livechatEmojisPlugin = {
+  dependencies: ['converse-emoji'],
+  initialize: function (this: any) {
+    const _converse = this._converse
+
+    _converse.api.settings.extend({
+      livechat_custom_emojis_url: false
+    })
+
+    _converse.api.listen.on('loadEmojis', async (_context: Object, json: any) => {
+      const url = _converse.api.settings.get('livechat_custom_emojis_url')
+      if (!url) {
+        return json
+      }
+
+      let customs
+      try {
+        customs = await loadCustomEmojis(url)
+      } catch (err) {
+        console.error(err)
+      }
+      if (customs === undefined || !customs?.length) {
+        return json
+      }
+
+      // We will put default emojis at the end
+      const defaultCustom = json.custom ?? {}
+      json.custom = {}
+
+      let defaultDef: CustomEmojiDefinition | undefined
+
+      for (const def of customs) {
+        json.custom[def.sn] = {
+          sn: def.sn,
+          url: def.url,
+          c: 'custom'
+        }
+        if (def.isCategoryEmoji) {
+          defaultDef ??= def
+        }
+      }
+
+      for (const key in defaultCustom) {
+        if (key in json.custom) {
+          // Was overriden by the backend, skipping.
+          continue
+        }
+        json.custom[key] = defaultCustom[key]
+      }
+
+      // And if there was a default definition, using it for the custom cat icon.
+      if (defaultDef) {
+        const cat = _converse.api.settings.get('emoji_categories')
+        cat.custom = defaultDef.sn
+      }
+      return json
+    })
+  }
+}
+
+async function loadCustomEmojis (url: string): Promise<CustomEmojiDefinition[]> {
+  const response = await fetch(
+    url,
+    {
+      method: 'GET',
+      // Note: no need to be authenticated here, this is a public API
+      headers: {
+        'content-type': 'application/json;charset=UTF-8'
+      }
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error('Can\'t get channel emojis options.')
+  }
+
+  const customEmojis = (await response.json()) as ChannelEmojis
+  return customEmojis.customEmojis
+}

conversejs/lib/plugins/livechat-specific.ts

@@ -91,11 +91,19 @@ export const livechatSpecificsPlugin = {
         'livechat_mini_muc_head',
         'livechat_specific_external_authent',
         'livechat_task_app_enabled',
-        'livechat_task_app_restore'
+        'livechat_task_app_restore',
+        'livechat_custom_emojis_url',
+        'emoji_categories'
       ]) {
         _converse.api.settings.set(k, params[k])
       }
 
+      // We also unload emojis, in case there are custom emojis.
+      window.converse.emojis = {
+        initialized: false,
+        initialized_promise: getOpenPromise()
+      }
+
       // Then login.
       _converse.api.user.login()
     }
@@ -144,3 +152,32 @@ export const livechatSpecificsPlugin = {
     }
   }
 }
+
+// FIXME: this function is copied from @converse. Should not do so.
+function getOpenPromise (): any {
+  const wrapper: any = {
+    isResolved: false,
+    isPending: true,
+    isRejected: false
+  }
+  const promise: any = new Promise((resolve, reject) => {
+    wrapper.resolve = resolve
+    wrapper.reject = reject
+  })
+  Object.assign(promise, wrapper)
+  promise.then(
+    function (v: any) {
+      promise.isResolved = true
+      promise.isPending = false
+      promise.isRejected = false
+      return v
+    },
+    function (e: any) {
+      promise.isResolved = false
+      promise.isPending = false
+      promise.isRejected = true
+      throw (e)
+    }
+  )
+  return promise
+}