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

Custom channel emoticons WIP (#130): tabs

This commit is contained in:
John Livingston 2024-06-07 11:51:32 +02:00
parent 2dbfe49212
commit 1b9ecea443
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
8 changed files with 69 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -1,4 +1,5 @@
TODO: tag conversejs livechat branch, and replace commit ID in build-converse.js
TODO: check that the help url is ok for the emojis configuration page.
# Changelog

6
assets/styles/configuration.scss
View File

@ -33,6 +33,12 @@ $small-view: 800px;
font-size: 1.3rem;
border-bottom: 2px solid $grey-background-color;
padding-bottom: 15px;
}
livechat-channel-tabs {
display: block;
/* See Peertube sub-menu-h1 mixin */
margin-bottom: $sub-menu-margin-bottom;
}

1
client/@types/global.d.ts vendored
View File

@ -95,6 +95,7 @@ declare const LOC_CHATROOM_NOT_ACCESSIBLE: string
declare const LOC_PROMOTE: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_TITLE: string
declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_DESC: string
declare const LOC_LIVECHAT_EMOJIS_SHORTNAME: string
declare const LOC_LIVECHAT_EMOJIS_SHORTNAME_DESC: string
declare const LOC_LIVECHAT_EMOJIS_FILE: string

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

@ -209,15 +209,20 @@ export class ChannelConfigurationElement extends LivechatElement {
<div class="margin-content peertube-plugin-livechat-configuration
peertube-plugin-livechat-configuration-channel">
<h1>
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_TITLE)}:
<span class="peertube-plugin-livechat-configuration-channel-info">
<span>${this._channelConfiguration?.channel.displayName}</span>
<span>${this._channelConfiguration?.channel.name}</span>
</span>
</h1>
<livechat-channel-tabs .active=${'configuration'} .channelId=${this.channelId}></livechat-channel-tabs>
<p>
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_DESC)}
<livechat-help-button .page=${'documentation/user/streamers/channel'}>
</livechat-help-button>
</h1>
<p>${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_DESC)}</p>
</p>
<form livechat-configuration-channel-options role="form" @submit=${this._saveConfig}>
<div class="row mt-3">
<div class="row mt-5">

11
client/common/configuration/elements/channel-emojis.ts
View File

@ -65,15 +65,20 @@ export class ChannelEmojisElement extends LivechatElement {
class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-channel"
>
<h1>
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_TITLE)}:
<span class="peertube-plugin-livechat-configuration-channel-info">
<span>${this._channelEmojisConfiguration?.channel.displayName}</span>
<span>${this._channelEmojisConfiguration?.channel.name}</span>
</span>
</h1>
<livechat-channel-tabs .active=${'emojis'} .channelId=${this.channelId}></livechat-channel-tabs>
<p>
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_DESC)}
<livechat-help-button .page=${'documentation/user/streamers/emojis'}>
</livechat-help-button>
FIXME: help url OK?
</h1>
</p>
<form role="form" @submit=${this._saveEmojis}>
<div class="row mt-5">
<livechat-dynamic-table-form

40
client/common/configuration/elements/channel-tabs.ts Normal file
View File

@ -0,0 +1,40 @@
// 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 { registerClientOptionsContext } from '../../lib/contexts/peertube'
import { LivechatElement } from '../../lib/elements/livechat'
import { ptTr } from '../../lib/directives/translation'
import { html, TemplateResult } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { consume } from '@lit/context'
@customElement('livechat-channel-tabs')
export class ChannelHomeElement extends LivechatElement {
@consume({ context: registerClientOptionsContext, subscribe: true })
public registerClientOptions?: RegisterClientOptions
@property({ attribute: false })
public channelId?: number
@property({ attribute: false })
public active?: string
protected override render = (): TemplateResult => {
return html`
<a
class="sub-menu-entry ${this.active === 'configuration' ? 'active' : ''}"
href=${'/p/livechat/configuration/channel?channelId=' + encodeURIComponent(this.channelId ?? '')}
>
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_TITLE)}
</a>
<a
class="sub-menu-entry ${this.active === 'emojis' ? 'active' : ''}"
href=${'/p/livechat/configuration/emojis?channelId=' + encodeURIComponent(this.channelId ?? '')}
>
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_TITLE)}
</a>
`
}
}

1
client/common/configuration/elements/index.js
View File

@ -7,3 +7,4 @@
import './channel-home'
import './channel-configuration'
import './channel-emojis'
import './channel-tabs'

4
languages/en.yml
View File

@ -480,6 +480,10 @@ task_list_pick_message: |
promote: 'Become moderator'
livechat_configuration_channel_emojis_title: 'Channel emojis'
livechat_configuration_channel_emojis_desc: |
You can configure custom emojis for your channel.
These emojis will be available in the emoji picker.
Users can also use them by with their short name (for example by writing ":shortname:").
livechat_emojis_shortname: 'Short name'
livechat_emojis_shortname_desc: |
You can use emojis using ":shortname:".