Some styling and html fixes.

conversejs/builtin.ts

@@ -86,7 +86,11 @@ async function initConverse (
 
   const isInIframe = inIframe()
   initDom(initConverseParams, isInIframe)
-  const params = defaultConverseParams(initConverseParams, isInIframe)
+  if (!isInIframe) { initConverseParams.autofocus = true }
+  if (isInIframe || chatIncludeMode === 'peertube-video') {
+    initConverseParams.forceDefaultHideMucParticipants = true
+  }
+  const params = defaultConverseParams(initConverseParams)
   params.view_mode = chatIncludeMode === 'chat-only' ? 'fullscreen' : 'embedded'
   params.allow_url_history_change = chatIncludeMode === 'chat-only'
 

conversejs/custom/shared/styles/_peertubetheme.scss

@@ -148,6 +148,7 @@
   }
 
   // hidding avatars when screen width is not big enough.
+  // FIXME: how to apply this when the chat is beside video without iframe? (2024-04-02)
   @media screen and (max-width: 250px) {
     .message {
       &.chat-msg {
@@ -176,14 +177,8 @@
 
   // Bigger occupants sidebar when width is not big enough.
   @media screen and (max-width: 576px) {
-    .chatroom {
-      .box-flyout {
-        .chatroom-body {
-          .occupants {
-            min-width: 50%;
-          }
-        }
-      }
+    .chatroom .box-flyout .chatroom-body .occupants {
+      min-width: 50%;
     }
   }
 }

conversejs/custom/shared/styles/livechat.scss

@@ -2,8 +2,8 @@
 @import "shared/styles/index";
 @import "./peertubetheme";
 
-peertube-plugin-livechat-container,
-body.livechat-iframe {
+body.livechat-iframe,
+#peertube-plugin-livechat-container {
   #conversejs .chat-head {
     // Hidding the chat-head when the plugin is displayed in an iframe or besides a video.
     display: none;
@@ -21,6 +21,7 @@ body.livechat-iframe {
 
 // Readonly mode
 body.livechat-readonly #conversejs {
+  /* stylelint-disable-next-line no-descending-specificity */
   .chat-head,
   .bottom-panel,
   converse-message-actions,
@@ -113,7 +114,10 @@ body.converse-embedded {
     height: 90vh;
     min-height: 400px;
   }
+}
 
+.livechat-embed-fullpage,
+#peertube-plugin-livechat-container {
   converse-muc-message-form {
     // For an unknown reason, message field in truncated... so adding a bottom margin.
     margin-bottom: 6px;

conversejs/lib/converse-params.ts

@@ -5,12 +5,10 @@ import type { AuthentInfos } from './auth'
  * Instanciate defaults params to use for ConverseJS.
  * Note: these parameters must be completed with one of the other function present in this module.
  * @param param0 global parameters
- * @param isInIframe true if we are in iframe mode (inside Peertube, beside video)
  * @returns default parameters to provide to ConverseJS.
  */
 function defaultConverseParams (
-  { forceReadonly, theme, assetsPath, room, forceDefaultHideMucParticipants }: InitConverseJSParams,
-  isInIframe: boolean
+  { forceReadonly, theme, assetsPath, room, forceDefaultHideMucParticipants, autofocus }: InitConverseJSParams
 ): any {
   const mucShowInfoMessages = forceReadonly
     ? [
@@ -48,9 +46,8 @@ function defaultConverseParams (
     show_desktop_notifications: false,
     show_tab_notifications: false,
     singleton: true,
-    auto_focus: !isInIframe,
-    // forceDefaultHideMucParticipants is for testing purpose
-    hide_muc_participants: isInIframe || forceDefaultHideMucParticipants === true,
+    auto_focus: autofocus === true,
+    hide_muc_participants: forceDefaultHideMucParticipants === true,
     play_sounds: false,
     muc_mention_autocomplete_min_chars: 2,
     muc_mention_autocomplete_filter: 'contains',

conversejs/lib/plugins/livechat-specific.ts

@@ -33,6 +33,7 @@ export const livechatSpecificsPlugin = {
       }
 
       // update other settings
+      params.blacklisted_plugins ??= []
       for (const k of ['hide_muc_participants', 'blacklisted_plugins']) {
         _converse.api.settings.set(k, params[k])
       }