Moderation configuration screen: WIP.

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## XXX (Unreleased Yet)
 
+### New features
+
+* Moderation bot
+
 ### Minor changes and fixes
 
 * ConverseJS v10.1.6 (instead of v10.0.0).

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

languages/en.yml

@@ -278,3 +278,8 @@ prosody_components_list_description: |
     </li>
     <li>Only use alphanumeric characters in the secret passphrase (use at least 15 characters).</li>
   </ul>
+
+menu_moderation_label: "Chatrooms"
+livechat_moderation_title: "Configure your live's chatrooms moderation policies"
+livechat_moderation_desc: "Here you can configure some advanced options for chatrooms associated to your live streams."
+livechat_moderation_please_select: "Please select bellow one of your channel, to setup its chatting options."

package-lock.json

@@ -24,6 +24,7 @@
         "@types/express": "^4.17.13",
         "@types/got": "^9.6.12",
         "@types/http-proxy": "^1.17.9",
+        "@types/mustache": "^4.2.2",
         "@types/node": "^16.11.6",
         "@types/winston": "^2.4.4",
         "@typescript-eslint/eslint-plugin": "^4.29.0",
@@ -36,6 +37,7 @@
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-promise": "^5.1.1",
         "eslint-plugin-standard": "^5.0.0",
+        "mustache": "^4.2.0",
         "npm-run-all": "^4.1.5",
         "sass": "^1.43.4",
         "sharp": "^0.31.2",
@@ -2992,6 +2994,12 @@
         "@types/express": "*"
       }
     },
+    "node_modules/@types/mustache": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/mustache/-/mustache-4.2.2.tgz",
+      "integrity": "sha512-MUSpfpW0yZbTgjekDbH0shMYBUD+X/uJJJMm9LXN1d5yjl5lCY1vN/eWKD6D1tOtjA6206K0zcIPnUaFMurdNA==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "16.11.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.6.tgz",
@@ -7636,6 +7644,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mustache": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
+      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
+      "dev": true,
+      "bin": {
+        "mustache": "bin/mustache"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -13071,6 +13088,12 @@
         "@types/express": "*"
       }
     },
+    "@types/mustache": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/mustache/-/mustache-4.2.2.tgz",
+      "integrity": "sha512-MUSpfpW0yZbTgjekDbH0shMYBUD+X/uJJJMm9LXN1d5yjl5lCY1vN/eWKD6D1tOtjA6206K0zcIPnUaFMurdNA==",
+      "dev": true
+    },
     "@types/node": {
       "version": "16.11.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.6.tgz",
@@ -16509,6 +16532,12 @@
         }
       }
     },
+    "mustache": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
+      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
+      "dev": true
+    },
     "nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",

package.json

@@ -47,6 +47,7 @@
     "@types/express": "^4.17.13",
     "@types/got": "^9.6.12",
     "@types/http-proxy": "^1.17.9",
+    "@types/mustache": "^4.2.2",
     "@types/node": "^16.11.6",
     "@types/winston": "^2.4.4",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
@@ -59,6 +60,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.1",
     "eslint-plugin-standard": "^5.0.0",
+    "mustache": "^4.2.0",
     "npm-run-all": "^4.1.5",
     "sass": "^1.43.4",
     "sharp": "^0.31.2",