Custom channel emoticons WIP (#130)

.reuse/dep5

@@ -9,6 +9,10 @@ Source: https://github.com/JohnXLivingston/peertube-plugin-livechat/
 # Copyright: $YEAR $NAME <$CONTACT>
 # License: ...
 
+Files: CHANGELOG.md
+Copyright: 2024 John Livingston <https://www.john-livingston.fr/>
+License: AGPL-3.0-only
+
 Files: languages/*
 Copyright: 2024 John Livingston <https://www.john-livingston.fr/>
 License: AGPL-3.0-only

CHANGELOG.md

@@ -1,8 +1,5 @@
-<!--
+TODO: tag conversejs livechat branch, and replace commit ID in build-converse.js
-SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+TODO: handle custom emojis url for remote video.
-
-SPDX-License-Identifier: AGPL-3.0-only
--->
 
 # Changelog
 
@@ -10,8 +7,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 ### New features
 
-* Overhauled configuration page, with more broadly customizable lists of parameters by @Murazaki ([See pull request #352](https://github.com/JohnXLivingston/peertube-plugin-livechat/pull/352))
+* Overhauled configuration page, with more broadly customizable lists of parameters by @Murazaki ([See pull request #352](https://github.com/JohnXLivingston/peertube-plugin-livechat/pull/352)).
 * #377: new setting to listen C2S connection on non-localhost interfaces.
+* #130: custom channel emoticons.
 
 ## 10.0.2
 

client/common/configuration/elements/channel-emojis.ts

@@ -0,0 +1,56 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import { LivechatElement } from '../../lib/elements/livechat'
+import { registerClientOptionsContext } from '../../lib/contexts/peertube'
+import { ChannelDetailsService } from '../services/channel-details'
+import { channelDetailsServiceContext } from '../contexts/channel'
+import { ChannelEmojis } from 'shared/lib/types'
+// import { ptTr } from '../../lib/directives/translation'
+import { Task } from '@lit/task'
+import { customElement, property } from 'lit/decorators.js'
+import { provide } from '@lit/context'
+
+/**
+ * Channel emojis configuration page.
+ */
+@customElement('livechat-channel-emojis')
+export class ChannelEmojisElement extends LivechatElement {
+  @provide({ context: registerClientOptionsContext })
+  @property({ attribute: false })
+  public registerClientOptions?: RegisterClientOptions
+
+  @property({ attribute: false })
+  public channelId?: number
+
+  private _channelEmojis?: ChannelEmojis
+
+  @provide({ context: channelDetailsServiceContext })
+  private _channelDetailsService?: ChannelDetailsService
+
+  protected override render = (): void => {
+    return this._asyncTaskRender.render({
+      pending: () => {},
+      complete: () => {},
+      error: (err: any) => {
+        this.registerClientOptions?.peertubeHelpers.notifier.error(err.toString())
+      }
+    })
+  }
+
+  private readonly _asyncTaskRender = new Task(this, {
+    task: async () => {
+      if (!this.registerClientOptions) {
+        throw new Error('Missing client options')
+      }
+      if (!this.channelId) {
+        throw new Error('Missing channelId')
+      }
+      this._channelDetailsService = new ChannelDetailsService(this.registerClientOptions)
+      this._channelEmojis = await this._channelDetailsService.fetchEmojis(this.channelId)
+    },
+    args: () => []
+  })
+}

client/common/configuration/elements/index.js

@@ -1,7 +1,9 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
 // SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
 // Add here all your elements, the main JS file will import them all.
-import './channel-configuration'
 import './channel-home'
+import './channel-configuration'
+import './channel-emojis'

client/common/configuration/register.ts

@@ -37,6 +37,20 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro
     }
   })
 
+  registerClientRoute({
+    route: 'livechat/configuration/emojis',
+    onMount: async ({ rootEl }) => {
+      const urlParams = new URLSearchParams(window.location.search)
+      const channelId = urlParams.get('channelId') ?? ''
+      render(html`
+        <livechat-channel-emojis
+          .registerClientOptions=${clientOptions}
+          .channelId=${channelId}
+        ></livechat-channel-emojis>
+      `, rootEl)
+    }
+  })
+
   registerHook({
     target: 'filter:left-menu.links.create.result',
     handler: async (links: any) => {

client/common/configuration/services/channel-details.ts

@@ -4,7 +4,9 @@
 
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import type { ValidationError } from '../../lib/models/validation'
-import type { ChannelLiveChatInfos, ChannelConfiguration, ChannelConfigurationOptions } from 'shared/lib/types'
+import type {
+  ChannelLiveChatInfos, ChannelConfiguration, ChannelConfigurationOptions, ChannelEmojis
+} from 'shared/lib/types'
 import { ValidationErrorType } from '../../lib/models/validation'
 import { getBaseRoute } from '../../../utils/uri'
 
@@ -158,4 +160,22 @@ export class ChannelDetailsService {
 
     return response.json()
   }
+
+  fetchEmojis = async (channelId: number): Promise<ChannelEmojis> => {
+    const response = await fetch(
+      getBaseRoute(this._registerClientOptions) +
+        '/api/configuration/channel/emojis/' +
+        encodeURIComponent(channelId),
+      {
+        method: 'GET',
+        headers: this._headers
+      }
+    )
+
+    if (!response.ok) {
+      throw new Error('Can\'t get channel emojis options.')
+    }
+
+    return response.json()
+  }
 }

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
+}

server/lib/conversejs/params.ts

@@ -43,7 +43,8 @@ async function getConverseJSParams (
     'converse-theme',
     'federation-no-remote-chat',
     'prosody-room-allow-s2s',
-    'chat-no-anonymous'
+    'chat-no-anonymous',
+    'disable-channel-configuration'
   ])
 
   if (settings['chat-no-anonymous'] && userIsConnected === false) {
@@ -133,7 +134,8 @@ async function getConverseJSParams (
     // forceDefaultHideMucParticipants is for testing purpose
     // (so we can stress test with the muc participant list hidden by default)
     forceDefaultHideMucParticipants: params.forceDefaultHideMucParticipants,
-    externalAuthOIDC
+    externalAuthOIDC,
+    customEmojisUrl: connectionInfos.customEmojisUrl
   }
 }
 
@@ -237,6 +239,7 @@ async function _connectionInfos (
     localWsUri: string | null
     remoteConnectionInfos: WCRemoteConnectionInfos | undefined
     roomJID: string
+    customEmojisUrl?: string
   } | InitConverseJSParamsError> {
   const { video, remoteChatInfos, channelId, roomKey } = roomInfos
 
@@ -249,6 +252,7 @@ async function _connectionInfos (
 
   let remoteConnectionInfos: WCRemoteConnectionInfos | undefined
   let roomJID: string
+  let customEmojisUrl: string | undefined
   if (video?.remote) {
     const canWebsocketS2S = !settings['federation-no-remote-chat'] && !settings['disable-websocket']
     const canDirectS2S = !settings['federation-no-remote-chat'] && !!settings['prosody-room-allow-s2s']
@@ -266,6 +270,8 @@ async function _connectionInfos (
       }
     }
     roomJID = remoteConnectionInfos.roomJID
+
+    // TODO: fill customEmojisUrl (how to get the info? is the remote livechat compatible?)
   } else {
     try {
       roomJID = await _localRoomJID(
@@ -277,6 +283,12 @@ async function _connectionInfos (
         channelId,
         params.forcetype ?? false
       )
+
+      if (!settings['disable-channel-configuration'] && video?.channelId) {
+        customEmojisUrl = getBaseRouterRoute(options) +
+          'api/configuration/channel/emojis/' +
+          encodeURIComponent(video.channelId)
+      }
     } catch (err) {
       options.peertubeHelpers.logger.error(err)
       return {
@@ -293,7 +305,8 @@ async function _connectionInfos (
     localBoshUri,
     localWsUri,
     remoteConnectionInfos,
-    roomJID
+    roomJID,
+    customEmojisUrl
   }
 }
 

server/lib/middlewares/configuration/channel.ts

@@ -12,9 +12,13 @@ import { isUserAdminOrModerator } from '../../helpers'
  * Returns a middleware handler to get the channelInfos from the channel parameter.
  * This is used in api related to channel configuration options.
  * @param options Peertube server options
+ * @param publicPage If true, the page is considered public, and we don't test user rights.
  * @returns middleware function
  */
-function getCheckConfigurationChannelMiddleware (options: RegisterServerOptions): RequestPromiseHandler {
+function getCheckConfigurationChannelMiddleware (
+  options: RegisterServerOptions,
+  publicPage?: boolean
+): RequestPromiseHandler {
   return async (req: Request, res: Response, next: NextFunction) => {
     const logger = options.peertubeHelpers.logger
     const channelId = req.params.channelId
@@ -32,18 +36,20 @@ function getCheckConfigurationChannelMiddleware (options: RegisterServerOptions)
       return
     }
 
-    // To access this page, you must either be:
+    if (!publicPage) {
-    // - the channel owner,
+      // To access this page, you must either be:
-    // - an instance modo/admin
+      // - the channel owner,
-    // - TODO: a channel chat moderator, as defined in this page.
+      // - an instance modo/admin
-    if (channelInfos.ownerAccountId === currentUser.Account.id) {
+      // - TODO: a channel chat moderator, as defined in this page.
-      logger.debug('Current user is the channel owner')
+      if (channelInfos.ownerAccountId === currentUser.Account.id) {
-    } else if (await isUserAdminOrModerator(options, res)) {
+        logger.debug('Current user is the channel owner')
-      logger.debug('Current user is an instance moderator or admin')
+      } else if (await isUserAdminOrModerator(options, res)) {
-    } else {
+        logger.debug('Current user is an instance moderator or admin')
-      logger.warn('Current user tries to access a channel for which he has no right.')
+      } else {
-      res.sendStatus(403)
+        logger.warn('Current user tries to access a channel for which he has no right.')
-      return
+        res.sendStatus(403)
+        return
+      }
     }
 
     logger.debug('User can access the configuration channel api.')

server/lib/routers/api/configuration.ts

@@ -4,7 +4,7 @@
 
 import type { RegisterServerOptions } from '@peertube/peertube-types'
 import type { Router, Request, Response, NextFunction } from 'express'
-import type { ChannelInfos } from '../../../../shared/lib/types'
+import type { ChannelInfos, ChannelEmojis } from '../../../../shared/lib/types'
 import { asyncMiddleware } from '../../middlewares/async'
 import { getCheckConfigurationChannelMiddleware } from '../../middlewares/configuration/channel'
 import { checkConfigurationEnabledMiddleware } from '../../middlewares/configuration/configuration'
@@ -110,6 +110,30 @@ async function initConfigurationApiRouter (options: RegisterServerOptions, route
       res.json(result)
     }
   ]))
+
+  router.get('/configuration/channel/emojis/:channelId', asyncMiddleware([
+    checkConfigurationEnabledMiddleware(options),
+    getCheckConfigurationChannelMiddleware(options, true),
+    async (req: Request, res: Response, _next: NextFunction): Promise<void> => {
+      if (!res.locals.channelInfos) {
+        logger.error('Missing channelInfos in res.locals, should not happen')
+        res.sendStatus(500)
+        return
+      }
+      // const channelInfos = res.locals.channelInfos as ChannelInfos
+
+      const channelEmojis: ChannelEmojis = {
+        customEmojis: [{
+          sn: ':test:',
+          url: '/dist/images/custom_emojis/xmpp.png',
+          isCategoryEmoji: true
+        }]
+      }
+
+      res.status(200)
+      res.json(channelEmojis)
+    }
+  ]))
 }
 
 export {

shared/lib/types.ts

@@ -42,6 +42,7 @@ interface InitConverseJSParams {
     buttonLabel: string
     url: string
   }>
+  customEmojisUrl?: string | null
 }
 
 interface InitConverseJSParamsError {
@@ -150,6 +151,16 @@ type ExternalAuthResult = ExternalAuthResultError | ExternalAuthResultOk
 
 type ExternalAuthOIDCType = 'custom' | 'google' | 'facebook'
 
+interface CustomEmojiDefinition {
+  sn: string
+  url: string
+  isCategoryEmoji?: boolean
+}
+
+interface ChannelEmojis {
+  customEmojis: CustomEmojiDefinition[]
+}
+
 export type {
   ConverseJSTheme,
   InitConverseJSParams,
@@ -165,5 +176,7 @@ export type {
   ExternalAuthResultError,
   ExternalAuthResultOk,
   ExternalAuthResult,
-  ExternalAuthOIDCType
+  ExternalAuthOIDCType,
+  CustomEmojiDefinition,
+  ChannelEmojis
 }