diff --git a/client/common/configuration/register.ts b/client/common/configuration/register.ts index edadd7eb..3470ea42 100644 --- a/client/common/configuration/register.ts +++ b/client/common/configuration/register.ts @@ -6,6 +6,7 @@ import type { RegisterClientOptions } from '@peertube/peertube-types/client' import { html, render } from 'lit' import './elements' // Import all needed elements. +import { registerClientOptionsSubject$ } from '../lib/contexts/peertube' /** * Registers stuff related to the user's configuration pages. @@ -17,6 +18,8 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro const settings = await peertubeHelpers.getSettings() if (settings['disable-channel-configuration']) { return } + registerClientOptionsSubject$.next(clientOptions) + registerClientRoute({ route: 'livechat/configuration', onMount: async ({ rootEl }) => { diff --git a/client/common/lib/contexts/peertube.ts b/client/common/lib/contexts/peertube.ts index cdc647a2..4f614111 100644 --- a/client/common/lib/contexts/peertube.ts +++ b/client/common/lib/contexts/peertube.ts @@ -4,6 +4,10 @@ import type { RegisterClientOptions } from '@peertube/peertube-types/client/types' import { createContext } from '@lit/context' +import { BehaviorSubject } from 'rxjs' export const registerClientOptionsContext = createContext(Symbol('register-client-options')) + +export const registerClientOptionsSubject$ = + new BehaviorSubject(undefined) diff --git a/client/common/lib/directives/translation.ts b/client/common/lib/directives/translation.ts index 5404f7bc..a947b6be 100644 --- a/client/common/lib/directives/translation.ts +++ b/client/common/lib/directives/translation.ts @@ -2,30 +2,45 @@ // // SPDX-License-Identifier: AGPL-3.0-only -import { /* PartInfo, */ directive } from 'lit/directive.js' +import { PartInfo, directive } from 'lit/directive.js' import { AsyncDirective } from 'lit/async-directive.js' 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 readonly _peertubeHelpers?: RegisterClientHelpers + private _peertubeHelpers?: RegisterClientHelpers private _translatedValue: string = '' private _localizationId: string = '' private _allowUnsafeHTML = false - // constructor (partInfo: PartInfo) { - // super(partInfo) + private _subscriptionHandle: Subscription = new Subscription() - // _peertubeOptionsPromise.then((options) => this._peertubeHelpers = options.peertubeHelpers) - // } + constructor (partInfo: PartInfo) { + super(partInfo) - // update = (part: ElementPart) => { - // if (part) console.log(`Element : ${part?.element?.getAttributeNames?.().join(' ')}`); - // return this.render(this._localizationId); - // } + 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 + console.log(`we got PeertubeHelpers ! ${JSON.stringify(registerClientHelpers)}`) + this._asyncUpdateTranslation().then(() => {}, () => {}) + }) + } public override render = (locId: string, allowHTML: boolean = false): unknown => { this._localizationId = locId // TODO Check current component for context (to infer the prefix) @@ -36,18 +51,22 @@ export class TranslationDirective extends AsyncDirective { this._translatedValue = locId } + console.log('rendering') this._asyncUpdateTranslation().then(() => {}, () => {}) return this._internalRender() } private readonly _internalRender = (): unknown => { + console.log(`internalRender ${this._translatedValue}`) return this._allowUnsafeHTML ? html`${unsafeHTML(this._translatedValue)}` : this._translatedValue } private readonly _asyncUpdateTranslation = async (): Promise => { const newValue = await this._peertubeHelpers?.translate(this._localizationId) ?? '' + console.log(`asyncUpdateTranslation ${newValue}`) + if (newValue !== '' && newValue !== this._translatedValue) { this._translatedValue = newValue this.setValue(this._internalRender()) diff --git a/package-lock.json b/package-lock.json index dd9cc77d..0aa0c4ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "http-proxy": "^1.18.1", "log-rotate": "^0.2.8", "openid-client": "^5.6.5", + "rxjs": "^7.8.1", "validate-color": "^2.2.1", "xmppjs-chat-bot": "^0.3.0" }, @@ -10581,6 +10582,19 @@ "integrity": "sha512-cLgakCUf6PedEu15t8kbsjnwIFFR2D4RfL+W3iWFJ4iac7z4B0ZI8fxy4R3J956kAI68HclCFGL8MPoUVC3qVA==", "dev": true }, + "node_modules/rxjs": { + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", + "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/rxjs/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/safe-array-concat": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz", @@ -20416,6 +20430,21 @@ "integrity": "sha512-cLgakCUf6PedEu15t8kbsjnwIFFR2D4RfL+W3iWFJ4iac7z4B0ZI8fxy4R3J956kAI68HclCFGL8MPoUVC3qVA==", "dev": true }, + "rxjs": { + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", + "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", + "requires": { + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + } + } + }, "safe-array-concat": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz", diff --git a/package.json b/package.json index 06f9ea27..8476b013 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "http-proxy": "^1.18.1", "log-rotate": "^0.2.8", "openid-client": "^5.6.5", + "rxjs": "^7.8.1", "validate-color": "^2.2.1", "xmppjs-chat-bot": "^0.3.0" },