From 04b19452395fed4ee57fb5c8f6107d3fc8786656 Mon Sep 17 00:00:00 2001 From: John Livingston Date: Tue, 4 Jan 2022 17:42:03 +0100 Subject: [PATCH] Builtin Prosody, Share chat url: ability to show/hide the scrollbar in readonly mode. --- CHANGELOG.md | 6 ++++ assets/style.scss | 10 +++++++ client/videowatch/share.ts | 30 ++++++++++++++++++- client/videowatch/uri.ts | 4 +-- conversejs/builtin.ts | 6 +++- conversejs/custom/shared/styles/livechat.scss | 4 +++ conversejs/index.html | 2 +- languages/ca.json | 1 + languages/eo.json | 1 + languages/es.json | 1 + languages/eu.json | 1 + languages/fr.json | 1 + languages/it.json | 1 + languages/oc.json | 1 + languages/pl.json | 1 + server/lib/routers/webchat.ts | 8 +++-- 16 files changed, 70 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1ad17c02..7fc686d6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## ??? + +## Features + +* Builtin Prosody, Share chat url: ability to show/hide the scrollbar in readonly mode. + ## 5.2.4 ### Fixes diff --git a/assets/style.scss b/assets/style.scss index ab2f9829..e22bf8c5 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -134,5 +134,15 @@ table.peertube-plugin-livechat-prosody-list-rooms td { label { display: block; } + + .livechat-shareurl-custom-readonly { + display: flex; + flex-flow: wrap; + flex-direction: row; + + label:not(:first-child) { + margin-left: 40px; + } + } } } diff --git a/client/videowatch/share.ts b/client/videowatch/share.ts index 6554ad5f..944d6609 100644 --- a/client/videowatch/share.ts +++ b/client/videowatch/share.ts @@ -4,6 +4,8 @@ import { isAutoColorsAvailable } from 'shared/lib/autocolors' interface ShareForm { readonly: HTMLInputElement + withscroll: HTMLInputElement + withscrollLabelEl: HTMLElement url: HTMLInputElement autoColors?: HTMLInputElement } @@ -14,6 +16,7 @@ async function shareChatUrl (registerOptions: RegisterOptions, settings: any, vi const [ labelShare, labelReadonly, + labelWithscroll, tipsOBS, labelCopy, labelCopied, @@ -23,6 +26,7 @@ async function shareChatUrl (registerOptions: RegisterOptions, settings: any, vi ] = await Promise.all([ peertubeHelpers.translate('Share chat link'), peertubeHelpers.translate('Read-only'), + peertubeHelpers.translate('Show the scrollbar'), // eslint-disable-next-line max-len peertubeHelpers.translate('Tips for streamers: To add the chat to your OBS, generate a read-only link and use it as a browser source.'), peertubeHelpers.translate('Copy'), @@ -72,6 +76,8 @@ async function shareChatUrl (registerOptions: RegisterOptions, settings: any, vi container.append(divCustom) const divReadonly = document.createElement('div') + divReadonly.classList.add('livechat-shareurl-custom-readonly') + divCustom.append(divReadonly) const readonly = document.createElement('input') readonly.setAttribute('type', 'checkbox') @@ -80,6 +86,13 @@ async function shareChatUrl (registerOptions: RegisterOptions, settings: any, vi readonlyLabelEl.prepend(readonly) divReadonly.append(readonlyLabelEl) + const withscroll = document.createElement('input') + withscroll.setAttribute('type', 'checkbox') + const withscrollLabelEl = document.createElement('label') + withscrollLabelEl.textContent = labelWithscroll + withscrollLabelEl.prepend(withscroll) + divReadonly.append(withscrollLabelEl) + let autoColors if (isAutoColorsAvailable(settings['chat-type'], settings['converse-theme'])) { const label = document.createElement('label') @@ -93,6 +106,9 @@ async function shareChatUrl (registerOptions: RegisterOptions, settings: any, vi readonly.onclick = () => { renderContent(container) } + withscroll.onclick = () => { + renderContent(container) + } if (autoColors) { autoColors.onclick = () => { @@ -121,6 +137,8 @@ async function shareChatUrl (registerOptions: RegisterOptions, settings: any, vi form = { readonly, + withscroll, + withscrollLabelEl, url, autoColors } @@ -135,7 +153,15 @@ async function shareChatUrl (registerOptions: RegisterOptions, settings: any, vi permanent: true } if (form.readonly.checked) { - uriOptions.readonly = true + if (form.withscroll.checked) { + uriOptions.readonly = true + } else { + uriOptions.readonly = 'noscroll' + } + form.withscrollLabelEl.style.display = 'initial' + } else { + // Hide the withscroll checkbox + form.withscrollLabelEl.style.display = 'none' } const iframeUri = getIframeUri(registerOptions, settings, video, uriOptions) form.url.setAttribute('value', iframeUri ?? '') @@ -148,6 +174,7 @@ async function shareChatUrl (registerOptions: RegisterOptions, settings: any, vi const v = { version: 1, // in case we add incompatible values in a near feature readonly: !!form.readonly.checked, + withscroll: !!form.withscroll.checked, autocolors: !!form.autoColors?.checked } window.localStorage.setItem('peertube-plugin-livechat-shareurl', JSON.stringify(v)) @@ -168,6 +195,7 @@ async function shareChatUrl (registerOptions: RegisterOptions, settings: any, vi return } form.readonly.checked = !!v.readonly + form.withscroll.checked = !!v.withscroll if (form.autoColors) { form.autoColors.checked = !!v.autocolors } diff --git a/client/videowatch/uri.ts b/client/videowatch/uri.ts index 199d8e24..9ebff91e 100644 --- a/client/videowatch/uri.ts +++ b/client/videowatch/uri.ts @@ -4,7 +4,7 @@ import { logger } from './logger' import { computeAutoColors } from './colors' interface UriOptions { - readonly?: boolean + readonly?: boolean | 'noscroll' ignoreAutoColors?: boolean permanent?: boolean } @@ -79,7 +79,7 @@ function getIframeUri ( } if (uriOptions.readonly) { - iFrameUri.searchParams.set('_readonly', 'true') + iFrameUri.searchParams.set('_readonly', (typeof uriOptions.readonly === 'string') ? uriOptions.readonly : 'true') } iframeUriStr = iFrameUri.href diff --git a/conversejs/builtin.ts b/conversejs/builtin.ts index f082be58..a22c684d 100644 --- a/conversejs/builtin.ts +++ b/conversejs/builtin.ts @@ -82,7 +82,8 @@ interface InitConverseParams { websocketServiceUrl: string authenticationUrl: string advancedControls: boolean - forceReadonly: boolean + forceReadonly: boolean | 'noscroll' + noScroll: boolean theme: string } window.initConverse = async function initConverse ({ @@ -108,6 +109,9 @@ window.initConverse = async function initConverse ({ } if (forceReadonly) { body?.classList.add('livechat-readonly') + if (forceReadonly === 'noscroll') { + body?.classList.add('livechat-noscroll') + } } const params: any = { diff --git a/conversejs/custom/shared/styles/livechat.scss b/conversejs/custom/shared/styles/livechat.scss index fd718f7e..52c45fbf 100644 --- a/conversejs/custom/shared/styles/livechat.scss +++ b/conversejs/custom/shared/styles/livechat.scss @@ -25,3 +25,7 @@ body.livechat-readonly #conversejs { display: none !important; } } + +body.livechat-readonly.livechat-noscroll converse-chat-content { + overflow-y: hidden !important; +} diff --git a/conversejs/index.html b/conversejs/index.html index 51259fc8..4669b54b 100644 --- a/conversejs/index.html +++ b/conversejs/index.html @@ -23,7 +23,7 @@ authenticationUrl: '{{AUTHENTICATION_URL}}', advancedControls: '{{ADVANCEDCONTROLS}}' === 'true', theme: '{{CONVERSEJS_THEME}}', - forceReadonly: '{{FORCEREADONLY}}' === 'true' + forceReadonly: '{{FORCEREADONLY}}' === 'noscroll' ? '{{FORCEREADONLY}}' : '{{FORCEREADONLY}}' === 'true' }) diff --git a/languages/ca.json b/languages/ca.json index 2f08324d..a7b38f6c 100644 --- a/languages/ca.json +++ b/languages/ca.json @@ -6,6 +6,7 @@ "If enabled, there will be a chat next to the video.": false, "Share chat link": false, "Read-only": false, + "Show the scrollbar": false, "Tips for streamers: To add the chat to your OBS, generate a read-only link and use it as a browser source.": false, "Copy": false, "Link copied": false, diff --git a/languages/eo.json b/languages/eo.json index fbe147ab..0cec0f06 100644 --- a/languages/eo.json +++ b/languages/eo.json @@ -6,6 +6,7 @@ "If enabled, there will be a chat next to the video.": false, "Share chat link": false, "Read-only": false, + "Show the scrollbar": false, "Tips for streamers: To add the chat to your OBS, generate a read-only link and use it as a browser source.": false, "Copy": false, "Link copied": false, diff --git a/languages/es.json b/languages/es.json index 7ba29322..3860d904 100644 --- a/languages/es.json +++ b/languages/es.json @@ -6,6 +6,7 @@ "If enabled, there will be a chat next to the video.": "Activado, abre el chat junto al vídeo", "Share chat link": "Compartir el enlace de esta sala de chat", "Read-only": "Sólo lectura", + "Show the scrollbar": false, "Tips for streamers: To add the chat to your OBS, generate a read-only link and use it as a browser source.": "Sugerencias para los streamers: para agregar el chat a su OBS, genere un enlace de «solo lectura» y utilícelo como «fuente o canal web».", "Copy": "Copiar", "Link copied": "Enlace copiado", diff --git a/languages/eu.json b/languages/eu.json index 19582b16..1e466e21 100644 --- a/languages/eu.json +++ b/languages/eu.json @@ -6,6 +6,7 @@ "If enabled, there will be a chat next to the video.": "Gaituta badago, txat bat agertuko da bideoaren ondoan.", "Share chat link": false, "Read-only": false, + "Show the scrollbar": false, "Tips for streamers: To add the chat to your OBS, generate a read-only link and use it as a browser source.": false, "Copy": false, "Link copied": false, diff --git a/languages/fr.json b/languages/fr.json index 1b23766d..02888c50 100644 --- a/languages/fr.json +++ b/languages/fr.json @@ -6,6 +6,7 @@ "If enabled, there will be a chat next to the video.": "Si activé, un salon de discussion sera affiché à coté de la vidéo.", "Share chat link": "Partager le lien du salon de discussion", "Read-only": "Lecture seule", + "Show the scrollbar": "Afficher la barre de défilement", "Tips for streamers: To add the chat to your OBS, generate a read-only link and use it as a browser source.": "Astuce pour les streamers et streameuses : pour ajouter le tchat à votre OBS, générez un lien «lecture seule» et utilisez le comme «source navigateur web».", "Copy": "Copier", "Link copied": "Lien copié", diff --git a/languages/it.json b/languages/it.json index 61a13080..a9b42732 100644 --- a/languages/it.json +++ b/languages/it.json @@ -6,6 +6,7 @@ "If enabled, there will be a chat next to the video.": "Se abilitato, ci sarà una chat accanto al video", "Share chat link": false, "Read-only": false, + "Show the scrollbar": false, "Tips for streamers: To add the chat to your OBS, generate a read-only link and use it as a browser source.": false, "Copy": false, "Link copied": false, diff --git a/languages/oc.json b/languages/oc.json index 2238478c..0df809fb 100644 --- a/languages/oc.json +++ b/languages/oc.json @@ -6,6 +6,7 @@ "If enabled, there will be a chat next to the video.": "Se activat la messatjariá serà a costat de la vidèo.", "Share chat link": "Partejar lo ligam de la discussion", "Read-only": "Lectura sola", + "Show the scrollbar": false, "Tips for streamers: To add the chat to your OBS, generate a read-only link and use it as a browser source.": "Astúcia pels difusors : per apondre la messatjariá a vòstre OBS, generatz un ligam « lectura sola» e utilizatz-lo coma « font navegador web ».", "Copy": "Copiar", "Link copied": "Ligam copiat", diff --git a/languages/pl.json b/languages/pl.json index f203039a..7f9f8161 100644 --- a/languages/pl.json +++ b/languages/pl.json @@ -6,6 +6,7 @@ "If enabled, there will be a chat next to the video.": "Jeśli włączono, czat pojawi się po lewej stronie filmu.", "Share chat link": false, "Read-only": false, + "Show the scrollbar": false, "Tips for streamers: To add the chat to your OBS, generate a read-only link and use it as a browser source.": false, "Copy": false, "Link copied": false, diff --git a/server/lib/routers/webchat.ts b/server/lib/routers/webchat.ts index 27550d64..1afd701a 100644 --- a/server/lib/routers/webchat.ts +++ b/server/lib/routers/webchat.ts @@ -53,7 +53,7 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise