345 lines
12 KiB
TypeScript
345 lines
12 KiB
TypeScript
// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
|
|
//
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import type { ChannelEmojisConfiguration } from 'shared/lib/types'
|
|
import type { DynamicFormHeader, DynamicFormSchema } from '../../lib/elements/dynamic-table-form'
|
|
import { LivechatElement } from '../../lib/elements/livechat'
|
|
import { ChannelDetailsService } from '../services/channel-details'
|
|
import { channelDetailsServiceContext } from '../contexts/channel'
|
|
import { maxEmojisPerChannel } from 'shared/lib/emojis'
|
|
import { ptTr } from '../../lib/directives/translation'
|
|
import { ValidationError } from '../../lib/models/validation'
|
|
import { Task } from '@lit/task'
|
|
import { customElement, property, state } from 'lit/decorators.js'
|
|
import { provide } from '@lit/context'
|
|
import { html } from 'lit'
|
|
|
|
/**
|
|
* Channel emojis configuration page.
|
|
*/
|
|
@customElement('livechat-channel-emojis')
|
|
export class ChannelEmojisElement extends LivechatElement {
|
|
@property({ attribute: false })
|
|
public channelId?: number
|
|
|
|
private _channelEmojisConfiguration?: ChannelEmojisConfiguration
|
|
|
|
@provide({ context: channelDetailsServiceContext })
|
|
private _channelDetailsService?: ChannelDetailsService
|
|
|
|
@state()
|
|
private _validationError?: ValidationError
|
|
|
|
@state()
|
|
private _actionDisabled: boolean = false
|
|
|
|
private _asyncTaskRender: Task
|
|
|
|
constructor () {
|
|
super()
|
|
this._asyncTaskRender = this._initTask()
|
|
}
|
|
|
|
protected override render = (): unknown => {
|
|
const tableHeaderList: DynamicFormHeader = {
|
|
sn: {
|
|
colName: ptTr(LOC_LIVECHAT_EMOJIS_SHORTNAME),
|
|
description: ptTr(LOC_LIVECHAT_EMOJIS_SHORTNAME_DESC),
|
|
headerClassList: ['peertube-livechat-emojis-col-sn']
|
|
},
|
|
url: {
|
|
colName: ptTr(LOC_LIVECHAT_EMOJIS_FILE),
|
|
description: ptTr(LOC_LIVECHAT_EMOJIS_FILE_DESC),
|
|
headerClassList: ['peertube-livechat-emojis-col-file']
|
|
}
|
|
}
|
|
const tableSchema: DynamicFormSchema = {
|
|
sn: {
|
|
inputType: 'text',
|
|
default: ''
|
|
},
|
|
url: {
|
|
inputType: 'image-file',
|
|
default: '',
|
|
colClassList: ['peertube-livechat-emojis-col-file']
|
|
}
|
|
}
|
|
return this._asyncTaskRender.render({
|
|
pending: () => html`<livechat-spinner></livechat-spinner>`,
|
|
error: () => html`<livechat-error></livechat-error>`,
|
|
complete: () => html`
|
|
<div
|
|
class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-channel"
|
|
>
|
|
<h1>
|
|
<span class="peertube-plugin-livechat-configuration-channel-info">
|
|
<span>${this._channelEmojisConfiguration?.channel.displayName}</span>
|
|
<span>${this._channelEmojisConfiguration?.channel.name}</span>
|
|
</span>
|
|
</h1>
|
|
|
|
<livechat-channel-tabs .active=${'emojis'} .channelId=${this.channelId}></livechat-channel-tabs>
|
|
|
|
<p>
|
|
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_DESC)}
|
|
<livechat-help-button .page=${'documentation/user/streamers/emojis'}>
|
|
</livechat-help-button>
|
|
</p>
|
|
|
|
|
|
<form role="form" @submit=${this._saveEmojis}>
|
|
<div class="peertube-plugin-livechat-configuration-actions">
|
|
${
|
|
this._channelEmojisConfiguration?.emojis?.customEmojis?.length
|
|
? html`
|
|
<button
|
|
@click=${this._exportEmojis}
|
|
?disabled=${this._actionDisabled}
|
|
>
|
|
${ptTr(LOC_ACTION_EXPORT)}
|
|
</button>`
|
|
: ''
|
|
}
|
|
${
|
|
(this._channelEmojisConfiguration?.emojis?.customEmojis?.length ?? 0) < maxEmojisPerChannel
|
|
? html`
|
|
<button
|
|
@click=${this._importEmojis}
|
|
?disabled=${this._actionDisabled}
|
|
>
|
|
${ptTr(LOC_ACTION_IMPORT)}
|
|
</button>`
|
|
: ''
|
|
}
|
|
</div>
|
|
|
|
<livechat-dynamic-table-form
|
|
.header=${tableHeaderList}
|
|
.schema=${tableSchema}
|
|
.maxLines=${maxEmojisPerChannel}
|
|
.validation=${this._validationError?.properties}
|
|
.validationPrefix=${'emojis'}
|
|
.rows=${this._channelEmojisConfiguration?.emojis.customEmojis}
|
|
@update=${(e: CustomEvent) => {
|
|
if (this._channelEmojisConfiguration) {
|
|
this._channelEmojisConfiguration.emojis.customEmojis = e.detail
|
|
// Fixing missing ':' for shortnames:
|
|
for (const desc of this._channelEmojisConfiguration.emojis.customEmojis) {
|
|
if (desc.sn === '') { continue }
|
|
if (!desc.sn.startsWith(':')) { desc.sn = ':' + desc.sn }
|
|
if (!desc.sn.endsWith(':')) { desc.sn += ':' }
|
|
}
|
|
this.requestUpdate('_channelEmojisConfiguration')
|
|
}
|
|
}
|
|
}
|
|
></livechat-dynamic-table-form>
|
|
|
|
<div class="form-group mt-5">
|
|
<button type="reset" @click=${this._reset} ?disabled=${this._actionDisabled}>
|
|
${ptTr(LOC_CANCEL)}
|
|
</button>
|
|
<button type="submit" ?disabled=${this._actionDisabled}>
|
|
${ptTr(LOC_SAVE)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
`
|
|
})
|
|
}
|
|
|
|
protected _initTask (): Task {
|
|
return new Task(this, {
|
|
task: async () => {
|
|
if (!this.channelId) {
|
|
throw new Error('Missing channelId')
|
|
}
|
|
this._channelDetailsService = new ChannelDetailsService(this.ptOptions)
|
|
this._channelEmojisConfiguration = await this._channelDetailsService.fetchEmojisConfiguration(this.channelId)
|
|
this._actionDisabled = false // in case of reset
|
|
},
|
|
args: () => []
|
|
})
|
|
}
|
|
|
|
private async _reset (ev?: Event): Promise<void> {
|
|
ev?.preventDefault()
|
|
this._actionDisabled = true
|
|
this._asyncTaskRender = this._initTask()
|
|
this.requestUpdate()
|
|
}
|
|
|
|
private async _saveEmojis (ev?: Event): Promise<void> {
|
|
ev?.preventDefault()
|
|
|
|
if (!this._channelDetailsService || !this._channelEmojisConfiguration || !this.channelId) {
|
|
this.ptNotifier.error(await this.ptTranslate(LOC_ERROR))
|
|
return
|
|
}
|
|
|
|
try {
|
|
this._actionDisabled = true
|
|
await this._channelDetailsService.saveEmojisConfiguration(this.channelId, this._channelEmojisConfiguration.emojis)
|
|
this._validationError = undefined
|
|
this.ptNotifier.info(await this.ptTranslate(LOC_SUCCESSFULLY_SAVED))
|
|
this.requestUpdate('_validationError')
|
|
} catch (error) {
|
|
this._validationError = undefined
|
|
let msg: string
|
|
if ((error instanceof ValidationError)) {
|
|
this._validationError = error
|
|
if (error.message) {
|
|
msg = error.message
|
|
}
|
|
}
|
|
msg ??= await this.ptTranslate(LOC_ERROR)
|
|
this.ptNotifier.error(msg)
|
|
this.requestUpdate('_validationError')
|
|
} finally {
|
|
this._actionDisabled = false
|
|
}
|
|
}
|
|
|
|
private async _importEmojis (ev: Event): Promise<void> {
|
|
ev.preventDefault()
|
|
this._actionDisabled = true
|
|
try {
|
|
// download a json file:
|
|
const file = await new Promise<File>((resolve, reject) => {
|
|
const input = document.createElement('input')
|
|
input.setAttribute('type', 'file')
|
|
input.setAttribute('accept', 'application/json')
|
|
input.onchange = (e) => {
|
|
e.preventDefault()
|
|
e.stopImmediatePropagation()
|
|
const file = (e.target as HTMLInputElement).files?.[0]
|
|
if (!file) {
|
|
reject(new Error('Missing file'))
|
|
return
|
|
}
|
|
resolve(file)
|
|
}
|
|
input.click()
|
|
input.remove()
|
|
})
|
|
|
|
const content = await new Promise<string>((resolve, reject) => {
|
|
const fileReader = new FileReader()
|
|
fileReader.onerror = reject
|
|
fileReader.onload = () => {
|
|
if (fileReader.result === null) {
|
|
reject(new Error('Empty result'))
|
|
return
|
|
}
|
|
if (fileReader.result instanceof ArrayBuffer) {
|
|
reject(new Error('Result is an ArrayBuffer, this was not intended'))
|
|
} else {
|
|
resolve(fileReader.result)
|
|
}
|
|
}
|
|
fileReader.readAsText(file)
|
|
})
|
|
|
|
const json = JSON.parse(content)
|
|
if (!Array.isArray(json)) {
|
|
throw new Error('Invalid data, an array was expected')
|
|
}
|
|
for (const entry of json) {
|
|
if (typeof entry !== 'object') {
|
|
throw new Error('Invalid data')
|
|
}
|
|
if (!entry.sn || !entry.url || (typeof entry.sn !== 'string') || (typeof entry.url !== 'string')) {
|
|
throw new Error('Invalid data')
|
|
}
|
|
|
|
const url = await this._convertImageToDataUrl(entry.url)
|
|
let sn = entry.sn as string
|
|
if (!sn.startsWith(':')) { sn = ':' + sn }
|
|
if (!sn.endsWith(':')) { sn += ':' }
|
|
|
|
const item: ChannelEmojisConfiguration['emojis']['customEmojis'][0] = {
|
|
sn,
|
|
url
|
|
}
|
|
if (entry.isCategoryEmoji === true) {
|
|
item.isCategoryEmoji = true
|
|
}
|
|
this._channelEmojisConfiguration?.emojis.customEmojis.push(item)
|
|
}
|
|
|
|
this.requestUpdate('_channelEmojisConfiguration')
|
|
|
|
this.ptNotifier.info(
|
|
await this.ptTranslate(LOC_ACTION_IMPORT_EMOJIS_INFO)
|
|
)
|
|
} catch (err: any) {
|
|
this.ptNotifier.error(err.toString())
|
|
} finally {
|
|
this._actionDisabled = false
|
|
}
|
|
}
|
|
|
|
private async _exportEmojis (ev: Event): Promise<void> {
|
|
ev.preventDefault()
|
|
this._actionDisabled = true
|
|
try {
|
|
const result: ChannelEmojisConfiguration['emojis']['customEmojis'] = []
|
|
for (const ed of this._channelEmojisConfiguration?.emojis?.customEmojis ?? []) {
|
|
if (!ed.sn || !ed.url) { continue }
|
|
// Here url can be:
|
|
// * the dataUrl representation of a newly uploaded file
|
|
// * or the url of an already saved image file
|
|
// In both cases, we want to export a dataUrl version.
|
|
const url = await this._convertImageToDataUrl(ed.url)
|
|
|
|
const item: typeof result[0] = {
|
|
sn: ed.sn,
|
|
url
|
|
}
|
|
if (ed.isCategoryEmoji === true) { item.isCategoryEmoji = ed.isCategoryEmoji }
|
|
result.push(item)
|
|
}
|
|
|
|
// Make the browser download the JSON file:
|
|
const dataUrl = 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(result))
|
|
const a = document.createElement('a')
|
|
a.setAttribute('href', dataUrl)
|
|
a.setAttribute('download', 'emojis.json')
|
|
a.click()
|
|
a.remove()
|
|
} catch (err: any) {
|
|
console.error(err)
|
|
this.ptNotifier.error(err.toString())
|
|
} finally {
|
|
this._actionDisabled = false
|
|
}
|
|
}
|
|
|
|
private async _convertImageToDataUrl (url: string): Promise<string> {
|
|
if (url.startsWith('data:')) { return url }
|
|
// There is a trick to convert img to dataUrl: using a canvas.
|
|
// But we can't use it here... as it won't work with animated GIF.
|
|
// So we just fetch each url, and do the work.
|
|
const blob = await (await fetch(url)).blob()
|
|
const base64 = await new Promise<string>((resolve, reject) => {
|
|
const fileReader = new FileReader()
|
|
fileReader.onload = () => {
|
|
if (fileReader.result === null) {
|
|
reject(new Error('Empty result'))
|
|
return
|
|
}
|
|
if (fileReader.result instanceof ArrayBuffer) {
|
|
reject(new Error('Result is an ArrayBuffer, this was not intended'))
|
|
} else {
|
|
resolve(fileReader.result)
|
|
}
|
|
}
|
|
fileReader.onerror = reject
|
|
fileReader.readAsDataURL(blob)
|
|
})
|
|
return base64
|
|
}
|
|
}
|