New livechat-converse-size ConverseJS plugin:

* New plugin that handles the size of the converse-root, so we can adapt
  content to it
* Fixed some styling when chatbox is small (hidding avatars).

CHANGELOG.md

@@ -9,6 +9,10 @@ TODO: tag custom ConverseJS, and update build-conversejs.sh.
 
 * #177: streamer's task/to-do lists: streamers, and their room's moderators, can handle task lists directly. This can be used to handle viewers questions, moderation actions, ... More info in the documentation.
 
+### Minor changes and fixes
+
+* Fixed some styling when chatbox is small (hidding avatars).
+
 ## 9.0.3
 
 ### Minor changes and fixes

conversejs/custom/index.js

@@ -38,11 +38,13 @@ import './plugins/singleton/index.js'
 // import './plugins/dragresize/index.js'     // Allows chat boxes to be resized by dragging them
 import './plugins/fullscreen/index.js'
 
+import '../custom/plugins/size/index.js'
 import '../custom/plugins/tasks/index.js'
 /* END: Removable components */
 
 // We must add our custom plugins to CORE_PLUGINS (so it is white listed):
 import { CORE_PLUGINS } from './headless/shared/constants.js'
+CORE_PLUGINS.push('livechat-converse-size')
 CORE_PLUGINS.push('livechat-converse-tasks')
 
 _converse.CustomElement = CustomElement

conversejs/custom/plugins/size/index.js

@@ -0,0 +1,53 @@
+import { _converse, converse, api } from '../../../src/headless/core.js'
+
+/**
+ * This plugin computes the available width of converse-root, and adds classes
+ * and events so we can adapt the display of some elements to the current
+ * width/height.
+ * We can't rely on things such as @media, because in certain cases (for
+ * example when the chat is beside the video), the chat position and size
+ * depends on many other elements (video in large mode, ...).
+ */
+converse.plugins.add('livechat-converse-size', {
+  dependencies: [],
+
+  initialize () {
+    _converse.api.listen.on('connected', start)
+    _converse.api.listen.on('reconnected', start)
+    _converse.api.listen.on('disconnected', stop)
+  }
+})
+
+const rootResizeObserver = new ResizeObserver(entries => {
+  for (const entry of entries) {
+    handle(entry.target)
+  }
+})
+
+function start () {
+  const root = document.querySelector('converse-root')
+  if (!root) { return }
+  if (root.hasAttribute('livechat-converse-root-width')) {
+    stop()
+  }
+
+  rootResizeObserver.observe(root)
+  handle(root)
+}
+
+function stop () {
+  rootResizeObserver.disconnect()
+  document.querySelector('converse-root')?.removeAttribute('livechat-converse-root-width')
+}
+
+function handle (el) {
+  const rect = el.getBoundingClientRect()
+  const width = rect.width > 576 ? 'large' : (rect.width > 250 ? 'medium' : 'small')
+  const previous = el.getAttribute('livechat-converse-root-width')
+  if (width === previous) { return }
+
+  el.setAttribute('livechat-converse-root-width', width)
+  api.trigger('livechatSizeChanged', {
+    width: width
+  })
+}

conversejs/custom/shared/styles/_peertubetheme.scss

@@ -148,8 +148,8 @@
   }
 
   // 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) {
+  // The livechat-converse-root-width attributes comes from the 'size' plugin.
+  &[livechat-converse-root-width="small"] {
     .message {
       &.chat-msg {
         .chat-msg__content {