peertube-plugin-livechat/client/common/lib/directives/translation.ts

75 lines
2.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
import { PartInfo, directive } from 'lit/directive.js'
import { AsyncDirective } from 'lit/async-directive.js'
2024-05-23 20:52:39 +00:00
import { RegisterClientHelpers } from '@peertube/peertube-types/client'
import { unsafeHTML } from 'lit/directives/unsafe-html.js'
import { html } from 'lit'
import { registerClientOptionsSubject$ } from '../contexts/peertube'
import { Subscription, filter, map } from 'rxjs'
export class TranslationDirective extends AsyncDirective {
private _peertubeHelpers?: RegisterClientHelpers
2024-05-23 20:52:39 +00:00
private _translatedValue: string = ''
private _localizationId: string = ''
2024-05-23 20:52:39 +00:00
private _allowUnsafeHTML = false
private _subscriptionHandle: Subscription = new Subscription()
constructor (partInfo: PartInfo) {
super(partInfo)
this.reconnected()
}
protected override disconnected = (): void => {
this._subscriptionHandle.unsubscribe()
}
protected override reconnected = (): void => {
this._subscriptionHandle.unsubscribe()
this._subscriptionHandle = registerClientOptionsSubject$
.pipe(filter(Boolean))
.pipe(map(registerClientOptions => registerClientOptions.peertubeHelpers))
.subscribe((registerClientHelpers: RegisterClientHelpers) => {
this._peertubeHelpers = registerClientHelpers
this._asyncUpdateTranslation().then(() => {}, () => {})
})
}
2024-05-23 20:52:39 +00:00
public override render = (locId: string, allowHTML: boolean = false): unknown => {
this._localizationId = locId // TODO Check current component for context (to infer the prefix)
2024-05-23 20:52:39 +00:00
this._allowUnsafeHTML = allowHTML
2024-05-23 20:52:39 +00:00
if (this._translatedValue === '') {
this._translatedValue = locId
}
2024-05-23 20:52:39 +00:00
this._asyncUpdateTranslation().then(() => {}, () => {})
2024-05-23 20:52:39 +00:00
return this._internalRender()
}
2024-05-23 20:52:39 +00:00
private readonly _internalRender = (): unknown => {
return this._allowUnsafeHTML ? html`${unsafeHTML(this._translatedValue)}` : this._translatedValue
}
2024-05-23 20:52:39 +00:00
private readonly _asyncUpdateTranslation = async (): Promise<true> => {
const newValue = await this._peertubeHelpers?.translate(this._localizationId) ?? ''
2024-05-23 20:52:39 +00:00
if (newValue !== '' && newValue !== this._translatedValue) {
this._translatedValue = newValue
this.setValue(this._internalRender())
}
2024-05-23 20:52:39 +00:00
return true
}
}
export const ptTr = directive(TranslationDirective)