Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply Element language to Jitsi Widget #23412

Closed
wants to merge 4 commits into from
Closed

Apply Element language to Jitsi Widget #23412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d9431e0
Translate jitsi widget
Fox32 May 24, 2022
5c3dcd1
Merge branch 'develop' into nic/feat/jitsi-translate
Fox32 Feb 22, 2023
670df1c
Fix translation file
Fox32 Feb 22, 2023
1fa3e28
Fix missing return types
Fox32 Feb 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/i18n/strings/de_DE.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,8 @@
"Use %(brand)s on mobile": "Verwende %(brand)s am Handy",
"Decentralised, encrypted chat & collaboration powered by $matrixLogo": "Dezentralisierter, verschlüsselter Chat & Zusammenarbeit unterstützt von $matrixLogo",
"%(appName)s: %(browserName)s on %(osName)s": "%(appName)s: %(browserName)s auf %(osName)s",
"%(brand)s Desktop: %(platformName)s": "%(brand)s Desktop: %(platformName)s"
"%(brand)s Desktop: %(platformName)s": "%(brand)s Desktop: %(platformName)s",
"Failed to load Jitsi widget": "Das Jitsi Widget konnte nicht geladen werden",
"Jitsi Video Conference": "Videokonferenz",
"Join Conference": "Videokonferenz beitreten"
}
5 changes: 4 additions & 1 deletion src/i18n/strings/en_EN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,8 @@
"Decentralised, encrypted chat & collaboration powered by $matrixLogo": "Decentralised, encrypted chat & collaboration powered by $matrixLogo",
"Sign In": "Sign In",
"Create Account": "Create Account",
"Explore rooms": "Explore rooms"
"Explore rooms": "Explore rooms",
"Failed to load Jitsi widget": "Failed to load Jitsi widget",
"Join Conference": "Join Conference",
"Jitsi Video Conference": "Jitsi Video Conference"
}
2 changes: 1 addition & 1 deletion src/vector/jitsi/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div class="joinConferenceFloating">
<div class="joinConferencePrompt">
<span class="icon"><!-- managed by CSS --></span>
<!-- TODO: i18n -->
<!-- The following texts is replaced with the translations at runtime -->
<h2>Jitsi Video Conference</h2>
<div id="widgetActionContainer">
<button type="button" id="joinButton">Join Conference</button>
Expand Down
14 changes: 12 additions & 2 deletions src/vector/jitsi/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we'll have to double check that this doesn't cause the bundle to rapidly expand, as it was a major concern last time we tried to add translations to the widget.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, sadly I would say the bundle sizes explodes: From 400k to 6mb…

It pulls in the whole matrix-react-sdk, which is huge.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Related: #12839

Copy link
Contributor Author

@Fox32 Fox32 Oct 6, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tree Shaking would be great, but that is not an easy change. Not sure if can refactor the language handler to be better useable. Building a custom translation solution for this widget doesn't feel right. I guess we have to postpone this PR.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we can better isolate the language handling code, I think that would be good. From inspecting the bundle it appears to be pulling in the js-sdk and a bunch of its dependencies, which would explain the size (the obvious indicator was the EventType enum).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this will all be because of the SettingsStore call in the language functions

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not just SettingsStore, ModuleRunner also pulls everything in. If I remove both, the bundle size is back to the previous size.

The good thing is that we don't need to read/write the settings for the Jitsi widget. It would be good if the SettingsStore was just a wrapper interface around an actual implementation, either as a NoopSettingsStore for the Jitsi Widget, or the full store for the rest? The actual implementation could be inserted on startup. What do you think?

For ModuleRunner, I guess the problem comes from ProxiedModuleApi, but I haven't discovered the exact problem yet.

import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject";
import { ElementWidgetCapabilities } from "matrix-react-sdk/src/stores/widgets/ElementWidgetCapabilities";

Expand Down Expand Up @@ -187,6 +188,8 @@ const setupCompleted = (async (): Promise<string | void> => {
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");
Expand Down Expand Up @@ -229,10 +232,17 @@ const setupCompleted = (async (): Promise<string | void> => {
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): Promise<void> {
await setLanguage(language);

document.getElementById("joinButton").textContent = _t("Join Conference");
document.querySelector(".joinConferencePrompt > h2").textContent = _t("Jitsi Video Conference");
}

function enableJoinButton(): void {
document.getElementById("joinButton").onclick = (): void => joinConference();
}
Expand Down Expand Up @@ -352,7 +362,7 @@ function joinConference(audioInput?: string | null, videoInput?: string | null):
// 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();
Expand Down