From 1d14bbbda093918ea1279124eb5c3b3b5ac3a3c9 Mon Sep 17 00:00:00 2001 From: John Livingston Date: Thu, 23 May 2024 17:09:58 +0200 Subject: [PATCH] Cleaning more stuff. --- .../configuration/elements/channel-configuration.ts | 9 +++------ client/common/configuration/elements/channel-home.ts | 7 ++----- .../common/configuration/elements/configuration-row.ts | 9 +++------ client/common/lib/elements/dynamic-table-form.ts | 1 + client/common/lib/elements/help-button.ts | 9 +++------ client/common/lib/elements/livechat.ts | 10 ++++++++++ 6 files changed, 22 insertions(+), 23 deletions(-) create mode 100644 client/common/lib/elements/livechat.ts diff --git a/client/common/configuration/elements/channel-configuration.ts b/client/common/configuration/elements/channel-configuration.ts index e030c103..6824e34d 100644 --- a/client/common/configuration/elements/channel-configuration.ts +++ b/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 diff --git a/client/common/configuration/elements/channel-home.ts b/client/common/configuration/elements/channel-home.ts index e2014092..1b15cfe8 100644 --- a/client/common/configuration/elements/channel-home.ts +++ b/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 diff --git a/client/common/configuration/elements/configuration-row.ts b/client/common/configuration/elements/configuration-row.ts index 14907f88..20420be5 100644 --- a/client/common/configuration/elements/configuration-row.ts +++ b/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`

${this.title}

diff --git a/client/common/lib/elements/dynamic-table-form.ts b/client/common/lib/elements/dynamic-table-form.ts index d042acb3..83e0cad6 100644 --- a/client/common/lib/elements/dynamic-table-form.ts +++ b/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 }) diff --git a/client/common/lib/elements/help-button.ts b/client/common/lib/elements/help-button.ts index f33c96dd..891d3084 100644 --- a/client/common/lib/elements/help-button.ts +++ b/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 }) : '') diff --git a/client/common/lib/elements/livechat.ts b/client/common/lib/elements/livechat.ts new file mode 100644 index 00000000..9581b2a1 --- /dev/null +++ b/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 + } +}