Links to online documentation:

* Adding a help button on top of the chat, that links to the online documentation on frama.io.
* Replaced github.io documentation links by frama.io documentation.
* Adding links to the documentation in the diagnostic tool.

client/@types/global.d.ts

@@ -3,6 +3,7 @@ declare const PLUGIN_CHAT_SHORT_NAME: string
 
 // Constants that begins with "LOC_" are loaded by build-client.js, reading the english locale file.
 // See the online documentation: https://johnxlivingston.github.io/peertube-plugin-livechat/contributing/translate/
+declare const LOC_ONLINE_HELP: string
 declare const LOC_OPEN_CHAT: string
 declare const LOC_OPEN_CHAT_NEW_WINDOW: string
 declare const LOC_CLOSE_CHAT: string

client/settings.ts

@@ -1,6 +1,10 @@
 interface MessageWithLevel {
   level: 'info' | 'warning' | 'error'
   message: string
+  help?: {
+    url: string
+    text: string
+  }
 }
 
 interface Result {
@@ -63,8 +67,15 @@ function launchTests (): void {
           } else if (message.level === 'error') {
             messageSpan.style.color = 'red'
           }
-          messageSpan.textContent = message.message
+          messageSpan.textContent = message.message + ' ' // adding a space, in case there is a help button
           messageLi.append(messageSpan)
+
+          if (message.help) {
+            const helpButton = document.createElement('a')
+            helpButton.href = message.help.url
+            helpButton.textContent = message.help.text
+            messageLi.append(helpButton)
+          }
         }
         messageUl.append(messageLi)
       }

client/videowatch-client-plugin.ts

@@ -1,8 +1,9 @@
 import type { Video } from '@peertube/peertube-types'
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { videoHasWebchat, videoHasRemoteWebchat } from 'shared/lib/video'
+import { helpUrl } from 'shared/lib/help'
 import { logger } from './videowatch/logger'
-import { closeSVG, openBlankChatSVG, openChatSVG, shareChatUrlSVG } from './videowatch/buttons'
+import { closeSVG, openBlankChatSVG, openChatSVG, shareChatUrlSVG, helpButtonSVG } from './videowatch/buttons'
 import { displayButton, displayButtonOptions } from './videowatch/button'
 import { shareChatUrl } from './videowatch/share'
 import { getIframeUri } from './videowatch/uri'
@@ -79,12 +80,14 @@ function register (registerOptions: RegisterClientOptions): void {
         peertubeHelpers.translate(LOC_OPEN_CHAT),
         peertubeHelpers.translate(LOC_OPEN_CHAT_NEW_WINDOW),
         peertubeHelpers.translate(LOC_CLOSE_CHAT),
-        peertubeHelpers.translate(LOC_SHARE_CHAT_LINK)
+        peertubeHelpers.translate(LOC_SHARE_CHAT_LINK),
+        peertubeHelpers.translate(LOC_ONLINE_HELP)
       ]).then(labels => {
         const labelOpen = labels[0]
         const labelOpenBlank = labels[1]
         const labelClose = labels[2]
         const labelShareUrl = labels[3]
+        const labelHelp = labels[4]
 
         const iframeUri = getIframeUri(registerOptions, settings, video)
         if (!iframeUri) {
@@ -130,6 +133,17 @@ function register (registerOptions: RegisterClientOptions): void {
             additionalClasses: []
           })
         }
+        groupButtons.push({
+          buttonContainer,
+          name: 'help',
+          label: labelHelp,
+          href: helpUrl({
+            page: 'documentation/user/viewers'
+          }),
+          targetBlank: true,
+          icon: helpButtonSVG,
+          additionalClasses: []
+        })
 
         // If more than one groupButtons:
         // - the first must have class 'peertube-plugin-livechat-multi-button-main'

client/videowatch/button.ts

@@ -1,38 +1,49 @@
 import type { SVGButton } from './buttons'
 import { logger } from './logger'
 
-interface displayButtonOptions {
+interface displayButtonOptionsBase {
   buttonContainer: HTMLElement
   name: string
   label: string
-  callback: () => void | boolean
   icon?: SVGButton
   additionalClasses?: string[]
 }
 
-function displayButton ({
-  name,
-  label,
-  callback,
-  buttonContainer,
-  additionalClasses,
-  icon
-}: displayButtonOptions): void {
+interface displayButtonOptionsCallback extends displayButtonOptionsBase {
+  callback: () => void | boolean
+}
+
+interface displayButtonOptionsHref extends displayButtonOptionsBase {
+  href: string
+  targetBlank?: boolean
+}
+
+type displayButtonOptions = displayButtonOptionsCallback | displayButtonOptionsHref
+
+function displayButton (dbo: displayButtonOptions): void {
   const button = document.createElement('a')
   button.classList.add(
     'orange-button', 'peertube-button-link',
     'peertube-plugin-livechat-button',
-    'peertube-plugin-livechat-button-' + name
+    'peertube-plugin-livechat-button-' + dbo.name
   )
-  if (additionalClasses) {
-    for (let i = 0; i < additionalClasses.length; i++) {
-      button.classList.add(additionalClasses[i])
+  if (dbo.additionalClasses) {
+    for (let i = 0; i < dbo.additionalClasses.length; i++) {
+      button.classList.add(dbo.additionalClasses[i])
     }
   }
-  button.onclick = callback
-  if (icon) {
+  if ('callback' in dbo) {
+    button.onclick = dbo.callback
+  }
+  if ('href' in dbo) {
+    button.href = dbo.href
+  }
+  if (('targetBlank' in dbo) && dbo.targetBlank) {
+    button.target = '_blank'
+  }
+  if (dbo.icon) {
     try {
-      const svg = icon()
+      const svg = dbo.icon()
       const tmp = document.createElement('span')
       tmp.innerHTML = svg.trim()
       const svgDom = tmp.firstChild
@@ -40,14 +51,14 @@ function displayButton ({
         button.prepend(svgDom)
       }
     } catch (err) {
-      logger.error('Failed to generate the ' + name + ' button: ' + (err as string))
+      logger.error('Failed to generate the ' + dbo.name + ' button: ' + (err as string))
     }
 
-    button.setAttribute('title', label)
+    button.setAttribute('title', dbo.label)
   } else {
-    button.textContent = label
+    button.textContent = dbo.label
   }
-  buttonContainer.append(button)
+  dbo.buttonContainer.append(button)
 }
 
 export type {

client/videowatch/buttons.ts

@@ -99,11 +99,24 @@ const shareChatUrlSVG: SVGButton = () => {
 `
 }
 
+const helpButtonSVG: SVGButton = () => {
+  // This content comes from the file assets/images/help.svg, after svgo cleaning.
+  // To get the formated content, you can do:
+  // xmllint dist/client/images/url.svg --format
+  // Then replace the color by `currentColor`
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.233 4.233">
+  <path style="display:inline;opacity:.998;fill:none;fill-opacity:1;stroke:currentColor;stroke-width:.529167;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M1.48 1.583V.86c0-.171.085-.31.19-.31h.893c.106 0 .19.139.19.31v.838c0 .171-.107.219-.19.284l-.404.314c-.136.106-.219.234-.221.489l-.003.247"/>
+  <path style="display:inline;fill:currentColor;stroke-width:.235169" d="M1.67 3.429h.529v.597H1.67z"/>
+</svg>
+`
+}
+
 export {
   closeSVG,
   openChatSVG,
   openBlankChatSVG,
-  shareChatUrlSVG
+  shareChatUrlSVG,
+  helpButtonSVG
 }
 export type {
   SVGButton