mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

Merge branch 'develop' into patch-3

Browse source
This commit is contained in:
Matthew Hodgson 2019-10-20 11:44:38 +01:00 • committed by GitHub
commit 4e619b1693
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
881 changed files with 18298 additions and 40505 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/vector/getconfig.js Normal file
View file

@ -0,0 +1,71 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import Promise from 'bluebird';
import request from 'browser-request';
// Load the config file. First try to load up a domain-specific config of the
// form "config.$domain.json" and if that fails, fall back to config.json.
export async function getVectorConfig(relativeLocation) {
if (relativeLocation === undefined) relativeLocation = '';
if (relativeLocation !== '' && !relativeLocation.endsWith('/')) relativeLocation += '/';
try {
const configJson = await getConfig(`${relativeLocation}config.${document.domain}.json`);
// 404s succeed with an empty json config, so check that there are keys
if (Object.keys(configJson).length === 0) {
throw new Error(); // throw to enter the catch
}
return configJson;
} catch (e) {
return await getConfig(relativeLocation + "config.json");
}
}
function getConfig(configJsonFilename) {
return new Promise(function(resolve, reject) {
request(
{ method: "GET", url: configJsonFilename, qs: { cachebuster: Date.now() } },
(err, response, body) => {
try {
if (err || response.status < 200 || response.status >= 300) {
// Lack of a config isn't an error, we should
// just use the defaults.
// Also treat a blank config as no config, assuming
// the status code is 0, because we don't get 404s
// from file: URIs so this is the only way we can
// not fail if the file doesn't exist when loading
// from a file:// URI.
if (response) {
if (response.status == 404 || (response.status == 0 && body == '')) {
resolve({});
}
}
reject({err: err, response: response});
return;
}
// We parse the JSON ourselves rather than use the JSON
// parameter, since this throws a parse error on empty
// which breaks if there's no config.json and we're
// loading from the filesystem (see above).
resolve(JSON.parse(body));
} catch (e) {
reject({err: e});
}
},
);
});
}

53
src/vector/index.html
View file

@ -3,25 +3,25 @@
<head>
<meta charset="utf-8">
<title>Riot</title>
<link rel="apple-touch-icon" sizes="57x57" href="vector-icons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="vector-icons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="vector-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="vector-icons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="vector-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="vector-icons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="vector-icons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="vector-icons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="vector-icons/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="57x57" href="<%= require('../../res/vector-icons/apple-touch-icon-57x57.png') %>">
<link rel="apple-touch-icon" sizes="60x60" href="<%= require('../../res/vector-icons/apple-touch-icon-60x60.png') %>">
<link rel="apple-touch-icon" sizes="72x72" href="<%= require('../../res/vector-icons/apple-touch-icon-72x72.png') %>">
<link rel="apple-touch-icon" sizes="76x76" href="<%= require('../../res/vector-icons/apple-touch-icon-76x76.png') %>">
<link rel="apple-touch-icon" sizes="114x114" href="<%= require('../../res/vector-icons/apple-touch-icon-114x114.png') %>">
<link rel="apple-touch-icon" sizes="120x120" href="<%= require('../../res/vector-icons/apple-touch-icon-120x120.png') %>">
<link rel="apple-touch-icon" sizes="144x144" href="<%= require('../../res/vector-icons/apple-touch-icon-144x144.png') %>">
<link rel="apple-touch-icon" sizes="152x152" href="<%= require('../../res/vector-icons/apple-touch-icon-152x152.png') %>">
<link rel="apple-touch-icon" sizes="180x180" href="<%= require('../../res/vector-icons/apple-touch-icon-180x180.png') %>">
<link rel="manifest" href="manifest.json">
<meta name="referrer" content="no-referrer">
<link rel="shortcut icon" href="vector-icons/favicon.ico">
<link rel="shortcut icon" href="<%= require('../../res/vector-icons/favicon.ico') %>">
<meta name="apple-mobile-web-app-title" content="Riot">
<meta name="application-name" content="Riot">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png">
<meta name="msapplication-config" content="vector-icons/browserconfig.xml">
<meta name="msapplication-TileImage" content="<%= require('../../res/vector-icons/mstile-144x144.png') %>">
<meta name="msapplication-config" content="<%= require('../../res/vector-icons/browserconfig.xml') %>">
<meta name="theme-color" content="#ffffff">
<meta property="og:image" content="https://chat.status.im/img/logos/riot-im-logo-1.png" />
<meta property="og:image" content="<%= htmlWebpackPlugin.options.vars.og_image_url %>" />
<% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
var file = htmlWebpackPlugin.files.css[i];
var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/);
@ -35,23 +35,14 @@
} %>
</head>
<body style="height: 100%;">
<section id="matrixchat" style="height: 100%;"></section>
<section id="matrixchat" style="height: 100%; overflow: auto;"></section>
<noscript>Sorry, Riot requires JavaScript to be enabled.</noscript> <!-- TODO: Translate this? -->
<% for (var i=0; i < htmlWebpackPlugin.files.js.length; i++) {
// Not a particularly graceful way of not putting the indexeddb worker script
// into the main page
if (_.endsWith(htmlWebpackPlugin.files.js[i], 'indexeddb-worker.js')) {
%>
<script>
window.vector_indexeddb_worker_script = '<%= htmlWebpackPlugin.files.js[i] %>';
</script>
<%
continue;
}
%>
<script src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
<% } %>
<img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
<script>
window.vector_indexeddb_worker_script = '<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>';
</script>
<script src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
<img src="<%= require('matrix-react-sdk/res/img/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
<img src="<%= require('matrix-react-sdk/res/img/e2e/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
<audio id="messageAudio">
<source src="media/message.ogg" type="audio/ogg" />
<source src="media/message.mp3" type="audio/mpeg" />
@ -72,8 +63,8 @@
<source src="media/busy.ogg" type="audio/ogg" />
<source src="media/busy.mp3" type="audio/mpeg" />
</audio>
<audio id="remoteAudio"/>
<audio id="remoteAudio"></audio>
<!-- let CSS themes pass constants to the app -->
<div id="mx_theme_accentColor"></div><div id="mx_theme_secondaryAccentColor"/></div><div id="mx_theme_tertiaryAccentColor"/></div>
<div id="mx_theme_accentColor"></div><div id="mx_theme_secondaryAccentColor"></div><div id="mx_theme_tertiaryAccentColor"></div>
</body>
</html>

512
src/vector/index.js
View file

@ -1,6 +1,8 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2018, 2019 New Vector Ltd
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -15,20 +17,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
'use strict';
// for ES6 stuff like startsWith() that Safari doesn't handle
// and babel doesn't do by default
// Note we use this, as well as the babel transform-runtime plugin
// since transform-runtime does not cover instance methods
// such as "foobar".includes("foo") which bits of our library
// code use, but the babel transform-runtime plugin allows the
// regenerator runtime to be injected early enough in the process
// (it can't be here as it's too late: the alternative is to put
// the babel-polyfill as the first 'entry' in the webpack config).
// https://babeljs.io/docs/plugins/transform-runtime/
require('babel-polyfill');
// Require common CSS here; this will make webpack process it into bundle.css.
// Our own CSS (which is themed) is imported via separate webpack entry points
// in webpack.config.js
@ -37,68 +25,61 @@ require('gfm.css/gfm.css');
require('highlight.js/styles/github.css');
require('draft-js/dist/Draft.css');
const rageshake = require("./rageshake");
rageshake.init().then(() => {
console.log("Initialised rageshake: See https://bugs.chromium.org/p/chromium/issues/detail?id=583193 to fix line numbers on Chrome.");
rageshake.cleanup();
}, (err) => {
console.error("Failed to initialise rageshake: " + err);
});
import olmWasmPath from 'olm/olm.wasm';
window.addEventListener('beforeunload', (e) => {
console.log('riot-web closing');
// try to flush the logs to indexeddb
rageshake.flush();
});
import './rageshakesetup';
import React from 'react';
// add React and ReactPerf to the global namespace, to make them easier to
// access via the console
global.React = React;
// add React and ReactPerf to the global namespace, to make them easier to
// access via the console
global.React = require("react");
if (process.env.NODE_ENV !== 'production') {
global.Perf = require("react-addons-perf");
}
var RunModernizrTests = require("./modernizr"); // this side-effects a global
var ReactDOM = require("react-dom");
var sdk = require("matrix-react-sdk");
const PlatformPeg = require("matrix-react-sdk/lib/PlatformPeg");
import './modernizr';
import ReactDOM from 'react-dom';
import sdk from 'matrix-react-sdk';
import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
sdk.loadSkin(require('../component-index'));
var VectorConferenceHandler = require('../VectorConferenceHandler');
import VectorConferenceHandler from 'matrix-react-sdk/lib/VectorConferenceHandler';
import Promise from 'bluebird';
var request = require('browser-request');
import * as languageHandler from 'matrix-react-sdk/lib/languageHandler';
// Also import _t directly so we can call it just `_t` as this is what gen-i18n.js expects
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import {_t, _td, newTranslatableError} from 'matrix-react-sdk/lib/languageHandler';
import AutoDiscoveryUtils from 'matrix-react-sdk/lib/utils/AutoDiscoveryUtils';
import {AutoDiscovery} from "matrix-js-sdk/lib/autodiscovery";
import * as Lifecycle from "matrix-react-sdk/lib/Lifecycle";
import url from 'url';
import {parseQs, parseQsFromFragment} from './url_utils';
import Platform from './platform';
import ElectronPlatform from './platform/ElectronPlatform';
import WebPlatform from './platform/WebPlatform';
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
import SettingsStore, {SettingLevel} from "matrix-react-sdk/lib/settings/SettingsStore";
import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore";
import Tinter from 'matrix-react-sdk/lib/Tinter';
import SdkConfig from "matrix-react-sdk/lib/SdkConfig";
var lastLocationHashSet = null;
import Olm from 'olm';
var CallHandler = require("matrix-react-sdk/lib/CallHandler");
CallHandler.setConferenceHandler(VectorConferenceHandler);
import CallHandler from 'matrix-react-sdk/lib/CallHandler';
MatrixClientPeg.setIndexedDbWorkerScript(window.vector_indexeddb_worker_script);
let lastLocationHashSet = null;
// Disable warnings for now: we use deprecated bluebird functions
// and need to migrate, but they spam the console with warnings.
Promise.config({warnings: false});
function checkBrowserFeatures(featureList) {
if (!window.Modernizr) {
console.error("Cannot check features - Modernizr global is missing.");
return false;
}
var featureComplete = true;
for (var i = 0; i < featureList.length; i++) {
let featureComplete = true;
for (let i = 0; i < featureList.length; i++) {
if (window.Modernizr[featureList[i]] === undefined) {
console.error(
"Looked for feature '%s' but Modernizr has no results for this. " +
"Has it been configured correctly?", featureList[i]
"Has it been configured correctly?", featureList[i],
);
return false;
}
@ -112,11 +93,6 @@ function checkBrowserFeatures(featureList) {
return featureComplete;
}
var validBrowser = checkBrowserFeatures([
"displaytable", "flexbox", "es5object", "es5function", "localstorage",
"objectfit", "indexeddb", "webworkers",
]);
// Parse the given window.location and return parameters that can be used when calling
// MatrixChat.showScreen(screen, params)
function getScreenFromLocation(location) {
@ -124,7 +100,7 @@ function getScreenFromLocation(location) {
return {
screen: fragparts.location.substring(1),
params: fragparts.params,
}
};
}
// Here, we do some crude URL analysis to allow
@ -138,7 +114,7 @@ function routeUrl(location) {
}
function onHashChange(ev) {
if (decodeURIComponent(window.location.hash) == lastLocationHashSet) {
if (decodeURIComponent(window.location.hash) === lastLocationHashSet) {
// we just set this: no need to route it!
return;
}
@ -147,12 +123,12 @@ function onHashChange(ev) {
// This will be called whenever the SDK changes screens,
// so a web page can update the URL bar appropriately.
var onNewScreen = function(screen) {
function onNewScreen(screen) {
console.log("newscreen "+screen);
var hash = '#/' + screen;
const hash = '#/' + screen;
lastLocationHashSet = hash;
window.location.hash = hash;
};
}
// We use this to work out what URL the SDK should
// pass through when registering to allow the user to
@ -163,9 +139,9 @@ var onNewScreen = function(screen) {
// If we're in electron, we should never pass through a file:// URL otherwise
// the identity server will try to 302 the browser to it, which breaks horribly.
// so in that instance, hardcode to use riot.im/app for now instead.
var makeRegistrationUrl = function(params) {
function makeRegistrationUrl(params) {
let url;
if (window.location.protocol === "file:") {
if (window.location.protocol === "vector:") {
url = 'https://riot.im/app/#/register';
} else {
url = (
@ -178,7 +154,7 @@ var makeRegistrationUrl = function(params) {
const keys = Object.keys(params);
for (let i = 0; i < keys.length; ++i) {
if (i == 0) {
if (i === 0) {
url += '?';
} else {
url += '&';
@ -189,120 +165,96 @@ var makeRegistrationUrl = function(params) {
return url;
}
window.addEventListener('hashchange', onHashChange);
function getConfig(configJsonFilename) {
let deferred = Promise.defer();
request(
{ method: "GET", url: configJsonFilename },
(err, response, body) => {
if (err || response.status < 200 || response.status >= 300) {
// Lack of a config isn't an error, we should
// just use the defaults.
// Also treat a blank config as no config, assuming
// the status code is 0, because we don't get 404s
// from file: URIs so this is the only way we can
// not fail if the file doesn't exist when loading
// from a file:// URI.
if (response) {
if (response.status == 404 || (response.status == 0 && body == '')) {
deferred.resolve({});
}
}
deferred.reject({err: err, response: response});
return;
}
// We parse the JSON ourselves rather than use the JSON
// parameter, since this throws a parse error on empty
// which breaks if there's no config.json and we're
// loading from the filesystem (see above).
deferred.resolve(JSON.parse(body));
}
);
return deferred.promise;
}
function onTokenLoginCompleted() {
// if we did a token login, we're now left with the token, hs and is
// url as query params in the url; a little nasty but let's redirect to
// clear them.
var parsedUrl = url.parse(window.location.href);
const parsedUrl = url.parse(window.location.href);
parsedUrl.search = "";
var formatted = url.format(parsedUrl);
const formatted = url.format(parsedUrl);
console.log("Redirecting to " + formatted + " to drop loginToken " +
"from queryparams");
window.location.href = formatted;
}
async function loadApp() {
if (window.vector_indexeddb_worker_script === undefined) {
// If this is missing, something has probably gone wrong with
// the bundling. The js-sdk will just fall back to accessing
// indexeddb directly with no worker script, but we want to
// make sure the indexeddb script is present, so fail hard.
throw new Error("Missing indexeddb worker script!");
}
MatrixClientPeg.setIndexedDbWorkerScript(window.vector_indexeddb_worker_script);
CallHandler.setConferenceHandler(VectorConferenceHandler);
window.addEventListener('hashchange', onHashChange);
await loadOlm();
// set the platform for react sdk
if (window.ipcRenderer) {
console.log("Using Electron platform");
const plaf = new ElectronPlatform();
PlatformPeg.set(plaf);
// Electron only: see if we need to do a one-time data
// migration
if (window.localStorage.getItem('mx_user_id') === null) {
console.log("Migrating session from old origin...");
await plaf.migrateFromOldOrigin();
console.log("Origin migration complete");
}
} else {
console.log("Using Web platform");
PlatformPeg.set(new WebPlatform());
}
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 language after loading config.json so that settingsDefaults.language can be applied
await loadLanguage();
const fragparts = parseQsFromFragment(window.location);
const params = parseQs(window.location);
// set the platform for react sdk (our Platform object automatically picks the right one)
PlatformPeg.set(new Platform());
// Load the config file. First try to load up a domain-specific config of the
// form "config.$domain.json" and if that fails, fall back to config.json.
let configJson;
let configError;
try {
try {
configJson = await getConfig(`config.${document.domain}.json`);
// 404s succeed with an empty json config, so check that there are keys
if (Object.keys(configJson).length === 0) {
throw new Error(); // throw to enter the catch
}
} catch (e) {
configJson = await getConfig("config.json");
}
} catch (e) {
configError = e;
}
// 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);
// don't try to redirect to the native apps if we're
// verifying a 3pid (but after we've loaded the config)
const preventRedirect = Boolean(fragparts.params.client_secret);
// or if the user is following a deep link
// (https://github.com/vector-im/riot-web/issues/7378)
const preventRedirect = fragparts.params.client_secret || fragparts.location.length > 0;
if (!preventRedirect) {
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
// FIXME: ugly status hardcoding
if (SettingsStore.getValue("theme") === 'status') {
window.location = "https://status.im/join-riot.html";
const isIos = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
const isAndroid = /Android/.test(navigator.userAgent);
if (isIos || isAndroid) {
if (document.cookie.indexOf("riot_mobile_redirect_to_guide=false") === -1) {
window.location = "mobile_guide/";
return;
}
else {
if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) {
window.location = "https://itunes.apple.com/us/app/vector.im/id1083446067";
return;
}
}
}
else if (/Android/.test(navigator.userAgent)) {
// FIXME: ugly status hardcoding
if (SettingsStore.getValue("theme") === 'status') {
window.location = "https://status.im/join-riot.html";
return;
}
else {
if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) {
window.location = "https://play.google.com/store/apps/details?id=im.vector.alpha";
return;
}
}
}
}
// as quickly as we possibly can, set a default theme...
const styleElements = Object.create(null);
let a;
const theme = SettingsStore.getValue("theme");
for (let i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
@ -313,67 +265,168 @@ async function loadApp() {
if (match) {
if (match[1] === theme) {
// remove the disabled flag off the stylesheet
a.removeAttribute("disabled");
// Firefox requires setting the attribute to false, so do
// that instead of removing it. Related:
// https://bugzilla.mozilla.org/show_bug.cgi?id=1281135
a.disabled = false;
// in case the Tinter.tint() in MatrixChat fires before the
// CSS has actually loaded (which in practice happens)...
// FIXME: we should probably block loading the app or even
// showing a spinner until the theme is loaded, to avoid
// flashes of unstyled content.
a.onload = () => {
// This if fixes Tinter.setTheme to not fire on Firefox
// in case it is the first time loading Riot.
// `InstallTrigger` is a Object which only exists on Firefox
// (it is used for their Plugins) and can be used as a
// feature check.
// Firefox loads css always before js. This is why we dont use
// onload or it's EventListener as thoose will never trigger.
if (typeof InstallTrigger !== 'undefined') {
Tinter.setTheme(theme);
};
} else {
// FIXME: we should probably block loading the app or even
// showing a spinner until the theme is loaded, to avoid
// flashes of unstyled content.
a.onload = () => {
Tinter.setTheme(theme);
};
}
} else {
// Firefox requires this to not be done via `setAttribute`
// or via HTML.
// https://bugzilla.mozilla.org/show_bug.cgi?id=1281135
a.disabled = true;
}
}
}
if (window.localStorage && window.localStorage.getItem('mx_accepts_unsupported_browser')) {
console.log('User has previously accepted risks in using an unsupported browser');
validBrowser = true;
// Now that we've loaded the theme (CSS), display the config syntax error if needed.
if (configSyntaxError) {
const errorMessage = (
<div>
<p>
{_t(
"Your Riot configuration contains invalid JSON. Please correct the problem " +
"and reload the page.",
)}
</p>
<p>
{_t(
"The message from the parser is: %(message)s",
{message: configError.err.message || _t("Invalid JSON")},
)}
</p>
</div>
);
const GenericErrorPage = sdk.getComponent("structures.GenericErrorPage");
window.matrixChat = ReactDOM.render(
<GenericErrorPage message={errorMessage} title={_t("Your Riot is misconfigured")} />,
document.getElementById('matrixchat'),
);
return;
}
console.log("Vector starting at "+window.location);
const validBrowser = checkBrowserFeatures([
"displaytable", "flexbox", "es5object", "es5function", "localstorage",
"objectfit", "indexeddb", "webworkers",
]);
const acceptInvalidBrowser = window.localStorage && window.localStorage.getItem('mx_accepts_unsupported_browser');
const urlWithoutQuery = window.location.protocol + '//' + window.location.host + window.location.pathname;
console.log("Vector starting at " + urlWithoutQuery);
if (configError) {
window.matrixChat = ReactDOM.render(<div className="error">
Unable to load config file: please refresh the page to try again.
</div>, document.getElementById('matrixchat'));
} else if (validBrowser) {
const platform = PlatformPeg.get();
} else if (validBrowser || acceptInvalidBrowser) {
platform.startUpdater();
const MatrixChat = sdk.getComponent('structures.MatrixChat');
window.matrixChat = ReactDOM.render(
<MatrixChat
onNewScreen={onNewScreen}
makeRegistrationUrl={makeRegistrationUrl}
ConferenceHandler={VectorConferenceHandler}
config={configJson}
realQueryParams={params}
startingFragmentQueryParams={fragparts.params}
enableGuest={!configJson.disable_guests}
onTokenLoginCompleted={onTokenLoginCompleted}
initialScreenAfterLogin={getScreenFromLocation(window.location)}
defaultDeviceDisplayName={platform.getDefaultDeviceDisplayName()}
/>,
document.getElementById('matrixchat')
);
// Don't bother loading the app until the config is verified
verifyServerConfig().then((newConfig) => {
const MatrixChat = sdk.getComponent('structures.MatrixChat');
window.matrixChat = ReactDOM.render(
<MatrixChat
onNewScreen={onNewScreen}
makeRegistrationUrl={makeRegistrationUrl}
ConferenceHandler={VectorConferenceHandler}
config={newConfig}
realQueryParams={params}
startingFragmentQueryParams={fragparts.params}
enableGuest={!configJson.disable_guests}
onTokenLoginCompleted={onTokenLoginCompleted}
initialScreenAfterLogin={getScreenFromLocation(window.location)}
defaultDeviceDisplayName={platform.getDefaultDeviceDisplayName()}
/>,
document.getElementById('matrixchat'),
);
}).catch(err => {
console.error(err);
let errorMessage = err.translatedMessage
|| _t("Unexpected error preparing the app. See console for details.");
errorMessage = <span>{errorMessage}</span>;
// Like the compatibility page, AWOOOOOGA at the user
const GenericErrorPage = sdk.getComponent("structures.GenericErrorPage");
window.matrixChat = ReactDOM.render(
<GenericErrorPage message={errorMessage} title={_t("Your Riot is misconfigured")} />,
document.getElementById('matrixchat'),
);
});
} else {
console.error("Browser is missing required features.");
// take to a different landing page to AWOOOOOGA at the user
var CompatibilityPage = sdk.getComponent("structures.CompatibilityPage");
const CompatibilityPage = sdk.getComponent("structures.CompatibilityPage");
window.matrixChat = ReactDOM.render(
<CompatibilityPage onAccept={function() {
if (window.localStorage) window.localStorage.setItem('mx_accepts_unsupported_browser', true);
validBrowser = true;
console.log("User accepts the compatibility risks.");
loadApp();
}} />,
document.getElementById('matrixchat')
document.getElementById('matrixchat'),
);
}
}
function loadOlm() {
/* Load Olm. We try the WebAssembly version first, and then the legacy,
* asm.js version if that fails. For this reason we need to wait for this
* to finish before continuing to load the rest of the app. In future
* we could somehow pass a promise down to react-sdk and have it wait on
* that so olm can be loading in parallel with the rest of the app.
*
* We also need to tell the Olm js to look for its wasm file at the same
* level as index.html. It really should be in the same place as the js,
* ie. in the bundle directory, but as far as I can tell this is
* completely impossible with webpack. We do, however, use a hashed
* filename to avoid caching issues.
*/
return Olm.init({
locateFile: () => olmWasmPath,
}).then(() => {
console.log("Using WebAssembly Olm");
}).catch((e) => {
console.log("Failed to load Olm: trying legacy version", e);
return new Promise((resolve, reject) => {
const s = document.createElement('script');
s.src = 'olm_legacy.js'; // XXX: This should be cache-busted too
s.onload = resolve;
s.onerror = reject;
document.body.appendChild(s);
}).then(() => {
// Init window.Olm, ie. the one just loaded by the script tag,
// not 'Olm' which is still the failed wasm version.
return window.Olm.init();
}).then(() => {
console.log("Using legacy Olm");
}).catch((e) => {
console.log("Both WebAssembly and asm.js Olm failed!", e);
});
});
}
async function loadLanguage() {
const prefLang = SettingsStore.getValue("language", null, /*excludeDefault=*/true);
let langs = [];
@ -393,4 +446,99 @@ async function loadLanguage() {
}
}
async function verifyServerConfig() {
let validatedConfig;
try {
console.log("Verifying homeserver configuration");
// Note: the query string may include is_url and hs_url - we only respect these in the
// context of email validation. Because we don't respect them otherwise, we do not need
// to parse or consider them here.
// Note: Although we throw all 3 possible configuration options through a .well-known-style
// verification, we do not care if the servers are online at this point. We do moderately
// care if they are syntactically correct though, so we shove them through the .well-known
// validators for that purpose.
const config = SdkConfig.get();
let wkConfig = config['default_server_config']; // overwritten later under some conditions
const serverName = config['default_server_name'];
const hsUrl = config['default_hs_url'];
const isUrl = config['default_is_url'];
const incompatibleOptions = [wkConfig, serverName, hsUrl].filter(i => !!i);
if (incompatibleOptions.length > 1) {
// noinspection ExceptionCaughtLocallyJS
throw newTranslatableError(_td(
"Invalid configuration: can only specify one of default_server_config, default_server_name, " +
"or default_hs_url.",
));
}
if (incompatibleOptions.length < 1) {
// noinspection ExceptionCaughtLocallyJS
throw newTranslatableError(_td("Invalid configuration: no default server specified."));
}
if (hsUrl) {
console.log("Config uses a default_hs_url - constructing a default_server_config using this information");
console.warn(
"DEPRECATED CONFIG OPTION: In the future, default_hs_url will not be accepted. Please use " +
"default_server_config instead.",
);
wkConfig = {
"m.homeserver": {
"base_url": hsUrl,
},
};
if (isUrl) {
wkConfig["m.identity_server"] = {
"base_url": isUrl,
};
}
}
let discoveryResult = null;
if (wkConfig) {
console.log("Config uses a default_server_config - validating object");
discoveryResult = await AutoDiscovery.fromDiscoveryConfig(wkConfig);
}
if (serverName) {
console.log("Config uses a default_server_name - doing .well-known lookup");
console.warn(
"DEPRECATED CONFIG OPTION: In the future, default_server_name will not be accepted. Please " +
"use default_server_config instead.",
);
discoveryResult = await AutoDiscovery.findClientConfig(serverName);
}
validatedConfig = AutoDiscoveryUtils.buildValidatedConfigFromDiscovery(serverName, discoveryResult, true);
} catch (e) {
const {hsUrl, isUrl, userId} = Lifecycle.getLocalStorageSessionVars();
if (hsUrl && userId) {
console.error(e);
console.warn("A session was found - suppressing config error and using the session's homeserver");
console.log("Using pre-existing hsUrl and isUrl: ", {hsUrl, isUrl});
validatedConfig = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl, isUrl, true);
} else {
// the user is not logged in, so scream
throw e;
}
}
validatedConfig.isDefault = true;
// Just in case we ever have to debug this
console.log("Using homeserver config:", validatedConfig);
// Add the newly built config to the actual config for use by the app
console.log("Updating SdkConfig with validated discovery information");
SdkConfig.add({"validated_server_config": validatedConfig});
return SdkConfig.get();
}
loadApp();

2
src/vector/indexedbd-worker.js → src/vector/indexeddb-worker.js
View file

@ -18,4 +18,4 @@ import {IndexedDBStoreWorker} from 'matrix-js-sdk/lib/indexeddb-worker.js';
const remoteWorker = new IndexedDBStoreWorker(postMessage);
onmessage = remoteWorker.onMessage;
global.onmessage = remoteWorker.onMessage;

350
src/vector/mobile_guide/index.html Normal file
View file

File diff suppressed because one or more lines are too long

111
src/vector/mobile_guide/index.js Normal file
View file

@ -0,0 +1,111 @@
import {getVectorConfig} from '../getconfig';
function onBackToRiotClick() {
// Cookie should expire in 4 hours
document.cookie = 'riot_mobile_redirect_to_guide=false;path=/;max-age=14400';
window.location.href = '../';
}
// NEVER pass user-controlled content to this function! Hardcoded strings only please.
function renderConfigError(message) {
const contactMsg = "If this is unexpected, please contact your system administrator " +
"or technical support representative.";
message = `<h2>Error loading Riot</h2><p>${message}</p><p>${contactMsg}</p>`;
const toHide = document.getElementsByClassName("mx_HomePage_container");
const errorContainers = document.getElementsByClassName("mx_HomePage_errorContainer");
for (const e of toHide) {
// We have to clear the content because .style.display='none'; doesn't work
// due to an !important in the CSS.
e.innerHTML = '';
}
for (const e of errorContainers) {
e.style.display = 'block';
e.innerHTML = message;
}
}
async function initPage() {
document.getElementById('back_to_riot_button').onclick = onBackToRiotClick;
let config = await getVectorConfig('..');
// We manually parse the config similar to how validateServerConfig works because
// calling that function pulls in roughly 4mb of JS we don't use.
const wkConfig = config['default_server_config']; // overwritten later under some conditions
const serverName = config['default_server_name'];
const defaultHsUrl = config['default_hs_url'];
const defaultIsUrl = config['default_is_url'];
const incompatibleOptions = [wkConfig, serverName, defaultHsUrl].filter(i => !!i);
if (incompatibleOptions.length > 1) {
return renderConfigError(
"Invalid configuration: can only specify one of default_server_config, default_server_name, " +
"or default_hs_url.",
);
}
if (incompatibleOptions.length < 1) {
return renderConfigError("Invalid configuration: no default server specified.");
}
let hsUrl = '';
let isUrl = '';
if (wkConfig && wkConfig['m.homeserver']) {
hsUrl = wkConfig['m.homeserver']['base_url'];
if (wkConfig['m.identity_server']) {
isUrl = wkConfig['m.identity_server']['base_url'];
}
}
if (serverName) {
// We also do our own minimal .well-known validation to avoid pulling in the js-sdk
try {
const result = await fetch(`https://${serverName}/.well-known/matrix/client`);
const wkConfig = await result.json();
if (wkConfig && wkConfig['m.homeserver']) {
hsUrl = wkConfig['m.homeserver']['base_url'];
if (wkConfig['m.identity_server']) {
isUrl = wkConfig['m.identity_server']['base_url'];
}
}
} catch (e) {
console.error(e);
return renderConfigError("Unable to fetch homeserver configuration");
}
}
if (defaultHsUrl) {
hsUrl = defaultHsUrl;
isUrl = defaultIsUrl;
}
if (!hsUrl) {
return renderConfigError("Unable to locate homeserver");
}
if (hsUrl && !hsUrl.endsWith('/')) hsUrl += '/';
if (isUrl && !isUrl.endsWith('/')) isUrl += '/';
if (hsUrl !== 'https://matrix.org/') {
document.getElementById('configure_riot_button').href =
"https://riot.im/config/config?hs_url=" + encodeURIComponent(hsUrl) +
"&is_url=" + encodeURIComponent(isUrl);
document.getElementById('step1_heading').innerHTML= '1: Install the app';
document.getElementById('step2_container').style.display = 'block';
document.getElementById('hs_url').innerText = hsUrl;
if (isUrl && isUrl !== "https://vector.im/") {
document.getElementById('default_is').style.display = 'none';
document.getElementById('custom_is').style.display = 'block';
document.getElementById('is_url').style.display = 'block';
document.getElementById('is_url').innerText = isUrl;
}
}
}
initPage();

41
src/vector/olm-loader.js
View file

@ -1,41 +0,0 @@
/*
Copyright 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/* a very thin shim for loading olm.js: just sets the global OLM_OPTIONS and
* requires the actual olm.js library.
*
* olm.js reads global.OLM_OPTIONS and defines global.Olm. The latter is fine for us,
* but we need to prepare the former.
*
* We can't use webpack's definePlugin to do this, because we tell webpack not
* to parse olm.js. We also can't put this code in index.js, because olm and
* index.js are loaded in parallel, and we need to make sure OLM_OPTIONS is set
* before olm.js is loaded.
*/
/* total_memory must be a power of two, and at least twice the stack.
*
* We don't need a lot of stack, but we do need about 128K of heap to encrypt a
* 64K event (enough to store the ciphertext and the plaintext, bearing in mind
* that the plaintext can only be 48K because base64). We also have about 36K
* of statics. So let's have 256K of memory.
*/
global.OLM_OPTIONS = {
TOTAL_STACK: 64*1024,
TOTAL_MEMORY: 256*1024,
};
require('olm/olm.js');

237
src/vector/platform/ElectronPlatform.js
View file

@ -3,6 +3,8 @@
/*
Copyright 2016 Aviral Dasgupta
Copyright 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -21,44 +23,26 @@ import VectorBasePlatform, {updateCheckStatusEnum} from './VectorBasePlatform';
import dis from 'matrix-react-sdk/lib/dispatcher';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import Promise from 'bluebird';
import {remote, ipcRenderer, desktopCapturer} from 'electron';
import rageshake from '../rageshake';
import rageshake from 'matrix-react-sdk/lib/rageshake/rageshake';
remote.autoUpdater.on('update-downloaded', onUpdateDownloaded);
// try to flush the rageshake logs to indexeddb before quit.
ipcRenderer.on('before-quit', function () {
console.log('riot-desktop closing');
rageshake.flush();
});
function onUpdateDownloaded(ev: Event, releaseNotes: string, ver: string, date: Date, updateURL: string) {
dis.dispatch({
action: 'new_version',
currentVersion: remote.app.getVersion(),
newVersion: ver,
releaseNotes: releaseNotes,
});
}
const ipcRenderer = window.ipcRenderer;
function platformFriendlyName(): string {
console.log(window.process);
switch (window.process.platform) {
case 'darwin':
return 'macOS';
case 'freebsd':
return 'FreeBSD';
case 'openbsd':
return 'OpenBSD';
case 'sunos':
return 'SunOS';
case 'win32':
return 'Windows';
default:
// Sorry, Linux users: you get lumped into here,
// but only because Linux's capitalisation is
// normal. We do care about you.
return window.process.platform[0].toUpperCase() + window.process.platform.slice(1);
// used to use window.process but the same info is available here
if (navigator.userAgent.includes('Macintosh')) {
return 'macOS';
} else if (navigator.userAgent.includes('FreeBSD')) {
return 'FreeBSD';
} else if (navigator.userAgent.includes('OpenBSD')) {
return 'OpenBSD';
} else if (navigator.userAgent.includes('SunOS')) {
return 'SunOS';
} else if (navigator.userAgent.includes('Windows')) {
return 'Windows';
} else if (navigator.userAgent.includes('Linux')) {
return 'Linux';
} else {
return 'Unknown';
}
}
@ -85,9 +69,11 @@ function getUpdateCheckStatus(status) {
export default class ElectronPlatform extends VectorBasePlatform {
constructor() {
super();
dis.register(_onAction);
this.updatable = Boolean(remote.autoUpdater.getFeedURL());
this._pendingIpcCalls = {};
this._nextIpcCallId = 0;
dis.register(_onAction);
/*
IPC Call `check_updates` returns:
true if there is an update available
@ -103,8 +89,40 @@ export default class ElectronPlatform extends VectorBasePlatform {
this.showUpdateCheck = false;
});
// try to flush the rageshake logs to indexeddb before quit.
ipcRenderer.on('before-quit', function() {
console.log('riot-desktop closing');
rageshake.flush();
});
ipcRenderer.on('ipcReply', this._onIpcReply.bind(this));
ipcRenderer.on('update-downloaded', this.onUpdateDownloaded.bind(this));
this.startUpdateCheck = this.startUpdateCheck.bind(this);
this.stopUpdateCheck = this.stopUpdateCheck.bind(this);
this._tryPersistStorage();
}
async _tryPersistStorage() {
if (navigator.storage && navigator.storage.persist) {
const granted = await navigator.storage.persist();
const persisted = await navigator.storage.persisted();
console.log("Storage persist request granted: " + granted + " persisted: " + persisted);
}
}
async getConfig(): Promise<{}> {
return this._ipcCall('getConfig');
}
async onUpdateDownloaded(ev, updateInfo) {
dis.dispatch({
action: 'new_version',
currentVersion: await this.getAppVersion(),
newVersion: updateInfo,
releaseNotes: updateInfo.releaseNotes,
});
}
getHumanReadableName(): string {
@ -133,32 +151,25 @@ export default class ElectronPlatform extends VectorBasePlatform {
// maybe we should pass basic styling (italics, bold, underline) through from MD
// we only have to strip out < and > as the spec doesn't include anything about things like &amp;
// so we shouldn't assume that all implementations will treat those properly. Very basic tag parsing is done.
if (window.process.platform === 'linux') {
if (navigator.userAgent.includes('Linux')) {
msg = msg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
// Notifications in Electron use the HTML5 notification API
const notification = new global.Notification(
title,
{
body: msg,
icon: avatarUrl,
tag: 'vector',
silent: true, // we play our own sounds
},
);
const notifBody = {
body: msg,
silent: true, // we play our own sounds
};
if (avatarUrl) notifBody['icon'] = avatarUrl;
const notification = new global.Notification(title, notifBody);
notification.onclick = function() {
notification.onclick = () => {
dis.dispatch({
action: 'view_room',
room_id: room.roomId,
});
global.focus();
const win = remote.getCurrentWindow();
if (win.isMinimized()) win.restore();
else if (!win.isVisible()) win.show();
else win.focus();
this._ipcCall('focusWindow');
};
return notification;
@ -172,8 +183,49 @@ export default class ElectronPlatform extends VectorBasePlatform {
notif.close();
}
getAppVersion(): Promise<string> {
return Promise.resolve(remote.app.getVersion());
async getAppVersion(): Promise<string> {
return this._ipcCall('getAppVersion');
}
supportsAutoLaunch(): boolean {
return true;
}
async getAutoLaunchEnabled(): boolean {
return this._ipcCall('getAutoLaunchEnabled');
}
async setAutoLaunchEnabled(enabled: boolean): void {
return this._ipcCall('setAutoLaunchEnabled', enabled);
}
supportsAutoHideMenuBar(): boolean {
return true;
}
async getAutoHideMenuBarEnabled(): boolean {
return this._ipcCall('getAutoHideMenuBarEnabled');
}
async setAutoHideMenuBarEnabled(enabled: boolean): void {
return this._ipcCall('setAutoHideMenuBarEnabled', enabled);
}
supportsMinimizeToTray(): boolean {
return true;
}
async getMinimizeToTrayEnabled(): boolean {
return this._ipcCall('getMinimizeToTrayEnabled');
}
async setMinimizeToTrayEnabled(enabled: boolean): void {
return this._ipcCall('setMinimizeToTrayEnabled', enabled);
}
async canSelfUpdate(): boolean {
const feedUrl = await this._ipcCall('getUpdateFeedUrl');
return Boolean(feedUrl);
}
startUpdateCheck() {
@ -198,52 +250,47 @@ export default class ElectronPlatform extends VectorBasePlatform {
return null;
}
isElectron(): boolean { return true; }
requestNotificationPermission(): Promise<string> {
return Promise.resolve('granted');
}
reload() {
remote.getCurrentWebContents().reload();
// we used to remote to the main process to get it to
// reload the webcontents, but in practice this is unnecessary:
// the normal way works fine.
window.location.reload(false);
}
/* BEGIN copied and slightly-modified code
* setupScreenSharingForIframe function from:
* https://github.com/jitsi/jitsi-meet-electron-utils
* Copied directly here to avoid the need for a native electron module for
* 'just a bit of JavaScript'
* NOTE: Apache v2.0 licensed
*/
setupScreenSharingForIframe(iframe: Object) {
iframe.contentWindow.JitsiMeetElectron = {
/**
* Get sources available for screensharing. The callback is invoked
* with an array of DesktopCapturerSources.
*
* @param {Function} callback - The success callback.
* @param {Function} errorCallback - The callback for errors.
* @param {Object} options - Configuration for getting sources.
* @param {Array} options.types - Specify the desktop source types
* to get, with valid sources being "window" and "screen".
* @param {Object} options.thumbnailSize - Specify how big the
* preview images for the sources should be. The valid keys are
* height and width, e.g. { height: number, width: number}. By
* default electron will return images with height and width of
* 150px.
*/
obtainDesktopStreams(callback, errorCallback, options = {}) {
desktopCapturer.getSources(options,
(error, sources) => {
if (error) {
errorCallback(error);
return;
}
callback(sources);
});
},
};
async migrateFromOldOrigin() {
return this._ipcCall('origin_migrate');
}
async _ipcCall(name, ...args) {
const ipcCallId = ++this._nextIpcCallId;
return new Promise((resolve, reject) => {
this._pendingIpcCalls[ipcCallId] = {resolve, reject};
window.ipcRenderer.send('ipcCall', {id: ipcCallId, name, args});
// Maybe add a timeout to these? Probably not necessary.
});
}
_onIpcReply(ev, payload) {
if (payload.id === undefined) {
console.warn("Ignoring IPC reply with no ID");
return;
}
if (this._pendingIpcCalls[payload.id] === undefined) {
console.warn("Unknown IPC payload ID: " + payload.id);
return;
}
const callbacks = this._pendingIpcCalls[payload.id];
delete this._pendingIpcCalls[payload.id];
if (payload.error) {
callbacks.reject(payload.error);
} else {
callbacks.resolve(payload.reply);
}
}
/* END of copied and slightly-modified code */
}

55
src/vector/platform/VectorBasePlatform.js
View file

@ -3,6 +3,8 @@
/*
Copyright 2016 Aviral Dasgupta
Copyright 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -20,6 +22,7 @@ limitations under the License.
import BasePlatform from 'matrix-react-sdk/lib/BasePlatform';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import dis from 'matrix-react-sdk/lib/dispatcher';
import {getVectorConfig} from "../getconfig";
import Favico from 'favico.js';
@ -38,30 +41,44 @@ export default class VectorBasePlatform extends BasePlatform {
constructor() {
super();
// The 'animations' are really low framerate and look terrible.
// Also it re-starts the animationb every time you set the badge,
// and we set the state each time, even if the value hasn't changed,
// so we'd need to fix that if enabling the animation.
this.favicon = new Favico({animation: 'none'});
this.showUpdateCheck = false;
this._updateFavicon();
this.updatable = true;
this.startUpdateCheck = this.startUpdateCheck.bind(this);
this.stopUpdateCheck = this.stopUpdateCheck.bind(this);
}
async getConfig(): Promise<{}> {
return getVectorConfig();
}
getHumanReadableName(): string {
return 'Vector Base Platform'; // no translation required: only used for analytics
}
/**
* Delay creating the `Favico` instance until first use (on the first notification) as
* it uses canvas, which can trigger a permission prompt in Firefox's resist
* fingerprinting mode.
* See https://github.com/vector-im/riot-web/issues/9605.
*/
get favicon() {
if (this._favicon) {
return this._favicon;
}
// The 'animations' are really low framerate and look terrible.
// Also it re-starts the animation every time you set the badge,
// and we set the state each time, even if the value hasn't changed,
// so we'd need to fix that if enabling the animation.
this._favicon = new Favico({ animation: 'none' });
return this._favicon;
}
_updateFavicon() {
try {
// This needs to be in in a try block as it will throw
// if there are more than 100 badge count changes in
// its internal queue
let bgColor = "#d00",
notif = this.notificationCount;
let bgColor = "#d00";
let notif = this.notificationCount;
if (this.errorDidOccur) {
notif = notif || "×";
@ -97,8 +114,8 @@ export default class VectorBasePlatform extends BasePlatform {
/**
* Whether we can call checkForUpdate on this platform build
*/
canSelfUpdate(): boolean {
return this.updatable;
async canSelfUpdate(): boolean {
return false;
}
startUpdateCheck() {
@ -114,7 +131,11 @@ export default class VectorBasePlatform extends BasePlatform {
dis.dispatch({
action: 'check_updates',
value: false,
})
});
}
getUpdateCheckStatusEnum() {
return updateCheckStatusEnum;
}
/**
@ -132,4 +153,12 @@ export default class VectorBasePlatform extends BasePlatform {
getDefaultDeviceDisplayName(): string {
return _t("Unknown device");
}
/**
* Migrate account data from a previous origin
* Used only for the electron app
*/
async migrateFromOldOrigin() {
return false;
}
}

70
src/vector/platform/WebPlatform.js
View file

@ -26,7 +26,7 @@ import Promise from 'bluebird';
import url from 'url';
import UAParser from 'ua-parser-js';
var POKE_RATE_MS = 10 * 60 * 1000; // 10 min
const POKE_RATE_MS = 10 * 60 * 1000; // 10 min
export default class WebPlatform extends VectorBasePlatform {
constructor() {
@ -68,23 +68,21 @@ export default class WebPlatform extends VectorBasePlatform {
// annoyingly, the latest spec says this returns a
// promise, but this is only supported in Chrome 46
// and Firefox 47, so adapt the callback API.
const defer = Promise.defer();
global.Notification.requestPermission((result) => {
defer.resolve(result);
return new Promise(function(resolve, reject) {
global.Notification.requestPermission((result) => {
resolve(result);
});
});
return defer.promise;
}
displayNotification(title: string, msg: string, avatarUrl: string, room: Object) {
const notification = new global.Notification(
title,
{
body: msg,
icon: avatarUrl,
tag: "vector",
silent: true, // we play our own sounds
},
);
const notifBody = {
body: msg,
tag: "vector",
silent: true, // we play our own sounds
};
if (avatarUrl) notifBody['icon'] = avatarUrl;
const notification = new global.Notification(title, notifBody);
notification.onclick = function() {
dis.dispatch({
@ -103,31 +101,31 @@ export default class WebPlatform extends VectorBasePlatform {
}
_getVersion(): Promise<string> {
const deferred = Promise.defer();
// We add a cachebuster to the request to make sure that we know about
// the most recent version on the origin server. That might not
// actually be the version we'd get on a reload (particularly in the
// presence of intermediate caching proxies), but still: we're trying
// to tell the user that there is a new version.
request(
{
method: "GET",
url: "version",
qs: { cachebuster: Date.now() },
},
(err, response, body) => {
if (err || response.status < 200 || response.status >= 300) {
if (err === null) err = { status: response.status };
deferred.reject(err);
return;
}
const ver = body.trim();
deferred.resolve(ver);
},
);
return deferred.promise;
return new Promise(function(resolve, reject) {
request(
{
method: "GET",
url: "version",
qs: { cachebuster: Date.now() },
},
(err, response, body) => {
if (err || response.status < 200 || response.status >= 300) {
if (err === null) err = { status: response.status };
reject(err);
return;
}
const ver = body.trim();
resolve(ver);
},
);
});
}
getAppVersion(): Promise<string> {
@ -142,6 +140,10 @@ export default class WebPlatform extends VectorBasePlatform {
setInterval(this.pollForUpdate.bind(this), POKE_RATE_MS);
}
async canSelfUpdate(): boolean {
return true;
}
pollForUpdate() {
return this._getVersion().then((ver) => {
if (this.runningVersion === null) {
@ -179,7 +181,7 @@ export default class WebPlatform extends VectorBasePlatform {
}
installUpdate() {
window.location.reload();
window.location.reload(true);
}
getDefaultDeviceDisplayName(): string {

29
src/vector/platform/index.js
View file

@ -1,29 +0,0 @@
// @flow
/*
Copyright 2016 Aviral Dasgupta
Copyright 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
let Platform = null;
if (window && window.process && window.process && window.process.type === 'renderer') {
// we're running inside electron
Platform = require('./ElectronPlatform');
} else {
Platform = require('./WebPlatform');
}
export default Platform;

473
src/vector/rageshake.js
View file

@ -1,473 +0,0 @@
/*
Copyright 2017 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import Promise from 'bluebird';
// This module contains all the code needed to log the console, persist it to
// disk and submit bug reports. Rationale is as follows:
// - Monkey-patching the console is preferable to having a log library because
// we can catch logs by other libraries more easily, without having to all
// depend on the same log framework / pass the logger around.
// - We use IndexedDB to persists logs because it has generous disk space
// limits compared to local storage. IndexedDB does not work in incognito
// mode, in which case this module will not be able to write logs to disk.
// However, the logs will still be stored in-memory, so can still be
// submitted in a bug report should the user wish to: we can also store more
// logs in-memory than in local storage, which does work in incognito mode.
// We also need to handle the case where there are 2+ tabs. Each JS runtime
// generates a random string which serves as the "ID" for that tab/session.
// These IDs are stored along with the log lines.
// - Bug reports are sent as a POST over HTTPS: it purposefully does not use
// Matrix as bug reports may be made when Matrix is not responsive (which may
// be the cause of the bug). We send the most recent N MB of UTF-8 log data,
// starting with the most recent, which we know because the "ID"s are
// actually timestamps. We then purge the remaining logs. We also do this
// purge on startup to prevent logs from accumulating.
// the frequency with which we flush to indexeddb
const FLUSH_RATE_MS = 30 * 1000;
// the length of log data we keep in indexeddb (and include in the reports)
const MAX_LOG_SIZE = 1024 * 1024 * 1; // 1 MB
// A class which monkey-patches the global console and stores log lines.
class ConsoleLogger {
constructor() {
this.logs = "";
}
monkeyPatch(consoleObj) {
// Monkey-patch console logging
const consoleFunctionsToLevels = {
log: "I",
info: "I",
warn: "W",
error: "E",
};
Object.keys(consoleFunctionsToLevels).forEach((fnName) => {
const level = consoleFunctionsToLevels[fnName];
let originalFn = consoleObj[fnName].bind(consoleObj);
consoleObj[fnName] = (...args) => {
this.log(level, ...args);
originalFn(...args);
}
});
}
log(level, ...args) {
// We don't know what locale the user may be running so use ISO strings
const ts = new Date().toISOString();
// Some browsers support string formatting which we're not doing here
// so the lines are a little more ugly but easy to implement / quick to
// run.
// Example line:
// 2017-01-18T11:23:53.214Z W Failed to set badge count
const line = `${ts} ${level} ${args.join(' ')}\n`;
// Using + really is the quickest way in JS
// http://jsperf.com/concat-vs-plus-vs-join
this.logs += line;
}
/**
* Retrieve log lines to flush to disk.
* @param {boolean} keepLogs True to not delete logs after flushing.
* @return {string} \n delimited log lines to flush.
*/
flush(keepLogs) {
// The ConsoleLogger doesn't care how these end up on disk, it just
// flushes them to the caller.
if (keepLogs) {
return this.logs;
}
const logsToFlush = this.logs;
this.logs = "";
return logsToFlush;
}
}
// A class which stores log lines in an IndexedDB instance.
class IndexedDBLogStore {
constructor(indexedDB, logger) {
this.indexedDB = indexedDB;
this.logger = logger;
this.id = "instance-" + Math.random() + Date.now();
this.index = 0;
this.db = null;
this.flushPromise = null;
// set if flush() is called whilst one is ongoing
this.flushAgainPromise = null;
}
/**
* @return {Promise} Resolves when the store is ready.
*/
connect() {
let req = this.indexedDB.open("logs");
return new Promise((resolve, reject) => {
req.onsuccess = (event) => {
this.db = event.target.result;
// Periodically flush logs to local storage / indexeddb
setInterval(this.flush.bind(this), FLUSH_RATE_MS);
resolve();
};
req.onerror = (event) => {
const err = (
"Failed to open log database: " + event.target.errorCode
);
console.error(err);
reject(new Error(err));
};
// First time: Setup the object store
req.onupgradeneeded = (event) => {
const db = event.target.result;
const logObjStore = db.createObjectStore("logs", {
keyPath: ["id", "index"]
});
// Keys in the database look like: [ "instance-148938490", 0 ]
// Later on we need to query everything based on an instance id.
// In order to do this, we need to set up indexes "id".
logObjStore.createIndex("id", "id", { unique: false });
logObjStore.add(
this._generateLogEntry(
new Date() + " ::: Log database was created."
)
);
const lastModifiedStore = db.createObjectStore("logslastmod", {
keyPath: "id",
});
lastModifiedStore.add(this._generateLastModifiedTime());
}
});
}
/**
* Flush logs to disk.
*
* There are guards to protect against race conditions in order to ensure
* that all previous flushes have completed before the most recent flush.
* Consider without guards:
* - A calls flush() periodically.
* - B calls flush() and wants to send logs immediately afterwards.
* - If B doesn't wait for A's flush to complete, B will be missing the
* contents of A's flush.
* To protect against this, we set 'flushPromise' when a flush is ongoing.
* Subsequent calls to flush() during this period will chain another flush,
* then keep returning that same chained flush.
*
* This guarantees that we will always eventually do a flush when flush() is
* called.
*
* @return {Promise} Resolved when the logs have been flushed.
*/
flush() {
// check if a flush() operation is ongoing
if (this.flushPromise && this.flushPromise.isPending()) {
if (this.flushAgainPromise && this.flushAgainPromise.isPending()) {
// this is the 3rd+ time we've called flush() : return the same
// promise.
return this.flushAgainPromise;
}
// queue up a flush to occur immediately after the pending one
// completes.
this.flushAgainPromise = this.flushPromise.then(() => {
return this.flush();
});
return this.flushAgainPromise;
}
// there is no flush promise or there was but it has finished, so do
// a brand new one, destroying the chain which may have been built up.
this.flushPromise = new Promise((resolve, reject) => {
if (!this.db) {
// not connected yet or user rejected access for us to r/w to
// the db.
reject(new Error("No connected database"));
return;
}
const lines = this.logger.flush();
if (lines.length === 0) {
resolve();
return;
}
let txn = this.db.transaction(["logs", "logslastmod"], "readwrite");
let objStore = txn.objectStore("logs");
txn.oncomplete = (event) => {
resolve();
};
txn.onerror = (event) => {
console.error(
"Failed to flush logs : ", event
);
reject(
new Error("Failed to write logs: " + event.target.errorCode)
);
}
objStore.add(this._generateLogEntry(lines));
let lastModStore = txn.objectStore("logslastmod");
lastModStore.put(this._generateLastModifiedTime());
});
return this.flushPromise;
}
/**
* Consume the most recent logs and return them. Older logs which are not
* returned are deleted at the same time, so this can be called at startup
* to do house-keeping to keep the logs from growing too large.
*
* @return {Promise<Object[]>} Resolves to an array of objects. The array is
* sorted in time (oldest first) based on when the log file was created (the
* log ID). The objects have said log ID in an "id" field and "lines" which
* is a big string with all the new-line delimited logs.
*/
async consume() {
const db = this.db;
// Returns: a string representing the concatenated logs for this ID.
function fetchLogs(id) {
const o = db.transaction("logs", "readonly").objectStore("logs");
return selectQuery(o.index("id"), IDBKeyRange.only(id),
(cursor) => {
return {
lines: cursor.value.lines,
index: cursor.value.index,
}
}).then((linesArray) => {
// We have been storing logs periodically, so string them all
// together *in order of index* now
linesArray.sort((a, b) => {
return a.index - b.index;
})
return linesArray.map((l) => l.lines).join("");
});
}
// Returns: A sorted array of log IDs. (newest first)
function fetchLogIds() {
// To gather all the log IDs, query for all records in logslastmod.
const o = db.transaction("logslastmod", "readonly").objectStore(
"logslastmod"
);
return selectQuery(o, undefined, (cursor) => {
return {
id: cursor.value.id,
ts: cursor.value.ts,
};
}).then((res) => {
// Sort IDs by timestamp (newest first)
return res.sort((a, b) => {
return b.ts - a.ts;
}).map((a) => a.id);
});
}
function deleteLogs(id) {
return new Promise((resolve, reject) => {
const txn = db.transaction(
["logs", "logslastmod"], "readwrite"
);
const o = txn.objectStore("logs");
// only load the key path, not the data which may be huge
const query = o.index("id").openKeyCursor(IDBKeyRange.only(id));
query.onsuccess = (event) => {
const cursor = event.target.result;
if (!cursor) {
return;
}
o.delete(cursor.primaryKey);
cursor.continue();
}
txn.oncomplete = () => {
resolve();
};
txn.onerror = (event) => {
reject(
new Error(
"Failed to delete logs for " +
`'${id}' : ${event.target.errorCode}`
)
);
};
// delete last modified entries
const lastModStore = txn.objectStore("logslastmod");
lastModStore.delete(id);
});
}
let allLogIds = await fetchLogIds();
let removeLogIds = [];
let logs = [];
let size = 0;
for (let i = 0; i < allLogIds.length; i++) {
let lines = await fetchLogs(allLogIds[i]);
// always include at least one log file, but only include
// subsequent ones if they won't take us over the MAX_LOG_SIZE
if (i > 0 && size + lines.length > MAX_LOG_SIZE) {
// the remaining log IDs should be removed. If we go out of
// bounds this is just []
//
// XXX: there's nothing stopping the current session exceeding
// MAX_LOG_SIZE. We ought to think about culling it.
removeLogIds = allLogIds.slice(i + 1);
break;
}
logs.push({
lines: lines,
id: allLogIds[i],
});
size += lines.length;
}
if (removeLogIds.length > 0) {
console.log("Removing logs: ", removeLogIds);
// Don't await this because it's non-fatal if we can't clean up
// logs.
Promise.all(removeLogIds.map((id) => deleteLogs(id))).then(() => {
console.log(`Removed ${removeLogIds.length} old logs.`);
}, (err) => {
console.error(err);
})
}
return logs;
}
_generateLogEntry(lines) {
return {
id: this.id,
lines: lines,
index: this.index++
};
}
_generateLastModifiedTime() {
return {
id: this.id,
ts: Date.now(),
};
}
}
/**
* Helper method to collect results from a Cursor and promiseify it.
* @param {ObjectStore|Index} store The store to perform openCursor on.
* @param {IDBKeyRange=} keyRange Optional key range to apply on the cursor.
* @param {Function} resultMapper A function which is repeatedly called with a
* Cursor.
* Return the data you want to keep.
* @return {Promise<T[]>} Resolves to an array of whatever you returned from
* resultMapper.
*/
function selectQuery(store, keyRange, resultMapper) {
const query = store.openCursor(keyRange);
return new Promise((resolve, reject) => {
let results = [];
query.onerror = (event) => {
reject(new Error("Query failed: " + event.target.errorCode));
};
// collect results
query.onsuccess = (event) => {
const cursor = event.target.result;
if (!cursor) {
resolve(results);
return; // end of results
}
results.push(resultMapper(cursor));
cursor.continue();
}
});
}
let store = null;
let logger = null;
let initPromise = null;
module.exports = {
/**
* Configure rage shaking support for sending bug reports.
* Modifies globals.
* @return {Promise} Resolves when set up.
*/
init: function() {
if (initPromise) {
return initPromise;
}
logger = new ConsoleLogger();
logger.monkeyPatch(window.console);
// just *accessing* indexedDB throws an exception in firefox with
// indexeddb disabled.
let indexedDB;
try {
indexedDB = window.indexedDB;
} catch(e) {}
if (indexedDB) {
store = new IndexedDBLogStore(indexedDB, logger);
initPromise = store.connect();
return initPromise;
}
initPromise = Promise.resolve();
return initPromise;
},
flush: function() {
if (!store) {
return;
}
store.flush();
},
/**
* Clean up old logs.
* @return Promise Resolves if cleaned logs.
*/
cleanup: async function() {
if (!store) {
return;
}
await store.consume();
},
/**
* Get a recent snapshot of the logs, ready for attaching to a bug report
*
* @return {Array<{lines: string, id, string}>} list of log data
*/
getLogsForReport: async function() {
if (!logger) {
throw new Error(
"No console logger, did you forget to call init()?"
);
}
// If in incognito mode, store is null, but we still want bug report
// sending to work going off the in-memory console logs.
if (store) {
// flush most recent logs
await store.flush();
return await store.consume();
}
else {
return [{
lines: logger.flush(true),
id: "-",
}];
}
},
};

68
src/vector/rageshakesetup.js Normal file
View file

@ -0,0 +1,68 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/*
* Separate file that sets up rageshake logging when imported.
* This is necessary so that rageshake logging is set up before
* anything else. Webpack puts all import statements at the top
* of the file before any code, so imports will always be
* evaluated first. Other imports can cause other code to be
* evaluated (eg. the loglevel library in js-sdk, which if set
* up before rageshake causes some js-sdk logging to be missing
* from the rageshake.)
*/
import rageshake from "matrix-react-sdk/lib/rageshake/rageshake";
import SdkConfig from "matrix-react-sdk/lib/SdkConfig";
function initRageshake() {
rageshake.init().then(() => {
console.log("Initialised rageshake.");
console.log("To fix line numbers in Chrome: " +
"Meatball menu → Settings → Blackboxing → Add /rageshake\\.js$");
window.addEventListener('beforeunload', (e) => {
console.log('riot-web closing');
// try to flush the logs to indexeddb
rageshake.flush();
});
rageshake.cleanup();
}, (err) => {
console.error("Failed to initialise rageshake: " + err);
});
}
initRageshake();
global.mxSendRageshake = function(text, withLogs) {
if (withLogs === undefined) withLogs = true;
if (!text || !text.trim()) {
console.error("Cannot send a rageshake without a message - please tell us what went wrong");
return;
}
require(['matrix-react-sdk/lib/rageshake/submit-rageshake'], (s) => {
s(SdkConfig.get().bug_report_endpoint_url, {
userText: text,
sendLogs: withLogs,
progressCallback: console.log.bind(console),
}).then(() => {
console.log("Bug report sent!");
}, (err) => {
console.error(err);
});
});
};

125
src/vector/submit-rageshake.js
View file

@ -1,125 +0,0 @@
/*
Copyright 2017 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import pako from 'pako';
import Promise from 'bluebird';
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import rageshake from './rageshake'
// polyfill textencoder if necessary
import * as TextEncodingUtf8 from 'text-encoding-utf-8';
let TextEncoder = window.TextEncoder;
if (!TextEncoder) {
TextEncoder = TextEncodingUtf8.TextEncoder;
}
/**
* Send a bug report.
*
* @param {string} bugReportEndpoint HTTP url to send the report to
*
* @param {object} opts optional dictionary of options
*
* @param {string} opts.userText Any additional user input.
*
* @param {boolean} opts.sendLogs True to send logs
*
* @param {function(string)} opts.progressCallback Callback to call with progress updates
*
* @return {Promise} Resolved when the bug report is sent.
*/
export default async function sendBugReport(bugReportEndpoint, opts) {
if (!bugReportEndpoint) {
throw new Error("No bug report endpoint has been set.");
}
opts = opts || {};
const progressCallback = opts.progressCallback || (() => {});
progressCallback(_t("Collecting app version information"));
let version = "UNKNOWN";
try {
version = await PlatformPeg.get().getAppVersion();
}
catch (err) {} // PlatformPeg already logs this.
let userAgent = "UNKNOWN";
if (window.navigator && window.navigator.userAgent) {
userAgent = window.navigator.userAgent;
}
const client = MatrixClientPeg.get();
console.log("Sending bug report.");
const body = new FormData();
body.append('text', opts.userText || "User did not supply any additional text.");
body.append('app', 'riot-web');
body.append('version', version);
body.append('user_agent', userAgent);
if (client) {
body.append('user_id', client.credentials.userId);
body.append('device_id', client.deviceId);
}
if (opts.sendLogs) {
progressCallback(_t("Collecting logs"));
const logs = await rageshake.getLogsForReport();
for (let entry of logs) {
// encode as UTF-8
const buf = new TextEncoder().encode(entry.lines);
// compress
const compressed = pako.gzip(buf);
body.append('compressed-log', new Blob([compressed]), entry.id);
}
}
progressCallback(_t("Uploading report"));
await _submitReport(bugReportEndpoint, body, progressCallback);
}
function _submitReport(endpoint, body, progressCallback) {
const deferred = Promise.defer();
const req = new XMLHttpRequest();
req.open("POST", endpoint);
req.timeout = 5 * 60 * 1000;
req.onreadystatechange = function() {
if (req.readyState === XMLHttpRequest.LOADING) {
progressCallback(_t("Waiting for response from server"));
} else if (req.readyState === XMLHttpRequest.DONE) {
on_done();
}
};
req.send(body);
return deferred.promise;
function on_done() {
if (req.status < 200 || req.status >= 400) {
deferred.reject(new Error(`HTTP ${req.status}`));
return;
}
deferred.resolve();
}
}

24
src/vector/url_utils.js
View file

@ -1,3 +1,19 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import qs from 'querystring';
// We want to support some name / value pairs in the fragment
@ -7,16 +23,16 @@ import qs from 'querystring';
export function parseQsFromFragment(location) {
// if we have a fragment, it will start with '#', which we need to drop.
// (if we don't, this will return '').
var fragment = location.hash.substring(1);
const fragment = location.hash.substring(1);
// our fragment may contain a query-param-like section. we need to fish
// this out *before* URI-decoding because the params may contain ? and &
// characters which are only URI-encoded once.
var hashparts = fragment.split('?');
const hashparts = fragment.split('?');
var result = {
const result = {
location: decodeURIComponent(hashparts[0]),
params: {}
params: {},
};
if (hashparts.length > 1) {