Builtin Prosody, Share chat url: ability to show/hide the scrollbar in readonly mode.

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

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

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
       }

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

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 = {

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

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

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,

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,

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

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,

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

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,

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

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,

server/lib/routers/webchat.ts

@@ -53,7 +53,7 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
       let wsUri: string
       let authenticationUrl: string = ''
       let advancedControls: boolean = false
-      let forceReadonly: boolean = false
+      let forceReadonly: 'true' | 'false' | 'noscroll' = 'false'
       let converseJSTheme: string = settings['converse-theme'] as string
       if (!/^\w+$/.test(converseJSTheme)) {
         converseJSTheme = 'peertube'
@@ -87,7 +87,9 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
           'api/auth'
         advancedControls = true
         if (req.query._readonly === 'true') {
-          forceReadonly = true
+          forceReadonly = 'true'
+        } else if (req.query._readonly === 'noscroll') {
+          forceReadonly = 'noscroll'
         }
       } else if (chatType === 'builtin-converse') {
         if (!settings['chat-server']) {
@@ -210,7 +212,7 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise<Route
       page = page.replace(/{{ADVANCEDCONTROLS}}/g, advancedControls ? 'true' : 'false')
       page = page.replace(/{{CONVERSEJS_THEME}}/g, converseJSTheme)
       page = page.replace(/{{CONVERSEJS_AUTOCOLORS}}/g, autocolorsStyles)
-      page = page.replace(/{{FORCEREADONLY}}/g, forceReadonly ? 'true' : 'false')
+      page = page.replace(/{{FORCEREADONLY}}/g, forceReadonly)
 
       res.status(200)
       res.type('html')