Custom channel emoticons WIP (#130): tabs

CHANGELOG.md

@@ -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
 

assets/styles/configuration.scss

@@ -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;
   }
 

client/@types/global.d.ts

@@ -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

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

@@ -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>
-          <p>${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_DESC)}</p>
+
           <form livechat-configuration-channel-options role="form" @submit=${this._saveConfig}>
           <div class="row mt-3">
             <div class="row mt-5">

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

@@ -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?
+          </p>
-          </h1>
+
           <form role="form" @submit=${this._saveEmojis}>
             <div class="row mt-5">
               <livechat-dynamic-table-form

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

@@ -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>
+    `
+  }
+}

client/common/configuration/elements/index.js

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

languages/en.yml

@@ -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:".