From 9a4608863ba75b8e074baeb7ee999dccebc8aa8d Mon Sep 17 00:00:00 2001 From: John Livingston Date: Fri, 7 Jan 2022 19:20:28 +0100 Subject: [PATCH 1/3] Auto viewer mode (WIP). --- conversejs/builtin.ts | 42 ++++++++++++++++++- conversejs/custom/shared/styles/livechat.scss | 15 +++++++ .../custom/templates/muc-bottom-panel.js | 40 ++++++++++++++++++ conversejs/custom/webpack.livechat.js | 3 +- conversejs/index.html | 1 + server/lib/routers/webchat.ts | 6 ++- 6 files changed, 103 insertions(+), 4 deletions(-) create mode 100644 conversejs/custom/templates/muc-bottom-panel.js diff --git a/conversejs/builtin.ts b/conversejs/builtin.ts index 7ea83ab2..5ee94a3b 100644 --- a/conversejs/builtin.ts +++ b/conversejs/builtin.ts @@ -82,6 +82,7 @@ interface InitConverseParams { websocketServiceUrl: string authenticationUrl: string advancedControls: boolean + autoViewerMode: boolean forceReadonly: boolean | 'noscroll' noScroll: boolean theme: string @@ -94,6 +95,7 @@ window.initConverse = async function initConverse ({ websocketServiceUrl, authenticationUrl, advancedControls, + autoViewerMode, forceReadonly, theme }: InitConverseParams) { @@ -155,7 +157,7 @@ window.initConverse = async function initConverse ({ persistent_store: 'sessionStorage', show_images_inline: false, // for security reason, and to avoid bugs when image is larger that iframe render_media: false, // for security reason, and to avoid bugs when image is larger that iframe - whitelisted_plugins: ['livechatWindowTitlePlugin'] + whitelisted_plugins: ['livechatWindowTitlePlugin', 'livechatViewerModePlugin'] } // TODO: params.clear_messages_on_reconnection = true when muc_mam will be available. @@ -229,6 +231,44 @@ window.initConverse = async function initConverse ({ } } }) + + if (autoViewerMode && !isAuthenticated) { + window.converse.plugins.add('livechatViewerModePlugin', { + dependencies: ['converse-muc', 'converse-muc-views'], + initialize: function () { + const _converse = this._converse + const getDefaultMUCNickname = _converse.getDefaultMUCNickname + if (!getDefaultMUCNickname) { + console.error('[livechatViewerModePlugin] getDefaultMUCNickname is not initialized.') + } else { + Object.assign(_converse, { + getDefaultMUCNickname: function (this: any): any { + return getDefaultMUCNickname.apply(this, arguments) ?? 'Anonymous ' + (new Date()).getTime().toString() + } + }) + } + _converse.api.settings.update({ + livechat_viewer_mode: true + }) + + function refreshViewerMode (canChat: boolean): void { + console.log('[livechatViewerModePlugin] refreshViewerMode: ' + (canChat ? 'off' : 'on')) + if (canChat) { + body?.setAttribute('livechat-viewer-mode', 'off') + } else { + body?.setAttribute('livechat-viewer-mode', 'on') + } + } + + _converse.api.listen.on('livechatViewerModeSetNickname', () => refreshViewerMode(true)) + _converse.api.listen.on('chatRoomInitialized', function (this: any, model: any): void { + const nick = model?.get ? model.get('nick') : '' + refreshViewerMode(nick && !/^Anonymous /.test(nick)) + }) + } + }) + } + window.converse.initialize(params) } catch (error) { console.error('Failed initializing converseJS', error) diff --git a/conversejs/custom/shared/styles/livechat.scss b/conversejs/custom/shared/styles/livechat.scss index 064cfb5e..97bbac18 100644 --- a/conversejs/custom/shared/styles/livechat.scss +++ b/conversejs/custom/shared/styles/livechat.scss @@ -36,3 +36,18 @@ body.livechat-readonly.livechat-noscroll { display: none; } } + +// Viewer mode +.livechat-viewer-mode-nick { + display: none; +} + +body[livechat-viewer-mode="on"] { + .livechat-viewer-mode-nick { + display: initial; + } + + .livechat-viewer-mode-panel { + display: none; + } +} diff --git a/conversejs/custom/templates/muc-bottom-panel.js b/conversejs/custom/templates/muc-bottom-panel.js new file mode 100644 index 00000000..a06010d1 --- /dev/null +++ b/conversejs/custom/templates/muc-bottom-panel.js @@ -0,0 +1,40 @@ +import { __ } from 'i18n' +import { _converse, api } from '@converse/headless/core' +import { html } from 'lit' +import tplMucBottomPanel from '../../src/plugins/muc-views/templates/muc-bottom-panel.js' + +async function setNickname (ev, model) { + ev.preventDefault() + const nick = ev.target.nick.value.trim() + nick && await model.setNickname(nick) + _converse.api.trigger('livechatViewerModeSetNickname') +} + +export default (o) => { + if (api.settings.get('livechat_viewer_mode')) { + const model = o.model + const i18nNickname = __('Nickname') + const i18nJoin = __('Enter groupchat') + return html` +
setNickname(ev, model)}> +
+
+ +
+
+ +
+
+
+ + ${tplMucBottomPanel(o)} + ` + } + return tplMucBottomPanel(o) +} diff --git a/conversejs/custom/webpack.livechat.js b/conversejs/custom/webpack.livechat.js index aa9d3fe3..ef12b62e 100644 --- a/conversejs/custom/webpack.livechat.js +++ b/conversejs/custom/webpack.livechat.js @@ -7,8 +7,7 @@ module.exports = merge(prod, { resolve: { extensions: ['.js'], alias: { - // To override a template, use this syntax: - // 'templates/muc_sidebar.js': path.resolve(__dirname, 'custom/templates/muc_sidebar.js') + './templates/muc-bottom-panel.js': path.resolve('custom/templates/muc-bottom-panel.js'), '../../templates/background_logo.js$': path.resolve(__dirname, 'custom/templates/background_logo.js'), 'shared/styles/index.scss$': path.resolve(__dirname, 'custom/shared/styles/livechat.scss') } diff --git a/conversejs/index.html b/conversejs/index.html index 4669b54b..6da7d37a 100644 --- a/conversejs/index.html +++ b/conversejs/index.html @@ -22,6 +22,7 @@ websocketServiceUrl: '{{WS_SERVICE_URL}}', authenticationUrl: '{{AUTHENTICATION_URL}}', advancedControls: '{{ADVANCEDCONTROLS}}' === 'true', + autoViewerMode: '{{AUTOVIEWERMODE}}' === 'true', theme: '{{CONVERSEJS_THEME}}', forceReadonly: '{{FORCEREADONLY}}' === 'noscroll' ? '{{FORCEREADONLY}}' : '{{FORCEREADONLY}}' === 'true' }) diff --git a/server/lib/routers/webchat.ts b/server/lib/routers/webchat.ts index 1afd701a..99ea82aa 100644 --- a/server/lib/routers/webchat.ts +++ b/server/lib/routers/webchat.ts @@ -52,7 +52,8 @@ async function initWebchatRouter (options: RegisterServerOptions): Promise Date: Fri, 7 Jan 2022 19:28:07 +0100 Subject: [PATCH 2/3] Auto viewer mode (WIP). --- CHANGELOG.md | 4 ++++ conversejs/custom/shared/styles/livechat.scss | 6 ++++-- conversejs/custom/templates/muc-bottom-panel.js | 4 +--- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d5d95be1..66b8cc6c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## ??? +### Features + +* Builtin Prosody: anonymous users connects automatically to the chat in a readonly mode. They must choose a nickname before they can chat. + ### Minor changes and fixes * Builtin Prosody: better random avatars quality. diff --git a/conversejs/custom/shared/styles/livechat.scss b/conversejs/custom/shared/styles/livechat.scss index 97bbac18..e55ef82a 100644 --- a/conversejs/custom/shared/styles/livechat.scss +++ b/conversejs/custom/shared/styles/livechat.scss @@ -47,7 +47,9 @@ body[livechat-viewer-mode="on"] { display: initial; } - .livechat-viewer-mode-panel { - display: none; + converse-muc-bottom-panel { + >:not(.livechat-viewer-mode-nick) { + display: none; + } } } diff --git a/conversejs/custom/templates/muc-bottom-panel.js b/conversejs/custom/templates/muc-bottom-panel.js index a06010d1..2854cfc6 100644 --- a/conversejs/custom/templates/muc-bottom-panel.js +++ b/conversejs/custom/templates/muc-bottom-panel.js @@ -32,9 +32,7 @@ export default (o) => { - - ${tplMucBottomPanel(o)} - ` + ${tplMucBottomPanel(o)}` } return tplMucBottomPanel(o) } From c69ebd2680712fe88c7caa102c94481b20612572 Mon Sep 17 00:00:00 2001 From: John Livingston Date: Fri, 7 Jan 2022 19:57:42 +0100 Subject: [PATCH 3/3] Auto viewer mode (WIP). --- conversejs/custom/shared/styles/livechat.scss | 8 ++++++++ conversejs/custom/templates/muc-bottom-panel.js | 4 ++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/conversejs/custom/shared/styles/livechat.scss b/conversejs/custom/shared/styles/livechat.scss index e55ef82a..931b362f 100644 --- a/conversejs/custom/shared/styles/livechat.scss +++ b/conversejs/custom/shared/styles/livechat.scss @@ -45,6 +45,14 @@ body.livechat-readonly.livechat-noscroll { body[livechat-viewer-mode="on"] { .livechat-viewer-mode-nick { display: initial; + + form { + display: flex !important; + flex-flow: row wrap !important; + padding-top: 0.5em !important; + padding-bottom: 0.5em !important; + border-top: var(--chatroom-separator-border-bottom) !important; + } } converse-muc-bottom-panel { diff --git a/conversejs/custom/templates/muc-bottom-panel.js b/conversejs/custom/templates/muc-bottom-panel.js index 2854cfc6..3da72668 100644 --- a/conversejs/custom/templates/muc-bottom-panel.js +++ b/conversejs/custom/templates/muc-bottom-panel.js @@ -16,9 +16,9 @@ export default (o) => { const i18nNickname = __('Nickname') const i18nJoin = __('Enter groupchat') return html` -
setNickname(ev, model)}> -
+