Localized help urls:

Links to documentation are now using the front-end language to point to the translated documentation page
(except for some links generated from the backend, in the diagnostic tool for example).

Partial fix for #224.

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 * ConverseJS v10.1.6 (instead of v10.0.0).
 * New polish translation (Thanks [ewm](https://weblate.framasoft.org/user/ewm/)).
+* Links to documentation are now using the front-end language to point to the translated documentation page (except for some links generated from the backend, in the diagnostic tool for example).
 
 ## 7.2.2
 

build-languages.js

@@ -121,6 +121,14 @@ class BuildLanguages {
     console.log('Writing JSON files...')
     for (const l of this.langs) {
       const filePath = path.resolve(this.destinationDir, l + '.json')
+      // Waiting for this to be implemented:
+      // https://github.com/Chocobozzz/PeerTube/issues/5904
+      // (also see https://github.com/JohnXLivingston/peertube-plugin-livechat/issues/224)
+      // we are adding a special entry with the language key, so we can use frontend
+      // translation function to get the path for localized documentation.
+      // See frontend getLangCode and localizedHelpUrl functions.
+      const content = this.translationsStrings[l]
+      content['_language'] = l
       await fs.promises.writeFile(filePath, JSON.stringify(this.translationsStrings[l]))
     }
   }

client/utils/help.ts

@@ -0,0 +1,37 @@
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import { helpUrl } from 'shared/lib/help'
+
+/**
+ * Returns the current language code.
+ * This is the code that correspond to the path for localized documentation
+ * (in other words: 'fr', not 'fr-FR')
+ * @param clientOptions client options
+ * @returns language code
+ */
+async function getLangCode ({ peertubeHelpers }: RegisterClientOptions): Promise<string> {
+  // See the build-languages.js script for more information about this trick.
+  const s = await peertubeHelpers.translate('_language')
+  if (s === '_language') {
+    return 'en'
+  }
+  return s
+}
+
+/**
+ * Returns the url of the documentation, in the current user language.
+ * @param clientOptions client options
+ */
+async function localizedHelpUrl (
+  clientOptions: RegisterClientOptions,
+  helpUrlOptions: Parameters<typeof helpUrl>[0]
+): Promise<string> {
+  const lang = (await getLangCode(clientOptions)).toLowerCase() // lowercase is needed for zh-hans for example
+  if (lang === 'en') {
+    return helpUrl(helpUrlOptions)
+  }
+  return helpUrl(Object.assign({}, helpUrlOptions, { lang }))
+}
+
+export {
+  localizedHelpUrl
+}

client/videowatch-client-plugin.ts

@@ -1,7 +1,7 @@
 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 { localizedHelpUrl } from './utils/help'
 import { logger } from './videowatch/logger'
 import { closeSVG, openBlankChatSVG, openChatSVG, shareChatUrlSVG, helpButtonSVG } from './videowatch/buttons'
 import { displayButton, displayButtonOptions } from './videowatch/button'
@@ -74,6 +74,9 @@ function register (registerOptions: RegisterClientOptions): void {
     container: HTMLElement, video: Video, showOpenBlank: boolean, showShareUrlButton: boolean
   ): Promise<void> {
     logger.log('Adding livechat in the DOM...')
+    const viewersDocumentationHelpUrl = await localizedHelpUrl(registerOptions, {
+      page: 'documentation/user/viewers'
+    })
     const p = new Promise<void>((resolve, reject) => {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       Promise.all([
@@ -137,9 +140,7 @@ function register (registerOptions: RegisterClientOptions): void {
           buttonContainer,
           name: 'help',
           label: labelHelp,
-          href: helpUrl({
-            page: 'documentation/user/viewers'
-          }),
+          href: viewersDocumentationHelpUrl,
           targetBlank: true,
           icon: helpButtonSVG,
           additionalClasses: []

client/videowatch/share.ts

@@ -4,7 +4,7 @@ import { helpButtonSVG } from './buttons'
 import { logger } from './logger'
 import { getIframeUri, getXMPPAddr, UriOptions } from './uri'
 import { isAutoColorsAvailable } from 'shared/lib/autocolors'
-import { helpUrl } from 'shared/lib/help'
+import { localizedHelpUrl } from '../utils/help'
 
 interface ShareForm {
   shareString: HTMLInputElement
@@ -25,6 +25,10 @@ interface ShareForm {
 async function shareChatUrl (registerOptions: RegisterClientOptions, settings: any, video: Video): Promise<void> {
   const peertubeHelpers = registerOptions.peertubeHelpers
 
+  const streamersHelpUrl = await localizedHelpUrl(registerOptions, {
+    page: 'documentation/user/streamers'
+  })
+
   const [
     labelShare,
     labelWeb,
@@ -92,9 +96,7 @@ async function shareChatUrl (registerOptions: RegisterClientOptions, settings: a
       divShareString.append(openButton)
 
       const helpButton = document.createElement('a')
-      helpButton.href = helpUrl({
-        page: 'documentation/user/streamers'
-      })
+      helpButton.href = streamersHelpUrl
       helpButton.target = '_blank'
       helpButton.innerHTML = helpButtonSVG()
       helpButton.title = labelHelp