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.
This commit is contained in:
John Livingston
2022-01-16 17:50:11 +01:00
parent 8c2938f1f9
commit 80ac08bd18
16 changed files with 99 additions and 21 deletions

View File

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

View File

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

View File

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