Help button.

CHANGELOG.md

@@ -7,6 +7,7 @@
 * Channel configuration:
   * Fix dark mode for buttons.
   * Fix buttons margin.
+* Help button on top of the "channels" page.
 
 ## 8.0.0
 

client/common/configuration/templates/home.mustache

@@ -1,5 +1,8 @@
 <div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
-  <h1>{{title}}</h1>
+  <h1>
+    {{title}}
+    {{{helpButton}}}
+  </h1>
   <p>{{description}}</p>
   <p>{{please_select}}</p>
   <ul class="peertube-plugin-livechat-configuration-home-channels">

client/common/configuration/templates/home.ts

@@ -1,4 +1,6 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import { localizedHelpUrl } from '../../../utils/help'
+import { helpButtonSVG } from '../../../videowatch/buttons'
 // Must use require for mustache, import seems buggy.
 const Mustache = require('mustache')
 
@@ -40,6 +42,8 @@ async function renderConfigurationHome (registerClientOptions: RegisterClientOpt
       channels: channels.data
     }
 
+    await _fillViewHelpButtons(registerClientOptions, view)
+
     return Mustache.render(MUSTACHE_CONFIGURATION_HOME, view) as string
   } catch (err: any) {
     peertubeHelpers.notifier.error(err.toString())
@@ -47,6 +51,28 @@ async function renderConfigurationHome (registerClientOptions: RegisterClientOpt
   }
 }
 
+async function _fillViewHelpButtons ( // TODO: refactor with the similar function in channel.ts
+  registerClientOptions: RegisterClientOptions,
+  view: any
+): Promise<void> {
+  const title = await registerClientOptions.peertubeHelpers.translate(LOC_ONLINE_HELP)
+
+  const button = async (page: string): Promise<string> => {
+    const helpUrl = await localizedHelpUrl(registerClientOptions, {
+      page
+    })
+    const helpIcon = helpButtonSVG()
+    return `<a
+        href="${helpUrl}"
+        target=_blank
+        title="${title}"
+        class="orange-button peertube-button-link"
+      >${helpIcon}</a>`
+  }
+
+  view.helpButton = await button('documentation/user/streamers/channel')
+}
+
 export {
   renderConfigurationHome
 }