From 80ac08bd187ed84ca3e15301bc13a4d3b533502f Mon Sep 17 00:00:00 2001 From: John Livingston Date: Sun, 16 Jan 2022 17:50:11 +0100 Subject: [PATCH] Transparent background + fix * Builtin Prosody, Share chat url: option to have a transparent background (for streaming integration). * Builtin Prosody, Share chat url: fixed new day hidding when no scrollbar in readonly mode. --- CHANGELOG.md | 7 ++- assets/style.scss | 16 ++++--- client/videowatch/share.ts | 44 ++++++++++++++----- client/videowatch/uri.ts | 5 +++ conversejs/builtin.ts | 7 ++- conversejs/custom/shared/styles/livechat.scss | 25 ++++++++++- conversejs/index.html | 3 +- 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 | 5 +++ 16 files changed, 99 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 71e90abe..fa09382a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,9 +2,14 @@ ## ??? -### Changes +### Features + +* Builtin Prosody, Share chat url: option to have a transparent background (for streaming integration). + +### Changes and fixes * This plugin is now using types declarations from the official @peertube/peertube-types package. +* Builtin Prosody, Share chat url: fixed new day hidding when no scrollbar in readonly mode. ## 5.4.0 diff --git a/assets/style.scss b/assets/style.scss index e22bf8c5..f59d69c5 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -135,13 +135,17 @@ table.peertube-plugin-livechat-prosody-list-rooms td { display: block; } - .livechat-shareurl-custom-readonly { - display: flex; - flex-flow: wrap; - flex-direction: row; + .livechat-shareurl-custom-readonly-options { + margin-left: 40px; - label:not(:first-child) { - margin-left: 40px; + & > * { + display: block; + } + + &.livechat-shareurl-custom-readonly-disabled { + label { + color: var(--gray-dark); + } } } } diff --git a/client/videowatch/share.ts b/client/videowatch/share.ts index 08a2a556..cdd12e25 100644 --- a/client/videowatch/share.ts +++ b/client/videowatch/share.ts @@ -7,7 +7,8 @@ import { isAutoColorsAvailable } from 'shared/lib/autocolors' interface ShareForm { readonly: HTMLInputElement withscroll: HTMLInputElement - withscrollLabelEl: HTMLElement + transparent: HTMLInputElement + readonlyOptions: HTMLElement url: HTMLInputElement autoColors?: HTMLInputElement } @@ -19,6 +20,7 @@ async function shareChatUrl (registerOptions: RegisterClientOptions, settings: a labelShare, labelReadonly, labelWithscroll, + labelTransparent, tipsOBS, labelCopy, labelCopied, @@ -29,6 +31,7 @@ async function shareChatUrl (registerOptions: RegisterClientOptions, settings: a peertubeHelpers.translate('Share chat link'), peertubeHelpers.translate('Read-only'), peertubeHelpers.translate('Show the scrollbar'), + peertubeHelpers.translate('Transparent background (for stream integration, with OBS for example)'), // 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'), @@ -77,23 +80,30 @@ async function shareChatUrl (registerOptions: RegisterClientOptions, settings: a divCustom.classList.add('livechat-shareurl-custom') 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') const readonlyLabelEl = document.createElement('label') readonlyLabelEl.textContent = labelReadonly readonlyLabelEl.prepend(readonly) - divReadonly.append(readonlyLabelEl) + divCustom.append(readonlyLabelEl) + + const readonlyOptions = document.createElement('div') + readonlyOptions.classList.add('livechat-shareurl-custom-readonly-options') + divCustom.append(readonlyOptions) const withscroll = document.createElement('input') withscroll.setAttribute('type', 'checkbox') const withscrollLabelEl = document.createElement('label') withscrollLabelEl.textContent = labelWithscroll withscrollLabelEl.prepend(withscroll) - divReadonly.append(withscrollLabelEl) + readonlyOptions.append(withscrollLabelEl) + + const transparent = document.createElement('input') + transparent.setAttribute('type', 'checkbox') + const transparentLabelEl = document.createElement('label') + transparentLabelEl.textContent = labelTransparent + transparentLabelEl.prepend(transparent) + readonlyOptions.append(transparentLabelEl) let autoColors if (isAutoColorsAvailable(settings['chat-type'], settings['converse-theme'])) { @@ -111,6 +121,9 @@ async function shareChatUrl (registerOptions: RegisterClientOptions, settings: a withscroll.onclick = () => { renderContent(container) } + transparent.onclick = () => { + renderContent(container) + } if (autoColors) { autoColors.onclick = () => { @@ -140,7 +153,8 @@ async function shareChatUrl (registerOptions: RegisterClientOptions, settings: a form = { readonly, withscroll, - withscrollLabelEl, + transparent, + readonlyOptions, url, autoColors } @@ -160,10 +174,16 @@ async function shareChatUrl (registerOptions: RegisterClientOptions, settings: a } else { uriOptions.readonly = 'noscroll' } - form.withscrollLabelEl.style.display = 'initial' + if (form.transparent.checked) { + uriOptions.transparent = true + } + form.withscroll.disabled = false + form.transparent.disabled = false + form.readonlyOptions.classList.remove('livechat-shareurl-custom-readonly-disabled') } else { - // Hide the withscroll checkbox - form.withscrollLabelEl.style.display = 'none' + form.withscroll.disabled = true + form.transparent.disabled = true + form.readonlyOptions.classList.add('livechat-shareurl-custom-readonly-disabled') } const iframeUri = getIframeUri(registerOptions, settings, video, uriOptions) form.url.setAttribute('value', iframeUri ?? '') @@ -177,6 +197,7 @@ async function shareChatUrl (registerOptions: RegisterClientOptions, settings: a version: 1, // in case we add incompatible values in a near feature readonly: !!form.readonly.checked, withscroll: !!form.withscroll.checked, + transparent: !!form.transparent.checked, autocolors: !!form.autoColors?.checked } window.localStorage.setItem('peertube-plugin-livechat-shareurl', JSON.stringify(v)) @@ -198,6 +219,7 @@ async function shareChatUrl (registerOptions: RegisterClientOptions, settings: a } form.readonly.checked = !!v.readonly form.withscroll.checked = !!v.withscroll + form.transparent.checked = !!v.transparent if (form.autoColors) { form.autoColors.checked = !!v.autocolors } diff --git a/client/videowatch/uri.ts b/client/videowatch/uri.ts index 52aae253..ed32d6e2 100644 --- a/client/videowatch/uri.ts +++ b/client/videowatch/uri.ts @@ -7,6 +7,7 @@ import { computeAutoColors } from './colors' interface UriOptions { readonly?: boolean | 'noscroll' + transparent?: boolean ignoreAutoColors?: boolean permanent?: boolean } @@ -84,6 +85,10 @@ function getIframeUri ( iFrameUri.searchParams.set('_readonly', (typeof uriOptions.readonly === 'string') ? uriOptions.readonly : 'true') } + if (uriOptions.transparent) { + iFrameUri.searchParams.set('_transparent', 'true') + } + iframeUriStr = iFrameUri.href return iframeUriStr } diff --git a/conversejs/builtin.ts b/conversejs/builtin.ts index c585a35c..9a92ccac 100644 --- a/conversejs/builtin.ts +++ b/conversejs/builtin.ts @@ -92,6 +92,7 @@ interface InitConverseParams { forceReadonly: boolean | 'noscroll' noScroll: boolean theme: string + transparent: boolean } window.initConverse = async function initConverse ({ jid, @@ -103,7 +104,8 @@ window.initConverse = async function initConverse ({ advancedControls, autoViewerMode, forceReadonly, - theme + theme, + transparent }: InitConverseParams) { const isInIframe = inIframe() @@ -121,6 +123,9 @@ window.initConverse = async function initConverse ({ body?.classList.add('livechat-noscroll') } } + if (transparent) { + body?.classList.add('livechat-transparent') + } const params: any = { assets_path: assetsPath, diff --git a/conversejs/custom/shared/styles/livechat.scss b/conversejs/custom/shared/styles/livechat.scss index 931b362f..2459e4e0 100644 --- a/conversejs/custom/shared/styles/livechat.scss +++ b/conversejs/custom/shared/styles/livechat.scss @@ -31,7 +31,8 @@ body.livechat-readonly.livechat-noscroll { overflow-y: hidden !important; } - .message.separator { + .message.separator, + .message.date-separator { // also hide separators (new day, new message) display: none; } @@ -61,3 +62,25 @@ body[livechat-viewer-mode="on"] { } } } + +// Transparent mode +body.livechat-transparent { + // --peertube-main-background: rgba(0 0 0 / 0%) !important; + // --peertube-menu-background: rgba(0 0 0 / 0%) !important; + + &.converse-fullscreen { + background-color: rgba(0 0 0 / 0%) !important; + } + + .chat-body, + .conversejs .chatroom .box-flyout, + .conversejs .chatbox .chat-content, + .conversejs .chatbox .chat-content .chat-content__notifications { + background-color: rgba(0 0 0 / 0%) !important; + } + + // Hide the background_logo + #conversejs-bg { + display: none !important; + } +} diff --git a/conversejs/index.html b/conversejs/index.html index 6da7d37a..258de3ac 100644 --- a/conversejs/index.html +++ b/conversejs/index.html @@ -24,7 +24,8 @@ advancedControls: '{{ADVANCEDCONTROLS}}' === 'true', autoViewerMode: '{{AUTOVIEWERMODE}}' === 'true', theme: '{{CONVERSEJS_THEME}}', - forceReadonly: '{{FORCEREADONLY}}' === 'noscroll' ? '{{FORCEREADONLY}}' : '{{FORCEREADONLY}}' === 'true' + forceReadonly: '{{FORCEREADONLY}}' === 'noscroll' ? '{{FORCEREADONLY}}' : '{{FORCEREADONLY}}' === 'true', + transparent: '{{TRANSPARENT}}' === 'true' }) diff --git a/languages/ca.json b/languages/ca.json index a7b38f6c..e6231209 100644 --- a/languages/ca.json +++ b/languages/ca.json @@ -7,6 +7,7 @@ "Share chat link": false, "Read-only": false, "Show the scrollbar": false, + "Transparent background (for stream integration, with OBS for example)": 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 0cec0f06..e7688b86 100644 --- a/languages/eo.json +++ b/languages/eo.json @@ -7,6 +7,7 @@ "Share chat link": false, "Read-only": false, "Show the scrollbar": false, + "Transparent background (for stream integration, with OBS for example)": 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 3860d904..dbea5849 100644 --- a/languages/es.json +++ b/languages/es.json @@ -7,6 +7,7 @@ "Share chat link": "Compartir el enlace de esta sala de chat", "Read-only": "Sólo lectura", "Show the scrollbar": false, + "Transparent background (for stream integration, with OBS for example)": 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 1e466e21..6278871d 100644 --- a/languages/eu.json +++ b/languages/eu.json @@ -7,6 +7,7 @@ "Share chat link": false, "Read-only": false, "Show the scrollbar": false, + "Transparent background (for stream integration, with OBS for example)": 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 02888c50..0da1f632 100644 --- a/languages/fr.json +++ b/languages/fr.json @@ -7,6 +7,7 @@ "Share chat link": "Partager le lien du salon de discussion", "Read-only": "Lecture seule", "Show the scrollbar": "Afficher la barre de défilement", + "Transparent background (for stream integration, with OBS for example)": "Arrière plan transparent (pour l'intégration dans le stream, avec OBS par exemple)", "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 a9b42732..a82e0e4f 100644 --- a/languages/it.json +++ b/languages/it.json @@ -7,6 +7,7 @@ "Share chat link": false, "Read-only": false, "Show the scrollbar": false, + "Transparent background (for stream integration, with OBS for example)": 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 0b88fa38..e5367ef8 100644 --- a/languages/oc.json +++ b/languages/oc.json @@ -7,6 +7,7 @@ "Share chat link": "Partejar lo ligam de la discussion", "Read-only": "Lectura sola", "Show the scrollbar": "Afichar la barra de desfilament", + "Transparent background (for stream integration, with OBS for example)": 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 7f9f8161..1c07374a 100644 --- a/languages/pl.json +++ b/languages/pl.json @@ -7,6 +7,7 @@ "Share chat link": false, "Read-only": false, "Show the scrollbar": false, + "Transparent background (for stream integration, with OBS for example)": 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 a312fd16..7553486b 100644 --- a/server/lib/routers/webchat.ts +++ b/server/lib/routers/webchat.ts @@ -57,6 +57,7 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise