imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use a local widget wrapper for Jitsi calls

Browse source 
Effectively fixes https://github.com/vector-im/riot-web/issues/11074
Effectively fixes https://github.com/vector-im/riot-web/issues/7112
Fixes https://github.com/vector-im/riot-web/issues/6930
Fixes Jitsi widgets not working for guests (https://github.com/vector-im/riot-web/issues/8933)
Fixes https://github.com/vector-im/riot-web/issues/5048

Previously we were relying on an integration manager to be defined, functional, and alive in order to join Jitsi calls. This commit changes this so we aren't reliant on an integration manager for Jitsi calls at all, and gives people the option of choosing a Jitsi server via the config.json.

This side is just the wrapper/shell: the logic is mostly in the react-sdk (to be linked via PRs). This layer simply has an HTML file exported that can be used to render a Jitsi widget, and the react-sdk constructs a URL to access it locally. This is similar to how the mobile apps handle Jitsi widgets: instead of iframing the widget URL directly into the app, they pull apart the widget information and natively render it. We're effectively doing the same here by parsing the widget options and using our local wrapper instead of whatever happens to be defined in the widget state event.

Integration managers should still continue to offer a widget URL for Jitsi widgets as this is what the spec requires.

A large part of this is based upon Dimension's handling of Jitsi and widgets in general: a license has been granted to allow Riot (and therefore the react-sdk) to use the code and be inspired by it.
This commit is contained in:
Travis Ralston 2020-03-18 15:47:56 -06:00
parent 7296b704a8
commit e1eb16ce46
8 changed files with 308 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/vector/app.js
View file

@ -39,9 +39,6 @@ import url from 'url';
import {parseQs, parseQsFromFragment} from './url_utils';
import ElectronPlatform from './platform/ElectronPlatform';
import WebPlatform from './platform/WebPlatform';
import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg';
import SettingsStore from "matrix-react-sdk/src/settings/SettingsStore";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
@ -50,6 +47,7 @@ import {setTheme} from "matrix-react-sdk/src/theme";
import Olm from 'olm';
import CallHandler from 'matrix-react-sdk/src/CallHandler';
import {loadConfig, preparePlatform} from "./initial-load";
let lastLocationHashSet = null;
@ -191,35 +189,11 @@ export async function loadApp() {
await loadOlm();
// set the platform for react sdk
if (window.ipcRenderer) {
console.log("Using Electron platform");
const plaf = new ElectronPlatform();
PlatformPeg.set(plaf);
} else {
console.log("Using Web platform");
PlatformPeg.set(new WebPlatform());
}
preparePlatform();
const platform = PlatformPeg.get();
let configJson;
let configError;
let configSyntaxError = false;
try {
configJson = await platform.getConfig();
} catch (e) {
configError = e;
if (e && e.err && e.err instanceof SyntaxError) {
console.error("SyntaxError loading config:", e);
configSyntaxError = true;
configJson = {}; // to prevent errors between here and loading CSS for the error box
}
}
// XXX: We call this twice, once here and once in MatrixChat as a prop. We call it here to ensure
// granular settings are loaded correctly and to avoid duplicating the override logic for the theme.
SdkConfig.put(configJson);
// Load the config from the platform
const configInfo = await loadConfig();
// Load language after loading config.json so that settingsDefaults.language can be applied
await loadLanguage();
@ -248,7 +222,7 @@ export async function loadApp() {
await setTheme();
// Now that we've loaded the theme (CSS), display the config syntax error if needed.
if (configSyntaxError) {
if (configInfo.configSyntaxError) {
const errorMessage = (
<div>
<p>
@ -260,7 +234,7 @@ export async function loadApp() {
<p>
{_t(
"The message from the parser is: %(message)s",
{message: configError.err.message || _t("Invalid JSON")},
{message: configInfo.configError.err.message || _t("Invalid JSON")},
)}
</p>
</div>
@ -280,7 +254,7 @@ export async function loadApp() {
const urlWithoutQuery = window.location.protocol + '//' + window.location.host + window.location.pathname;
console.log("Vector starting at " + urlWithoutQuery);
if (configError) {
if (configInfo.configError) {
window.matrixChat = ReactDOM.render(<div className="error">
Unable to load config file: please refresh the page to try again.
</div>, document.getElementById('matrixchat'));
@ -298,7 +272,7 @@ export async function loadApp() {
config={newConfig}
realQueryParams={params}
startingFragmentQueryParams={fragparts.params}
enableGuest={!configJson.disable_guests}
enableGuest={!SdkConfig.get().disable_guests}
onTokenLoginCompleted={onTokenLoginCompleted}
initialScreenAfterLogin={getScreenFromLocation(window.location)}
defaultDeviceDisplayName={platform.getDefaultDeviceDisplayName()}