Emoji only mode WIP

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>`