Emoji only mode WIP

conversejs/build-conversejs.sh

@@ -40,6 +40,7 @@ if [ -n "$CONVERSE_COMMIT" ]; then
 fi
 converse_build_dir="$rootdir/build/conversejs"
 converse_destination_dir="$rootdir/dist/client/conversejs"
+converse_emoji_destination="$rootdir/dist/converse-emoji.json"
 
 if [[ ! -d $src_dir ]]; then
   echo "$0 must be called from the plugin livechat root dir."
@@ -119,6 +120,9 @@ cd $rootdir
 echo "Copying ConverseJS dist files..."
 mkdir -p "$converse_destination_dir" && cp -r $converse_build_dir/dist/* "$converse_destination_dir/"
 
+echo "Copying ConverseJS original emoji.json file..." # this is needed for some backend code.
+cp "$converse_build_dir/src/headless/plugins/emoji/emoji.json" "$converse_emoji_destination"
+
 echo "ConverseJS OK."
 
 exit 0

conversejs/custom/index.js

@@ -66,6 +66,7 @@ CORE_PLUGINS.push('livechat-converse-mam-search')
 // 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')
+ROOM_FEATURES.push('x_peertubelivechat_emoji_only_mode')
 
 _converse.exports.CustomElement = CustomElement
 

conversejs/custom/shared/styles/_peertubetheme.scss

@@ -35,6 +35,14 @@
       }
     }
 
+    // Emoji only info box
+    .livechat-emoji-only-info-box {
+      border: 1px dashed var(--peertube-menu-background);
+      color: var(--peertube-main-foreground);
+      background-color: var(--peertube-main-background);
+      margin: 0 5px;
+    }
+
     converse-chat-toolbar {
       border-top: none !important; // removing border, to avoid confusing the toolbar with an input field.
       color: var(--peertube-main-foreground);

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

@@ -83,6 +83,20 @@ const tplSlowMode = (o) => {
   return html`<livechat-slow-mode jid=${o.model.get('jid')}>`
 }
 
+const tplEmojiOnly = (o) => {
+  if (!o.can_post) { return html`` }
+  if (!o.model.features?.get?.('x_peertubelivechat_emoji_only_mode')) {
+    return ''
+  }
+  return html`<div class="livechat-emoji-only-info-box">
+      <converse-icon class="fa fa-info-circle" size="1.2em"></converse-icon>
+      ${
+        // eslint-disable-next-line no-undef
+        __(LOC_emoji_only_info)
+      }
+    </div>`
+}
+
 const tplViewerMode = (o) => {
   if (!api.settings.get('livechat_enable_viewer_mode')) {
     return html``
@@ -145,6 +159,7 @@ export default (o) => {
   return html`
     ${tplViewerMode(o)}
     ${tplSlowMode(o)}
+    ${tplEmojiOnly(o)}
     ${
       mutedAnonymousMessage
         ? html`<span class="muc-bottom-panel muc-bottom-panel--muted">${mutedAnonymousMessage}</span>`

conversejs/lib/plugins/livechat-specific.ts

@@ -9,6 +9,7 @@ import { chatRoomOverrides } from './livechat-specific/chatroom'
 import { chatRoomMessageOverrides } from './livechat-specific/chatroom-message'
 import { customizeMessageAction } from './livechat-specific/message-action'
 import { customizeProfileModal } from './livechat-specific/profile'
+import { customizeMUCBottomPanel } from './livechat-specific/muc-bottom-panel'
 
 export const livechatSpecificsPlugin = {
   dependencies: ['converse-muc', 'converse-muc-views'],
@@ -26,6 +27,7 @@ export const livechatSpecificsPlugin = {
     customizeToolbar(this)
     customizeMessageAction(this)
     customizeProfileModal(this)
+    customizeMUCBottomPanel(this)
 
     _converse.api.listen.on('chatRoomViewInitialized', function (this: any, _model: any): void {
       // Remove the spinner if present...

conversejs/lib/plugins/livechat-specific/muc-bottom-panel.ts

@@ -0,0 +1,23 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+/**
+ * Override the MUCBottomPanel custom element
+ */
+export function customizeMUCBottomPanel (plugin: any): void {
+  const _converse = plugin._converse
+  const MUCBottomPanel = _converse.api.elements.registry['converse-muc-bottom-panel']
+  if (MUCBottomPanel) {
+    class MUCBottomPanelOverloaded extends MUCBottomPanel {
+      async initialize (): Promise<any> {
+        await super.initialize()
+        // We must refresh the bottom panel when these features changes (to display the infobox)
+        // FIXME: the custom muc-bottom-panel template should be used here, in an overloaded render method, instead
+        //    of using webpack to overload the original file.
+        this.listenTo(this.model.features, 'change:x_peertubelivechat_emoji_only_mode', () => this.requestUpdate())
+      }
+    }
+    _converse.api.elements.define('converse-muc-bottom-panel', MUCBottomPanelOverloaded)
+  }
+}

conversejs/loc.keys.js

@@ -62,7 +62,8 @@ const locKeys = [
   'moderator_note_original_nick',
   'search_occupant_message',
   'message_search',
-  'message_search_original_nick'
+  'message_search_original_nick',
+  'emoji_only_info'
 ]
 
 module.exports = locKeys