diff --git a/assets/styles/style.scss b/assets/styles/style.scss index 56657060..21f3a560 100644 --- a/assets/styles/style.scss +++ b/assets/styles/style.scss @@ -40,10 +40,9 @@ } } -.peertube-plugin-livechat-buttons-open { - // So that buttons will be behind chatbox (buttons are then cloned by our custom muc-head template): - position: fixed; - right: 0; +.peertube-plugin-livechat-buttons-cloned { + // Hidding buttons when cloned by the ConverseJS mini-muc-head plugin. + display: none; } [peertube-plugin-livechat-state="initializing"] { diff --git a/conversejs/custom/templates/muc-head.js b/conversejs/custom/templates/muc-head.js index 60bce68c..92c8a09a 100644 --- a/conversejs/custom/templates/muc-head.js +++ b/conversejs/custom/templates/muc-head.js @@ -20,6 +20,10 @@ function getPeertubeButtons () { ) if (!buttonsContainer) { return html`` } + // We must remove this class, in case it is already here. + // Otherwise, the trick with offsetParent (see the forEach loop) will not work. + buttonsContainer.classList.remove('peertube-plugin-livechat-buttons-cloned') + const buttons = [] buttonsContainer.childNodes.forEach(button => { try { @@ -39,6 +43,10 @@ function getPeertubeButtons () { return html`` } + // Hidding original buttons: + console.log('[peertube-plugin-livechat] Adding class peertube-plugin-livechat-buttons-cloned') + buttonsContainer.classList.add('peertube-plugin-livechat-buttons-cloned') + return html` ${repeat(buttons, (node) => html` b.name !== 'toggle-topic') return buttons }) + + const restoreClonedButtons = (): void => { + console.log('[peertube-plugin-livechat] Removing class peertube-plugin-livechat-buttons-cloned') + document.querySelectorAll( + '.peertube-plugin-livechat-buttons-cloned' + ).forEach(el => el.classList.remove('peertube-plugin-livechat-buttons-cloned')) + } + + // muc-head can hide buttons that are cloned, so we restore them on disconnection and chatbox closing. + _converse.api.listen.on('disconnected', restoreClonedButtons) + _converse.api.listen.on('chatBoxClosed', restoreClonedButtons) } }