Merge branch 'develop' into travis/ftue/user-lists/5.3-go-button

src/utils/DMRoomMap.js

@@ -15,9 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import _uniq from 'lodash/uniq';
-import {Room} from "matrix-js-sdk/lib/matrix";
+import {Room} from "matrix-js-sdk/src/matrix";
 
 /**
  * Class that takes a Matrix Client and flips the m.direct map

src/utils/DecryptFile.js

@@ -20,7 +20,7 @@ import encrypt from 'browser-encrypt-attachment';
 // Pull in a fetch polyfill so we can download encrypted attachments.
 import 'isomorphic-fetch';
 // Grab the client so that we can turn mxc:// URLs into https:// URLS.
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 
 // WARNING: We have to be very careful about what mime-types we allow into blobs,
 // as for performance reasons these are now rendered via URL.createObjectURL()

src/utils/EventUtils.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { EventStatus } from 'matrix-js-sdk';
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import shouldHideEvent from "../shouldHideEvent";
 /**
  * Returns whether an event should allow actions like reply, reactions, edit, etc.

src/utils/HostingLink.js

@@ -18,7 +18,7 @@ import url from 'url';
 import qs from 'qs';
 
 import SdkConfig from '../SdkConfig';
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 
 export function getHostingLink(campaign) {
     const hostingLink = SdkConfig.get().hosting_signup_link;

src/utils/IdentityServerUtils.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import { SERVICE_TYPES } from 'matrix-js-sdk';
 import SdkConfig from '../SdkConfig';
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 
 export function getDefaultIdentityServerUrl() {
     return SdkConfig.get()['validated_server_config']['isUrl'];

src/utils/KeyVerificationStateObserver.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import { _t } from '../languageHandler';
 
 const SUB_EVENT_TYPES_OF_INTEREST = ["start", "cancel", "done"];

src/utils/MegolmExportEncryption.js

@@ -130,7 +130,7 @@ export async function decryptMegolmKeyFile(data, password) {
  * @param {String} data
  * @param {String} password
  * @param {Object=} options
- * @param {Nunber=} options.kdf_rounds Number of iterations to perform of the
+ * @param {Number=} options.kdf_rounds Number of iterations to perform of the
  *    key-derivation function.
  * @return {Promise<ArrayBuffer>} promise for encrypted output
  */

src/utils/MultiInviter.js

@@ -15,11 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import {getAddressType} from '../UserAddress';
 import GroupStore from '../stores/GroupStore';
 import {_t} from "../languageHandler";
-import sdk from "../index";
+import * as sdk from "../index";
 import Modal from "../Modal";
 import SettingsStore from "../settings/SettingsStore";
 import {defer} from "./promise";

src/utils/PasswordScorer.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import zxcvbn from 'zxcvbn';
 
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import { _t, _td } from '../languageHandler';
 
 const ZXCVBN_USER_INPUTS = [

src/utils/StorageManager.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import Matrix from 'matrix-js-sdk';
-import LocalStorageCryptoStore from 'matrix-js-sdk/lib/crypto/store/localStorage-crypto-store';
+import {LocalStorageCryptoStore} from 'matrix-js-sdk/src/crypto/store/localStorage-crypto-store';
 import Analytics from '../Analytics';
 
 const localStorage = window.localStorage;

src/utils/WidgetUtils.js

@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import SdkConfig from "../SdkConfig";
 import dis from '../dispatcher';
 import * as url from "url";

src/utils/createMatrixClient.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Matrix from 'matrix-js-sdk';
+import * as Matrix from 'matrix-js-sdk';
 
 const localStorage = window.localStorage;
 

src/utils/humanize.js

@@ -0,0 +1,57 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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 {_t} from "../languageHandler";
+
+/**
+ * Converts a timestamp into human-readable, translated, text.
+ * @param {number} timeMillis The time in millis to compare against.
+ * @returns {string} The humanized time.
+ */
+export function humanizeTime(timeMillis) {
+    // These are the constants we use for when to break the text
+    const MILLISECONDS_RECENT = 15000;
+    const MILLISECONDS_1_MIN = 75000;
+    const MINUTES_UNDER_1_HOUR = 45;
+    const MINUTES_1_HOUR = 75;
+    const HOURS_UNDER_1_DAY = 23;
+    const HOURS_1_DAY = 26;
+
+    const now = (new Date()).getTime();
+    let msAgo = now - timeMillis;
+    const minutes = Math.abs(Math.ceil(msAgo / 60000));
+    const hours = Math.ceil(minutes / 60);
+    const days = Math.ceil(hours / 24);
+
+    if (msAgo >= 0) { // Past
+        if (msAgo <= MILLISECONDS_RECENT) return _t("a few seconds ago");
+        if (msAgo <= MILLISECONDS_1_MIN) return _t("about a minute ago");
+        if (minutes <= MINUTES_UNDER_1_HOUR) return _t("%(num)s minutes ago", {num: minutes});
+        if (minutes <= MINUTES_1_HOUR) return _t("about an hour ago");
+        if (hours <= HOURS_UNDER_1_DAY) return _t("%(num)s hours ago", {num: hours});
+        if (hours <= HOURS_1_DAY) return _t("about a day ago");
+        return _t("%(num)s days ago", {num: days});
+    } else { // Future
+        msAgo = Math.abs(msAgo);
+        if (msAgo <= MILLISECONDS_RECENT) return _t("a few seconds from now");
+        if (msAgo <= MILLISECONDS_1_MIN) return _t("about a minute from now");
+        if (minutes <= MINUTES_UNDER_1_HOUR) return _t("%(num)s minutes from now", {num: minutes});
+        if (minutes <= MINUTES_1_HOUR) return _t("about an hour from now");
+        if (hours <= HOURS_UNDER_1_DAY) return _t("%(num)s hours from now", {num: hours});
+        if (hours <= HOURS_1_DAY) return _t("about a day from now");
+        return _t("%(num)s days from now", {num: days});
+    }
+}

src/utils/permalinks/Permalinks.js

@@ -14,15 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from "../../MatrixClientPeg";
+import {MatrixClientPeg} from "../../MatrixClientPeg";
 import isIp from "is-ip";
-import utils from 'matrix-js-sdk/lib/utils';
+import * as utils from 'matrix-js-sdk/src/utils';
 import SpecPermalinkConstructor, {baseUrl as matrixtoBaseUrl} from "./SpecPermalinkConstructor";
 import PermalinkConstructor, {PermalinkParts} from "./PermalinkConstructor";
 import RiotPermalinkConstructor from "./RiotPermalinkConstructor";
 import matrixLinkify from "../../linkify-matrix";
-
-const SdkConfig = require("../../SdkConfig");
+import SdkConfig from "../../SdkConfig";
 
 // The maximum number of servers to pick when working out which servers
 // to add to permalinks. The servers are appended as ?via=example.org

src/utils/pillify.js

@@ -16,10 +16,10 @@ limitations under the License.
 
 import React from "react";
 import ReactDOM from 'react-dom';
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import SettingsStore from "../settings/SettingsStore";
-import PushProcessor from 'matrix-js-sdk/lib/pushprocessor';
-import sdk from '../index';
+import {PushProcessor} from 'matrix-js-sdk/src/pushprocessor';
+import * as sdk from '../index';
 
 export function pillifyLinks(nodes, mxEvent) {
     const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());

src/utils/replaceableComponent.ts

@@ -0,0 +1,40 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+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 React from 'react';
+import * as sdk from '../index';
+
+/**
+ * Replaces a component with a skinned version if a skinned version exists.
+ * This decorator should only be applied to components which can be skinned. For
+ * the react-sdk this means all components should be decorated with this.
+ *
+ * The decoration works by assuming the skin has been loaded prior to the
+ * decorator being called. If that's not the case, the developer will find
+ * out quickly through various amounts of errors and explosions.
+ *
+ * For a bit more detail on how this works, see docs/skinning.md
+ * @param {string} name The dot-path name of the component being replaced.
+ * @param {React.Component} origComponent The component that can be replaced
+ * with a skinned version. If no skinned version is available, this component
+ * will be used.
+ */
+export function replaceableComponent(name: string, origComponent: React.Component) {
+    // Decorators return a function to override the class (origComponent). This
+    // ultimately assumes that `getComponent()` won't throw an error and instead
+    // return a falsey value like `null` when the skin doesn't have a component.
+    return () => sdk.getComponent(name) || origComponent;
+}