Some styling and html fixes.

assets/styles/style.scss

@@ -1,10 +1,12 @@
 #peertube-plugin-livechat-container {
   display: flex;
   flex-direction: column;
-}
-
-#plugin-placeholder-player-next #peertube-plugin-livechat-container {
   height: 100%;
+
+  // Bigger occupants sidebar when embedded near a video.
+  .chatroom .box-flyout .chatroom-body .occupants {
+    min-width: min(200px, 50%);
+  }
 }
 
 .peertube-plugin-livechat-buttons {
@@ -68,9 +70,14 @@
 }
 
 #peertube-plugin-livechat-container converse-root {
+  display: block;
   border: 1px solid black;
-  min-height: 30vh;
+  min-height: max(30vh, 200px);
   height: 100%;
+
+  converse-muc {
+    min-height: max(30vh, 200px);
+  }
 }
 
 .peertube-plugin-livechat-experimental,
@@ -179,7 +186,9 @@ table.peertube-plugin-livechat-prosody-list-rooms td {
     width: 48px;
     height: 48px;
     margin: 20px;
+    /* stylelint-disable-next-line custom-property-pattern */
     border: 5px solid var(--greyBackgroundColor);
+    /* stylelint-disable-next-line custom-property-pattern */
     border-bottom-color: var(--mainColor);
     border-radius: 50%;
     display: inline-block;

client/utils/conversejs.ts

@@ -125,17 +125,17 @@ async function displayConverseJS (
 ): Promise<void> {
   const peertubeHelpers = clientOptions.peertubeHelpers
 
-  const converseRoot = document.createElement('converse-root')
-  converseRoot.classList.add('theme-peertube')
-  container.append(converseRoot)
-
   const spinner = document.createElement('div')
   spinner.classList.add('livechat-spinner')
   spinner.setAttribute('id', 'livechat-loading-spinner')
   spinner.innerHTML = '<div></div>'
-  container.prepend(spinner)
+  container.append(spinner)
   // spinner will be removed by a converse plugin
 
+  const converseRoot = document.createElement('converse-root')
+  converseRoot.classList.add('theme-peertube')
+  container.append(converseRoot)
+
   const authHeader = peertubeHelpers.getAuthHeader()
 
   const response = await fetch(

client/videowatch-client-plugin.ts

@@ -198,7 +198,7 @@ function register (registerOptions: RegisterClientOptions): void {
         return false
       }
 
-      if (container.querySelector('converse-root')) {
+      if (container.getElementsByTagName('converse-root').length) {
         logger.error('Seems that there is already a ConverseJS in the container.')
         return false
       }
@@ -221,7 +221,7 @@ function register (registerOptions: RegisterClientOptions): void {
   function closeChat (): void {
     const container = document.getElementById('peertube-plugin-livechat-container')
     if (!container) {
-      logger.error('Cant close livechat, container not found.')
+      logger.error('Can\'t close livechat, container not found.')
       return
     }
 
@@ -229,7 +229,7 @@ function register (registerOptions: RegisterClientOptions): void {
     if (window.converse?.livechatDisconnect) { window.converse.livechatDisconnect() }
 
     // Removing from the DOM
-    container.childNodes.forEach(dom => dom.remove())
+    container.querySelectorAll('converse-root, .livechat-spinner').forEach(dom => dom.remove())
 
     container.setAttribute('peertube-plugin-livechat-state', 'closed')
 

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 {
+    .chatroom .box-flyout .chatroom-body .occupants {
-      .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,
+  { forceReadonly, theme, assetsPath, room, forceDefaultHideMucParticipants, autofocus }: InitConverseJSParams
-  isInIframe: boolean
 ): any {
   const mucShowInfoMessages = forceReadonly
     ? [
@@ -48,9 +46,8 @@ function defaultConverseParams (
     show_desktop_notifications: false,
     show_tab_notifications: false,
     singleton: true,
-    auto_focus: !isInIframe,
+    auto_focus: autofocus === true,
-    // forceDefaultHideMucParticipants is for testing purpose
+    hide_muc_participants: forceDefaultHideMucParticipants === true,
-    hide_muc_participants: isInIframe || 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])
       }

shared/lib/types.ts

@@ -19,6 +19,7 @@ interface InitConverseJSParams {
   theme: ConverseJSTheme
   transparent: boolean
   forceDefaultHideMucParticipants?: boolean
+  autofocus?: boolean
 }
 
 interface InitConverseJSParamsError {