Merge remote-tracking branch 'origin/develop' into gsouquet/fix-backdrop-filter

* origin/develop: (1278 commits)
  Add a little padding
  Keep number field in focus when pressing dialpad buttons (#6520)
  Remove old version
  Fix video call persisting when widget removed
  Update link to matrix-js-sdk CONTRIBUTING file (#6557)
  $toast-bg-color -> $system
  $system-... -> $system
  Iterate PR based on feedback
  Remove unnecessary code
  Use AccessibleTooltipButton
  Just upload the PR object itself
  Edit PR Description instead of commenting
  publish the right directory
  Fix Netflify builds from fork PRs
  This doesn't need to be here as it was moved into CallViewButtons
  Make scrollbar dot transparent
  Iterate PR based on feedback
  Don't set hidden RRs labs setting at account level
  Add a comment for weirdly placed div
  Add full class names to animations.scss
  ...

src/utils/AutoDiscoveryUtils.tsx

@@ -90,7 +90,7 @@ export default class AutoDiscoveryUtils {
                             href="https://github.com/vector-im/element-web/blob/master/docs/config.md"
                             target="_blank"
                             rel="noreferrer noopener"
-                        >{sub}</a>;
+                        >{ sub }</a>;
                     },
                 },
             );
@@ -130,8 +130,8 @@ export default class AutoDiscoveryUtils {
             serverErrorIsFatal: isFatalError,
             serverDeadError: (
                 <div>
-                    <strong>{title}</strong>
-                    <div>{body}</div>
+                    <strong>{ title }</strong>
+                    <div>{ body }</div>
                 </div>
             ),
         };

src/utils/DecryptFile.ts

@@ -17,18 +17,22 @@ limitations under the License.
 // Pull in the encryption lib so that we can decrypt attachments.
 import encrypt from 'browser-encrypt-attachment';
 import { mediaFromContent } from "../customisations/Media";
-import { IEncryptedFile } from "../customisations/models/IMediaEventContent";
+import { IEncryptedFile, IMediaEventInfo } from "../customisations/models/IMediaEventContent";
 import { getBlobSafeMimeType } from "./blobs";
 
 /**
  * Decrypt a file attached to a matrix event.
- * @param {IEncryptedFile} file The json taken from the matrix event.
+ * @param {IEncryptedFile} file The encrypted file information taken from the matrix event.
  *   This passed to [link]{@link https://github.com/matrix-org/browser-encrypt-attachments}
  *   as the encryption info object, so will also have the those keys in addition to
  *   the keys below.
+ * @param {IMediaEventInfo} info The info parameter taken from the matrix event.
  * @returns {Promise<Blob>} Resolves to a Blob of the file.
  */
-export function decryptFile(file: IEncryptedFile): Promise<Blob> {
+export function decryptFile(
+    file: IEncryptedFile,
+    info?: IMediaEventInfo,
+): Promise<Blob> {
     const media = mediaFromContent({ file });
     // Download the encrypted file as an array buffer.
     return media.downloadSource().then((response) => {
@@ -44,7 +48,7 @@ export function decryptFile(file: IEncryptedFile): Promise<Blob> {
         // they introduce XSS attacks if the Blob URI is viewed directly in the
         // browser (e.g. by copying the URI into a new tab or window.)
         // See warning at top of file.
-        let mimetype = file.mimetype ? file.mimetype.split(";")[0].trim() : '';
+        let mimetype = info?.mimetype ? info.mimetype.split(";")[0].trim() : '';
         mimetype = getBlobSafeMimeType(mimetype);
 
         return new Blob([dataArray], { type: mimetype });

src/utils/ErrorUtils.tsx

@@ -44,7 +44,7 @@ export function messageForResourceLimitError(
 
     const linkSub = sub => {
         if (adminContact) {
-            return <a href={adminContact} target="_blank" rel="noreferrer noopener">{sub}</a>;
+            return <a href={adminContact} target="_blank" rel="noreferrer noopener">{ sub }</a>;
         } else {
             return sub;
         }
@@ -76,12 +76,12 @@ export function messageForSyncError(err: MatrixError | Error): ReactNode {
             },
         );
         return <div>
-            <div>{limitError}</div>
-            <div>{adminContact}</div>
+            <div>{ limitError }</div>
+            <div>{ adminContact }</div>
         </div>;
     } else {
         return <div>
-            {_t("Unable to connect to Homeserver. Retrying...")}
+            { _t("Unable to connect to Homeserver. Retrying...") }
         </div>;
     }
 }

src/utils/EventUtils.ts

@@ -19,6 +19,9 @@ import { MatrixEvent, EventStatus } from 'matrix-js-sdk/src/models/event';
 
 import { MatrixClientPeg } from '../MatrixClientPeg';
 import shouldHideEvent from "../shouldHideEvent";
+import { getHandlerTile, haveTileForEvent } from "../components/views/rooms/EventTile";
+import SettingsStore from "../settings/SettingsStore";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 
 /**
  * Returns whether an event should allow actions like reply, reactions, edit, etc.
@@ -96,3 +99,43 @@ export function findEditableEvent(room: Room, isForward: boolean, fromEventId: s
     }
 }
 
+export function getEventDisplayInfo(mxEvent: MatrixEvent): {
+    isInfoMessage: boolean;
+    tileHandler: string;
+    isBubbleMessage: boolean;
+} {
+    const content = mxEvent.getContent();
+    const msgtype = content.msgtype;
+    const eventType = mxEvent.getType();
+
+    let tileHandler = getHandlerTile(mxEvent);
+
+    // Info messages are basically information about commands processed on a room
+    let isBubbleMessage = (
+        eventType.startsWith("m.key.verification") ||
+        (eventType === EventType.RoomMessage && msgtype && msgtype.startsWith("m.key.verification")) ||
+        (eventType === EventType.RoomCreate) ||
+        (eventType === EventType.RoomEncryption) ||
+        (eventType === EventType.CallInvite) ||
+        (tileHandler === "messages.MJitsiWidgetEvent")
+    );
+    let isInfoMessage = (
+        !isBubbleMessage &&
+        eventType !== EventType.RoomMessage &&
+        eventType !== EventType.Sticker &&
+        eventType !== EventType.RoomCreate
+    );
+
+    // If we're showing hidden events in the timeline, we should use the
+    // source tile when there's no regular tile for an event and also for
+    // replace relations (which otherwise would display as a confusing
+    // duplicate of the thing they are replacing).
+    if (SettingsStore.getValue("showHiddenEventsInTimeline") && !haveTileForEvent(mxEvent)) {
+        tileHandler = "messages.ViewSourceEvent";
+        isBubbleMessage = false;
+        // Reuse info message avatar and sender profile styling
+        isInfoMessage = true;
+    }
+
+    return { tileHandler, isInfoMessage, isBubbleMessage };
+}

src/utils/FileDownloader.ts

@@ -0,0 +1,102 @@
+/*
+Copyright 2021 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.
+*/
+
+export type getIframeFn = () => HTMLIFrameElement; // eslint-disable-line @typescript-eslint/naming-convention
+
+export const DEFAULT_STYLES = {
+    imgSrc: "",
+    imgStyle: null, // css props
+    style: "",
+    textContent: "",
+};
+
+type DownloadOptions = {
+    blob: Blob;
+    name: string;
+    autoDownload?: boolean;
+    opts?: typeof DEFAULT_STYLES;
+};
+
+// set up the iframe as a singleton so we don't have to figure out destruction of it down the line.
+let managedIframe: HTMLIFrameElement;
+let onLoadPromise: Promise<void>;
+function getManagedIframe(): { iframe: HTMLIFrameElement, onLoadPromise: Promise<void> } {
+    if (managedIframe) return { iframe: managedIframe, onLoadPromise };
+
+    managedIframe = document.createElement("iframe");
+
+    // Need to append the iframe in order for the browser to load it.
+    document.body.appendChild(managedIframe);
+
+    // Dev note: the reassignment warnings are entirely incorrect here.
+
+    managedIframe.style.display = "none";
+
+    // @ts-ignore
+    // noinspection JSConstantReassignment
+    managedIframe.sandbox = "allow-scripts allow-downloads allow-downloads-without-user-activation";
+
+    onLoadPromise = new Promise(resolve => {
+        managedIframe.onload = () => {
+            resolve();
+        };
+        managedIframe.src = "usercontent/"; // XXX: Should come from the skin
+    });
+
+    return { iframe: managedIframe, onLoadPromise };
+}
+
+// TODO: If we decide to keep the download link behaviour, we should bring the style management into here.
+
+/**
+ * Helper to handle safe file downloads. This operates off an iframe for reasons described
+ * by the blob helpers. By default, this will use a hidden iframe to manage the download
+ * through a user content wrapper, but can be given an iframe reference if the caller needs
+ * additional control over the styling/position of the iframe itself.
+ */
+export class FileDownloader {
+    private onLoadPromise: Promise<void>;
+
+    /**
+     * Creates a new file downloader
+     * @param iframeFn Function to get a pre-configured iframe. Set to null to have the downloader
+     * use a generic, hidden, iframe.
+     */
+    constructor(private iframeFn: getIframeFn = null) {
+    }
+
+    private get iframe(): HTMLIFrameElement {
+        const iframe = this.iframeFn?.();
+        if (!iframe) {
+            const managed = getManagedIframe();
+            this.onLoadPromise = managed.onLoadPromise;
+            return managed.iframe;
+        }
+        this.onLoadPromise = null;
+        return iframe;
+    }
+
+    public async download({ blob, name, autoDownload = true, opts = DEFAULT_STYLES }: DownloadOptions) {
+        const iframe = this.iframe; // get the iframe first just in case we need to await onload
+        if (this.onLoadPromise) await this.onLoadPromise;
+        iframe.contentWindow.postMessage({
+            ...opts,
+            blob: blob,
+            download: name,
+            auto: autoDownload,
+        }, '*');
+    }
+}

src/utils/FileUtils.ts

@@ -0,0 +1,71 @@
+/*
+Copyright 2015 - 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+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 filesize from 'filesize';
+import { IMediaEventContent } from '../customisations/models/IMediaEventContent';
+import { _t } from '../languageHandler';
+
+/**
+ * Extracts a human readable label for the file attachment to use as
+ * link text.
+ *
+ * @param {IMediaEventContent} content The "content" key of the matrix event.
+ * @param {string} fallbackText The fallback text
+ * @param {boolean} withSize Whether to include size information. Default true.
+ * @param {boolean} shortened Ensure the extension of the file name is visible. Default false.
+ * @return {string} the human readable link text for the attachment.
+ */
+export function presentableTextForFile(
+    content: IMediaEventContent,
+    fallbackText = _t("Attachment"),
+    withSize = true,
+    shortened = false,
+): string {
+    let text = fallbackText;
+    if (content.body && content.body.length > 0) {
+        // The content body should be the name of the file including a
+        // file extension.
+        text = content.body;
+    }
+
+    // We shorten to 15 characters somewhat arbitrarily, and assume most files
+    // will have a 3 character (plus full stop) extension. The goal is to knock
+    // the label down to 15-25 characters, not perfect accuracy.
+    if (shortened && text.length > 19) {
+        const parts = text.split('.');
+        let fileName = parts.slice(0, parts.length - 1).join('.').substring(0, 15);
+        const extension = parts[parts.length - 1];
+
+        // Trim off any full stops from the file name to avoid a case where we
+        // add an ellipsis that looks really funky.
+        fileName = fileName.replace(/\.*$/g, '');
+
+        text = `${fileName}...${extension}`;
+    }
+
+    if (content.info && content.info.size && withSize) {
+        // If we know the size of the file then add it as human readable
+        // string to the end of the link text so that the user knows how
+        // big a file they are downloading.
+        // The content.info also contains a MIME-type but we don't display
+        // it since it is "ugly", users generally aren't aware what it
+        // means and the type of the attachment can usually be inferrered
+        // from the file extension.
+        text += ' (' + filesize(content.info.size) + ')';
+    }
+    return text;
+}

src/utils/FixedRollingArray.ts

@@ -0,0 +1,54 @@
+/*
+Copyright 2021 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 { arrayFastClone, arraySeed } from "./arrays";
+
+/**
+ * An array which is of fixed length and accepts rolling values. Values will
+ * be inserted on the left, falling off the right.
+ */
+export class FixedRollingArray<T> {
+    private samples: T[] = [];
+
+    /**
+     * Creates a new fixed rolling array.
+     * @param width The width of the array.
+     * @param padValue The value to seed the array with.
+     */
+    constructor(private width: number, padValue: T) {
+        this.samples = arraySeed(padValue, this.width);
+    }
+
+    /**
+     * The array, as a fixed length.
+     */
+    public get value(): T[] {
+        return this.samples;
+    }
+
+    /**
+     * Pushes a value to the array.
+     * @param value The value to push.
+     */
+    public pushValue(value: T) {
+        let swap = arrayFastClone(this.samples);
+        swap.splice(0, 0, value);
+        if (swap.length > this.width) {
+            swap = swap.slice(0, this.width);
+        }
+        this.samples = swap;
+    }
+}

src/utils/FontManager.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 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.
@@ -21,7 +21,7 @@ limitations under the License.
  * MIT license
  */
 
-function safariVersionCheck(ua) {
+function safariVersionCheck(ua: string): boolean {
     console.log("Browser is Safari - checking version for COLR support");
     try {
         const safariVersionMatch = ua.match(/Mac OS X ([\d|_]+).*Version\/([\d|.]+).*Safari/);
@@ -44,7 +44,7 @@ function safariVersionCheck(ua) {
     return false;
 }
 
-async function isColrFontSupported() {
+async function isColrFontSupported(): Promise<boolean> {
     console.log("Checking for COLR support");
 
     const { userAgent } = navigator;
@@ -101,7 +101,7 @@ async function isColrFontSupported() {
 }
 
 let colrFontCheckStarted = false;
-export async function fixupColorFonts() {
+export async function fixupColorFonts(): Promise<void> {
     if (colrFontCheckStarted) {
         return;
     }
@@ -112,14 +112,14 @@ export async function fixupColorFonts() {
         document.fonts.add(new FontFace("Twemoji", path, {}));
         // For at least Chrome on Windows 10, we have to explictly add extra
         // weights for the emoji to appear in bold messages, etc.
-        document.fonts.add(new FontFace("Twemoji", path, { weight: 600 }));
-        document.fonts.add(new FontFace("Twemoji", path, { weight: 700 }));
+        document.fonts.add(new FontFace("Twemoji", path, { weight: "600" }));
+        document.fonts.add(new FontFace("Twemoji", path, { weight: "700" }));
     } else {
         // fall back to SBIX, generated via https://github.com/matrix-org/twemoji-colr/tree/matthew/sbix
         const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2")}')`;
         document.fonts.add(new FontFace("Twemoji", path, {}));
-        document.fonts.add(new FontFace("Twemoji", path, { weight: 600 }));
-        document.fonts.add(new FontFace("Twemoji", path, { weight: 700 }));
+        document.fonts.add(new FontFace("Twemoji", path, { weight: "600" }));
+        document.fonts.add(new FontFace("Twemoji", path, { weight: "700" }));
     }
     // ...and if SBIX is not supported, the browser will fall back to one of the native fonts specified.
 }

src/utils/FormattingUtils.ts

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import { _t } from '../languageHandler';
+import { jsxJoin } from './ReactUtils';
 
 /**
  * formats numbers to fit into ~3 characters, suitable for badge counts
@@ -103,7 +104,7 @@ export function getUserNameColorClass(userId: string): string {
  * @returns {string} a string constructed by joining `items` with a comma
  * between each item, but with the last item appended as " and [lastItem]".
  */
-export function formatCommaSeparatedList(items: string[], itemLimit?: number): string {
+export function formatCommaSeparatedList(items: Array<string | JSX.Element>, itemLimit?: number): string | JSX.Element {
     const remaining = itemLimit === undefined ? 0 : Math.max(
         items.length - itemLimit, 0,
     );
@@ -113,9 +114,9 @@ export function formatCommaSeparatedList(items: string[], itemLimit?: number): s
         return items[0];
     } else if (remaining > 0) {
         items = items.slice(0, itemLimit);
-        return _t("%(items)s and %(count)s others", { items: items.join(', '), count: remaining } );
+        return _t("%(items)s and %(count)s others", { items: jsxJoin(items, ', '), count: remaining } );
     } else {
         const lastItem = items.pop();
-        return _t("%(items)s and %(lastItem)s", { items: items.join(', '), lastItem: lastItem });
+        return _t("%(items)s and %(lastItem)s", { items: jsxJoin(items, ', '), lastItem: lastItem });
     }
 }

src/utils/HostingLink.js

@@ -14,9 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import url from 'url';
-import qs from 'qs';
-
 import SdkConfig from '../SdkConfig';
 import { MatrixClientPeg } from '../MatrixClientPeg';
 
@@ -28,11 +25,8 @@ export function getHostingLink(campaign) {
     if (MatrixClientPeg.get().getDomain() !== 'matrix.org') return null;
 
     try {
-        const hostingUrl = url.parse(hostingLink);
-        const params = qs.parse(hostingUrl.query);
-        params.utm_campaign = campaign;
-        hostingUrl.search = undefined;
-        hostingUrl.query = params;
+        const hostingUrl = new URL(hostingLink);
+        hostingUrl.searchParams.set("utm_campaign", campaign);
         return hostingUrl.format();
     } catch (e) {
         return hostingLink;

src/utils/LazyValue.ts

@@ -0,0 +1,59 @@
+/*
+Copyright 2021 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.
+*/
+
+/**
+ * Utility class for lazily getting a variable.
+ */
+export class LazyValue<T> {
+    private val: T;
+    private prom: Promise<T>;
+    private done = false;
+
+    public constructor(private getFn: () => Promise<T>) {
+    }
+
+    /**
+     * Whether or not a cached value is present.
+     */
+    public get present(): boolean {
+        // we use a tracking variable just in case the final value is falsey
+        return this.done;
+    }
+
+    /**
+     * Gets the value without invoking a get. May be undefined until the
+     * value is fetched properly.
+     */
+    public get cachedValue(): T {
+        return this.val;
+    }
+
+    /**
+     * Gets a promise which resolves to the value, eventually.
+     */
+    public get value(): Promise<T> {
+        if (this.prom) return this.prom;
+        this.prom = this.getFn();
+
+        // Fork the promise chain to avoid accidentally making it return undefined always.
+        this.prom.then(v => {
+            this.val = v;
+            this.done = true;
+        });
+
+        return this.prom;
+    }
+}

src/utils/MediaEventHelper.ts

@@ -0,0 +1,121 @@
+/*
+Copyright 2021 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 { MatrixEvent } from "matrix-js-sdk/src";
+import { LazyValue } from "./LazyValue";
+import { Media, mediaFromContent } from "../customisations/Media";
+import { decryptFile } from "./DecryptFile";
+import { IMediaEventContent } from "../customisations/models/IMediaEventContent";
+import { IDestroyable } from "./IDestroyable";
+import { EventType, MsgType } from "matrix-js-sdk/src/@types/event";
+
+// TODO: We should consider caching the blobs. https://github.com/vector-im/element-web/issues/17192
+
+export class MediaEventHelper implements IDestroyable {
+    // Either an HTTP or Object URL (when encrypted) to the media.
+    public readonly sourceUrl: LazyValue<string>;
+    public readonly thumbnailUrl: LazyValue<string>;
+
+    // Either the raw or decrypted (when encrypted) contents of the file.
+    public readonly sourceBlob: LazyValue<Blob>;
+    public readonly thumbnailBlob: LazyValue<Blob>;
+
+    public readonly media: Media;
+
+    public constructor(private event: MatrixEvent) {
+        this.sourceUrl = new LazyValue(this.prepareSourceUrl);
+        this.thumbnailUrl = new LazyValue(this.prepareThumbnailUrl);
+        this.sourceBlob = new LazyValue(this.fetchSource);
+        this.thumbnailBlob = new LazyValue(this.fetchThumbnail);
+
+        this.media = mediaFromContent(this.event.getContent());
+    }
+
+    public get fileName(): string {
+        return this.event.getContent<IMediaEventContent>().body || "download";
+    }
+
+    public destroy() {
+        if (this.media.isEncrypted) {
+            if (this.sourceUrl.present) URL.revokeObjectURL(this.sourceUrl.cachedValue);
+            if (this.thumbnailUrl.present) URL.revokeObjectURL(this.thumbnailUrl.cachedValue);
+        }
+    }
+
+    private prepareSourceUrl = async () => {
+        if (this.media.isEncrypted) {
+            const blob = await this.sourceBlob.value;
+            return URL.createObjectURL(blob);
+        } else {
+            return this.media.srcHttp;
+        }
+    };
+
+    private prepareThumbnailUrl = async () => {
+        if (this.media.isEncrypted) {
+            const blob = await this.thumbnailBlob.value;
+            if (blob === null) return null;
+            return URL.createObjectURL(blob);
+        } else {
+            return this.media.thumbnailHttp;
+        }
+    };
+
+    private fetchSource = () => {
+        if (this.media.isEncrypted) {
+            const content = this.event.getContent<IMediaEventContent>();
+            return decryptFile(content.file, content.info);
+        }
+        return this.media.downloadSource().then(r => r.blob());
+    };
+
+    private fetchThumbnail = () => {
+        if (!this.media.hasThumbnail) return Promise.resolve(null);
+
+        if (this.media.isEncrypted) {
+            const content = this.event.getContent<IMediaEventContent>();
+            if (content.info?.thumbnail_file) {
+                return decryptFile(content.info.thumbnail_file, content.info.thumbnail_info);
+            } else {
+                // "Should never happen"
+                console.warn("Media claims to have thumbnail and is encrypted, but no thumbnail_file found");
+                return Promise.resolve(null);
+            }
+        }
+
+        return fetch(this.media.thumbnailHttp).then(r => r.blob());
+    };
+
+    public static isEligible(event: MatrixEvent): boolean {
+        if (!event) return false;
+        if (event.isRedacted()) return false;
+        if (event.getType() === EventType.Sticker) return true;
+        if (event.getType() !== EventType.RoomMessage) return false;
+
+        const content = event.getContent();
+        const mediaMsgTypes: string[] = [
+            MsgType.Video,
+            MsgType.Audio,
+            MsgType.Image,
+            MsgType.File,
+        ];
+        if (mediaMsgTypes.includes(content.msgtype)) return true;
+        if (typeof(content.url) === 'string') return true;
+
+        // Finally, it's probably not media
+        return false;
+    }
+}

src/utils/MultiInviter.ts

@@ -133,12 +133,12 @@ export default class MultiInviter {
             if (!room) throw new Error("Room not found");
 
             const member = room.getMember(addr);
-            if (member.membership === "join") {
+            if (member?.membership === "join") {
                 throw new MatrixError({
                     errcode: USER_ALREADY_JOINED,
                     error: "Member already joined",
                 });
-            } else if (member.membership === "invite") {
+            } else if (member?.membership === "invite") {
                 throw new MatrixError({
                     errcode: USER_ALREADY_INVITED,
                     error: "Member already invited",

src/utils/PasswordScorer.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import zxcvbn from 'zxcvbn';
+import zxcvbn, { ZXCVBNFeedbackWarning } from 'zxcvbn';
 
 import { MatrixClientPeg } from '../MatrixClientPeg';
 import { _t, _td } from '../languageHandler';
@@ -84,7 +84,7 @@ export function scorePassword(password: string) {
     }
     // and warning, if any
     if (zxcvbnResult.feedback.warning) {
-        zxcvbnResult.feedback.warning = _t(zxcvbnResult.feedback.warning);
+        zxcvbnResult.feedback.warning = _t(zxcvbnResult.feedback.warning) as ZXCVBNFeedbackWarning;
     }
 
     return zxcvbnResult;

src/utils/ReactUtils.tsx

@@ -0,0 +1,33 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+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";
+
+/**
+ * Joins an array into one value with a joiner. E.g. join(["hello", "world"], " ") -> <span>hello world</span>
+ * @param array the array of element to join
+ * @param joiner the string/JSX.Element to join with
+ * @returns the joined array
+ */
+export function jsxJoin(array: Array<string | JSX.Element>, joiner?: string | JSX.Element): JSX.Element {
+    const newArray = [];
+    array.forEach((element, index) => {
+        newArray.push(element, (index === array.length - 1) ? null : joiner);
+    });
+    return (
+        <span>{ newArray }</span>
+    );
+}

src/utils/RoomUpgrade.ts

@@ -0,0 +1,93 @@
+/*
+Copyright 2021 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 { Room } from "matrix-js-sdk/src/models/room";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+
+import { inviteUsersToRoom } from "../RoomInvite";
+import Modal from "../Modal";
+import { _t } from "../languageHandler";
+import ErrorDialog from "../components/views/dialogs/ErrorDialog";
+import SpaceStore from "../stores/SpaceStore";
+
+export async function upgradeRoom(
+    room: Room,
+    targetVersion: string,
+    inviteUsers = false,
+    handleError = true,
+    updateSpaces = true,
+): Promise<string> {
+    const cli = room.client;
+
+    let newRoomId: string;
+    try {
+        ({ replacement_room: newRoomId } = await cli.upgradeRoom(room.roomId, targetVersion));
+    } catch (e) {
+        if (!handleError) throw e;
+        console.error(e);
+
+        Modal.createTrackedDialog("Room Upgrade Error", "", ErrorDialog, {
+            title: _t('Error upgrading room'),
+            description: _t('Double check that your server supports the room version chosen and try again.'),
+        });
+        throw e;
+    }
+
+    // We have to wait for the js-sdk to give us the room back so
+    // we can more effectively abuse the MultiInviter behaviour
+    // which heavily relies on the Room object being available.
+    if (inviteUsers) {
+        const checkForUpgradeFn = async (newRoom: Room): Promise<void> => {
+            // The upgradePromise should be done by the time we await it here.
+            if (newRoom.roomId !== newRoomId) return;
+
+            const toInvite = [
+                ...room.getMembersWithMembership("join"),
+                ...room.getMembersWithMembership("invite"),
+            ].map(m => m.userId).filter(m => m !== cli.getUserId());
+
+            if (toInvite.length > 0) {
+                // Errors are handled internally to this function
+                await inviteUsersToRoom(newRoomId, toInvite);
+            }
+
+            cli.removeListener('Room', checkForUpgradeFn);
+        };
+        cli.on('Room', checkForUpgradeFn);
+    }
+
+    if (updateSpaces) {
+        const parents = SpaceStore.instance.getKnownParents(room.roomId);
+        try {
+            for (const parentId of parents) {
+                const parent = cli.getRoom(parentId);
+                if (!parent?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId())) continue;
+
+                const currentEv = parent.currentState.getStateEvents(EventType.SpaceChild, room.roomId);
+                await cli.sendStateEvent(parentId, EventType.SpaceChild, {
+                    ...(currentEv?.getContent() || {}), // copy existing attributes like suggested
+                    via: [cli.getDomain()],
+                }, newRoomId);
+                await cli.sendStateEvent(parentId, EventType.SpaceChild, {}, room.roomId);
+            }
+        } catch (e) {
+            // These errors are not critical to the room upgrade itself
+            console.warn("Failed to update parent spaces during room upgrade", e);
+        }
+    }
+
+    return newRoomId;
+}

src/utils/Timer.ts

@@ -26,7 +26,7 @@ Once a timer is finished or aborted, it can't be started again
 a new one through `clone()` or `cloneIfRun()`.
 */
 export default class Timer {
-    private timerHandle: NodeJS.Timeout;
+    private timerHandle: number;
     private startTs: number;
     private promise: Promise<void>;
     private resolve: () => void;

src/utils/WidgetUtils.ts

@@ -386,7 +386,7 @@ export default class WidgetUtils {
         });
     }
 
-    static removeIntegrationManagerWidgets(): Promise<void> {
+    static async removeIntegrationManagerWidgets(): Promise<void> {
         const client = MatrixClientPeg.get();
         if (!client) {
             throw new Error('User not logged in');
@@ -399,7 +399,7 @@ export default class WidgetUtils {
                 delete userWidgets[key];
             }
         });
-        return client.setAccountData('m.widgets', userWidgets);
+        await client.setAccountData('m.widgets', userWidgets);
     }
 
     static addIntegrationManagerWidget(name: string, uiUrl: string, apiUrl: string): Promise<void> {
@@ -407,7 +407,7 @@ export default class WidgetUtils {
             "integration_manager_" + (new Date().getTime()),
             WidgetType.INTEGRATION_MANAGER,
             uiUrl,
-            "Integration Manager: " + name,
+            "Integration manager: " + name,
             { "api_url": apiUrl },
         );
     }
@@ -416,7 +416,7 @@ export default class WidgetUtils {
      * Remove all stickerpicker widgets (stickerpickers are user widgets by nature)
      * @return {Promise} Resolves on account data updated
      */
-    static removeStickerpickerWidgets(): Promise<void> {
+    static async removeStickerpickerWidgets(): Promise<void> {
         const client = MatrixClientPeg.get();
         if (!client) {
             throw new Error('User not logged in');
@@ -429,7 +429,7 @@ export default class WidgetUtils {
                 delete userWidgets[key];
             }
         });
-        return client.setAccountData('m.widgets', userWidgets);
+        await client.setAccountData('m.widgets', userWidgets);
     }
 
     static makeAppConfig(

src/utils/arrays.ts

@@ -112,11 +112,9 @@ export function arrayRescale(input: number[], newMin: number, newMax: number): n
  * @returns {T[]} The array.
  */
 export function arraySeed<T>(val: T, length: number): T[] {
-    const a: T[] = [];
-    for (let i = 0; i < length; i++) {
-        a.push(val);
-    }
-    return a;
+    // Size the array up front for performance, and use `fill` to let the browser
+    // optimize the operation better than we can with a `for` loop, if it wants.
+    return new Array<T>(length).fill(val);
 }
 
 /**

src/utils/createMatrixClient.ts

@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+// @ts-ignore - `.ts` is needed here to make TS happy
+import IndexedDBWorker from "../workers/indexeddb.worker.ts";
 import { createClient, ICreateClientOpts } from "matrix-js-sdk/src/matrix";
 import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
 import { WebStorageSessionStore } from "matrix-js-sdk/src/store/session/webstorage";
@@ -35,10 +37,6 @@ try {
  * @param {Object} opts  options to pass to Matrix.createClient. This will be
  *    extended with `sessionStore` and `store` members.
  *
- * @property {string} indexedDbWorkerScript  Optional URL for a web worker script
- *    for IndexedDB store operations. By default, indexeddb ops are done on
- *    the main thread.
- *
  * @returns {MatrixClient} the newly-created MatrixClient
  */
 export default function createMatrixClient(opts: ICreateClientOpts) {
@@ -51,7 +49,7 @@ export default function createMatrixClient(opts: ICreateClientOpts) {
             indexedDB: indexedDB,
             dbName: "riot-web-sync",
             localStorage: localStorage,
-            workerScript: createMatrixClient.indexedDbWorkerScript,
+            workerFactory: () => new IndexedDBWorker(),
         });
     }
 
@@ -70,5 +68,3 @@ export default function createMatrixClient(opts: ICreateClientOpts) {
         ...opts,
     });
 }
-
-createMatrixClient.indexedDbWorkerScript = null;

src/utils/objects.ts

@@ -141,21 +141,3 @@ export function objectKeyChanges<O extends {}>(a: O, b: O): (keyof O)[] {
 export function objectClone<O extends {}>(obj: O): O {
     return JSON.parse(JSON.stringify(obj));
 }
-
-/**
- * Converts a series of entries to an object.
- * @param entries The entries to convert.
- * @returns The converted object.
- */
-// NOTE: Deprecated once we have Object.fromEntries() support.
-// @ts-ignore - return type is complaining about non-string keys, but we know better
-export function objectFromEntries<K, V>(entries: Iterable<[K, V]>): {[k: K]: V} {
-    const obj: {
-        // @ts-ignore - same as return type
-        [k: K]: V;} = {};
-    for (const e of entries) {
-        // @ts-ignore - same as return type
-        obj[e[0]] = e[1];
-    }
-    return obj;
-}

src/utils/space.tsx

@@ -16,10 +16,10 @@ limitations under the License.
 
 import React from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixClient } from "matrix-js-sdk/src/client";
 import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixClient } from "matrix-js-sdk/src/client";
 
-import { calculateRoomVia } from "../utils/permalinks/Permalinks";
+import { calculateRoomVia } from "./permalinks/Permalinks";
 import Modal from "../Modal";
 import SpaceSettingsDialog from "../components/views/dialogs/SpaceSettingsDialog";
 import AddExistingToSpaceDialog from "../components/views/dialogs/AddExistingToSpaceDialog";
@@ -29,9 +29,19 @@ import { _t } from "../languageHandler";
 import SpacePublicShare from "../components/views/spaces/SpacePublicShare";
 import InfoDialog from "../components/views/dialogs/InfoDialog";
 import { showRoomInviteDialog } from "../RoomInvite";
+import CreateSubspaceDialog from "../components/views/dialogs/CreateSubspaceDialog";
+import AddExistingSubspaceDialog from "../components/views/dialogs/AddExistingSubspaceDialog";
+import defaultDispatcher from "../dispatcher/dispatcher";
+import RoomViewStore from "../stores/RoomViewStore";
+import { Action } from "../dispatcher/actions";
+import { leaveRoomBehaviour } from "./membership";
+import Spinner from "../components/views/elements/Spinner";
+import dis from "../dispatcher/dispatcher";
+import LeaveSpaceDialog from "../components/views/dialogs/LeaveSpaceDialog";
+import CreateSpaceFromCommunityDialog from "../components/views/dialogs/CreateSpaceFromCommunityDialog";
 
-export const shouldShowSpaceSettings = (cli: MatrixClient, space: Room) => {
-    const userId = cli.getUserId();
+export const shouldShowSpaceSettings = (space: Room) => {
+    const userId = space.client.getUserId();
     return space.getMyMembership() === "join"
         && (space.currentState.maySendStateEvent(EventType.RoomAvatar, userId)
             || space.currentState.maySendStateEvent(EventType.RoomName, userId)
@@ -48,28 +58,33 @@ export const makeSpaceParentEvent = (room: Room, canonical = false) => ({
     state_key: room.roomId,
 });
 
-export const showSpaceSettings = (cli: MatrixClient, space: Room) => {
+export const showSpaceSettings = (space: Room) => {
     Modal.createTrackedDialog("Space Settings", "", SpaceSettingsDialog, {
-        matrixClient: cli,
+        matrixClient: space.client,
         space,
     }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
 };
 
-export const showAddExistingRooms = async (cli: MatrixClient, space: Room) => {
-    return Modal.createTrackedDialog(
+export const showAddExistingRooms = (space: Room): void => {
+    Modal.createTrackedDialog(
         "Space Landing",
         "Add Existing",
         AddExistingToSpaceDialog,
         {
-            matrixClient: cli,
-            onCreateRoomClick: showCreateNewRoom,
+            onCreateRoomClick: () => showCreateNewRoom(space),
+            onAddSubspaceClick: () => showAddExistingSubspace(space),
             space,
+            onFinished: (added: boolean) => {
+                if (added && RoomViewStore.getRoomId() === space.roomId) {
+                    defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
+                }
+            },
         },
         "mx_AddExistingToSpaceDialog_wrapper",
-    ).finished;
+    );
 };
 
-export const showCreateNewRoom = async (cli: MatrixClient, space: Room) => {
+export const showCreateNewRoom = async (space: Room): Promise<boolean> => {
     const modal = Modal.createTrackedDialog<[boolean, IOpts]>(
         "Space Landing",
         "Create Room",
@@ -86,7 +101,7 @@ export const showCreateNewRoom = async (cli: MatrixClient, space: Room) => {
     return shouldCreate;
 };
 
-export const showSpaceInvite = (space: Room, initialText = "") => {
+export const showSpaceInvite = (space: Room, initialText = ""): void => {
     if (space.getJoinRule() === "public") {
         const modal = Modal.createTrackedDialog("Space Invite", "User Menu", InfoDialog, {
             title: _t("Invite to %(spaceName)s", { spaceName: space.name }),
@@ -103,3 +118,67 @@ export const showSpaceInvite = (space: Room, initialText = "") => {
         showRoomInviteDialog(space.roomId, initialText);
     }
 };
+
+export const showAddExistingSubspace = (space: Room): void => {
+    Modal.createTrackedDialog(
+        "Space Landing",
+        "Create Subspace",
+        AddExistingSubspaceDialog,
+        {
+            space,
+            onCreateSubspaceClick: () => showCreateNewSubspace(space),
+            onFinished: (added: boolean) => {
+                if (added && RoomViewStore.getRoomId() === space.roomId) {
+                    defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
+                }
+            },
+        },
+        "mx_AddExistingToSpaceDialog_wrapper",
+    );
+};
+
+export const showCreateNewSubspace = (space: Room): void => {
+    Modal.createTrackedDialog(
+        "Space Landing",
+        "Create Subspace",
+        CreateSubspaceDialog,
+        {
+            space,
+            onAddExistingSpaceClick: () => showAddExistingSubspace(space),
+            onFinished: (added: boolean) => {
+                if (added && RoomViewStore.getRoomId() === space.roomId) {
+                    defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
+                }
+            },
+        },
+        "mx_CreateSubspaceDialog_wrapper",
+    );
+};
+
+export const leaveSpace = (space: Room) => {
+    Modal.createTrackedDialog("Leave Space", "", LeaveSpaceDialog, {
+        space,
+        onFinished: async (leave: boolean, rooms: Room[]) => {
+            if (!leave) return;
+            const modal = Modal.createDialog(Spinner, null, "mx_Dialog_spinner");
+            try {
+                await Promise.all(rooms.map(r => leaveRoomBehaviour(r.roomId)));
+                await leaveRoomBehaviour(space.roomId);
+            } finally {
+                modal.close();
+            }
+
+            dis.dispatch({
+                action: "after_leave_room",
+                room_id: space.roomId,
+            });
+        },
+    }, "mx_LeaveSpaceDialog_wrapper");
+};
+
+export const createSpaceFromCommunity = (cli: MatrixClient, groupId: string): Promise<[string?]> => {
+    return Modal.createTrackedDialog('Create Space', 'from community', CreateSpaceFromCommunityDialog, {
+        matrixClient: cli,
+        groupId,
+    }, "mx_CreateSpaceFromCommunityDialog_wrapper").finished as Promise<[string?]>;
+};