Attempt 2 to fix lint errors

Signed-off-by: Kerry Archibald <kerrya@element.io>

.github/workflows/triage-move-labelled.yml

@@ -5,6 +5,32 @@ on:
     types: [labeled]
     
 jobs:
+  apply_Z-Labs_label:
+    name: Add Z-Labs label for features behind labs flags
+    runs-on: ubuntu-latest
+    if: >
+        contains(github.event.issue.labels.*.name, 'A-Maths') || 
+        contains(github.event.issue.labels.*.name, 'A-Message-Pinning') ||
+        contains(github.event.issue.labels.*.name, 'A-Threads') ||
+        contains(github.event.issue.labels.*.name, 'A-Polls') ||
+        contains(github.event.issue.labels.*.name, 'A-Location-Sharing') ||
+        contains(github.event.issue.labels.*.name, 'A-Message-Bubbles') ||
+        contains(github.event.issue.labels.*.name, 'Z-Maximised-Widgets') ||
+        contains(github.event.issue.labels.*.name, 'Z-IA') ||
+        contains(github.event.issue.labels.*.name, 'A-Themes-Custom') ||
+        contains(github.event.issue.labels.*.name, 'A-E2EE-Dehydration') ||
+        contains(github.event.issue.labels.*.name, 'A-Tags')
+    steps:
+      - uses: actions/github-script@v5
+        with:
+          script: |
+            github.rest.issues.addLabels({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: ['Z-Labs']
+            })
+ 
   move_needs_info_issues:
     name: X-Needs-Info issues to Need info column on triage board
     runs-on: ubuntu-latest

docs/config.md

@@ -240,3 +240,4 @@ Currently, the following UI feature flags are supported:
   user.
 * `UIFeature.roomHistorySettings` - Whether or not the room history settings are shown to the user.
   This should only be used if the room history visibility options are managed by the server.
+* `UIFeature.TimelineEnableRelativeDates` - Display relative date separators (eg: 'Today', 'Yesterday') in the timeline for recent messages. When false day dates will be used.

package.json

@@ -61,8 +61,8 @@
     "gfm.css": "^1.1.2",
     "jsrsasign": "^10.2.0",
     "katex": "^0.12.0",
-    "matrix-js-sdk": "15.3.0",
-    "matrix-react-sdk": "3.37.0",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+    "matrix-react-sdk": "github:matrix-org/matrix-react-sdk#develop",
     "matrix-widget-api": "^0.1.0-beta.18",
     "prop-types": "^15.7.2",
     "react": "17.0.2",

src/@types/global.d.ts

@@ -32,7 +32,7 @@ type ElectronChannel =
     "setBadgeCount" |
     "update-downloaded" |
     "userDownloadCompleted" |
-    "userDownloadOpen";
+    "userDownloadAction";
 
 declare global {
     interface Window {

src/vector/jitsi/index.ts

@@ -46,6 +46,7 @@ let jitsiAuth: string;
 let roomId: string;
 let openIdToken: IOpenIDCredentials;
 let roomName: string;
+let startAudioOnly: boolean;
 
 let widgetApi: WidgetApi;
 let meetApi: any; // JitsiMeetExternalAPI
@@ -107,6 +108,7 @@ let meetApi: any; // JitsiMeetExternalAPI
         jitsiAuth = qsParam('auth', true);
         roomId = qsParam('roomId', true);
         roomName = qsParam('roomName', true);
+        startAudioOnly = qsParam('isAudioOnly', true) === "true";
 
         if (widgetApi) {
             await readyPromise;
@@ -238,6 +240,9 @@ function joinConference() { // event handler bound in HTML
             MAIN_TOOLBAR_BUTTONS: [],
             VIDEO_LAYOUT_FIT: "height",
         },
+        configOverwrite: {
+            startAudioOnly,
+        },
         jwt: jwt,
     };
 

src/vector/platform/ElectronPlatform.tsx

@@ -258,14 +258,18 @@ export default class ElectronPlatform extends VectorBasePlatform {
             dis.fire(Action.ViewUserSettings);
         });
 
-        electron.on('userDownloadCompleted', (ev, { path, name }) => {
-            const key = `DOWNLOAD_TOAST_${path}`;
+        electron.on('userDownloadCompleted', (ev, { id, name }) => {
+            const key = `DOWNLOAD_TOAST_${id}`;
 
             const onAccept = () => {
-                electron.send('userDownloadOpen', { path });
+                electron.send('userDownloadAction', { id, open: true });
                 ToastStore.sharedInstance().dismissToast(key);
             };
 
+            const onDismiss = () => {
+                electron.send('userDownloadAction', { id });
+            };
+
             ToastStore.sharedInstance().addOrReplaceToast({
                 key,
                 title: _t("Download Completed"),
@@ -274,6 +278,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
                     acceptLabel: _t("Open"),
                     onAccept,
                     dismissLabel: _t("Dismiss"),
+                    onDismiss,
                     numSeconds: 10,
                 },
                 component: GenericExpiringToast,
@@ -368,7 +373,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
         return true;
     }
 
-    displayNotification(title: string, msg: string, avatarUrl: string, room: Room): Notification {
+    displayNotification(title: string, msg: string, avatarUrl: string, room: Room, ev?: MatrixEvent): Notification {
         // GNOME notification spec parses HTML tags for styling...
         // Electron Docs state all supported linux notification systems follow this markup spec
         // https://github.com/electron/electron/blob/master/docs/tutorial/desktop-environment-integration.md#linux
@@ -379,20 +384,17 @@ export default class ElectronPlatform extends VectorBasePlatform {
             msg = msg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
         }
 
-        // Notifications in Electron use the HTML5 notification API
-        const notifBody = {
-            body: msg,
-            silent: true, // we play our own sounds
-        };
-        if (avatarUrl) notifBody['icon'] = avatarUrl;
-        const notification = new window.Notification(title, notifBody);
+        const notification = super.displayNotification(
+            title,
+            msg,
+            avatarUrl,
+            room,
+            ev,
+        );
 
+        const handler = notification.onclick as Function;
         notification.onclick = () => {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: room.roomId,
-            });
-            window.focus();
+            handler?.();
             this.ipcCall('focusWindow');
         };
 

src/vector/platform/WebPlatform.ts

@@ -20,7 +20,6 @@ import { UpdateCheckStatus } from "matrix-react-sdk/src/BasePlatform";
 import request from 'browser-request';
 import dis from 'matrix-react-sdk/src/dispatcher/dispatcher';
 import { _t } from 'matrix-react-sdk/src/languageHandler';
-import { Room } from "matrix-js-sdk/src/models/room";
 import { hideToast as hideUpdateToast, showToast as showUpdateToast } from "matrix-react-sdk/src/toasts/UpdateToast";
 import { Action } from "matrix-react-sdk/src/dispatcher/actions";
 import { CheckUpdatesPayload } from 'matrix-react-sdk/src/dispatcher/payloads/CheckUpdatesPayload';
@@ -78,27 +77,6 @@ export default class WebPlatform extends VectorBasePlatform {
         });
     }
 
-    displayNotification(title: string, msg: string, avatarUrl: string, room: Room) {
-        const notifBody = {
-            body: msg,
-            tag: "vector",
-            silent: true, // we play our own sounds
-        };
-        if (avatarUrl) notifBody['icon'] = avatarUrl;
-        const notification = new window.Notification(title, notifBody);
-
-        notification.onclick = function() {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: room.roomId,
-            });
-            window.focus();
-            notification.close();
-        };
-
-        return notification;
-    }
-
     private getMostRecentVersion(): Promise<string> {
         // 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

src/vector/screenshots.html

@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en" style="height: 100%;">
+  <!--
+      A page to render components of element-web that may be used for
+      screenshot testing.
+
+      See src/vector/screenshots.tsx for more information.
+  -->
+  <head>
+    <meta charset="utf-8">
+    <title>Element Screenshots</title>
+    <link rel="apple-touch-icon" sizes="57x57" href="<%= require('../../res/vector-icons/apple-touch-icon-57.png') %>">
+    <link rel="apple-touch-icon" sizes="60x60" href="<%= require('../../res/vector-icons/apple-touch-icon-60.png') %>">
+    <link rel="apple-touch-icon" sizes="72x72" href="<%= require('../../res/vector-icons/apple-touch-icon-72.png') %>">
+    <link rel="apple-touch-icon" sizes="76x76" href="<%= require('../../res/vector-icons/apple-touch-icon-76.png') %>">
+    <link rel="apple-touch-icon" sizes="114x114" href="<%= require('../../res/vector-icons/apple-touch-icon-114.png') %>">
+    <link rel="apple-touch-icon" sizes="120x120" href="<%= require('../../res/vector-icons/apple-touch-icon-120.png') %>">
+    <link rel="apple-touch-icon" sizes="144x144" href="<%= require('../../res/vector-icons/apple-touch-icon-144.png') %>">
+    <link rel="apple-touch-icon" sizes="152x152" href="<%= require('../../res/vector-icons/apple-touch-icon-152.png') %>">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= require('../../res/vector-icons/apple-touch-icon-180.png') %>">
+    <link rel="manifest" href="manifest.json">
+    <meta name="referrer" content="no-referrer">
+    <link rel="shortcut icon" href="<%= require('../../res/vector-icons/favicon.ico') %>">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="apple-mobile-web-app-title" content="Element">
+    <meta name="application-name" content="Element">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="msapplication-TileImage" content="<%= require('../../res/vector-icons/mstile-150.png') %>">
+    <meta name="msapplication-config" content="<%= require('../../res/vector-icons/browserconfig.xml') %>">
+    <meta name="theme-color" content="#ffffff">
+    <meta property="og:image" content="<%= og_image_url %>" />
+    <meta http-equiv="Content-Security-Policy" content="
+        default-src 'none';
+        style-src 'self' 'unsafe-inline';
+        script-src 'self' 'unsafe-eval' https://www.recaptcha.net https://www.gstatic.com;
+        img-src * blob: data:;
+        connect-src *;
+        font-src 'self' data:;
+        media-src * blob: data:;
+        child-src * blob: data:;
+        worker-src 'self';
+        frame-src * blob: data:;
+        form-action 'self';
+        manifest-src 'self';
+    ">
+    <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
+        var file = htmlWebpackPlugin.files.css[i];
+        var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/);
+        if (match) {
+            var title = match[1].charAt(0).toUpperCase() + match[1].slice(1);
+        %>
+           <link rel="stylesheet" disabled="disabled" data-mx-theme="<%= title %>" title="<%= title %>" href="<%= file %>">
+        <% } else { %>
+           <link rel="stylesheet" href="<%= file %>">
+        <% }
+    } %>
+
+    <% for (var i=0; i < htmlWebpackPlugin.tags.headTags.length; i++) {
+        var tag = htmlWebpackPlugin.tags.headTags[i];
+        var path = tag.attributes && tag.attributes.href;
+        if (path.indexOf("Inter") !== -1) { %>
+            <link rel="preload" as="font" href="<%= path %>" crossorigin="anonymous"/>
+        <% }
+    } %>
+
+  </head>
+  <body style="height: 100%; margin: 0;">
+    <noscript>Sorry, Element requires JavaScript to be enabled.</noscript> <!-- TODO: Translate this? -->
+    <section id="matrixchat" style="height: 100%;" class="notranslate"></section>
+    <script src="<%= htmlWebpackPlugin.files.js.find(entry => entry.includes("screenshots.js")) %>"></script>
+
+    <!-- Legacy supporting Prefetch images -->
+    <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;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/feather-customised/warning-triangle.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/bold.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/code.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/italics.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/quote.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/strikethrough.svg') %>" width="25" height="22" 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" />
+    </audio>
+    <audio id="ringAudio" loop>
+        <source src="media/ring.ogg" type="audio/ogg" />
+        <source src="media/ring.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="ringbackAudio" loop>
+        <source src="media/ringback.ogg" type="audio/ogg" />
+        <source src="media/ringback.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="callendAudio">
+        <source src="media/callend.ogg" type="audio/ogg" />
+        <source src="media/callend.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="busyAudio">
+        <source src="media/busy.ogg" type="audio/ogg" />
+        <source src="media/busy.mp3" type="audio/mpeg" />
+    </audio>
+    <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>
+  </body>
+</html>

src/vector/screenshots.tsx

@@ -0,0 +1,141 @@
+/*
+Copyright 2022 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.
+*/
+
+// This file is a cut-down copy of index.ts.  It goes together with
+// screenshots.html to create a page allowing you to choose a component,
+// Which is rendered with example data, allowing us to take screenshots
+// (using code in matrix-react-sdk/tests/end-to-end-tests/screenshots.js)
+// and compare for any changes against previous versions.
+
+import './modernizr';
+import * as ReactDOM from "react-dom";
+import React, { ChangeEvent, ReactElement } from 'react';
+import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
+
+import { screenshotNotificationUserSettingsTab } from './screenshots/notification_user_settings_tab';
+
+let widthInput: HTMLInputElement;
+let heightInput: HTMLInputElement;
+let classInput: HTMLInputElement;
+
+async function settled(...promises: Array<Promise<any>>) {
+    for (const prom of promises) {
+        try {
+            await prom;
+        } catch (e) {
+            console.error(e);
+        }
+    }
+}
+
+async function start() {
+    const {
+        preparePlatform,
+        loadSkin,
+        loadLanguage,
+        loadTheme,
+    } = await import(
+        /* webpackChunkName: "init" */
+        /* webpackPreload: true */
+        "./init");
+
+    try {
+        preparePlatform();
+        const loadLanguagePromise = loadLanguage();
+        const loadThemePromise = loadTheme();
+        const loadSkinPromise = loadSkin();
+        await settled(loadSkinPromise, loadThemePromise, loadLanguagePromise);
+
+        await loadSkinPromise;
+        await loadThemePromise;
+        await loadLanguagePromise;
+
+        await myLoadApp();
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+async function myLoadApp() {
+    // We know that MatrixClientPeg is a MatrixClientPegClass
+    await (MatrixClientPeg as any).createClient({});
+
+    window.matrixChat = ReactDOM.render(
+        <div>
+            <input type="hidden" id="screenshot_width" value="" />
+            <input type="hidden" id="screenshot_height" value="" />
+            <input type="hidden" id="screenshot_class" value="" />
+            <select id="select_screenshot" defaultValue="" onChange={selectChange}>
+                <option value="">-- Choose component to screenshot --</option>
+                {
+                    screenshots.map((screenshot) =>
+                        <option
+                            value={screenshot.name}
+                            key={screenshot.name}
+                        >{ screenshot.name }</option>,
+                    )
+                }
+            </select>
+            <div id="screenshot" />
+        </div>,
+        document.getElementById('matrixchat'),
+    );
+
+    widthInput = document.getElementById("screenshot_width") as HTMLInputElement;
+    heightInput = document.getElementById("screenshot_height") as HTMLInputElement;
+    classInput = document.getElementById("screenshot_class") as HTMLInputElement;
+}
+
+function selectChange(event: ChangeEvent<HTMLSelectElement>) {
+    const screenshot = screenshots.find((scr) => scr.name === event.target.value);
+    if (screenshot) {
+        widthInput["value"] = screenshot.width.toString();
+        heightInput["value"] = screenshot.height.toString();
+        classInput["value"] = screenshot.cssClass;
+        ReactDOM.render(
+            screenshot.fn() as ReactElement,
+            document.getElementById('screenshot'),
+        );
+    }
+}
+
+/**
+ * To add more screenshots, add a row to this table.
+ *
+ * Note: width, height and cssClass act as hints to the screenshotting code in
+ * matrix-react-sdk about how to render the screenshot - they do not affect the
+ * size or appearance if you visit the page in your browser.
+ */
+const screenshots = [
+    {
+        name: "NotificationUserSettingsTab_wide",
+        fn: screenshotNotificationUserSettingsTab,
+        width: 800,
+        height: 800,
+        cssClass: "mx_NotificationUserSettingsTab",
+    },
+    {
+        name: "NotificationUserSettingsTab_narrow",
+        fn: screenshotNotificationUserSettingsTab,
+        width: 400,
+        height: 800,
+        cssClass: "mx_NotificationUserSettingsTab",
+    },
+];
+
+start().catch(err => {
+    console.error(err);
+});

src/vector/screenshots/notification_user_settings_tab.tsx

@@ -0,0 +1,244 @@
+/*
+Copyright 2022 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 { IPushRules } from "matrix-js-sdk/src/@types/PushRules";
+import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
+import { PushProcessor } from 'matrix-js-sdk/src/pushprocessor';
+import React, { ReactElement } from 'react';
+import * as sdk from 'matrix-react-sdk';
+
+export function screenshotNotificationUserSettingsTab(): ReactElement {
+    MatrixClientPeg.get().getPushRules = async () => {
+        return PushProcessor.rewriteDefaultRules(pushRulesJson() as IPushRules);
+    };
+
+    MatrixClientPeg.get().getPushers = async () => {
+        return { pushers: [] };
+    };
+    MatrixClientPeg.get().getThreePids = async () => {
+        return { threepids: [] };
+    };
+
+    const NotificationUserSettingsTab= sdk.getComponent(
+        'views.settings.tabs.user.NotificationUserSettingsTab');
+    return <NotificationUserSettingsTab />;
+}
+
+function pushRulesJson() {
+    // This is a lightly-modified paste of the JSON returned from a GET
+    // to /pushrules/
+
+    /* eslint-disable */
+    return {
+        "global": {
+            "underride": [
+                {
+                    "conditions": [
+                        { "kind": "event_match", "key": "type", "pattern": "m.call.invite" },
+                    ],
+                    "actions": [
+                        "notify",
+                        { "set_tweak": "sound", "value": "ring" },
+                        { "set_tweak": "highlight", "value": false },
+                    ],
+                    "rule_id": ".m.rule.call",
+                    "default": true,
+                    "enabled": true,
+                },
+                {
+                    "conditions": [
+                        { "kind": "room_member_count", "is": "2" },
+                        { "kind": "event_match", "key": "type", "pattern": "m.room.message" },
+                    ],
+                    "actions": [
+                        "notify",
+                        { "set_tweak": "sound", "value": "default" },
+                        { "set_tweak": "highlight", "value": false },
+                    ],
+                    "rule_id": ".m.rule.room_one_to_one",
+                    "default": true,
+                    "enabled": true,
+                },
+                {
+                    "conditions": [
+                        { "kind": "room_member_count", "is": "2" },
+                        { "kind": "event_match", "key": "type", "pattern": "m.room.encrypted" },
+                    ],
+                    "actions": [
+                        "notify",
+                        { "set_tweak": "sound", "value": "default" },
+                        { "set_tweak": "highlight", "value": false },
+                    ],
+                    "rule_id": ".m.rule.encrypted_room_one_to_one",
+                    "default": true,
+                    "enabled": true,
+                },
+                {
+                    "conditions": [
+                        { "kind": "event_match", "key": "type", "pattern": "m.room.message" },
+                    ],
+                    "actions": [
+                        "dont_notify",
+                    ],
+                    "rule_id": ".m.rule.message",
+                    "default": true,
+                    "enabled": true,
+                },
+                {
+                    "conditions": [
+                        { "kind": "event_match", "key": "type", "pattern": "m.room.encrypted" },
+                    ],
+                    "actions": [
+                        "dont_notify",
+                    ],
+                    "rule_id": ".m.rule.encrypted",
+                    "default": true,
+                    "enabled": true,
+                },
+                {
+                    "conditions": [
+                        { "kind": "event_match", "key": "type", "pattern": "im.vector.modular.widgets" },
+                        { "kind": "event_match", "key": "content.type", "pattern": "jitsi" },
+                        { "kind": "event_match", "key": "state_key", "pattern": "*" },
+                    ],
+                    "actions": [
+                        "notify",
+                        { "set_tweak": "highlight", "value": false },
+                    ],
+                    "rule_id": ".im.vector.jitsi",
+                    "default": true,
+                    "enabled": true,
+                },
+            ],
+            "sender": [],
+            "room": [],
+            "content": [
+                {
+                    "actions": [
+                        "notify",
+                        { "set_tweak": "sound", "value": "default" },
+                        { "set_tweak": "highlight" },
+                    ],
+                    "pattern": "username",
+                    "rule_id": ".m.rule.contains_user_name",
+                    "default": true,
+                    "enabled": true,
+                },
+            ],
+            "override": [
+                {
+                    "conditions": [],
+                    "actions": [
+                        "dont_notify"
+                    ],
+                    "rule_id": ".m.rule.master",
+                    "default": true,
+                    "enabled": false,
+                },
+                {
+                    "conditions": [
+                        { "kind": "event_match", "key": "content.msgtype", "pattern": "m.notice" }
+                    ],
+                    "actions": [
+                        "dont_notify",
+                    ],
+                    "rule_id": ".m.rule.suppress_notices",
+                    "default": true,
+                    "enabled": true,
+                },
+                {
+                    "conditions": [
+                        { "kind": "event_match", "key": "type", "pattern": "m.room.member" },
+                        { "kind": "event_match", "key": "content.membership", "pattern": "invite" },
+                        { "kind": "event_match", "key": "state_key", "pattern": "@username:example.com" }
+                    ],
+                    "actions": [
+                        "notify",
+                        { "set_tweak": "sound", "value": "default" },
+                        { "set_tweak": "highlight", "value": false }
+                    ],
+                    "rule_id": ".m.rule.invite_for_me",
+                    "default": true,
+                    "enabled": true,
+                },
+                {
+                    "conditions": [
+                        { "kind": "event_match", "key": "type", "pattern": "m.room.member" }
+                    ],
+                    "actions": [
+                        "dont_notify",
+                    ],
+                    "rule_id": ".m.rule.member_event",
+                    "default": true,
+                    "enabled": true,
+                },
+                {
+                    "conditions": [
+                        { "kind": "contains_display_name" }
+                    ],
+                    "actions": [
+                        "notify",
+                        { "set_tweak": "sound", "value": "default" },
+                        { "set_tweak": "highlight" }
+                    ],
+                    "rule_id": ".m.rule.contains_display_name",
+                    "default": true,
+                    "enabled": true,
+                },
+                {
+                    "conditions": [
+                        { "kind": "event_match", "key": "content.body", "pattern": "@room" },
+                        { "kind": "sender_notification_permission", "key": "room" }
+                    ],
+                    "actions": [
+                        "notify",
+                        { "set_tweak": "highlight", "value": true }
+                    ],
+                    "rule_id": ".m.rule.roomnotif",
+                    "default": true,
+                    "enabled": true,
+                },
+                {
+                    "conditions": [
+                        { "kind": "event_match", "key": "type", "pattern": "m.room.tombstone" },
+                        { "kind": "event_match", "key": "state_key", "pattern": "" }
+                    ],
+                    "actions": [
+                        "notify",
+                        { "set_tweak": "highlight", "value": true }
+                    ],
+                    "rule_id": ".m.rule.tombstone",
+                    "default": true,
+                    "enabled": true,
+                },
+                {
+                    "conditions": [
+                        { "kind": "event_match", "key": "type", "pattern": "m.reaction" }
+                    ],
+                    "actions": [
+                        "dont_notify",
+                    ],
+                    "rule_id": ".m.rule.reaction",
+                    "default": true,
+                    "enabled": true,
+                }
+            ],
+        },
+        "device": {},
+    };
+    /* eslint-enable */
+}
+

webpack.config.js

@@ -99,6 +99,7 @@ module.exports = (env, argv) => {
 
         entry: {
             "bundle": "./src/vector/index.ts",
+            "screenshots": "./src/vector/screenshots.tsx",
             "mobileguide": "./src/vector/mobile_guide/index.ts",
             "jitsi": "./src/vector/jitsi/index.ts",
             "usercontent": "./node_modules/matrix-react-sdk/src/usercontent/index.ts",
@@ -496,6 +497,22 @@ module.exports = (env, argv) => {
                 },
             }),
 
+            // This is our screenshots page for testing
+            new HtmlWebpackPlugin({
+                template: './src/vector/screenshots.html',
+                filename: 'screenshots.html',
+
+                // we inject the links ourselves via the template, because
+                // HtmlWebpackPlugin will screw up our formatting like the names
+                // of the themes and which chunks we actually care about.
+                inject: false,
+                excludeChunks: ['mobileguide', 'usercontent', 'jitsi'],
+                minify: false,
+                templateParameters: {
+                    og_image_url: ogImageUrl,
+                },
+            }),
+
             // This is the jitsi widget wrapper (embedded, so isolated stack)
             new HtmlWebpackPlugin({
                 template: './src/vector/jitsi/index.html',

yarn.lock

@@ -8041,14 +8041,13 @@ mathml-tag-names@^2.1.3:
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
   integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
 
-"matrix-analytics-events@git+https://github.com/matrix-org/matrix-analytics-events.git#1eab4356548c97722a183912fda1ceabbe8cc7c1":
+"matrix-analytics-events@https://github.com/matrix-org/matrix-analytics-events.git#1eab4356548c97722a183912fda1ceabbe8cc7c1":
   version "0.0.1"
-  resolved "git+https://github.com/matrix-org/matrix-analytics-events.git#1eab4356548c97722a183912fda1ceabbe8cc7c1"
+  resolved "https://github.com/matrix-org/matrix-analytics-events.git#1eab4356548c97722a183912fda1ceabbe8cc7c1"
 
-matrix-js-sdk@15.3.0:
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
   version "15.3.0"
-  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-15.3.0.tgz#753d247f19e7411f3628145e7cbee2d805c4f525"
-  integrity sha512-o0V9sZYe+1Gjj3NxfOISiSm1qqL/lReTjeMWw/+UTCtindA+eII03B+Ze1hU1KU2nMjJhAHhs8x2UjIoL0eTAg==
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/f780e1dbc3918d3665f3b7f1214562f598486670"
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"
@@ -8070,10 +8069,9 @@ matrix-mock-request@^1.2.3:
     bluebird "^3.5.0"
     expect "^1.20.2"
 
-matrix-react-sdk@3.37.0:
+"matrix-react-sdk@github:matrix-org/matrix-react-sdk#develop":
   version "3.37.0"
-  resolved "https://registry.yarnpkg.com/matrix-react-sdk/-/matrix-react-sdk-3.37.0.tgz#346d34f9673a3e15c19724e9f628d1ecbaf05593"
-  integrity sha512-RVoR6sgXmoO3nq8t2ySPT/bqrYB6IForCgpW/TfSzx0r4Pu0L5TE28OPbrX2HHl0NOU42GuVtDYSpM5Ign0k5A==
+  resolved "https://codeload.github.com/matrix-org/matrix-react-sdk/tar.gz/2330292c24f53138f2ce1db42be45355ce6c3fdf"
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@sentry/browser" "^6.11.0"
@@ -8108,7 +8106,7 @@ matrix-react-sdk@3.37.0:
     lodash "^4.17.20"
     maplibre-gl "^1.15.2"
     matrix-analytics-events "https://github.com/matrix-org/matrix-analytics-events.git#1eab4356548c97722a183912fda1ceabbe8cc7c1"
-    matrix-js-sdk "15.3.0"
+    matrix-js-sdk "github:matrix-org/matrix-js-sdk#develop"
     matrix-widget-api "^0.1.0-beta.18"
     minimist "^1.2.5"
     opus-recorder "^8.0.3"