From 610040b25393b49401c2906531f185b22e0a681e Mon Sep 17 00:00:00 2001 From: John Livingston Date: Tue, 2 Apr 2024 17:40:43 +0200 Subject: [PATCH] Some styling and html fixes. --- assets/styles/style.scss | 17 +++++++++++++---- client/utils/conversejs.ts | 10 +++++----- client/videowatch-client-plugin.ts | 6 +++--- conversejs/builtin.ts | 6 +++++- .../custom/shared/styles/_peertubetheme.scss | 11 +++-------- conversejs/custom/shared/styles/livechat.scss | 8 ++++++-- conversejs/lib/converse-params.ts | 9 +++------ conversejs/lib/plugins/livechat-specific.ts | 1 + shared/lib/types.ts | 1 + 9 files changed, 40 insertions(+), 29 deletions(-) diff --git a/assets/styles/style.scss b/assets/styles/style.scss index bb0bd0c8..3f9b1386 100644 --- a/assets/styles/style.scss +++ b/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; diff --git a/client/utils/conversejs.ts b/client/utils/conversejs.ts index 02348a27..29e9b0a7 100644 --- a/client/utils/conversejs.ts +++ b/client/utils/conversejs.ts @@ -125,17 +125,17 @@ async function displayConverseJS ( ): Promise { 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 = '
' - 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( diff --git a/client/videowatch-client-plugin.ts b/client/videowatch-client-plugin.ts index aa57c09e..9701a0d9 100644 --- a/client/videowatch-client-plugin.ts +++ b/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') diff --git a/conversejs/builtin.ts b/conversejs/builtin.ts index 9546a659..0a9dd8c2 100644 --- a/conversejs/builtin.ts +++ b/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' diff --git a/conversejs/custom/shared/styles/_peertubetheme.scss b/conversejs/custom/shared/styles/_peertubetheme.scss index 1e627a53..2ecc8d45 100644 --- a/conversejs/custom/shared/styles/_peertubetheme.scss +++ b/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 { - .box-flyout { - .chatroom-body { - .occupants { - min-width: 50%; - } - } - } + .chatroom .box-flyout .chatroom-body .occupants { + min-width: 50%; } } } diff --git a/conversejs/custom/shared/styles/livechat.scss b/conversejs/custom/shared/styles/livechat.scss index 1f29266a..0c310e75 100644 --- a/conversejs/custom/shared/styles/livechat.scss +++ b/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; diff --git a/conversejs/lib/converse-params.ts b/conversejs/lib/converse-params.ts index 6d1a99b4..f94954ae 100644 --- a/conversejs/lib/converse-params.ts +++ b/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, - isInIframe: boolean + { forceReadonly, theme, assetsPath, room, forceDefaultHideMucParticipants, autofocus }: InitConverseJSParams ): any { const mucShowInfoMessages = forceReadonly ? [ @@ -48,9 +46,8 @@ function defaultConverseParams ( show_desktop_notifications: false, show_tab_notifications: false, singleton: true, - auto_focus: !isInIframe, - // forceDefaultHideMucParticipants is for testing purpose - hide_muc_participants: isInIframe || forceDefaultHideMucParticipants === true, + auto_focus: autofocus === true, + hide_muc_participants: forceDefaultHideMucParticipants === true, play_sounds: false, muc_mention_autocomplete_min_chars: 2, muc_mention_autocomplete_filter: 'contains', diff --git a/conversejs/lib/plugins/livechat-specific.ts b/conversejs/lib/plugins/livechat-specific.ts index 9028e2fc..832dad68 100644 --- a/conversejs/lib/plugins/livechat-specific.ts +++ b/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]) } diff --git a/shared/lib/types.ts b/shared/lib/types.ts index 6ba6e2c7..3cd72591 100644 --- a/shared/lib/types.ts +++ b/shared/lib/types.ts @@ -19,6 +19,7 @@ interface InitConverseJSParams { theme: ConverseJSTheme transparent: boolean forceDefaultHideMucParticipants?: boolean + autofocus?: boolean } interface InitConverseJSParamsError {