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

UI WIP.

Browse Source
This commit is contained in:
John Livingston
2023-09-21 16:09:50 +02:00
parent 8029bab8e4
commit eed88e9339
4 changed files with 124 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,11 +49,19 @@ declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_REASON_LABEL: s
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_FORBIDDEN_WORDS_APPLYTOMODERATORS_LABEL: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_APPLYTOMODERATORS_DESC: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_CMD_LABEL: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_CMD_DESC: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_MESSAGE_LABEL: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_MESSAGE_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_DESC2: 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
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_FOR_MORE_INFO: string

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

@ -49,6 +49,9 @@ async function renderConfigurationChannel (
target=_blank
class="orange-button peertube-button-link"
>${helpIcon}</a>`
const helpButtonForbiddenWords = helpButton
const helpButtonQuotes = helpButton
const helpButtonCommands = helpButton
const view = {
title: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_TITLE),
@ -70,16 +73,28 @@ async function renderConfigurationChannel (
forbiddenWordsRegexpDesc: await peertubeHelpers.translate(
LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_REGEXP_DESC
),
forbiddenWordsApplyToModerators: await peertubeHelpers.translate(
LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_APPLYTOMODERATORS_LABEL
),
forbiddenWordsApplyToModeratorsDesc: await peertubeHelpers.translate(
LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_APPLYTOMODERATORS_DESC
),
quoteLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL),
quoteDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC),
quoteDesc2: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC2),
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),
commandLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL),
commandDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC),
commandCmdLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_CMD_LABEL),
commandCmdDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_CMD_DESC),
commandMessageLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_MESSAGE_LABEL),
commandMessageDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_MESSAGE_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),
moreInfo: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FOR_MORE_INFO),
forbiddenWordsArray: [0, 1, 2].map(count => {
return {
displayNumber: count + 1,
@ -87,7 +102,14 @@ async function renderConfigurationChannel (
displayHelp: count === 0
}
}),
quotesArray: [0, 1, 2].map(count => {
quotesArray: [0].map(count => {
return {
displayNumber: count + 1,
fieldNumber: count,
displayHelp: count === 0
}
}),
cmdsArray: [0, 1, 2].map(count => {
return {
displayNumber: count + 1,
fieldNumber: count,
@ -95,6 +117,9 @@ async function renderConfigurationChannel (
}
}),
helpButton,
helpButtonForbiddenWords,
helpButtonCommands,
helpButtonQuotes,
channelConfiguration
}
@ -106,6 +131,7 @@ async function renderConfigurationChannel (
<span>{{channelConfiguration.channel.displayName}}</span>
<span>{{channelConfiguration.channel.name}}</span>
</span>
{{{helpButton}}}
</h1>
<p>{{description}}</p>
<form livechat-configuration-channel-options role="form">
@ -146,8 +172,8 @@ async function renderConfigurationChannel (
<div class="col-12 col-lg-4 col-xl-3">
<h2>{{forbiddenWords}} #{{displayNumber}}</h2>
{{#displayHelp}}
<p>{{forbiddenWordsDesc}}</p>
{{{helpButton}}}
<p>{{forbiddenWordsDesc}} {{moreInfo}}</p>
{{{HelpButtonForbiddenWords}}}
{{/displayHelp}}
</div>
<div class="col-12 col-lg-8 col-xl-9">
@ -176,6 +202,17 @@ async function renderConfigurationChannel (
</label>
<p class="form-group-description">{{forbiddenWordsRegexpDesc}}</p>
</div>
<div class="form-group">
<label>
<input
type="checkbox"
name="forbidden_words_applytomoderators_{{fieldNumber}}"
value="1"
/>
{{forbiddenWordsApplyToModerators}}
</label>
<p class="form-group-description">{{forbiddenWordsApplyToModeratorsDesc}}</p>
</div>
<div class="form-group">
<label for="peertube-livechat-forbidden-words-reason-{{fieldNumber}}">{{forbiddenWordsReason}}</label>
<input
@ -196,49 +233,78 @@ async function renderConfigurationChannel (
<div class="col-12 col-lg-4 col-xl-3">
<h2>{{quoteLabel}} #{{displayNumber}}</h2>
{{#displayHelp}}
<p>{{quoteDesc}}</p>
{{{helpButton}}}
<p>{{quoteDesc}} {{moreInfo}}</p>
{{{helpButtonQuotes}}}
{{/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"
{{! warning: don't add extra line break in textarea! }}
<textarea
name="quote_{{fieldNumber}}"
class="form-control"
id="peertube-livechat-quote-{{fieldNumber}}"
value=""
/>
class="form-control"
>{{
#channelConfiguration.configuration.TODO
}}{{.}}\n{{
/channelConfiguration.configuration.TODO
}}</textarea>
<p class="form-group-description">{{quoteDesc2}}</p>
</div>
<div class="form-group">
<label for="peertube-livechat-quote-delay-{{fieldNumber}}">{{quoteDelayLabel}}</label>
<input
type="number"
min="0"
min="1"
max="6000"
step="1"
name="quote_delay_{{fieldNumber}}"
class="form-control"
id="peertube-livechat-quote-delay-{{fieldNumber}}"
value="0"
value="5"
/>
<p class="form-group-description">{{quoteDelayDesc}}</p>
</div>
<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>
{{/quotesArray}}
{{#cmdsArray}}{{! iterating on cmdsArray 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>{{commandLabel}} #{{displayNumber}}</h2>
{{#displayHelp}}
<p>{{commandDesc}} {{moreInfo}}</p>
{{{helpButtonCommands}}}
{{/displayHelp}}
</div>
<div class="col-12 col-lg-8 col-xl-9">
<div class="form-group">
<label for="peertube-livechat-command-{{fieldNumber}}">{{commandCmdLabel}}</label>
<input
type="text"
name="command_{{fieldNumber}}"
class="form-control"
id="peertube-livechat-command-{{fieldNumber}}"
value=""
/>
<p class="form-group-description">{{commandCmdDesc}}</p>
</div>
<div class="form-group">
<label for="peertube-livechat-command-message-{{fieldNumber}}">{{commandMessageLabel}}</label>
<input
type="text"
name="command_message_{{fieldNumber}}"
class="form-control"
id="peertube-livechat-command-message-{{fieldNumber}}"
value=""
/>
<p class="form-group-description">{{commandMessageDesc}}</p>
</div>
</div>
</div>
{{/cmdsArray}}
<div class="form-group">
<input type="submit" value="{{save}}" />
<input type="reset" value="{{cancel}}" />