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

Channel configuration UI WIP

Browse Source
This commit is contained in:
John Livingston 2023-09-20 18:48:02 +02:00
parent f00bac5eb1
commit d77a276fac
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
4 changed files with 202 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/@types/global.d.ts vendored
View File

@ -43,5 +43,17 @@ declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_DESC: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC2: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_REASON_LABEL: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_REASON_DESC: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_REGEXP_LABEL: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_REGEXP_DESC: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DELAY_LABEL: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DELAY_DESC: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_COMMAND_LABEL: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_COMMAND_DESC: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_BANNED_JIDS_LABEL: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME: string

10
client/common/configuration/logic/channel.ts
View File

@ -17,10 +17,16 @@ async function vivifyConfigurationChannel (
const labelSaved = await clientOptions.peertubeHelpers.translate(LOC_SUCCESSFULLY_SAVED)
const labelError = await clientOptions.peertubeHelpers.translate(LOC_ERROR)
const enableBotCB = form.querySelector('input[name=bot]') as HTMLInputElement
const botEnabledEl = form.querySelector('[livechat-configuration-channel-options-bot-enabled]') as HTMLElement
const botEnabledEl = form.querySelectorAll('[livechat-configuration-channel-options-bot-enabled]')
const refresh: Function = () => {
botEnabledEl.style.display = enableBotCB.checked ? 'initial' : 'none'
botEnabledEl.forEach(el => {
if (enableBotCB.checked) {
(el as HTMLElement).style.removeProperty('display')
} else {
(el as HTMLElement).style.display = 'none'
}
})
}
const submitForm: Function = async () => {

175
client/common/configuration/templates/channel.ts
View File

@ -1,6 +1,8 @@
import type { RegisterClientOptions } from '@peertube/peertube-types/client'
import type { ChannelConfiguration } from 'shared/lib/types'
import { getBaseRoute } from '../../../videowatch/uri'
import { localizedHelpUrl } from '../../../utils/help'
import { helpButtonSVG } from '../../../videowatch/buttons'
// Must use require for mustache, import seems buggy.
const Mustache = require('mustache')
@ -38,16 +40,61 @@ async function renderConfigurationChannel (
throw new Error('Invalid channel configuration options.')
}
const helpUrl = await localizedHelpUrl(registerClientOptions, {
page: 'documentation/user/streamers/' // FIXME: this is not the good link
})
const helpIcon = helpButtonSVG()
const helpButton = `<a
href="${helpUrl}"
target=_blank
class="orange-button peertube-button-link"
>${helpIcon}</a>`
const view = {
title: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_TITLE),
description: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_DESC),
enableBot: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL),
botOptions: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE),
forbiddenWords: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL),
forbiddenWordsDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC),
forbiddenWordsDesc2: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC2),
forbiddenWordsReason: await peertubeHelpers.translate(
LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_REASON_LABEL
),
forbiddenWordsReasonDesc: await peertubeHelpers.translate(
LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_REASON_DESC
),
forbiddenWordsRegexp: await peertubeHelpers.translate(
LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_REGEXP_LABEL
),
forbiddenWordsRegexpDesc: await peertubeHelpers.translate(
LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_REGEXP_DESC
),
quoteLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL),
quoteDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC),
quoteDelayLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DELAY_LABEL),
quoteDelayDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DELAY_DESC),
quoteCommandLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_COMMAND_LABEL),
quoteCommandDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_COMMAND_DESC),
// bannedJIDs: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BANNED_JIDS_LABEL),
save: await peertubeHelpers.translate(LOC_SAVE),
cancel: await peertubeHelpers.translate(LOC_CANCEL),
botNickname: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME),
forbiddenWordsArray: [0, 1, 2].map(count => {
return {
displayNumber: count + 1,
fieldNumber: count,
displayHelp: count === 0
}
}),
quotesArray: [0, 1, 2].map(count => {
return {
displayNumber: count + 1,
fieldNumber: count,
displayHelp: count === 0
}
}),
helpButton,
channelConfiguration
}
@ -67,43 +114,131 @@ async function renderConfigurationChannel (
<h2>{{botOptions}}</h2>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<fieldset>
<div class="form-group">
<label>
<input
type="checkbox"
name="bot"
id="peertube-livechat-bot"
value="1"
{{#channelConfiguration.configuration.bot}}
checked="checked"
{{/channelConfiguration.configuration.bot}}
/>
{{enableBot}}
</label>
</div>
<div class="form-group" livechat-configuration-channel-options-bot-enabled>
<label for="peertube-livechat-bot-nickname">{{botNickname}}</label>
<input
type="text"
name="bot_nickname"
class="form-control"
id="peertube-livechat-bot-nickname"
value="{{channelConfiguration.configuration.botNickname}}"
/>
</div>
</div>
</div>
{{#forbiddenWordsArray}}{{! iterating on forbiddenWordsArray to display N fields }}
<div class="row mt-5" livechat-configuration-channel-options-bot-enabled>
<div class="col-12 col-lg-4 col-xl-3">
<h2>{{forbiddenWords}} #{{displayNumber}}</h2>
{{#displayHelp}}
<p>{{forbiddenWordsDesc}}</p>
{{{helpButton}}}
{{/displayHelp}}
</div>
<div class="col-12 col-lg-8 col-xl-9">
<div class="form-group">
<label for="peertube-livechat-forbidden-words-{{fieldNumber}}">{{forbiddenWords}}</label>
{{! warning: don't add extra line break in textarea! }}
<textarea
name="forbidden_words_{{fieldNumber}}"
id="peertube-livechat-forbidden-words-{{fieldNumber}}"
class="form-control"
>{{
#channelConfiguration.configuration.forbiddenWords
}}{{.}}\n{{
/channelConfiguration.configuration.forbiddenWords
}}</textarea>
<p class="form-group-description">{{forbiddenWordsDesc2}}</p>
</div>
<div class="form-group">
<label>
<input
type="checkbox"
name="bot"
id="peertube-livechat-bot"
name="forbidden_words_regexp_{{fieldNumber}}"
value="1"
{{#channelConfiguration.configuration.bot}}
checked="checked"
{{/channelConfiguration.configuration.bot}}
/>
{{enableBot}}
{{forbiddenWordsRegexp}}
</label>
<p class="form-group-description">{{forbiddenWordsRegexpDesc}}</p>
</div>
</fieldset>
<fieldset livechat-configuration-channel-options-bot-enabled>
<div class="form-group">
<label for="peertube-livechat-bot-nickname">{{botNickname}}</label>
<label for="peertube-livechat-forbidden-words-reason-{{fieldNumber}}">{{forbiddenWordsReason}}</label>
<input
type="text"
name="bot_nickname"
name="forbidden_words_reason_{{fieldNumber}}"
class="form-control"
id="peertube-livechat-bot-nickname"
value="{{channelConfiguration.configuration.botNickname}}"
id="peertube-livechat-forbidden-words-reason-{{fieldNumber}}"
value=""
/>
<p class="form-group-description">{{forbiddenWordsReasonDesc}}</p>
</div>
</div>
</div>
{{/forbiddenWordsArray}}
{{#quotesArray}}{{! iterating on quotesArray to display N fields }}
<div class="row mt-5" livechat-configuration-channel-options-bot-enabled>
<div class="col-12 col-lg-4 col-xl-3">
<h2>{{quoteLabel}} #{{displayNumber}}</h2>
{{#displayHelp}}
<p>{{quoteDesc}}</p>
{{{helpButton}}}
{{/displayHelp}}
</div>
<div class="col-12 col-lg-8 col-xl-9">
<div class="form-group">
<label for="peertube-livechat-quote-{{fieldNumber}}">{{quoteLabel}}</label>
<input
type="text"
name="quote_{{fieldNumber}}"
class="form-control"
id="peertube-livechat-quote-{{fieldNumber}}"
value=""
/>
</div>
<div class="form-group">
<label for="peertube-livechat-forbidden-words">{{forbiddenWords}}</label>
<textarea name="forbidden_words" id="peertube-livechat-forbidden-words" class="form-control">
{{#channelConfiguration.configuration.forbiddenWords}}{{.}}
{{/channelConfiguration.configuration.forbiddenWords}}
</textarea>
<label for="peertube-livechat-quote-delay-{{fieldNumber}}">{{quoteDelayLabel}}</label>
<input
type="number"
min="0"
max="6000"
step="1"
name="quote_delay_{{fieldNumber}}"
class="form-control"
id="peertube-livechat-quote-delay-{{fieldNumber}}"
value="0"
/>
<p class="form-group-description">{{quoteDelayDesc}}</p>
</div>
</fieldset>
<div class="form-group">
<label for="peertube-livechat-quote-command-{{fieldNumber}}">{{quoteCommandLabel}}</label>
<input
type="text"
name="quote_command_{{fieldNumber}}"
class="form-control"
id="peertube-livechat-quote-command-{{fieldNumber}}"
value=""
/>
<p class="form-group-description">{{quoteCommandDesc}}</p>
</div>
</div>
</div>
</div>
{{/quotesArray}}
<div class="form-group">
<input type="submit" value="{{save}}" />
<input type="reset" value="{{cancel}}" />

26
languages/en.yml
View File

@ -316,5 +316,31 @@ livechat_configuration_channel_desc: "You can setup here some options for this c
livechat_configuration_channel_enable_bot_label: "Enable moderation bot"
livechat_configuration_channel_bot_options_title: "Moderation bot options"
livechat_configuration_channel_forbidden_words_label: "Forbidden words or expressions"
livechat_configuration_channel_forbidden_words_desc: |
You can configure some words that will be automatically moderated by the bot (messages containing such words will be instantly deleted).
You can also add an optional reason that will be displayed at the place of deleted messages.
For more information about how to configure this feature, please refer to the documentation by clicking on the help button.
Several examples are provided on the documentation page.
livechat_configuration_channel_forbidden_words_desc2: |
One word or expression per line. If you put multiple words on one line, it will only match messages containing the whole sequence.
livechat_configuration_channel_forbidden_words_reason_label: "Reason"
livechat_configuration_channel_forbidden_words_reason_desc: "Reason to display besides deleted messages"
livechat_configuration_channel_forbidden_words_regexp_label: "Consider as regular expressions"
livechat_configuration_channel_forbidden_words_regexp_desc: "By checking this option, you can use regular expressions."
livechat_configuration_channel_quote_label: "Pre-recorded message"
livechat_configuration_channel_quote_desc: |
You can configure several pre-recorded messages.
These messages will be sent by the bot every X minutes and/or when a chat user uses the corresponding command (for example "!help", where "help is the command name").
You can for example make the bot sent some sponsoring information every 5 minutes, or when a user types "!sponsor".
For more information about how to configure this feature, please refer to the documentation by clicking on the help button.
livechat_configuration_channel_quote_delay_label: "Send every X minutes"
livechat_configuration_channel_quote_delay_desc: |
The bot will post the message every X minutes.
Set to 0 if you don't want the bot to send the message periodically.
livechat_configuration_channel_quote_command_label: "Bot command"
livechat_configuration_channel_quote_command_desc: |
A command on which the bot will respond.
For example if you set "help", the bot will respond to messages starting with "!help".
Left empty if you don't want the bot to respond to commands.
livechat_configuration_channel_banned_jids_label: "Banned users and patterns"
livechat_configuration_channel_bot_nickname: "Bot nickname"