Cleaning more stuff.

client/common/configuration/elements/channel-configuration.ts

@@ -1,6 +1,6 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import type { ChannelConfiguration } from 'shared/lib/types'
-import { html, LitElement } from 'lit'
+import { html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { ptTr } from '../../lib/directives/translation'
 import { Task } from '@lit/task'
@@ -8,9 +8,10 @@ import { ChannelDetailsService } from '../services/channel-details'
 import { provide } from '@lit/context'
 import { channelConfigurationContext, channelDetailsServiceContext } from '../contexts/channel'
 import { registerClientOptionsContext } from '../../lib/contexts/peertube'
+import { LivechatElement } from '../../lib/elements/livechat'
 
 @customElement('livechat-channel-configuration')
-export class ChannelConfigurationElement extends LitElement {
+export class ChannelConfigurationElement extends LivechatElement {
 
   @provide({ context: registerClientOptionsContext })
   @property({ attribute: false })
@@ -26,10 +27,6 @@ export class ChannelConfigurationElement extends LitElement {
   @provide({ context: channelDetailsServiceContext })
   private _channelDetailsService: ChannelDetailsService | undefined
 
-  protected createRenderRoot = (): HTMLElement | DocumentFragment => {
-    return this
-  }
-
   @state()
   public _formStatus: boolean | any = undefined
 

client/common/configuration/elements/channel-home.ts

@@ -8,9 +8,10 @@ import { ChannelDetailsService } from '../services/channel-details'
 import { provide } from '@lit/context'
 import { channelDetailsServiceContext } from '../contexts/channel'
 import { registerClientOptionsContext } from '../../lib/contexts/peertube'
+import { LivechatElement } from '../../lib/elements/livechat'
 
 @customElement('livechat-channel-home')
-export class ChannelHomeElement extends LitElement {
+export class ChannelHomeElement extends LivechatElement {
 
   @provide({ context: registerClientOptionsContext })
   @property({ attribute: false })
@@ -22,10 +23,6 @@ export class ChannelHomeElement extends LitElement {
   @provide({ context: channelDetailsServiceContext })
   private _channelDetailsService: ChannelDetailsService | undefined
 
-  protected createRenderRoot = (): HTMLElement | DocumentFragment => {
-    return this
-  }
-
   @state()
   public _formStatus: boolean | any = undefined
 

client/common/configuration/elements/configuration-row.ts

@@ -1,8 +1,9 @@
-import { html, LitElement } from 'lit'
+import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
+import { LivechatElement } from '../../lib/elements/livechat'
 
 @customElement('livechat-configuration-row')
-export class ConfigurationRowElement extends LitElement {
+export class ConfigurationRowElement extends LivechatElement {
 
   @property({ attribute: false })
   public title: string = `title`
@@ -13,10 +14,6 @@ export class ConfigurationRowElement extends LitElement {
   @property({ attribute: false })
   public helpPage: string = 'documentation'
 
-  protected createRenderRoot = (): HTMLElement | DocumentFragment => {
-    return this
-  }
-
   render() {
     return html`
       <h2>${this.title}</h2>

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

@@ -57,6 +57,7 @@ interface CellDataSchema {
 }
 
 @customElement('livechat-dynamic-table-form')
+// FIXME: use LivechatElement instead of LitElement? If so, be carefull about createRenderRoot
 export class DynamicTableFormElement extends LitElement {
 
   @property({ attribute: false })

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

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit'
+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'
@@ -9,9 +9,10 @@ import { Task } from '@lit/task'
 import { localizedHelpUrl } from '../../../utils/help'
 import { ptTr } from '../directives/translation'
 import { DirectiveResult } from 'lit/directive'
+import { LivechatElement } from './livechat'
 
 @customElement('livechat-help-button')
-export class HelpButtonElement extends LitElement {
+export class HelpButtonElement extends LivechatElement {
 
   @consume({ context: registerClientOptionsContext, subscribe: true })
   public registerClientOptions: RegisterClientOptions | undefined
@@ -25,10 +26,6 @@ export class HelpButtonElement extends LitElement {
   @state()
   public url: URL = new URL('https://lmddgtfy.net/')
 
-  protected createRenderRoot = (): HTMLElement | DocumentFragment => {
-    return this
-  }
-
   private _asyncTaskRender = new Task(this, {
     task: async ([registerClientOptions], {signal}) => {
       this.url = new URL(registerClientOptions ? await localizedHelpUrl(registerClientOptions, { page: this.page }) : '')

client/common/lib/elements/livechat.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit'
+
+/**
+ * Base class for all Custom Elements.
+ */
+export class LivechatElement extends LitElement {
+  protected createRenderRoot = (): HTMLElement | DocumentFragment => {
+    return this
+  }
+}