Translate jitsi widget

Signed-off-by: Oliver Sand <oliver.sand@nordeck.net>

Author: Fox32

src/i18n/strings/de_DE.json

@@ -17,6 +17,9 @@
     "Failed to start": "Start fehlgeschlagen",
     "%(brand)s Desktop (%(platformName)s)": "%(brand)s Desktop (%(platformName)s)",
     "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
+    "Failed to load Jitsi widget": "Das Jitsi Widget konnte nicht geladen werden",
+    "Jitsi Video Conference": "Videokonferenz",
+    "Join Conference": "Videokonferenz beitreten",
     "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Bitte installiere <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink> oder <safariLink>Safari</safariLink> für das beste Erlebnis.",
     "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Du kannst deinen aktuellen Browser weiterhin verwenden. Es ist aber möglich, dass nicht alles richtig funktioniert oder das Aussehen der App inkorrekt ist.",
     "I understand the risks and wish to continue": "Ich verstehe die Risiken und möchte fortfahren",

src/i18n/strings/en_EN.json

@@ -14,6 +14,9 @@
     "Go to your browser to complete Sign In": "Go to your browser to complete Sign In",
     "Unknown device": "Unknown device",
     "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
+    "Failed to load Jitsi widget": "Failed to load Jitsi widget",
+    "Join Conference": "Join Conference",
+    "Jitsi Video Conference": "Jitsi Video Conference",
     "Powered by Matrix": "Powered by Matrix",
     "Use %(brand)s on mobile": "Use %(brand)s on mobile",
     "Unsupported browser": "Unsupported browser",

src/vector/jitsi/index.html

@@ -10,7 +10,6 @@
     <div class="joinConferenceFloating">
         <div class="joinConferencePrompt">
             <span class="icon"><!-- managed by CSS --></span>
-            <!-- TODO: i18n -->
             <h2>Jitsi Video Conference</h2>
             <div id="widgetActionContainer">
                 <button type="button" id="joinButton">Join Conference</button>

src/vector/jitsi/index.ts

@@ -27,6 +27,7 @@ import {
 import { ElementWidgetActions } from "matrix-react-sdk/src/stores/widgets/ElementWidgetActions";
 import { logger } from "matrix-js-sdk/src/logger";
 import { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
+import { _t, setLanguage } from "matrix-react-sdk/src/languageHandler";
 import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject";
 
 import { getVectorConfig } from "../getconfig";
@@ -56,6 +57,7 @@ let roomName: string;
 let startAudioOnly: boolean;
 let isVideoChannel: boolean;
 let supportsScreensharing: boolean;
+let language: string;
 
 let widgetApi: WidgetApi;
 let meetApi: any; // JitsiMeetExternalAPI
@@ -85,6 +87,7 @@ const setupCompleted = (async () => {
         const parentUrl = qsParam('parentUrl', true);
         const widgetId = qsParam('widgetId', true);
         const theme = qsParam('theme', true);
+        language = qsParam('language', true) ?? 'en';
 
         if (theme) {
             document.body.classList.add(`theme-${theme.replace(" ", "_")}`);
@@ -177,6 +180,8 @@ const setupCompleted = (async () => {
             logger.warn("No parent URL or no widget ID - assuming no widget API is available");
         }
 
+        await applyTranslation(language);
+
         // Populate the Jitsi params now
         jitsiDomain = qsParam('conferenceDomain');
         conferenceId = qsParam('conferenceId');
@@ -219,10 +224,17 @@ const setupCompleted = (async () => {
         enableJoinButton(); // always enable the button
     } catch (e) {
         logger.error("Error setting up Jitsi widget", e);
-        document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";
+        document.getElementById("widgetActionContainer").innerText = _t("Failed to load Jitsi widget");
     }
 })();
 
+async function applyTranslation(language: string) {
+    await setLanguage(language);
+
+    document.getElementById("joinButton").textContent = _t("Join Conference");
+    document.querySelector(".joinConferencePrompt > h2").textContent = _t("Jitsi Video Conference");
+}
+
 function enableJoinButton() {
     document.getElementById("joinButton").onclick = () => joinConference();
 }
@@ -321,7 +333,7 @@ function joinConference(audioInput?: string | null, videoInput?: string | null)
         if (!openIdToken?.access_token) { // eslint-disable-line camelcase
             // We've failing to get a token, don't try to init conference
             logger.warn('Expected to have an OpenID credential, cannot initialize widget.');
-            document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";
+            document.getElementById("widgetActionContainer").innerText = _t("Failed to load Jitsi widget");
             return;
         }
         jwt = createJWTToken();
@@ -367,6 +379,7 @@ function joinConference(audioInput?: string | null, videoInput?: string | null)
             apiLogLevels: ["warn", "error"],
         } as any,
         jwt: jwt,
+        lang: language,
     };
 
     // Video channel widgets need some more tailored config options