Moderation configuration screen: WIP.

client/common/moderation/register.ts

@@ -1,6 +1,11 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { renderModerationHome } from './templates/home'
+import { renderModerationChannel } from './templates/channel'
 
+/**
+ * Registers stuff related to the moderation settings.
+ * @param clientOptions Peertube client options
+ */
 async function registerModeration (clientOptions: RegisterClientOptions): Promise<void> {
   const { peertubeHelpers, registerClientRoute, registerHook } = clientOptions
 
@@ -11,6 +16,15 @@ async function registerModeration (clientOptions: RegisterClientOptions): Promis
     }
   })
 
+  registerClientRoute({
+    route: 'livechat/moderation/channel',
+    onMount: async ({ rootEl }) => {
+      const urlParams = new URLSearchParams(window.location.search)
+      const channelId = urlParams.get('channelId') ?? ''
+      rootEl.innerHTML = await renderModerationChannel(clientOptions, channelId)
+    }
+  })
+
   registerHook({
     target: 'filter:left-menu.links.create.result',
     handler: async (links: any) => {

client/common/moderation/templates/channel.ts

@@ -0,0 +1,58 @@
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import type { ChannelModerationOptions } from 'shared/lib/types'
+import { getBaseRoute } from '../../../videowatch/uri'
+// Must use require for mustache, import seems buggy.
+const Mustache = require('mustache')
+
+/**
+ * Renders the moderation settings page for a given channel.
+ * @param registerClientOptions Peertube client options
+ * @param channelId The channel id
+ * @returns The page content
+ */
+async function renderModerationChannel (
+  registerClientOptions: RegisterClientOptions,
+  channelId: string
+): Promise<string> {
+  const { peertubeHelpers } = registerClientOptions
+
+  try {
+    if (!channelId || !/^\d+$/.test(channelId)) {
+      throw new Error('Missing or invalid channel id.')
+    }
+
+    const channelModerationOptions: ChannelModerationOptions = await (await fetch(
+      getBaseRoute(registerClientOptions) + '/api/moderation/channel/' + encodeURIComponent(channelId),
+      {
+        method: 'GET',
+        headers: peertubeHelpers.getAuthHeader()
+      }
+    )).json()
+
+    // Basic testing that channelModerationOptions has the correct format
+    if ((typeof channelModerationOptions !== 'object') || !channelModerationOptions.channel) {
+      throw new Error('Can\'t get channel moderation options.')
+    }
+
+    const view = {
+      title:
+        await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_CHANNEL_TITLE) +
+        ' ' + channelModerationOptions.channel.displayName,
+      description: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_CHANNEL_DESC)
+    }
+
+    return Mustache.render(`
+      <div class="margin-content">
+        <h1>{{title}}</h1>
+        <p>{{description}}</p>
+      </div>
+    `, view) as string
+  } catch (err: any) {
+    peertubeHelpers.notifier.error(err.toString())
+    return ''
+  }
+}
+
+export {
+  renderModerationChannel
+}

client/common/moderation/templates/home.ts

@@ -2,6 +2,11 @@ import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 // Must use require for mustache, import seems buggy.
 const Mustache = require('mustache')
 
+/**
+ * Renders the livechat moderation setup home page.
+ * @param registerClientOptions Peertube client options
+ * @returns The page content
+ */
 async function renderModerationHome (registerClientOptions: RegisterClientOptions): Promise<string> {
   const { peertubeHelpers } = registerClientOptions
 
@@ -24,7 +29,7 @@ async function renderModerationHome (registerClientOptions: RegisterClientOption
     }
 
     for (const channel of channels.data) {
-      channel.livechatModerationUri = '/p/livechat/moderation/channel?id=' + encodeURIComponent(channel.id)
+      channel.livechatModerationUri = '/p/livechat/moderation/channel?channelId=' + encodeURIComponent(channel.id)
     }
 
     const view = {
@@ -34,9 +39,6 @@ async function renderModerationHome (registerClientOptions: RegisterClientOption
       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>