Custom channel emoticons WIP (#130)

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

@@ -0,0 +1,56 @@
+// 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 { 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 { Task } from '@lit/task'
+import { customElement, property } from 'lit/decorators.js'
+import { provide } from '@lit/context'
+
+/**
+ * Channel emojis configuration page.
+ */
+@customElement('livechat-channel-emojis')
+export class ChannelEmojisElement extends LivechatElement {
+  @provide({ context: registerClientOptionsContext })
+  @property({ attribute: false })
+  public registerClientOptions?: RegisterClientOptions
+
+  @property({ attribute: false })
+  public channelId?: number
+
+  private _channelEmojis?: ChannelEmojis
+
+  @provide({ context: channelDetailsServiceContext })
+  private _channelDetailsService?: ChannelDetailsService
+
+  protected override render = (): void => {
+    return this._asyncTaskRender.render({
+      pending: () => {},
+      complete: () => {},
+      error: (err: any) => {
+        this.registerClientOptions?.peertubeHelpers.notifier.error(err.toString())
+      }
+    })
+  }
+
+  private readonly _asyncTaskRender = new Task(this, {
+    task: async () => {
+      if (!this.registerClientOptions) {
+        throw new Error('Missing client options')
+      }
+      if (!this.channelId) {
+        throw new Error('Missing channelId')
+      }
+      this._channelDetailsService = new ChannelDetailsService(this.registerClientOptions)
+      this._channelEmojis = await this._channelDetailsService.fetchEmojis(this.channelId)
+    },
+    args: () => []
+  })
+}

client/common/configuration/elements/index.js

@@ -1,7 +1,9 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
 // SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
 // Add here all your elements, the main JS file will import them all.
-import './channel-configuration'
 import './channel-home'
+import './channel-configuration'
+import './channel-emojis'

client/common/configuration/register.ts

@@ -37,6 +37,20 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro
     }
   })
 
+  registerClientRoute({
+    route: 'livechat/configuration/emojis',
+    onMount: async ({ rootEl }) => {
+      const urlParams = new URLSearchParams(window.location.search)
+      const channelId = urlParams.get('channelId') ?? ''
+      render(html`
+        <livechat-channel-emojis
+          .registerClientOptions=${clientOptions}
+          .channelId=${channelId}
+        ></livechat-channel-emojis>
+      `, rootEl)
+    }
+  })
+
   registerHook({
     target: 'filter:left-menu.links.create.result',
     handler: async (links: any) => {

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

@@ -4,7 +4,9 @@
 
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import type { ValidationError } from '../../lib/models/validation'
-import type { ChannelLiveChatInfos, ChannelConfiguration, ChannelConfigurationOptions } from 'shared/lib/types'
+import type {
+  ChannelLiveChatInfos, ChannelConfiguration, ChannelConfigurationOptions, ChannelEmojis
+} from 'shared/lib/types'
 import { ValidationErrorType } from '../../lib/models/validation'
 import { getBaseRoute } from '../../../utils/uri'
 
@@ -158,4 +160,22 @@ export class ChannelDetailsService {
 
     return response.json()
   }
+
+  fetchEmojis = async (channelId: number): Promise<ChannelEmojis> => {
+    const response = await fetch(
+      getBaseRoute(this._registerClientOptions) +
+        '/api/configuration/channel/emojis/' +
+        encodeURIComponent(channelId),
+      {
+        method: 'GET',
+        headers: this._headers
+      }
+    )
+
+    if (!response.ok) {
+      throw new Error('Can\'t get channel emojis options.')
+    }
+
+    return response.json()
+  }
 }