Channel configuration UI WIP
This commit is contained in:
John Livingston
parent
f00bac5eb1
commit
d77a276fac
12
client/@types/global.d.ts
vendored
12
client/@types/global.d.ts
vendored
@ -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
|
||||
|
||||
@ -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 () => {
|
||||
|
||||
@ -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}}" />
|
||||
|
||||
@ -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"
|
||||
livechat_configuration_channel_bot_nickname: "Bot nickname"
|
||||
Loading…
x
Reference in New Issue
Block a user