matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixing ShadowDOM situation with CSS

Browse Source
This commit is contained in:
Mehdi Benadel 2024-05-23 15:52:12 +02:00
parent de974eae22
commit fb3a5d26aa
8 changed files with 221 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/style.scss
View File

@ -47,7 +47,7 @@
} }
.peertube-plugin-livechat-buttons-cloned { .peertube-plugin-livechat-buttons-cloned {
// Hidding buttons when cloned by the ConverseJS mini-muc-head plugin. // Hiding buttons when cloned by the ConverseJS mini-muc-head plugin.
display: none; display: none;
} }

89
client/common/configuration/elements/channel-configuration.ts
View File

@ -3,16 +3,15 @@ import { html, LitElement } from 'lit'
import { customElement, property, state } from 'lit/decorators.js' import { customElement, property, state } from 'lit/decorators.js'
import { ptTr } from '../directives/translation' import { ptTr } from '../directives/translation'
import './dynamic-table-form' import './dynamic-table-form'
import './plugin-configuration-row' import './configuration-row'
import './help-button' import './help-button'
import { Task } from '@lit/task'; import { Task } from '@lit/task';
import type { ChannelConfiguration } from 'shared/lib/types' import type { ChannelConfiguration } from 'shared/lib/types'
import { ChannelDetailsService } from '../services/channel-details' import { ChannelDetailsService } from '../services/channel-details'
import { provide } from '@lit/context' import { provide } from '@lit/context'
import { getGlobalStyleSheets } from '../../global-styles'
import { channelConfigurationContext, channelDetailsServiceContext, registerClientOptionsContext } from '../contexts/channel' import { channelConfigurationContext, channelDetailsServiceContext, registerClientOptionsContext } from '../contexts/channel'
@customElement('channel-configuration') @customElement('livechat-channel-configuration')
export class ChannelConfigurationElement extends LitElement { export class ChannelConfigurationElement extends LitElement {
@provide({ context: registerClientOptionsContext }) @provide({ context: registerClientOptionsContext })
@ -29,9 +28,9 @@ export class ChannelConfigurationElement extends LitElement {
@provide({ context: channelDetailsServiceContext }) @provide({ context: channelDetailsServiceContext })
private _channelDetailsService: ChannelDetailsService | undefined private _channelDetailsService: ChannelDetailsService | undefined
static styles = [ protected createRenderRoot = (): HTMLElement | DocumentFragment => {
...getGlobalStyleSheets() return this
]; }
@state() @state()
public _formStatus: boolean | any = undefined public _formStatus: boolean | any = undefined
@ -181,16 +180,21 @@ export class ChannelConfigurationElement extends LitElement {
<span>${this._channelConfiguration?.channel.displayName}</span> <span>${this._channelConfiguration?.channel.displayName}</span>
<span>${this._channelConfiguration?.channel.name}</span> <span>${this._channelConfiguration?.channel.name}</span>
</span> </span>
<help-button .page="documentation/user/streamers/channel"> <livechat-help-button .page="documentation/user/streamers/channel">
</help-button> </livechat-help-button>
</h1> </h1>
<p>${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_DESC)}</p> <p>${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_DESC)}</p>
<form livechat-configuration-channel-options role="form"> <form livechat-configuration-channel-options role="form">
<div class="row mt-3"> <div class="row mt-3">
<plugin-configuration-row <div class="row mt-5">
<div class="col-12 col-lg-4 col-xl-3">
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)} .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)} .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)}
.helpPage=${"documentation/user/streamers/slow_mode"}> .helpPage=${"documentation/user/streamers/slow_mode"}>
</livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<div class="form-group"> <div class="form-group">
<label> <label>
<input <input
@ -210,11 +214,17 @@ export class ChannelConfigurationElement extends LitElement {
/> />
</label> </label>
</div> </div>
</plugin-configuration-row> </div>
<plugin-configuration-row </div>
<div class="row mt-5">
<div class="col-12 col-lg-4 col-xl-3">
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE)} .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE)}
.description=${''} .description=${''}
.helpPage=${"documentation/user/streamers/channel"}> .helpPage=${"documentation/user/streamers/channel"}>
</livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<div class="form-group"> <div class="form-group">
<label> <label>
<input <input
@ -252,56 +262,81 @@ export class ChannelConfigurationElement extends LitElement {
</div>` </div>`
: '' : ''
} }
</plugin-configuration-row> </div>
</div>
${this._channelConfiguration?.configuration.bot.enabled ? ${this._channelConfiguration?.configuration.bot.enabled ?
html`<plugin-configuration-row html`<div class="row mt-5">
<div class="col-12 col-lg-4 col-xl-3">
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL)} .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)} .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)}
.helpPage=${"documentation/user/streamers/bot/forbidden_words"}> .helpPage=${"documentation/user/streamers/bot/forbidden_words"}>
<dynamic-table-form </livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<livechat-dynamic-table-form
.header=${tableHeaderList.forbiddenWords} .header=${tableHeaderList.forbiddenWords}
.schema=${tableSchema.forbiddenWords} .schema=${tableSchema.forbiddenWords}
.rows=${this._channelConfiguration?.configuration.bot.forbiddenWords} .rows=${this._channelConfiguration?.configuration.bot.forbiddenWords}
@update=${(e: CustomEvent) => { @update=${(e: CustomEvent) => {
if (this._channelConfiguration) this._channelConfiguration.configuration.bot.forbiddenWords = e.detail if (this._channelConfiguration) {
this._channelConfiguration.configuration.bot.forbiddenWords = e.detail
this.requestUpdate('_channelConfiguration') this.requestUpdate('_channelConfiguration')
} }
} }
}
.formName=${'forbidden-words'}> .formName=${'forbidden-words'}>
</dynamic-table-form> </livechat-dynamic-table-form>
</plugin-configuration-row> </div>
<plugin-configuration-row </div>
<div class="row mt-5">
<div class="col-12 col-lg-4 col-xl-3">
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL)} .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)} .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)}
.helpPage=${"documentation/user/streamers/bot/quotes"}> .helpPage=${"documentation/user/streamers/bot/quotes"}>
<dynamic-table-form </livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<livechat-dynamic-table-form
.header=${tableHeaderList.quotes} .header=${tableHeaderList.quotes}
.schema=${tableSchema.quotes} .schema=${tableSchema.quotes}
.rows=${this._channelConfiguration?.configuration.bot.quotes} .rows=${this._channelConfiguration?.configuration.bot.quotes}
@update=${(e: CustomEvent) => { @update=${(e: CustomEvent) => {
if (this._channelConfiguration) this._channelConfiguration.configuration.bot.quotes = e.detail if (this._channelConfiguration) {
this._channelConfiguration.configuration.bot.quotes = e.detail
this.requestUpdate('_channelConfiguration') this.requestUpdate('_channelConfiguration')
} }
} }
}
.formName=${'quote'}> .formName=${'quote'}>
</dynamic-table-form> </livechat-dynamic-table-form>
</plugin-configuration-row> </div>
<plugin-configuration-row </div>
<div class="row mt-5">
<div class="col-12 col-lg-4 col-xl-3">
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL)} .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC)} .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC)}
.helpPage=${"documentation/user/streamers/bot/commands"}> .helpPage=${"documentation/user/streamers/bot/commands"}>
<dynamic-table-form </livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<livechat-dynamic-table-form
.header=${tableHeaderList.commands} .header=${tableHeaderList.commands}
.schema=${tableSchema.commands} .schema=${tableSchema.commands}
.rows=${this._channelConfiguration?.configuration.bot.commands} .rows=${this._channelConfiguration?.configuration.bot.commands}
@update=${(e: CustomEvent) => { @update=${(e: CustomEvent) => {
if (this._channelConfiguration) this._channelConfiguration.configuration.bot.commands = e.detail if (this._channelConfiguration) {
this._channelConfiguration.configuration.bot.commands = e.detail
this.requestUpdate('_channelConfiguration') this.requestUpdate('_channelConfiguration')
} }
} }
}
.formName=${'command'}> .formName=${'command'}>
</dynamic-table-form> </livechat-dynamic-table-form>
</plugin-configuration-row>` </div>
</div>`
: '' : ''
} }
<div class="form-group mt-5"> <div class="form-group mt-5">

13
client/common/configuration/elements/channel-home.ts
View File

@ -7,10 +7,9 @@ import { Task } from '@lit/task';
import type { ChannelLiveChatInfos } from 'shared/lib/types' import type { ChannelLiveChatInfos } from 'shared/lib/types'
import { ChannelDetailsService } from '../services/channel-details' import { ChannelDetailsService } from '../services/channel-details'
import { provide } from '@lit/context' import { provide } from '@lit/context'
import { getGlobalStyleSheets } from '../../global-styles'
import { channelDetailsServiceContext, registerClientOptionsContext } from '../contexts/channel' import { channelDetailsServiceContext, registerClientOptionsContext } from '../contexts/channel'
@customElement('channel-home') @customElement('livechat-channel-home')
export class ChannelHomeElement extends LitElement { export class ChannelHomeElement extends LitElement {
@provide({ context: registerClientOptionsContext }) @provide({ context: registerClientOptionsContext })
@ -23,9 +22,9 @@ export class ChannelHomeElement extends LitElement {
@provide({ context: channelDetailsServiceContext }) @provide({ context: channelDetailsServiceContext })
private _channelDetailsService: ChannelDetailsService | undefined private _channelDetailsService: ChannelDetailsService | undefined
static styles = [ protected createRenderRoot = (): HTMLElement | DocumentFragment => {
...getGlobalStyleSheets() return this
]; }
@state() @state()
public _formStatus: boolean | any = undefined public _formStatus: boolean | any = undefined
@ -55,8 +54,8 @@ export class ChannelHomeElement extends LitElement {
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home"> <div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
<h1> <h1>
${ptTr(LOC_LIVECHAT_CONFIGURATION_TITLE)} ${ptTr(LOC_LIVECHAT_CONFIGURATION_TITLE)}
<help-button .page="documentation/user/streamers/channel"> <livechat-help-button .page="documentation/user/streamers/channel">
</help-button> </livechat-help-button>
</h1> </h1>
<p>${ptTr(LOC_LIVECHAT_CONFIGURATION_DESC)}</p> <p>${ptTr(LOC_LIVECHAT_CONFIGURATION_DESC)}</p>
<p>${ptTr(LOC_LIVECHAT_CONFIGURATION_PLEASE_SELECT)}</p> <p>${ptTr(LOC_LIVECHAT_CONFIGURATION_PLEASE_SELECT)}</p>

29
client/common/configuration/elements/configuration-row.ts Normal file
View File

@ -0,0 +1,29 @@
import { html, LitElement } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import './help-button'
@customElement('livechat-configuration-row')
export class ConfigurationRowElement extends LitElement {
@property({ attribute: false })
public title: string = `title`
@property({ attribute: false })
public description: string = `Here's a description`
@property({ attribute: false })
public helpPage: string = 'documentation'
protected createRenderRoot = (): HTMLElement | DocumentFragment => {
return this
}
render() {
return html`
<h2>${this.title}</h2>
<p>${this.description}</p>
<livechat-help-button .page=${this.helpPage}>
</livechat-help-button>
`
}
}

39
client/common/configuration/elements/dynamic-table-form.ts
View File

@ -2,7 +2,6 @@ import { css, html, LitElement, nothing, TemplateResult } from 'lit'
import { repeat } from 'lit/directives/repeat.js' import { repeat } from 'lit/directives/repeat.js'
import { customElement, property, state } from 'lit/decorators.js' import { customElement, property, state } from 'lit/decorators.js'
import { ifDefined } from 'lit/directives/if-defined.js' import { ifDefined } from 'lit/directives/if-defined.js'
import { getGlobalStyleSheets } from '../../global-styles'
import { unsafeHTML } from 'lit/directives/unsafe-html.js' import { unsafeHTML } from 'lit/directives/unsafe-html.js'
// This content comes from the file assets/images/plus-square.svg, from the Feather icons set https://feathericons.com/ // This content comes from the file assets/images/plus-square.svg, from the Feather icons set https://feathericons.com/
@ -57,7 +56,7 @@ interface CellDataSchema {
default?: DynamicTableAcceptedTypes default?: DynamicTableAcceptedTypes
} }
@customElement('dynamic-table-form') @customElement('livechat-dynamic-table-form')
export class DynamicTableFormElement extends LitElement { export class DynamicTableFormElement extends LitElement {
@property({ attribute: false }) @property({ attribute: false })
@ -82,37 +81,47 @@ export class DynamicTableFormElement extends LitElement {
@property({ attribute: false }) @property({ attribute: false })
private _colOrder: string[] = [] private _colOrder: string[] = []
static styles = [ static styles = css`
...getGlobalStyleSheets(), table {
css`
:host table {
table-layout: fixed; table-layout: fixed;
text-align: center; text-align: center;
} }
:host table td, table th { table td, table th {
word-wrap:break-word; word-wrap:break-word;
vertical-align: top; vertical-align: top;
padding: 5px 7px; padding: 5px 7px;
} }
:host table tbody > :nth-child(odd) { table tbody > :nth-child(odd) {
background-color: var(--greySecondaryBackgroundColor); background-color: var(--greySecondaryBackgroundColor);
} }
:host button { button {
padding: 2px; padding: 2px;
} }
:host .dynamic-table-add-row { .dynamic-table-add-row {
background-color: var(--bs-green); background-color: var(--bs-green);
} }
:host .dynamic-table-remove-row { .dynamic-table-remove-row {
background-color: var(--bs-orange); background-color: var(--bs-orange);
} }
` `;
];
protected createRenderRoot = (): HTMLElement | DocumentFragment => {
if (document.head.querySelector(`style[data-tagname="${this.tagName}"]`)) {
return this;
}
const style = document.createElement("style");
style.innerHTML = DynamicTableFormElement.styles.toString();
style.setAttribute("data-tagname", this.tagName);
document.head.append(style);
return this
}
// fixes situations when list has been reinitialized or changed outside of CustomElement // fixes situations when list has been reinitialized or changed outside of CustomElement
private _updateLastRowId = () => { private _updateLastRowId = () => {
@ -197,7 +206,7 @@ export class DynamicTableFormElement extends LitElement {
${Object.entries(rowData.row).filter(([k, v]) => k != '_id') ${Object.entries(rowData.row).filter(([k, v]) => k != '_id')
.sort(([k1,_1], [k2,_2]) => this._colOrder.indexOf(k1) - this._colOrder.indexOf(k2)) .sort(([k1,_1], [k2,_2]) => this._colOrder.indexOf(k1) - this._colOrder.indexOf(k2))
.map((data) => this.renderDataCell(data, rowData._id))} .map((data) => this.renderDataCell(data, rowData._id))}
<td class="form-group"><button class="btn dynamic-table-remove-row" @click=${() => this._removeRow(rowData._id)}>${unsafeHTML(RemoveSVG)}</button></td> <td class="form-group"><button type="button" class="btn dynamic-table-remove-row" @click=${() => this._removeRow(rowData._id)}>${unsafeHTML(RemoveSVG)}</button></td>
</tr>` </tr>`
} }
@ -206,7 +215,7 @@ export class DynamicTableFormElement extends LitElement {
return html`<tfoot> return html`<tfoot>
<tr> <tr>
${Object.values(this.header).map(() => html`<td></td>`)} ${Object.values(this.header).map(() => html`<td></td>`)}
<td><button class="btn dynamic-table-add-row" @click=${this._addRow}>${unsafeHTML(AddSVG)}</button></td> <td><button type="button" class="btn dynamic-table-add-row" @click=${this._addRow}>${unsafeHTML(AddSVG)}</button></td>
</tr> </tr>
</tfoot>` </tfoot>`
} }

11
client/common/configuration/elements/help-button.ts
View File

@ -9,12 +9,11 @@ import { Task } from '@lit/task'
import { localizedHelpUrl } from '../../../utils/help' import { localizedHelpUrl } from '../../../utils/help'
import { ptTr } from '../directives/translation' import { ptTr } from '../directives/translation'
import { DirectiveResult } from 'lit/directive' import { DirectiveResult } from 'lit/directive'
import { getGlobalStyleSheets } from '../../global-styles'
@customElement('help-button') @customElement('livechat-help-button')
export class HelpButtonElement extends LitElement { export class HelpButtonElement extends LitElement {
@consume({context: registerClientOptionsContext}) @consume({ context: registerClientOptionsContext, subscribe: true })
public registerClientOptions: RegisterClientOptions | undefined public registerClientOptions: RegisterClientOptions | undefined
@property({ attribute: false }) @property({ attribute: false })
@ -26,9 +25,9 @@ export class HelpButtonElement extends LitElement {
@state() @state()
public url: URL = new URL('https://lmddgtfy.net/') public url: URL = new URL('https://lmddgtfy.net/')
static styles = [ protected createRenderRoot = (): HTMLElement | DocumentFragment => {
...getGlobalStyleSheets() return this
]; }
private _asyncTaskRender = new Task(this, { private _asyncTaskRender = new Task(this, {
task: async ([registerClientOptions], {signal}) => { task: async ([registerClientOptions], {signal}) => {

36
client/common/configuration/elements/plugin-configuration-row.ts
View File

@ -1,36 +0,0 @@
import { html, LitElement } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import './help-button'
import { getGlobalStyleSheets } from '../../global-styles'
@customElement('plugin-configuration-row')
export class PluginConfigurationRowElement extends LitElement {
@property({ attribute: false })
public title: string = `title`
@property({ attribute: false })
public description: string = `Here's a description`
@property({ attribute: false })
public helpPage: string = 'documentation'
static styles = [
...getGlobalStyleSheets()
];
render() {
return html`
<div class="row mt-5">
<div class="col-12 col-lg-4 col-xl-3">
<h2>${this.title}</h2>
<p>${this.description}</p>
<help-button .page=${this.helpPage}>
</help-button>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<slot><p>Nothing in this row.</p></slot>
</div>
</div>`
}
}

6
client/common/configuration/register.ts
View File

@ -20,7 +20,7 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro
registerClientRoute({ registerClientRoute({
route: 'livechat/configuration', route: 'livechat/configuration',
onMount: async ({ rootEl }) => { onMount: async ({ rootEl }) => {
render(html`<channel-home .registerClientOptions=${clientOptions}></channel-home>`, rootEl) render(html`<livechat-channel-home .registerClientOptions=${clientOptions}></livechat-channel-home>`, rootEl)
} }
}) })
@ -29,8 +29,8 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro
onMount: async ({ rootEl }) => { onMount: async ({ rootEl }) => {
const urlParams = new URLSearchParams(window.location.search) const urlParams = new URLSearchParams(window.location.search)
const channelId = urlParams.get('channelId') ?? '' const channelId = urlParams.get('channelId') ?? ''
render(html`<channel-configuration .registerClientOptions=${clientOptions} render(html`<livechat-channel-configuration .registerClientOptions=${clientOptions}
.channelId=${channelId}></channel-configuration>`, rootEl) .channelId=${channelId}></livechat-channel-configuration>`, rootEl)
} }
}) })