Localization refactoring:

* the front-end now use global constants, based on the translation key
* build-client.js use the ESBuild "define" directive to replace these
  globals at compile time, by the english value
* build:client must now be called after build:languages
* moving the loadLoc and loc backend functions in a separate lib

client/@types/global.d.ts

@@ -1,2 +1,31 @@
 declare const PLUGIN_CHAT_PACKAGE_NAME: string
 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_OPEN_CHAT: string
+declare const LOC_OPEN_CHAT_NEW_WINDOW: string
+declare const LOC_CLOSE_CHAT: string
+declare const LOC_USE_CHAT: string
+declare const LOC_USE_CHAT_HELP: string
+declare const LOC_SHARE_CHAT_LINK: string
+declare const LOC_READ_ONLY: string
+declare const LOC_SHOW_SCROLLBARR: string
+declare const LOC_TRANSPARENT_BACKGROUND: string
+declare const LOC_TIPS_FOR_STREAMERS: string
+declare const LOC_COPY: string
+declare const LOC_LINK_COPIED: string
+declare const LOC_ERROR: string
+declare const LOC_OPEN: string
+declare const LOC_USE_CURRENT_THEME_COLOR: string
+declare const LOC_GENERATE_IFRAME: string
+declare const LOC_CHAT_FOR_LIVE_STREAM: string
+declare const LOC_ROOM_NAME: string
+declare const LOC_ROOM_DESCRIPTION: string
+declare const LOC_NOT_FOUND: string
+declare const LOC_VIDEO: string
+declare const LOC_CHANNEL: string
+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

client/admin-plugin-client-plugin.ts

@@ -100,12 +100,12 @@ function register ({ registerHook, registerSettingsScript, peertubeHelpers }: Re
               table.classList.add('peertube-plugin-livechat-prosody-list-rooms')
               container.append(table)
               const labels: any = {
-                RoomName: await peertubeHelpers.translate('Room name'),
-                RoomDescription: await peertubeHelpers.translate('Room description'),
-                NotFound: await peertubeHelpers.translate('Not found'),
-                Video: await peertubeHelpers.translate('Video'),
-                Channel: await peertubeHelpers.translate('Channel'),
-                LastActivity: await peertubeHelpers.translate('Last activity')
+                RoomName: await peertubeHelpers.translate(LOC_ROOM_NAME),
+                RoomDescription: await peertubeHelpers.translate(LOC_ROOM_DESCRIPTION),
+                NotFound: await peertubeHelpers.translate(LOC_NOT_FOUND),
+                Video: await peertubeHelpers.translate(LOC_VIDEO),
+                Channel: await peertubeHelpers.translate(LOC_CHANNEL),
+                LastActivity: await peertubeHelpers.translate(LOC_LAST_ACTIVITY)
               }
 
               const titleLineEl = document.createElement('tr')

client/common-client-plugin.ts

@@ -22,8 +22,8 @@ async function register ({ peertubeHelpers, registerHook, registerVideoField }:
   })
 
   const [label, description, settings] = await Promise.all([
-    peertubeHelpers.translate('Use chat'),
-    peertubeHelpers.translate('If enabled, there will be a chat next to the video.'),
+    peertubeHelpers.translate(LOC_USE_CHAT),
+    peertubeHelpers.translate(LOC_USE_CHAT_HELP),
     peertubeHelpers.getSettings()
   ])
   const webchatFieldOptions: RegisterClientFormFieldOptions = {

client/videowatch-client-plugin.ts

@@ -76,10 +76,10 @@ function register (registerOptions: RegisterClientOptions): void {
     const p = new Promise<void>((resolve, reject) => {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       Promise.all([
-        peertubeHelpers.translate('Open chat'),
-        peertubeHelpers.translate('Open chat in a new window'),
-        peertubeHelpers.translate('Close chat'),
-        peertubeHelpers.translate('Share chat link')
+        peertubeHelpers.translate(LOC_OPEN_CHAT),
+        peertubeHelpers.translate(LOC_OPEN_CHAT_NEW_WINDOW),
+        peertubeHelpers.translate(LOC_CLOSE_CHAT),
+        peertubeHelpers.translate(LOC_SHARE_CHAT_LINK)
       ]).then(labels => {
         const labelOpen = labels[0]
         const labelOpenBlank = labels[1]

client/videowatch/share.ts

@@ -40,23 +40,21 @@ async function shareChatUrl (registerOptions: RegisterClientOptions, settings: a
     labelGenerateIframe,
     labelChatFor
   ] = await Promise.all([
-    peertubeHelpers.translate('Share chat link'),
-    peertubeHelpers.translate('Web'),
-    peertubeHelpers.translate('Connect using XMPP'),
-    // eslint-disable-next-line max-len
-    peertubeHelpers.translate('You can connect to the room using an external XMPP account, and your favorite XMPP client.'),
-    peertubeHelpers.translate('Read-only'),
-    peertubeHelpers.translate('Show the scrollbar'),
-    peertubeHelpers.translate('Transparent background (for stream integration, with OBS for example)'),
-    // eslint-disable-next-line max-len
-    peertubeHelpers.translate('Tips for streamers: To add the chat to your OBS, generate a read-only link and use it as a browser source.'),
-    peertubeHelpers.translate('Copy'),
-    peertubeHelpers.translate('Link copied'),
-    peertubeHelpers.translate('Error'),
-    peertubeHelpers.translate('Open'),
-    peertubeHelpers.translate('Use current theme colors'),
-    peertubeHelpers.translate('Generate an iframe to embed the chat in a website'),
-    peertubeHelpers.translate('Chat for live stream:')
+    peertubeHelpers.translate(LOC_SHARE_CHAT_LINK),
+    peertubeHelpers.translate(LOC_WEB),
+    peertubeHelpers.translate(LOC_CONNECT_USING_XMPP),
+    peertubeHelpers.translate(LOC_CONNECT_USING_XMPP_HELP),
+    peertubeHelpers.translate(LOC_READ_ONLY),
+    peertubeHelpers.translate(LOC_SHOW_SCROLLBARR),
+    peertubeHelpers.translate(LOC_TRANSPARENT_BACKGROUND),
+    peertubeHelpers.translate(LOC_TIPS_FOR_STREAMERS),
+    peertubeHelpers.translate(LOC_COPY),
+    peertubeHelpers.translate(LOC_LINK_COPIED),
+    peertubeHelpers.translate(LOC_ERROR),
+    peertubeHelpers.translate(LOC_OPEN),
+    peertubeHelpers.translate(LOC_USE_CURRENT_THEME_COLOR),
+    peertubeHelpers.translate(LOC_GENERATE_IFRAME),
+    peertubeHelpers.translate(LOC_CHAT_FOR_LIVE_STREAM)
   ])
 
   const defaultUri = getIframeUri(registerOptions, settings, video)