diff --git a/CHANGELOG.md b/CHANGELOG.md index 8dd5ac07..16c400f5 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/conversejs/custom/index.js b/conversejs/custom/index.js index f7562102..70e6e1f0 100644 --- a/conversejs/custom/index.js +++ b/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 diff --git a/conversejs/custom/plugins/size/index.js b/conversejs/custom/plugins/size/index.js new file mode 100644 index 00000000..e2a6c5a2 --- /dev/null +++ b/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 + }) +} diff --git a/conversejs/custom/shared/styles/_peertubetheme.scss b/conversejs/custom/shared/styles/_peertubetheme.scss index 2ecc8d45..df33cc99 100644 --- a/conversejs/custom/shared/styles/_peertubetheme.scss +++ b/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 {