expose peertubeHelpers to TranslationDirective

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 }) => {

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<RegisterClientOptions | undefined>(Symbol('register-client-options'))
+
+export const registerClientOptionsSubject$ =
+  new BehaviorSubject<RegisterClientOptions | undefined>(undefined)

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<true> => {
     const newValue = await this._peertubeHelpers?.translate(this._localizationId) ?? ''
 
+    console.log(`asyncUpdateTranslation ${newValue}`)
+
     if (newValue !== '' && newValue !== this._translatedValue) {
       this._translatedValue = newValue
       this.setValue(this._internalRender())

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",

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"
   },