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

fix linting

Browse Source
This commit is contained in:
Mehdi Benadel
2024-05-23 22:52:39 +02:00
parent f549142ae4
commit fb7f44692c
10 changed files with 282 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/common/configuration/contexts/channel.ts
View File

@ -6,5 +6,7 @@ import type { ChannelConfiguration } from 'shared/lib/types'
import { createContext } from '@lit/context'
import { ChannelDetailsService } from '../services/channel-details'
export const channelConfigurationContext = createContext<ChannelConfiguration | undefined>(Symbol('channel-configuration'))
export const channelDetailsServiceContext = createContext<ChannelDetailsService | undefined>(Symbol('channel-configuration-service'))
export const channelConfigurationContext =
createContext<ChannelConfiguration | undefined>(Symbol('channel-configuration'))
export const channelDetailsServiceContext =
createContext<ChannelDetailsService | undefined>(Symbol('channel-configuration-service'))

96
client/common/configuration/elements/channel-configuration.ts
View File

@ -16,7 +16,6 @@ import { LivechatElement } from '../../lib/elements/livechat'
@customElement('livechat-channel-configuration')
export class ChannelConfigurationElement extends LivechatElement {
@provide({ context: registerClientOptionsContext })
@property({ attribute: false })
public registerClientOptions: RegisterClientOptions | undefined
@ -34,38 +33,36 @@ export class ChannelConfigurationElement extends LivechatElement {
@state()
public _formStatus: boolean | any = undefined
private _asyncTaskRender = new Task(this, {
task: async ([registerClientOptions], { signal }) => {
if (this.registerClientOptions) {
this._channelDetailsService = new ChannelDetailsService(this.registerClientOptions)
private readonly _asyncTaskRender = new Task(this, {
task: async ([registerClientOptions]) => {
if (registerClientOptions) {
this._channelDetailsService = new ChannelDetailsService(registerClientOptions)
this._channelConfiguration = await this._channelDetailsService.fetchConfiguration(this.channelId ?? 0)
}
},
args: () => [this.registerClientOptions]
})
});
private _saveConfig = (ev?: Event) => {
private readonly _saveConfig = (ev?: Event): undefined => {
ev?.preventDefault()
if (this._channelDetailsService && this._channelConfiguration) {
this._channelDetailsService.saveOptions(this._channelConfiguration.channel.id, this._channelConfiguration.configuration)
.then((value) => {
this._channelDetailsService.saveOptions(this._channelConfiguration.channel.id,
this._channelConfiguration.configuration)
.then(() => {
this._formStatus = { success: true }
console.log(`Configuration has been updated`)
console.log('Configuration has been updated')
this.requestUpdate('_formStatus')
})
.catch((error) => {
this._formStatus = error
console.log(`An error occurred : ${JSON.stringify(this._formStatus)}`)
this.requestUpdate('_formStatus')
});
})
}
}
render = () => {
let tableHeaderList = {
protected override render = (): unknown => {
const tableHeaderList = {
forbiddenWords: {
entries: {
colName: ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL),
@ -113,16 +110,16 @@ export class ChannelConfigurationElement extends LivechatElement {
}
}
}
let tableSchema = {
const tableSchema = {
forbiddenWords: {
entries: {
inputType: 'textarea',
default: [''],
separator: '\n',
separator: '\n'
},
regex: {
inputType: 'checkbox',
default: false,
default: false
},
applyToModerators: {
inputType: 'checkbox',
@ -140,34 +137,35 @@ export class ChannelConfigurationElement extends LivechatElement {
comments: {
inputType: 'textarea',
default: ''
},
}
},
quotes: {
messages: {
inputType: 'textarea',
default: [''],
separator: '\n',
separator: '\n'
},
delay: {
inputType: 'number',
default: 10,
default: 10
}
},
commands: {
command: {
inputType: 'text',
default: '',
default: ''
},
message: {
inputType: 'text',
default: '',
default: ''
}
}
}
return this._asyncTaskRender.render({
complete: () => html`
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-channel">
<div class="margin-content peertube-plugin-livechat-configuration
peertube-plugin-livechat-configuration-channel">
<h1>
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_TITLE)}:
<span class="peertube-plugin-livechat-configuration-channel-info">
@ -185,7 +183,7 @@ export class ChannelConfigurationElement extends LivechatElement {
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)}
.helpPage=${"documentation/user/streamers/slow_mode"}>
.helpPage=${'documentation/user/streamers/slow_mode'}>
</livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
@ -199,8 +197,10 @@ export class ChannelConfigurationElement extends LivechatElement {
max="1000"
id="peertube-livechat-slow-mode-duration"
@input=${(event: InputEvent) => {
if (event?.target && this._channelConfiguration)
this._channelConfiguration.configuration.slowMode.duration = Number((event.target as HTMLInputElement).value)
if (event?.target && this._channelConfiguration) {
this._channelConfiguration.configuration.slowMode.duration =
Number((event.target as HTMLInputElement).value)
}
this.requestUpdate('_channelConfiguration')
}
}
@ -215,7 +215,7 @@ export class ChannelConfigurationElement extends LivechatElement {
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE)}
.description=${''}
.helpPage=${"documentation/user/streamers/channel"}>
.helpPage=${'documentation/user/streamers/channel'}>
</livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
@ -226,8 +226,10 @@ export class ChannelConfigurationElement extends LivechatElement {
name="bot"
id="peertube-livechat-bot"
@input=${(event: InputEvent) => {
if (event?.target && this._channelConfiguration)
this._channelConfiguration.configuration.bot.enabled = (event.target as HTMLInputElement).checked
if (event?.target && this._channelConfiguration) {
this._channelConfiguration.configuration.bot.enabled =
(event.target as HTMLInputElement).checked
}
this.requestUpdate('_channelConfiguration')
}
}
@ -237,17 +239,21 @@ export class ChannelConfigurationElement extends LivechatElement {
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL)}
</label>
</div>
${this._channelConfiguration?.configuration.bot.enabled ?
html`<div class="form-group">
<label for="peertube-livechat-bot-nickname">${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}</label>
${this._channelConfiguration?.configuration.bot.enabled
? html`<div class="form-group">
<labelfor="peertube-livechat-bot-nickname">
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}
</label>
<input
type="text"
name="bot_nickname"
class="form-control"
id="peertube-livechat-bot-nickname"
@input=${(event: InputEvent) => {
if (event?.target && this._channelConfiguration)
this._channelConfiguration.configuration.bot.nickname = (event.target as HTMLInputElement).value
if (event?.target && this._channelConfiguration) {
this._channelConfiguration.configuration.bot.nickname =
(event.target as HTMLInputElement).value
}
this.requestUpdate('_channelConfiguration')
}
}
@ -258,13 +264,13 @@ export class ChannelConfigurationElement extends LivechatElement {
}
</div>
</div>
${this._channelConfiguration?.configuration.bot.enabled ?
html`<div class="row mt-5">
${this._channelConfiguration?.configuration.bot.enabled
? html`<div class="row mt-5">
<div class="col-12 col-lg-4 col-xl-3">
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)}
.helpPage=${"documentation/user/streamers/bot/forbidden_words"}>
.helpPage=${'documentation/user/streamers/bot/forbidden_words'}>
</livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
@ -288,7 +294,7 @@ export class ChannelConfigurationElement extends LivechatElement {
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)}
.helpPage=${"documentation/user/streamers/bot/quotes"}>
.helpPage=${'documentation/user/streamers/bot/quotes'}>
</livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
@ -312,7 +318,7 @@ export class ChannelConfigurationElement extends LivechatElement {
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC)}
.helpPage=${"documentation/user/streamers/bot/commands"}>
.helpPage=${'documentation/user/streamers/bot/commands'}>
</livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
@ -336,14 +342,14 @@ export class ChannelConfigurationElement extends LivechatElement {
<div class="form-group mt-5">
<input type="submit" class="peertube-button-link orange-button" value=${ptTr(LOC_SAVE)} />
</div>
${(this._formStatus && this._formStatus.success === undefined) ?
html`<div class="alert alert-warning" role="alert">
${(this._formStatus && this._formStatus.success === undefined)
? html`<div class="alert alert-warning" role="alert">
An error occurred : ${JSON.stringify(this._formStatus)}
</div>`
: ''
}
${(this._formStatus && this._formStatus.success === true) ?
html`<div class="alert alert-success" role="alert">
${(this._formStatus && this._formStatus.success === true)
? html`<div class="alert alert-success" role="alert">
Configuration has been updated
</div>`
: ''

25
client/common/configuration/elements/channel-home.ts
View File

@ -6,7 +6,7 @@ import type { RegisterClientOptions } from '@peertube/peertube-types/client'
import { html } from 'lit'
import { customElement, property, state } from 'lit/decorators.js'
import { ptTr } from '../../lib/directives/translation'
import { Task } from '@lit/task';
import { Task } from '@lit/task'
import type { ChannelLiveChatInfos } from 'shared/lib/types'
import { ChannelDetailsService } from '../services/channel-details'
import { provide } from '@lit/context'
@ -16,7 +16,6 @@ import { LivechatElement } from '../../lib/elements/livechat'
@customElement('livechat-channel-home')
export class ChannelHomeElement extends LivechatElement {
@provide({ context: registerClientOptionsContext })
@property({ attribute: false })
public registerClientOptions: RegisterClientOptions | undefined
@ -30,26 +29,23 @@ export class ChannelHomeElement extends LivechatElement {
@state()
public _formStatus: boolean | any = undefined
private _asyncTaskRender = new Task(this, {
task: async ([registerClientOptions], {signal}) => {
private readonly _asyncTaskRender = new Task(this, {
task: async ([registerClientOptions]) => {
// Getting the current username in localStorage. Don't know any cleaner way to do.
const username = window.localStorage.getItem('username')
if (!username) {
throw new Error('Can\'t get the current username.')
}
if (this.registerClientOptions) {
this._channelDetailsService = new ChannelDetailsService(this.registerClientOptions)
if (registerClientOptions) {
this._channelDetailsService = new ChannelDetailsService(registerClientOptions)
this._channels = await this._channelDetailsService.fetchUserChannels(username)
}
},
args: () => [this.registerClientOptions]
})
});
render = () => {
protected override render = (): unknown => {
return this._asyncTaskRender.render({
complete: () => html`
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
@ -64,10 +60,9 @@ export class ChannelHomeElement extends LivechatElement {
${this._channels?.map((channel) => html`
<li>
<a href="${channel.livechatConfigurationUri}">
${channel.avatar ?
html`<img class="avatar channel" src="${channel.avatar.path}">`
:
html`<div class="avatar channel initial gray"></div>`
${channel.avatar
? html`<img class="avatar channel" src="${channel.avatar.path}">`
: html`<div class="avatar channel initial gray"></div>`
}
</a>
<div class="peertube-plugin-livechat-configuration-home-info">

9
client/common/configuration/elements/configuration-row.ts
View File

@ -8,17 +8,16 @@ import { LivechatElement } from '../../lib/elements/livechat'
@customElement('livechat-configuration-row')
export class ConfigurationRowElement extends LivechatElement {
@property({ attribute: false })
public title: string = 'title'
@property({ attribute: false })
public title: string = `title`
@property({ attribute: false })
public description: string = `Here's a description`
public description: string = 'Here\'s a description'
@property({ attribute: false })
public helpPage: string = 'documentation'
render() {
protected override render = (): unknown => {
return html`
<h2>${this.title}</h2>
<p>${this.description}</p>

22
client/common/configuration/services/channel-details.ts
View File

@ -4,32 +4,30 @@
import type { RegisterClientOptions } from '@peertube/peertube-types/client'
import { ChannelLiveChatInfos, ChannelConfiguration, ChannelConfigurationOptions } from 'shared/lib/types'
import { getBaseRoute } from "../../../utils/uri"
import { getBaseRoute } from '../../../utils/uri'
export class ChannelDetailsService {
public _registerClientOptions: RegisterClientOptions
private _headers : any = {}
private readonly _headers: any = {}
constructor(registerClientOptions: RegisterClientOptions) {
constructor (registerClientOptions: RegisterClientOptions) {
this._registerClientOptions = registerClientOptions
this._headers = this._registerClientOptions.peertubeHelpers.getAuthHeader() ?? {}
this._headers['content-type'] = 'application/json;charset=UTF-8'
}
validateOptions = (channelConfigurationOptions: ChannelConfigurationOptions) => {
return true
validateOptions = (channelConfigurationOptions: ChannelConfigurationOptions): boolean => {
return !!channelConfigurationOptions
}
saveOptions = async (channelId: number, channelConfigurationOptions: ChannelConfigurationOptions) => {
saveOptions = async (channelId: number,
channelConfigurationOptions: ChannelConfigurationOptions): Promise<Response> => {
if (!await this.validateOptions(channelConfigurationOptions)) {
throw new Error('Invalid form data')
}
const response = await fetch(
getBaseRoute(this._registerClientOptions) + '/api/configuration/channel/' + encodeURIComponent(channelId),
{
@ -43,7 +41,7 @@ export class ChannelDetailsService {
throw new Error('Failed to save configuration options.')
}
return await response.json()
return response.json()
}
fetchUserChannels = async (username: string): Promise<ChannelLiveChatInfos[]> => {
@ -90,6 +88,6 @@ export class ChannelDetailsService {
throw new Error('Can\'t get channel configuration options.')
}
return await response.json()
return response.json()
}
}
}