Renaming 'moderation' pages to 'configuration'.

client/common/configuration/logic/channel.ts

@@ -0,0 +1,84 @@
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import type { ChannelConfigurationOptions } from 'shared/lib/types'
+import { getBaseRoute } from '../../../videowatch/uri'
+
+/**
+ * Adds the front-end logic on the generated html for the channel configuration options.
+ * @param clientOptions Peertube client options
+ * @param rootEl The root element in which the template was rendered
+ */
+async function vivifyConfigurationChannel (
+  clientOptions: RegisterClientOptions,
+  rootEl: HTMLElement,
+  channelId: string
+): Promise<void> {
+  const form = rootEl.querySelector('form[livechat-configuration-channel-options]') as HTMLFormElement
+  if (!form) { return }
+  const labelSaved = await clientOptions.peertubeHelpers.translate(LOC_SUCCESSFULLY_SAVED)
+  const labelError = await clientOptions.peertubeHelpers.translate(LOC_ERROR)
+  const enableBotCB = form.querySelector('input[name=bot]') as HTMLInputElement
+  const botEnabledEl = form.querySelector('[livechat-configuration-channel-options-bot-enabled]') as HTMLElement
+
+  const refresh: Function = () => {
+    botEnabledEl.style.display = enableBotCB.checked ? 'initial' : 'none'
+  }
+
+  const submitForm: Function = async () => {
+    const data = new FormData(form)
+    const channelConfigurationOptions: ChannelConfigurationOptions = {
+      bot: data.get('bot') === '1',
+      bannedJIDs: (data.get('banned_jids')?.toString() ?? '').split(/\r?\n|\r|\n/g),
+      forbiddenWords: (data.get('forbidden_words')?.toString() ?? '').split(/\r?\n|\r|\n/g)
+    }
+
+    const headers: any = clientOptions.peertubeHelpers.getAuthHeader() ?? {}
+    headers['content-type'] = 'application/json;charset=UTF-8'
+
+    const response = await fetch(
+      getBaseRoute(clientOptions) + '/api/configuration/channel/' + encodeURIComponent(channelId),
+      {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(channelConfigurationOptions)
+      }
+    )
+
+    if (!response.ok) {
+      throw new Error('Failed to save configuration options.')
+    }
+  }
+  const toggleSubmit: Function = (disabled: boolean) => {
+    form.querySelectorAll('input[type=submit], input[type=reset]').forEach((el) => {
+      if (disabled) {
+        el.setAttribute('disabled', 'disabled')
+      } else {
+        el.removeAttribute('disabled')
+      }
+    })
+  }
+
+  enableBotCB.onclick = () => refresh()
+  form.onsubmit = () => {
+    toggleSubmit(true)
+    submitForm().then(
+      () => {
+        clientOptions.peertubeHelpers.notifier.success(labelSaved)
+        toggleSubmit(false)
+      },
+      () => {
+        clientOptions.peertubeHelpers.notifier.error(labelError)
+        toggleSubmit(false)
+      }
+    )
+    return false
+  }
+  form.onreset = () => {
+    // Must refresh in a setTimeout, otherwise the checkbox state is not up to date.
+    setTimeout(() => refresh(), 1)
+  }
+  refresh()
+}
+
+export {
+  vivifyConfigurationChannel
+}

client/common/configuration/register.ts

@@ -0,0 +1,69 @@
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import { renderConfigurationHome } from './templates/home'
+import { renderConfigurationChannel } from './templates/channel'
+import { vivifyConfigurationChannel } from './logic/channel'
+
+/**
+ * Registers stuff related to the user's configuration pages.
+ * @param clientOptions Peertube client options
+ */
+async function registerConfiguration (clientOptions: RegisterClientOptions): Promise<void> {
+  const { peertubeHelpers, registerClientRoute, registerHook } = clientOptions
+
+  registerClientRoute({
+    route: 'livechat/configuration',
+    onMount: async ({ rootEl }) => {
+      rootEl.innerHTML = await renderConfigurationHome(clientOptions)
+    }
+  })
+
+  registerClientRoute({
+    route: 'livechat/configuration/channel',
+    onMount: async ({ rootEl }) => {
+      const urlParams = new URLSearchParams(window.location.search)
+      const channelId = urlParams.get('channelId') ?? ''
+      const html = await renderConfigurationChannel(clientOptions, channelId)
+      if (!html) {
+        // renderConfigurationChannel has already used the notifier to display an error
+        rootEl.innerHTML = ''
+        return
+      }
+      rootEl.innerHTML = html
+      await vivifyConfigurationChannel(clientOptions, rootEl, channelId)
+    }
+  })
+
+  registerHook({
+    target: 'filter:left-menu.links.create.result',
+    handler: async (links: any) => {
+      // Adding the links to livechat/configuration 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_CONFIGURATION_LABEL)
+      myLibraryLinks.links.push({
+        label,
+        shortLabel: label,
+        path: '/p/livechat/configuration',
+        icon: 'live'
+      })
+      return links
+    }
+  })
+}
+
+export {
+  registerConfiguration
+}

client/common/configuration/templates/channel.ts

@@ -0,0 +1,100 @@
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import type { ChannelConfiguration } from 'shared/lib/types'
+import { getBaseRoute } from '../../../videowatch/uri'
+// Must use require for mustache, import seems buggy.
+const Mustache = require('mustache')
+
+/**
+ * Renders the configuration settings page for a given channel.
+ * @param registerClientOptions Peertube client options
+ * @param channelId The channel id
+ * @returns The page content
+ */
+async function renderConfigurationChannel (
+  registerClientOptions: RegisterClientOptions,
+  channelId: string
+): Promise<string | false> {
+  const { peertubeHelpers } = registerClientOptions
+
+  try {
+    if (!channelId || !/^\d+$/.test(channelId)) {
+      throw new Error('Missing or invalid channel id.')
+    }
+
+    const response = await fetch(
+      getBaseRoute(registerClientOptions) + '/api/configuration/channel/' + encodeURIComponent(channelId),
+      {
+        method: 'GET',
+        headers: peertubeHelpers.getAuthHeader()
+      }
+    )
+    if (!response.ok) {
+      throw new Error('Can\'t get channel configuration options.')
+    }
+    const channelConfiguration: ChannelConfiguration = await (response).json()
+
+    // Basic testing that channelConfiguration has the correct format
+    if ((typeof channelConfiguration !== 'object') || !channelConfiguration.channel) {
+      throw new Error('Invalid channel configuration options.')
+    }
+
+    const view = {
+      title: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_TITLE),
+      description: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_DESC),
+      enableBot: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL),
+      botOptions: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE),
+      forbiddenWords: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL),
+      bannedJIDs: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BANNED_JIDS_LABEL),
+      save: await peertubeHelpers.translate(LOC_SAVE),
+      cancel: await peertubeHelpers.translate(LOC_CANCEL),
+      channelConfiguration
+    }
+
+    return Mustache.render(`
+      <div class="margin-content">
+        <h1>{{title}} {{channelConfiguration.channel.displayName}}</h1>
+        <p>{{description}}</p>
+        <form livechat-configuration-channel-options>
+          <fieldset>
+            <label>
+              <input
+                type="checkbox" name="bot"
+                value="1"
+                {{#channelConfiguration.configuration.bot}}
+                  checked="checked"
+                {{/channelConfiguration.configuration.bot}}
+              />
+              {{enableBot}}
+            </label>
+          </fieldset>
+          <fieldset livechat-configuration-channel-options-bot-enabled>
+            <legend>{{botOptions}}</legend>
+            <label>
+              {{forbiddenWords}}
+<textarea name="forbidden_words">
+{{#channelConfiguration.configuration.forbiddenWords}}{{.}}
+{{/channelConfiguration.configuration.forbiddenWords}}
+</textarea>
+            </label>
+            <label>
+              {{bannedJIDs}}
+<textarea name="banned_jids">
+{{#channelConfiguration.configuration.bannedJIDs}}{{.}}
+{{/channelConfiguration.configuration.bannedJIDs}}
+</textarea>
+            </label>
+          </fieldset>
+          <input type="submit" value="{{save}}" />
+          <input type="reset" value="{{cancel}}" />
+        </form>
+      </div>
+    `, view) as string
+  } catch (err: any) {
+    peertubeHelpers.notifier.error(err.toString())
+    return ''
+  }
+}
+
+export {
+  renderConfigurationChannel
+}

client/common/configuration/templates/home.ts

@@ -0,0 +1,66 @@
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+// Must use require for mustache, import seems buggy.
+const Mustache = require('mustache')
+
+/**
+ * Renders the livechat configuration setup home page.
+ * @param registerClientOptions Peertube client options
+ * @returns The page content
+ */
+async function renderConfigurationHome (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=name',
+      {
+        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.livechatConfigurationUri = '/p/livechat/configuration/channel?channelId=' + encodeURIComponent(channel.id)
+    }
+
+    const view = {
+      title: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_TITLE),
+      description: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_DESC),
+      please_select: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_PLEASE_SELECT),
+      channels: channels.data
+    }
+
+    return Mustache.render(`
+      <div class="margin-content">
+        <h1>{{title}}</h1>
+        <p>{{description}}</p>
+        <h2>{{please_select}}</h2>
+        <ul>
+        {{#channels}}
+          <li>
+            <a href="{{livechatConfigurationUri}}">
+              {{displayName}}
+            </a>
+          </li>
+        {{/channels}}
+        </ul>
+      </div>
+    `, view) as string
+  } catch (err: any) {
+    peertubeHelpers.notifier.error(err.toString())
+    return ''
+  }
+}
+
+export {
+  renderConfigurationHome
+}