matty
/
peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Code refactoring WIP: 

Cleaning the way ConverseJS parameters are given to the full page.
This commit is contained in:
John Livingston 2023-08-01 17:01:09 +02:00
parent 6184205e36
commit d33795f7a1
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
7 changed files with 71 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
conversejs/builtin.ts
View File

@ -1,4 +1,4 @@
import type { InitConverseParams } from './lib/types'
import type { InitConverseJSParams } from 'shared/lib/types'
import { inIframe } from './lib/utils'
import { initDom } from './lib/dom'
import {
@ -19,11 +19,11 @@ declare global {
add: (name: string, plugin: any) => void
}
}
initConverse: (args: InitConverseParams) => Promise<void>
initConverse: (args: InitConverseJSParams) => Promise<void>
}
}
window.initConverse = async function initConverse (initConverseParams: InitConverseParams): Promise<void> {
window.initConverse = async function initConverse (initConverseParams: InitConverseJSParams): Promise<void> {
// First, fixing relative websocket urls.
if (initConverseParams.localWebsocketServiceUrl?.startsWith('/')) {
initConverseParams.localWebsocketServiceUrl = new URL(

21
conversejs/index.html
View File

@ -14,24 +14,9 @@
<noscript>You need to enable JavaScript to run the Converse.js chat app.</noscript>
<div id="conversejs-bg" class="theme-peertube"></div>
<script type="text/javascript">
initConverse({
isRemoteChat: '{{IS_REMOTE_CHAT}}' === 'true',
localAnonymousJID: '{{LOCAL_ANONYMOUS_JID}}',
remoteAnonymousJID: '{{REMOTE_ANONYMOUS_JID}}' === '' ? null : '{{REMOTE_ANONYMOUS_JID}}',
remoteAnonymousXMPPServer: '{{REMOTE_ANONYMOUS_XMPP_SERVER}}' === 'true',
remoteAuthenticatedXMPPServer: '{{REMOTE_AUTHENTICATED_XMPP_SERVER}}' === 'true',
assetsPath : '{{BASE_STATIC_URL}}conversejs/',
room: '{{ROOM}}',
localBoshServiceUrl: '{{LOCAL_BOSH_SERVICE_URL}}' === '' ? null : '{{LOCAL_BOSH_SERVICE_URL}}',
localWebsocketServiceUrl: '{{LOCAL_WS_SERVICE_URL}}' === '' ? null : '{{LOCAL_WS_SERVICE_URL}}',
remoteBoshServiceUrl: '{{REMOTE_BOSH_SERVICE_URL}}' === '' ? null : '{{REMOTE_BOSH_SERVICE_URL}}',
remoteWebsocketServiceUrl: '{{REMOTE_WS_SERVICE_URL}}' === '' ? null : '{{REMOTE_WS_SERVICE_URL}}',
authenticationUrl: '{{AUTHENTICATION_URL}}',
autoViewerMode: '{{AUTOVIEWERMODE}}' === 'true',
theme: '{{CONVERSEJS_THEME}}',
forceReadonly: '{{FORCEREADONLY}}' === 'noscroll' ? '{{FORCEREADONLY}}' : '{{FORCEREADONLY}}' === 'true',
transparent: '{{TRANSPARENT}}' === 'true'
})
initConverse(
{INIT_CONVERSE_PARAMS}
)
</script>
</body>
</html>

24
conversejs/lib/converse-params.ts
View File

@ -1,4 +1,4 @@
import type { InitConverseParams } from './types'
import type { InitConverseJSParams } from 'shared/lib/types'
import type { AuthentInfos } from './auth'
/**
@ -9,7 +9,7 @@ import type { AuthentInfos } from './auth'
* @returns default parameters to provide to ConverseJS.
*/
function defaultConverseParams (
{ forceReadonly, theme, assetsPath, room }: InitConverseParams,
{ forceReadonly, theme, assetsPath, room }: InitConverseJSParams,
isInIframe: boolean
): any {
const mucShowInfoMessages = forceReadonly
@ -96,7 +96,10 @@ function defaultConverseParams (
* @param auth authent infos.
* @param params ConverseJS parameters to fill
*/
function localRoomAuthenticatedParams (initConverseParams: InitConverseParams, auth: AuthentInfos, params: any): void {
function localRoomAuthenticatedParams (
initConverseParams: InitConverseJSParams,
auth: AuthentInfos, params: any
): void {
_fillAuthenticatedParams(initConverseParams, auth, params)
_fillLocalProtocols(initConverseParams, params)
}
@ -106,7 +109,7 @@ function localRoomAuthenticatedParams (initConverseParams: InitConverseParams, a
* @param initConverseParams global parameters
* @param params ConverseJS parameters to fill
*/
function localRoomAnonymousParams (initConverseParams: InitConverseParams, params: any): void {
function localRoomAnonymousParams (initConverseParams: InitConverseJSParams, params: any): void {
params.jid = initConverseParams.localAnonymousJID
_fillLocalProtocols(initConverseParams, params)
}
@ -117,7 +120,10 @@ function localRoomAnonymousParams (initConverseParams: InitConverseParams, param
* @param auth authent infos.
* @param params ConverseJS parameters to fill
*/
function remoteRoomAuthenticatedParams (initConverseParams: InitConverseParams, auth: AuthentInfos, params: any): void {
function remoteRoomAuthenticatedParams (
initConverseParams: InitConverseJSParams,
auth: AuthentInfos, params: any
): void {
_fillAuthenticatedParams(initConverseParams, auth, params)
_fillLocalProtocols(initConverseParams, params)
}
@ -129,7 +135,7 @@ function remoteRoomAuthenticatedParams (initConverseParams: InitConverseParams,
* @param params ConverseJS parameters to fill
*/
function remoteRoomAnonymousParams (
initConverseParams: InitConverseParams,
initConverseParams: InitConverseJSParams,
auth: AuthentInfos | null,
params: any
): void {
@ -140,7 +146,7 @@ function remoteRoomAnonymousParams (
_fillRemoteProtocols(initConverseParams, params)
}
function _fillAuthenticatedParams (initConverseParams: InitConverseParams, auth: AuthentInfos, params: any): void {
function _fillAuthenticatedParams (initConverseParams: InitConverseJSParams, auth: AuthentInfos, params: any): void {
params.authentication = 'login'
params.auto_login = true
params.jid = auth.jid
@ -155,12 +161,12 @@ function _fillAuthenticatedParams (initConverseParams: InitConverseParams, auth:
// FIXME: use params.oauth_providers?
}
function _fillLocalProtocols (initConverseParams: InitConverseParams, params: any): void {
function _fillLocalProtocols (initConverseParams: InitConverseJSParams, params: any): void {
params.bosh_service_url = initConverseParams.localBoshServiceUrl
params.websocket_url = initConverseParams.localWebsocketServiceUrl
}
function _fillRemoteProtocols (initConverseParams: InitConverseParams, params: any): void {
function _fillRemoteProtocols (initConverseParams: InitConverseJSParams, params: any): void {
params.bosh_service_url = initConverseParams.remoteBoshServiceUrl
params.websocket_url = initConverseParams.remoteWebsocketServiceUrl
}

4
conversejs/lib/dom.ts
View File

@ -1,6 +1,6 @@
import type { InitConverseParams } from './types'
import type { InitConverseJSParams } from 'shared/lib/types'
function initDom ({ forceReadonly, transparent }: InitConverseParams, isInIframe: boolean): void {
function initDom ({ forceReadonly, transparent }: InitConverseJSParams, isInIframe: boolean): void {
const body = document.querySelector('body')
if (isInIframe) {
if (body) {

23
conversejs/lib/types.ts
View File

@ -1,23 +0,0 @@
interface InitConverseParams {
isRemoteChat: boolean
localAnonymousJID: string
remoteAnonymousJID: string | null
remoteAnonymousXMPPServer: boolean
remoteAuthenticatedXMPPServer: boolean
assetsPath: string
room: string
localBoshServiceUrl: string | null
localWebsocketServiceUrl: string | null
remoteBoshServiceUrl: string | null
remoteWebsocketServiceUrl: string | null
authenticationUrl: string
autoViewerMode: boolean
forceReadonly: boolean | 'noscroll'
noScroll: boolean
theme: string
transparent: boolean
}
export {
InitConverseParams
}

54
server/lib/routers/webchat.ts
View File

@ -1,7 +1,8 @@
import type { RegisterServerOptions, MVideoThumbnail, SettingEntries } from '@peertube/peertube-types'
import type { Router, Request, Response, NextFunction } from 'express'
import type {
ProsodyListRoomsResult, ProsodyListRoomsResultRoom
ProsodyListRoomsResult, ProsodyListRoomsResultRoom,
InitConverseJSParams, ConverseJSTheme
} from '../../../shared/lib/types'
import { createProxyServer } from 'http-proxy'
import {
@ -59,8 +60,8 @@ async function initWebchatRouter (options: RegisterServerOptionsV5): Promise<Rou
])
let autoViewerMode: boolean = false
let forceReadonly: 'true' | 'false' | 'noscroll' = 'false'
let converseJSTheme: string = settings['converse-theme'] as string
let forceReadonly: boolean | 'noscroll' = false
let converseJSTheme: ConverseJSTheme = settings['converse-theme'] as ConverseJSTheme
let transparent: boolean = false
if (!/^\w+$/.test(converseJSTheme)) {
converseJSTheme = 'peertube'
@ -70,7 +71,7 @@ async function initWebchatRouter (options: RegisterServerOptionsV5): Promise<Rou
getBaseRouterRoute(options) +
'api/auth'
if (req.query._readonly === 'true') {
forceReadonly = 'true'
forceReadonly = true
} else if (req.query._readonly === 'noscroll') {
forceReadonly = 'noscroll'
} else {
@ -119,8 +120,8 @@ async function initWebchatRouter (options: RegisterServerOptionsV5): Promise<Rou
const localAnonymousJID = 'anon.' + prosodyDomain
const localBoshUri = getBoshUri(options)
const localWsUri = settings['disable-websocket']
? ''
: (getWSUri(options) ?? '')
? null
: (getWSUri(options) ?? null)
let remoteConnectionInfos: WCRemoteConnectionInfos | undefined
let roomJID: string
@ -146,10 +147,6 @@ async function initWebchatRouter (options: RegisterServerOptionsV5): Promise<Rou
)
}
page = page.replace(/{{IS_REMOTE_CHAT}}/g, video?.remote ? 'true' : 'false')
page = page.replace(/{{LOCAL_ANONYMOUS_JID}}/g, localAnonymousJID)
page = page.replace(/{{REMOTE_ANONYMOUS_JID}}/g, remoteConnectionInfos?.anonymous?.userJID ?? '')
let autocolorsStyles = ''
if (
settings['converse-autocolors'] &&
@ -201,24 +198,29 @@ async function initWebchatRouter (options: RegisterServerOptionsV5): Promise<Rou
peertubeHelpers.logger.debug('No AutoColors.')
}
// ... then inject it in the page.
page = page.replace(/{{ROOM}}/g, roomJID)
page = page.replace(/{{LOCAL_BOSH_SERVICE_URL}}/g, localBoshUri)
page = page.replace(/{{LOCAL_WS_SERVICE_URL}}/g, localWsUri ?? '')
page = page.replace(/{{REMOTE_BOSH_SERVICE_URL}}/g, remoteConnectionInfos?.anonymous?.boshUri ?? '')
page = page.replace(/{{REMOTE_WS_SERVICE_URL}}/g, remoteConnectionInfos?.anonymous?.wsUri ?? '')
page = page.replace(/{{REMOTE_ANONYMOUS_XMPP_SERVER}}/g, remoteConnectionInfos?.anonymous ? 'true' : 'false')
page = page.replace(
/{{REMOTE_AUTHENTICATED_XMPP_SERVER}}/g,
remoteConnectionInfos?.authenticated ? 'true' : 'false'
)
page = page.replace(/{{AUTHENTICATION_URL}}/g, authenticationUrl)
page = page.replace(/{{AUTOVIEWERMODE}}/g, autoViewerMode ? 'true' : 'false')
page = page.replace(/{{CONVERSEJS_THEME}}/g, converseJSTheme)
// ... then some CSS in the page.
page = page.replace(/{{CONVERSEJS_AUTOCOLORS}}/g, autocolorsStyles)
page = page.replace(/{{FORCEREADONLY}}/g, forceReadonly)
page = page.replace(/{{TRANSPARENT}}/g, transparent ? 'true' : 'false')
// ... and finaly inject all other parameters
const initConverseJSParam: InitConverseJSParams = {
assetsPath: baseStaticUrl + 'conversejs/',
isRemoteChat: !!(video?.remote),
localAnonymousJID: localAnonymousJID,
remoteAnonymousJID: remoteConnectionInfos?.anonymous?.userJID ?? null,
remoteAnonymousXMPPServer: !!(remoteConnectionInfos?.anonymous),
remoteAuthenticatedXMPPServer: !!(remoteConnectionInfos?.authenticated),
room: roomJID,
localBoshServiceUrl: localBoshUri,
localWebsocketServiceUrl: localWsUri,
remoteBoshServiceUrl: remoteConnectionInfos?.anonymous?.boshUri ?? null,
remoteWebsocketServiceUrl: remoteConnectionInfos?.anonymous?.wsUri ?? null,
authenticationUrl: authenticationUrl,
autoViewerMode,
theme: converseJSTheme,
forceReadonly,
transparent
}
page = page.replace('{INIT_CONVERSE_PARAMS}', JSON.stringify(initConverseJSParam))
res.status(200)
res.type('html')
res.send(page)

20
shared/lib/types.ts
View File

@ -1,5 +1,24 @@
type ConverseJSTheme = 'peertube' | 'default' | 'concord'
interface InitConverseJSParams {
isRemoteChat: boolean
localAnonymousJID: string
remoteAnonymousJID: string | null
remoteAnonymousXMPPServer: boolean
remoteAuthenticatedXMPPServer: boolean
assetsPath: string
room: string
localBoshServiceUrl: string | null
localWebsocketServiceUrl: string | null
remoteBoshServiceUrl: string | null
remoteWebsocketServiceUrl: string | null
authenticationUrl: string
autoViewerMode: boolean
forceReadonly: boolean | 'noscroll'
theme: ConverseJSTheme
transparent: boolean
}
interface ProsodyListRoomsResultError {
ok: false
error: string
@ -28,6 +47,7 @@ type ProsodyListRoomsResult = ProsodyListRoomsResultError | ProsodyListRoomsResu
export type {
ConverseJSTheme,
InitConverseJSParams,
ProsodyListRoomsResult,
ProsodyListRoomsResultRoom
}