Moderation configuration screen: WIP.

client/@types/global.d.ts

@@ -30,3 +30,8 @@ declare const LOC_LAST_ACTIVITY: string
 declare const LOC_WEB: string
 declare const LOC_CONNECT_USING_XMPP: string
 declare const LOC_CONNECT_USING_XMPP_HELP: string
+
+declare const LOC_MENU_MODERATION_LABEL: string
+declare const LOC_LIVECHAT_MODERATION_TITLE: string
+declare const LOC_LIVECHAT_MODERATION_DESC: string
+declare const LOC_LIVECHAT_MODERATION_PLEASE_SELECT: string

client/common-client-plugin.ts

@@ -1,7 +1,10 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import type { RegisterClientFormFieldOptions } from '@peertube/peertube-types'
+import { registerModeration } from './common/moderation/register'
+
+async function register (clientOptions: RegisterClientOptions): Promise<void> {
+  const { peertubeHelpers, registerHook, registerVideoField } = clientOptions
 
-async function register ({ peertubeHelpers, registerHook, registerVideoField }: RegisterClientOptions): Promise<void> {
   registerHook({
     target: 'action:router.navigation-end',
     handler: () => {
@@ -48,6 +51,8 @@ async function register ({ peertubeHelpers, registerHook, registerVideoField }:
   }
   registerVideoField(webchatFieldOptions, { type: 'update' })
   registerVideoField(webchatFieldOptions, { type: 'go-live' })
+
+  await registerModeration(clientOptions)
 }
 
 export {

client/common/moderation/register.ts

@@ -0,0 +1,47 @@
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import { renderModerationHome } from './templates/home'
+
+async function registerModeration (clientOptions: RegisterClientOptions): Promise<void> {
+  const { peertubeHelpers, registerClientRoute, registerHook } = clientOptions
+
+  registerClientRoute({
+    route: 'livechat/moderation',
+    onMount: async ({ rootEl }) => {
+      rootEl.innerHTML = await renderModerationHome(clientOptions)
+    }
+  })
+
+  registerHook({
+    target: 'filter:left-menu.links.create.result',
+    handler: async (links: any) => {
+      // Adding the links to livechat/moderation for logged users.
+      if (!peertubeHelpers.isLoggedIn()) { return links }
+
+      if (!Array.isArray(links)) { return links }
+      let myLibraryLinks
+      // Searching the 'in-my-library' entry.
+      for (const link of links) {
+        if (typeof link !== 'object') { continue }
+        if (!('key' in link)) { continue }
+        if (link.key !== 'in-my-library') { continue }
+        myLibraryLinks = link
+        break
+      }
+      if (!myLibraryLinks) { return links }
+      if (!Array.isArray(myLibraryLinks.links)) { return links }
+
+      const label = await peertubeHelpers.translate(LOC_MENU_MODERATION_LABEL)
+      myLibraryLinks.links.push({
+        label,
+        shortLabel: label,
+        path: '/p/livechat/moderation',
+        icon: 'live'
+      })
+      return links
+    }
+  })
+}
+
+export {
+  registerModeration
+}

client/common/moderation/templates/home.ts

@@ -0,0 +1,64 @@
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+// Must use require for mustache, import seems buggy.
+const Mustache = require('mustache')
+
+async function renderModerationHome (registerClientOptions: RegisterClientOptions): Promise<string> {
+  const { peertubeHelpers } = registerClientOptions
+
+  try {
+    // Getting the current username in localStorage. Don't know any cleaner way to do.
+    const username = window.localStorage.getItem('username')
+    if (!username) {
+      throw new Error('Can\'t get the current username.')
+    }
+
+    const channels = await (await fetch(
+      '/api/v1/accounts/' + encodeURIComponent(username) + '/video-channels?start=0&count=100&sort=-createdAt',
+      {
+        method: 'GET',
+        headers: peertubeHelpers.getAuthHeader()
+      }
+    )).json()
+    if (!channels || !('data' in channels) || !Array.isArray(channels.data)) {
+      throw new Error('Can\'t get the channel list.')
+    }
+
+    for (const channel of channels.data) {
+      channel.livechatModerationUri = '/p/livechat/moderation/channel?id=' + encodeURIComponent(channel.id)
+    }
+
+    const view = {
+      title: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_TITLE),
+      description: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_DESC),
+      please_select: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_PLEASE_SELECT),
+      channels: channels.data
+    }
+
+    // TODO: remove this line
+    console.log('Rendering the moderation home with view:', view)
+
+    return Mustache.render(`
+      <div class="margin-content">
+        <h1>{{title}}</h1>
+        <p>{{description}}</p>
+        <h2>{{please_select}}</h2>
+        <ul>
+        {{#channels}}
+          <li>
+            <a href="{{livechatModerationUri}}">
+              {{displayName}}
+            </a>
+          </li>
+        {{/channels}}
+        </ul>
+      </div>
+    `, view) as string
+  } catch (err: any) {
+    peertubeHelpers.notifier.error(err.toString())
+    return ''
+  }
+}
+
+export {
+  renderModerationHome
+}