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

@@ -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
 

assets/style.scss

@@ -135,13 +135,17 @@ table.peertube-plugin-livechat-prosody-list-rooms td {
       display: block;
     }
 
-    .livechat-shareurl-custom-readonly {
+    .livechat-shareurl-custom-readonly-options {
-      display: flex;
+      margin-left: 40px;
-      flex-flow: wrap;
-      flex-direction: row;
 
-      label:not(:first-child) {
+      & > * {
-        margin-left: 40px;
+        display: block;
+      }
+
+      &.livechat-shareurl-custom-readonly-disabled {
+        label {
+          color: var(--gray-dark);
+        }
       }
     }
   }

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.withscroll.disabled = true
-      form.withscrollLabelEl.style.display = 'none'
+      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
       }

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
 }

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,

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;
+  }
+}

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'
   })
 </script>
 </body>

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,

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,

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",

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,

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é",

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,

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",

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,

server/lib/routers/webchat.ts

@@ -57,6 +57,7 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
       let autoViewerMode: boolean = false
       let forceReadonly: 'true' | 'false' | 'noscroll' = 'false'
       let converseJSTheme: string = settings['converse-theme'] as string
+      let transparent: boolean = false
       if (!/^\w+$/.test(converseJSTheme)) {
         converseJSTheme = 'peertube'
       }
@@ -95,6 +96,9 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
         } else {
           autoViewerMode = true // auto join the chat in viewer mode, if not logged in
         }
+        if (req.query._transparent === 'true') {
+          transparent = true
+        }
       } else if (chatType === 'builtin-converse') {
         if (!settings['chat-server']) {
           throw new Error('Missing chat-server settings.')
@@ -218,6 +222,7 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
       page = page.replace(/{{CONVERSEJS_THEME}}/g, converseJSTheme)
       page = page.replace(/{{CONVERSEJS_AUTOCOLORS}}/g, autocolorsStyles)
       page = page.replace(/{{FORCEREADONLY}}/g, forceReadonly)
+      page = page.replace(/{{TRANSPARENT}}/g, transparent ? 'true' : 'false')
 
       res.status(200)
       res.type('html')