Refactoring: simplifing the peertube context.

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
   }