Custom channel emoticons WIP (#130)

client/@types/global.d.ts

@@ -88,3 +88,5 @@ declare const LOC_INVALID_VALUE_NOT_IN_RANGE: string
 declare const LOC_CHATROOM_NOT_ACCESSIBLE: string
 
 declare const LOC_PROMOTE: string
+
+declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_TITLE: string

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

@@ -3,15 +3,16 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import type { ChannelEmojisConfiguration } from 'shared/lib/types'
 import { LivechatElement } from '../../lib/elements/livechat'
 import { registerClientOptionsContext } from '../../lib/contexts/peertube'
 import { ChannelDetailsService } from '../services/channel-details'
 import { channelDetailsServiceContext } from '../contexts/channel'
-import { ChannelEmojis } from 'shared/lib/types'
-// import { ptTr } from '../../lib/directives/translation'
+import { ptTr } from '../../lib/directives/translation'
 import { Task } from '@lit/task'
 import { customElement, property } from 'lit/decorators.js'
 import { provide } from '@lit/context'
+import { html } from 'lit'
 
 /**
  * Channel emojis configuration page.
@@ -25,15 +26,37 @@ export class ChannelEmojisElement extends LivechatElement {
   @property({ attribute: false })
   public channelId?: number
 
-  private _channelEmojis?: ChannelEmojis
+  private _channelEmojisConfiguration?: ChannelEmojisConfiguration
 
   @provide({ context: channelDetailsServiceContext })
   private _channelDetailsService?: ChannelDetailsService
 
-  protected override render = (): void => {
+  protected override render = (): unknown => {
     return this._asyncTaskRender.render({
       pending: () => {},
-      complete: () => {},
+      complete: () => html`
+        <div
+          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>
+            <livechat-help-button .page=${'documentation/user/streamers/emojis'}>
+            </livechat-help-button>
+            FIXME: help url OK?
+          </h1>
+          <form role="form" @submit=${this._saveEmojis}>
+            <div class="form-group mt-5">
+              <button type="submit" class="peertube-button-link orange-button">
+                ${ptTr(LOC_SAVE)}
+              </button>
+            </div>
+          </form>
+        </div>
+      `,
       error: (err: any) => {
         this.registerClientOptions?.peertubeHelpers.notifier.error(err.toString())
       }
@@ -49,8 +72,14 @@ export class ChannelEmojisElement extends LivechatElement {
         throw new Error('Missing channelId')
       }
       this._channelDetailsService = new ChannelDetailsService(this.registerClientOptions)
-      this._channelEmojis = await this._channelDetailsService.fetchEmojis(this.channelId)
+      this._channelEmojisConfiguration = await this._channelDetailsService.fetchEmojisConfiguration(this.channelId)
     },
     args: () => []
   })
+
+  private readonly _saveEmojis = (ev?: Event): void => {
+    ev?.preventDefault()
+    // TODO
+    this.registerClientOptions?.peertubeHelpers.notifier.error('TODO')
+  }
 }

client/common/configuration/services/channel-details.ts

@@ -5,7 +5,7 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import type { ValidationError } from '../../lib/models/validation'
 import type {
-  ChannelLiveChatInfos, ChannelConfiguration, ChannelConfigurationOptions, ChannelEmojis
+  ChannelLiveChatInfos, ChannelConfiguration, ChannelConfigurationOptions, ChannelEmojisConfiguration
 } from 'shared/lib/types'
 import { ValidationErrorType } from '../../lib/models/validation'
 import { getBaseRoute } from '../../../utils/uri'
@@ -161,7 +161,7 @@ export class ChannelDetailsService {
     return response.json()
   }
 
-  fetchEmojis = async (channelId: number): Promise<ChannelEmojis> => {
+  fetchEmojisConfiguration = async (channelId: number): Promise<ChannelEmojisConfiguration> => {
     const response = await fetch(
       getBaseRoute(this._registerClientOptions) +
         '/api/configuration/channel/emojis/' +
@@ -173,6 +173,9 @@ export class ChannelDetailsService {
     )
 
     if (!response.ok) {
+      if (response.status === 404) {
+        // File does not exist yet, that is a normal use case.
+      }
       throw new Error('Can\'t get channel emojis options.')
     }