Some refactoring.

client/common-client-plugin.ts

@@ -6,11 +6,14 @@ import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import type { RegisterClientFormFieldOptions } from '@peertube/peertube-types'
 import { registerConfiguration } from './common/configuration/register'
 import { registerRoom } from './common/room/register'
+import { registerClientOptionsSubject$ } from './common/lib/contexts/peertube'
 import './common/lib/elements' // Import shared elements.
 
 async function register (clientOptions: RegisterClientOptions): Promise<void> {
   const { peertubeHelpers, registerHook, registerVideoField } = clientOptions
 
+  registerClientOptionsSubject$.next(clientOptions)
+
   registerHook({
     target: 'action:router.navigation-end',
     handler: () => {

client/common/configuration/register.ts

@@ -6,7 +6,6 @@
 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.
@@ -18,8 +17,6 @@ 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/directives/translation.ts

@@ -60,6 +60,9 @@ 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) ?? ''
 
     if (newValue !== '' && newValue !== this._translatedValue) {

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

@@ -2,9 +2,12 @@
 //
 // 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, state } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
+import { consume } from '@lit/context'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
 /**
@@ -21,6 +24,9 @@ import { ifDefined } from 'lit/directives/if-defined.js'
  */
 @customElement('livechat-image-file-input')
 export class ImageFileInputElement extends LivechatElement {
+  @consume({ context: registerClientOptionsContext, subscribe: true })
+  public registerClientOptions?: RegisterClientOptions
+
   @property({ attribute: false })
   public name?: string