Channel configuration UI WIP

client/@types/global.d.ts

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

client/common/configuration/logic/channel.ts

@@ -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 () => {

client/common/configuration/templates/channel.ts

@@ -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"
+                      name="forbidden_words_regexp_{{fieldNumber}}"
-                      id="peertube-livechat-bot"
                       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"
+                    id="peertube-livechat-forbidden-words-reason-{{fieldNumber}}"
-                    value="{{channelConfiguration.configuration.botNickname}}"
+                    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>
+                  <label for="peertube-livechat-quote-delay-{{fieldNumber}}">{{quoteDelayLabel}}</label>
-<textarea name="forbidden_words" id="peertube-livechat-forbidden-words" class="form-control">
+                  <input
-{{#channelConfiguration.configuration.forbiddenWords}}{{.}}
+                    type="number"
-{{/channelConfiguration.configuration.forbiddenWords}}
+                    min="0"
-</textarea>
+                    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}}" />

languages/en.yml

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