Refactoring: simplifing the peertube context.

client/common/lib/contexts/peertube.ts

@@ -3,11 +3,22 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 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 interface PtContext {
+  ptOptions: RegisterClientOptions
+}
 
-export const registerClientOptionsSubject$ =
-  new BehaviorSubject<RegisterClientOptions | undefined>(undefined)
+let context: PtContext
+
+export function getPtContext (): PtContext {
+  if (!context) {
+    throw new Error('Peertube context not set yet, getPtContext was called too soon.')
+  }
+  return context
+}
+
+export function initPtContext (ptOptions: RegisterClientOptions): void {
+  context = {
+    ptOptions
+  }
+}

client/common/lib/directives/translation.ts

@@ -8,38 +8,21 @@ 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'
+import { getPtContext } from '../contexts/peertube'
 
 export class TranslationDirective extends AsyncDirective {
-  private _peertubeHelpers?: RegisterClientHelpers
+  private readonly _peertubeHelpers: RegisterClientHelpers
 
   private _translatedValue: string = ''
   private _localizationId: string = ''
 
   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(() => {}, () => {})
-      })
+    this._peertubeHelpers = getPtContext().ptOptions.peertubeHelpers
+    this._asyncUpdateTranslation().then(() => {}, () => {})
   }
 
   public override render = (locId: string, allowHTML: boolean = false): TemplateResult | string => {
@@ -61,10 +44,7 @@ export class TranslationDirective extends AsyncDirective {
   }
 
   private readonly _asyncUpdateTranslation = async (): Promise<true> => {
-    if (!this._peertubeHelpers) {
-      console.error('Translation directive: missing peertubeHelpers')
-    }
-    const newValue = await this._peertubeHelpers?.translate(this._localizationId) ?? ''
+    const newValue = await this._peertubeHelpers.translate(this._localizationId) ?? ''
 
     if (newValue !== '' && newValue !== this._translatedValue) {
       this._translatedValue = newValue

client/common/lib/elements/dynamic-table-form.ts

@@ -5,8 +5,6 @@
 
 import type { TagsInputElement } from './tags-input'
 import type { DirectiveResult } from 'lit/directive'
-import type { RegisterClientOptions } from '@peertube/peertube-types/client'
-import { registerClientOptionsContext } from '../../lib/contexts/peertube'
 import { ValidationErrorType } from '../models/validation'
 import { maxSize, inputFileAccept } from 'shared/lib/emojis'
 import { html, nothing, TemplateResult } from 'lit'
@@ -17,7 +15,6 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { LivechatElement } from './livechat'
 import { ptTr } from '../directives/translation'
-import { consume } from '@lit/context'
 
 // This content comes from the file assets/images/plus-square.svg, from the Feather icons set https://feathericons.com/
 const AddSVG: string =
@@ -95,9 +92,6 @@ export interface DynamicFormSchema { [key: string]: CellDataSchema }
 
 @customElement('livechat-dynamic-table-form')
 export class DynamicTableFormElement extends LivechatElement {
-  @consume({ context: registerClientOptionsContext, subscribe: true })
-  public registerClientOptions?: RegisterClientOptions
-
   @property({ attribute: false })
   public header: DynamicFormHeader = {}
 
@@ -162,14 +156,9 @@ export class DynamicTableFormElement extends LivechatElement {
   }
 
   private async _removeRow (rowId: number): Promise<void> {
-    if (!this.registerClientOptions) {
-      console.error('Missing registreClientOptions.')
-      return
-    }
-    const peertubeHelpers = this.registerClientOptions.peertubeHelpers
-    const confirmMsg = await peertubeHelpers.translate(LOC_ACTION_REMOVE_ENTRY_CONFIRM)
+    const confirmMsg = await this.ptTranslate(LOC_ACTION_REMOVE_ENTRY_CONFIRM)
     await new Promise<void>((resolve, reject) => {
-      peertubeHelpers.showModal({
+      this.ptOptions.peertubeHelpers.showModal({
         title: confirmMsg,
         content: '',
         close: true,

client/common/lib/elements/help-button.ts

@@ -6,9 +6,6 @@ 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 { consume } from '@lit/context'
-import { registerClientOptionsContext } from '../contexts/peertube'
-import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { Task } from '@lit/task'
 import { localizedHelpUrl } from '../../../utils/help'
 import { ptTr } from '../directives/translation'
@@ -17,9 +14,6 @@ import { LivechatElement } from './livechat'
 
 @customElement('livechat-help-button')
 export class HelpButtonElement extends LivechatElement {
-  @consume({ context: registerClientOptionsContext, subscribe: true })
-  public registerClientOptions?: RegisterClientOptions
-
   @property({ attribute: false })
   public buttonTitle: string | DirectiveResult = ptTr(LOC_ONLINE_HELP)
 
@@ -30,12 +24,12 @@ export class HelpButtonElement extends LivechatElement {
   public url: URL = new URL('https://lmddgtfy.net/')
 
   private readonly _asyncTaskRender = new Task(this, {
-    task: async ([registerClientOptions]) => {
-      this.url = new URL(registerClientOptions
-        ? await localizedHelpUrl(registerClientOptions, { page: this.page })
-        : '')
+    task: async () => {
+      this.url = new URL(
+        await localizedHelpUrl(this.ptOptions, { page: this.page })
+      )
     },
-    args: () => [this.registerClientOptions]
+    args: () => []
   })
 
   protected override render = (): unknown => {

client/common/lib/elements/image-file-input.ts

@@ -2,12 +2,9 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { LivechatElement } from './livechat'
-import { registerClientOptionsContext } from '../contexts/peertube'
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { consume } from '@lit/context'
 
 /**
  * Special element to upload image files.
@@ -23,9 +20,6 @@ import { consume } from '@lit/context'
  */
 @customElement('livechat-image-file-input')
 export class ImageFileInputElement extends LivechatElement {
-  @consume({ context: registerClientOptionsContext, subscribe: true })
-  public registerClientOptions?: RegisterClientOptions
-
   @property({ attribute: false })
   public name?: string
 
@@ -68,11 +62,11 @@ export class ImageFileInputElement extends LivechatElement {
     }
 
     if (this.maxSize && file.size > this.maxSize) {
-      let msg = await this.registerClientOptions?.peertubeHelpers.translate(LOC_INVALID_VALUE_FILE_TOO_BIG)
+      let msg = await this.ptTranslate(LOC_INVALID_VALUE_FILE_TOO_BIG)
       if (msg) {
         // FIXME: better unit handling (here we force kb)
         msg = msg.replace('%s', Math.round(this.maxSize / 1024).toString() + 'k')
-        this.registerClientOptions?.peertubeHelpers.notifier.error(msg)
+        this.ptNotifier.error(msg)
       }
       return
     }

client/common/lib/elements/livechat.ts

@@ -1,13 +1,29 @@
 // SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import { getPtContext, PtContext } from '../contexts/peertube'
 import { LitElement } from 'lit'
 
 /**
  * Base class for all Custom Elements.
  */
 export class LivechatElement extends LitElement {
+  public readonly ptContext: PtContext
+  public readonly ptOptions: RegisterClientOptions
+  public readonly ptTranslate: RegisterClientOptions['peertubeHelpers']['translate']
+  public readonly ptNotifier: RegisterClientOptions['peertubeHelpers']['notifier']
+
+  constructor () {
+    super()
+    this.ptContext = getPtContext()
+    this.ptOptions = this.ptContext.ptOptions
+    this.ptNotifier = this.ptOptions.peertubeHelpers.notifier
+    this.ptTranslate = this.ptOptions.peertubeHelpers.translate
+  }
+
   protected override createRenderRoot = (): Element | ShadowRoot => {
     return this
   }