peertube-plugin-livechat/client/common/lib/elements/help-button.ts

46 lines
1.4 KiB
TypeScript
Raw Normal View History

2024-05-23 15:17:28 +00:00
// SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
//
// SPDX-License-Identifier: AGPL-3.0-only
2024-05-23 15:09:58 +00:00
import { html } from 'lit'
import { customElement, property, state } from 'lit/decorators.js'
import { unsafeHTML } from 'lit/directives/unsafe-html.js'
import { helpButtonSVG } from '../../../videowatch/buttons'
import { Task } from '@lit/task'
import { localizedHelpUrl } from '../../../utils/help'
import { ptTr } from '../directives/translation'
import type { DirectiveResult } from 'lit/directive'
2024-05-23 15:09:58 +00:00
import { LivechatElement } from './livechat'
2024-05-23 13:52:12 +00:00
@customElement('livechat-help-button')
2024-05-23 15:09:58 +00:00
export class HelpButtonElement extends LivechatElement {
@property({ attribute: false })
public buttonTitle: string | DirectiveResult = ptTr(LOC_ONLINE_HELP)
@property({ attribute: false })
public page: string = ''
@state()
public url: URL = new URL('https://lmddgtfy.net/')
2024-05-23 20:52:39 +00:00
private readonly _asyncTaskRender = new Task(this, {
task: async () => {
this.url = new URL(
await localizedHelpUrl(this.ptOptions, { page: this.page })
)
},
args: () => []
2024-05-23 20:52:39 +00:00
})
2024-05-23 20:52:39 +00:00
protected override render = (): unknown => {
return this._asyncTaskRender.render({
complete: () => html`<a
href="${this.url.href}"
target=_blank
title="${this.buttonTitle}"
class="orange-button peertube-button-link"
>${unsafeHTML(helpButtonSVG())}</a>`
})
}
}