From 4948d27faeb367678cf53de75288fb01eebf78ce Mon Sep 17 00:00:00 2001 From: John Livingston Date: Thu, 11 Apr 2024 11:25:04 +0200 Subject: [PATCH] Fix 355: Make the ConverseJS dropdown menu available everywhere (WIP) --- assets/styles/style.scss | 22 ++++-- conversejs/builtin.ts | 10 +++ conversejs/custom/shared/styles/livechat.scss | 18 ++++- conversejs/custom/templates/muc-head.js | 77 +++++++++++++++++++ conversejs/custom/webpack.livechat.js | 3 + conversejs/lib/converse-params.ts | 1 + .../lib/plugins/livechat-mini-muc-head.ts | 25 ++++++ 7 files changed, 147 insertions(+), 9 deletions(-) create mode 100644 conversejs/custom/templates/muc-head.js create mode 100644 conversejs/lib/plugins/livechat-mini-muc-head.ts diff --git a/assets/styles/style.scss b/assets/styles/style.scss index fa7c0161..56657060 100644 --- a/assets/styles/style.scss +++ b/assets/styles/style.scss @@ -9,12 +9,13 @@ } } -.peertube-plugin-livechat-buttons { +.peertube-plugin-livechat-buttons, +.livechat-mini-muc-bar-buttons { align-items: center; display: flex; flex-flow: row nowrap; justify-content: flex-end; - padding-right: 12px; // to avoid being under the window scrollbar. + padding-right: 12px !important; // to avoid being under the window scrollbar. } .peertube-plugin-livechat-button { @@ -30,10 +31,19 @@ } } -.peertube-plugin-livechat-buttons-open .peertube-plugin-livechat-button { - height: 18px !important; - margin: 2px !important; - padding: 1px !important; +.peertube-plugin-livechat-buttons-open, +.livechat-mini-muc-bar-buttons { + .peertube-plugin-livechat-button { + height: 18px !important; + margin: 2px !important; + padding: 1px !important; + } +} + +.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-state="initializing"] { diff --git a/conversejs/builtin.ts b/conversejs/builtin.ts index 9b4919d2..1af90e80 100644 --- a/conversejs/builtin.ts +++ b/conversejs/builtin.ts @@ -14,6 +14,7 @@ import { slowModePlugin } from './lib/plugins/slow-mode' import { windowTitlePlugin } from './lib/plugins/window-title' import { livechatSpecificsPlugin } from './lib/plugins/livechat-specific' import { livechatViewerModePlugin } from './lib/plugins/livechat-viewer-mode' +import { livechatMiniMucHeadPlugin } from './lib/plugins/livechat-mini-muc-head' declare global { interface Window { @@ -48,6 +49,11 @@ function initConversePlugins (peertubeEmbedded: boolean): void { // livechatSpecifics plugins add some customization for the livechat plugin. converse.plugins.add('livechatSpecifics', livechatSpecificsPlugin) + if (peertubeEmbedded) { + // This plugins handles some buttons that are generated by Peertube, to include them in the MUC menu. + converse.plugins.add('livechatMiniMucHeadPlugin', livechatMiniMucHeadPlugin) + } + // Viewer mode (anonymous accounts, before they have chosen their nickname). converse.plugins.add('livechatViewerModePlugin', livechatViewerModePlugin) } @@ -154,6 +160,10 @@ async function initConverse ( // no viewer mode if authenticated. params.livechat_enable_viewer_mode = autoViewerMode && !isAuthenticated && !isRemoteWithNicknameSet + if (chatIncludeMode === 'peertube-video') { + params.livechat_mini_muc_head = true // we must replace the muc-head by the custom buttons toolbar. + } + try { if (window.reconnectConverse) { // this is set in the livechatSpecificsPlugin window.reconnectConverse(params) diff --git a/conversejs/custom/shared/styles/livechat.scss b/conversejs/custom/shared/styles/livechat.scss index f1157bf2..49d8a3ee 100644 --- a/conversejs/custom/shared/styles/livechat.scss +++ b/conversejs/custom/shared/styles/livechat.scss @@ -2,14 +2,26 @@ @import "shared/styles/index"; @import "./peertubetheme"; -body.livechat-iframe, -#peertube-plugin-livechat-container { +body.livechat-iframe { #conversejs .chat-head { - // Hidding the chat-head when the plugin is displayed in an iframe or besides a video. + // Hidding the chat-head when the plugin is displayed in an iframe display: none; } } +#peertube-plugin-livechat-container #conversejs .chat-head { + // When besides a video, reduce the size of the toolbar. + padding: 0 !important; +} + +#conversejs .livechat-mini-muc-bar-buttons { + a.orange-button { + // force these colors... + color: var(--peertube-button-foreground); + background-color: var(--peertube-button-background); + } +} + #conversejs-bg { // We are using a custom template that differs from the original, this is required. .converse-brand__heading { diff --git a/conversejs/custom/templates/muc-head.js b/conversejs/custom/templates/muc-head.js new file mode 100644 index 00000000..60bce68c --- /dev/null +++ b/conversejs/custom/templates/muc-head.js @@ -0,0 +1,77 @@ + +import { html } from 'lit' +import { api } from '@converse/headless/core' +import { until } from 'lit/directives/until.js' +import { repeat } from 'lit/directives/repeat.js' +import { unsafeHTML } from 'lit/directives/unsafe-html.js' +import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js' +import tplMucHead from '../../src/plugins/muc-views/templates/muc-head.js' + +/** + * Clones the Peertube buttons, and add them in the template. + */ +function getPeertubeButtons () { + // searching original buttons in the DOM, and if found: + // - clone a button in ConverseJS, that triggers the original button click event. + // Note: original buttons will be hidden behind ConverseJS, so no need to hide them. + + const buttonsContainer = document.querySelector( + '.peertube-plugin-livechat-buttons.peertube-plugin-livechat-buttons-open' + ) + if (!buttonsContainer) { return html`` } + + const buttons = [] + buttonsContainer.childNodes.forEach(button => { + try { + if (button.offsetParent === null) { + // Trick to detect if element is hidden + // (see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetParent) + return + } + + buttons.push(button) + } catch (err) { + console.error(err) + } + }) + + if (!buttons.length) { + return html`` + } + + return html` + ${repeat(buttons, (node) => html` + { + // triggering the original button click + node.click() + }} + > + ${unsafeHTML(node.innerHTML)} + + `)} + ` +} + +export default (el) => { + if (!api.settings.get('livechat_mini_muc_head')) { + // original Template (this settings comes with livechatMiniMucHeadPlugin) + return html`${tplMucHead(el)}` + } + + // Custom template, with only the buttons. + const subjectHidden = true + const headingButtonsPromise = el.getHeadingButtons(subjectHidden) + return html` +
+ ${getPeertubeButtons()} + ${until(getStandaloneButtons(headingButtonsPromise), '')} + ${until(getDropdownButtons(headingButtonsPromise), '')} +
+ ` +} diff --git a/conversejs/custom/webpack.livechat.js b/conversejs/custom/webpack.livechat.js index 6893b01d..9354a9e4 100644 --- a/conversejs/custom/webpack.livechat.js +++ b/conversejs/custom/webpack.livechat.js @@ -35,8 +35,11 @@ module.exports = merge(prod, { extensions: ['.js'], alias: { './templates/muc-bottom-panel.js': path.resolve('custom/templates/muc-bottom-panel.js'), + './templates/muc-head.js': path.resolve(__dirname, 'custom/templates/muc-head.js'), '../../templates/background_logo.js$': path.resolve(__dirname, 'custom/templates/background_logo.js'), + 'shared/styles/index.scss$': path.resolve(__dirname, 'custom/shared/styles/livechat.scss'), + 'shared/modals/livechat-external-login.js': path.resolve( __dirname, 'custom/shared/modals/livechat-external-login.js' diff --git a/conversejs/lib/converse-params.ts b/conversejs/lib/converse-params.ts index 9042bdec..ddb40d5d 100644 --- a/conversejs/lib/converse-params.ts +++ b/conversejs/lib/converse-params.ts @@ -77,6 +77,7 @@ function defaultConverseParams ( whitelisted_plugins: [ 'livechatWindowTitlePlugin', 'livechatSpecifics', + 'livechatMiniMucHeadPlugin', 'livechatViewerModePlugin', 'livechatDisconnectOnUnloadPlugin', 'converse-slow-mode' diff --git a/conversejs/lib/plugins/livechat-mini-muc-head.ts b/conversejs/lib/plugins/livechat-mini-muc-head.ts new file mode 100644 index 00000000..7c71cc08 --- /dev/null +++ b/conversejs/lib/plugins/livechat-mini-muc-head.ts @@ -0,0 +1,25 @@ +/** + * Plugin to add buttons (help, close, open in another window) in the muc menu, + * when we are embedded in Peertube. + */ +export const livechatMiniMucHeadPlugin = { + dependencies: ['converse-muc', 'converse-muc-views'], + initialize: function (this: any) { + const _converse = this._converse + _converse.api.settings.extend({ + // tells the overloaded template to render differently. + livechat_mini_muc_head: false + }) + + _converse.api.listen.on('getHeadingButtons', (view: any, buttons: any[]) => { + if (view.model.get('type') !== _converse.CHATROOMS_TYPE) { + // only on MUC. + return + } + + // removing the 'show/hide topic' buttons + buttons = buttons.filter(b => b.name !== 'toggle-topic') + return buttons + }) + } +}