Merge branch 'develop' into florianduros/fix-white-black-theme-switch

cypress/e2e/spotlight/spotlight.spec.ts

@@ -162,7 +162,7 @@ describe("Spotlight", () => {
                 cy.window({ log: false }).then(({ matrixcs: { Visibility } }) => {
                     cy.createRoom({ name: room1Name, visibility: Visibility.Public }).then(_room1Id => {
                         room1Id = _room1Id;
-                        cy.inviteUser(room1Id, bot1.getUserId());
+                        bot1.joinRoom(room1Id);
                         cy.visit("/#/room/" + room1Id);
                     });
                     bot2.createRoom({ name: room2Name, visibility: Visibility.Public })

cypress/e2e/threads/threads.spec.ts

@@ -73,14 +73,18 @@ describe("Threads", () => {
 
     it("should be usable for a conversation", () => {
         let bot: MatrixClient;
-        cy.getBot(synapse, { displayName: "BotBob" }).then(_bot => {
+        cy.getBot(synapse, {
+            displayName: "BotBob",
+            autoAcceptInvites: false,
+        }).then(_bot => {
             bot = _bot;
         });
 
         let roomId: string;
         cy.createRoom({}).then(_roomId => {
             roomId = _roomId;
             cy.inviteUser(roomId, bot.getUserId());
+            bot.joinRoom(roomId);
             cy.visit("/#/room/" + roomId);
         });
 

res/css/_components.pcss

@@ -337,6 +337,7 @@
 @import "./views/spaces/_SpacePublicShare.pcss";
 @import "./views/terms/_InlineTermsAgreement.pcss";
 @import "./views/toasts/_AnalyticsToast.pcss";
+@import "./views/toasts/_IncomingCallToast.pcss";
 @import "./views/toasts/_IncomingLegacyCallToast.pcss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
 @import "./views/typography/_Heading.pcss";

res/css/components/views/settings/devices/_DeviceTypeIcon.pcss

@@ -22,7 +22,7 @@ limitations under the License.
     padding: 0 $spacing-8 $spacing-8 0;
 }
 
-.mx_DeviceTypeIcon_deviceIcon {
+.mx_DeviceTypeIcon_deviceIconWrapper {
     --background-color: $system;
     --icon-color: $secondary-content;
 
@@ -36,11 +36,16 @@ limitations under the License.
     background-color: var(--background-color);
 }
 
-.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIcon {
+.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIconWrapper {
     --background-color: $primary-content;
     --icon-color: $background;
 }
 
+.mx_DeviceTypeIcon_deviceIcon {
+    height: 24px;
+    width: 24px;
+}
+
 .mx_DeviceTypeIcon_verificationIcon {
     position: absolute;
     bottom: 0;

res/css/views/toasts/_IncomingCallToast.pcss

@@ -0,0 +1,105 @@
+/*
+Copyright 2022 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.
+*/
+
+.mx_IncomingCallToast {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    pointer-events: initial; /* restore pointer events so the user can accept/decline */
+    width: 250px;
+
+    .mx_IncomingCallToast_content {
+        display: flex;
+        flex-direction: column;
+        margin-left: 8px;
+        width: 100%;
+
+        .mx_IncomingCallToast_info {
+            margin-bottom: $spacing-16;
+
+            .mx_IncomingCallToast_room {
+                display: inline-block;
+
+                font-weight: bold;
+                font-size: $font-15px;
+                line-height: $font-24px;
+
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+
+                margin-bottom: $spacing-4;
+            }
+
+            .mx_IncomingCallToast_message {
+                font-size: $font-12px;
+                line-height: $font-15px;
+
+                margin-bottom: $spacing-4;
+            }
+
+            .mx_LiveContentSummary {
+                font-size: $font-12px;
+                line-height: $font-15px;
+
+                .mx_LiveContentSummary_participants::before {
+                    width: 15px;
+                    height: 15px;
+                }
+            }
+        }
+
+        .mx_IncomingCallToast_joinButton {
+            position: relative;
+
+            bottom: $spacing-4;
+            right: $spacing-4;
+
+            align-self: flex-end;
+
+            box-sizing: border-box;
+            min-width: 120px;
+
+            padding: $spacing-4 0;
+
+            line-height: $font-24px;
+        }
+    }
+
+    .mx_IncomingCallToast_closeButton {
+        position: absolute;
+
+        top: $spacing-4;
+        right: $spacing-4;
+
+        display: flex;
+        height: 16px;
+        width: 16px;
+
+        &::before {
+            content: '';
+
+            mask-image: url('$(res)/img/cancel.svg');
+
+            height: inherit;
+            width: inherit;
+            background-color: $secondary-content;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-position: center;
+        }
+    }
+}

src/Notifier.ts

@@ -47,6 +47,9 @@ import ErrorDialog from "./components/views/dialogs/ErrorDialog";
 import LegacyCallHandler from "./LegacyCallHandler";
 import VoipUserMapper from "./VoipUserMapper";
 import { localNotificationsAreSilenced } from "./utils/notifications";
+import { getIncomingCallToastKey, IncomingCallToast } from "./toasts/IncomingCallToast";
+import ToastStore from "./stores/ToastStore";
+import { ElementCall } from "./models/Call";
 
 /*
  * Dispatches:
@@ -358,7 +361,7 @@ export const Notifier = {
 
     onEvent: function(ev: MatrixEvent) {
         if (!this.isSyncing) return; // don't alert for any messages initially
-        if (ev.getSender() === MatrixClientPeg.get().credentials.userId) return;
+        if (ev.getSender() === MatrixClientPeg.get().getUserId()) return;
 
         MatrixClientPeg.get().decryptEventIfNeeded(ev);
 
@@ -419,6 +422,8 @@ export const Notifier = {
 
         const actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
         if (actions?.notify) {
+            this._performCustomEventHandling(ev);
+
             if (RoomViewStore.instance.getRoomId() === room.roomId &&
                 UserActivity.sharedInstance().userActiveRecently() &&
                 !Modal.hasDialogs()
@@ -436,6 +441,24 @@ export const Notifier = {
             }
         }
     },
+
+    /**
+     * Some events require special handling such as showing in-app toasts
+     */
+    _performCustomEventHandling: function(ev: MatrixEvent) {
+        if (
+            ElementCall.CALL_EVENT_TYPE.names.includes(ev.getType())
+            && SettingsStore.getValue("feature_group_calls")
+        ) {
+            ToastStore.sharedInstance().addOrReplaceToast({
+                key: getIncomingCallToastKey(ev.getStateKey()),
+                priority: 100,
+                component: IncomingCallToast,
+                bodyClassName: "mx_IncomingCallToast",
+                props: { callEvent: ev },
+            });
+        }
+    },
 };
 
 if (!window.mxNotifier) {

src/TextForEvent.tsx

@@ -45,6 +45,7 @@ import AccessibleButton from './components/views/elements/AccessibleButton';
 import RightPanelStore from './stores/right-panel/RightPanelStore';
 import { ViewRoomPayload } from "./dispatcher/payloads/ViewRoomPayload";
 import { isLocationEvent } from './utils/EventUtils';
+import { ElementCall } from "./models/Call";
 
 export function getSenderName(event: MatrixEvent): string {
     return event.sender?.name ?? event.getSender() ?? _t("Someone");
@@ -57,6 +58,15 @@ function getRoomMemberDisplayname(event: MatrixEvent, userId = event.getSender()
     return member?.name || member?.rawDisplayName || userId || _t("Someone");
 }
 
+function textForCallEvent(event: MatrixEvent): () => string {
+    const roomName = MatrixClientPeg.get().getRoom(event.getRoomId()!).name;
+    const isSupported = MatrixClientPeg.get().supportsVoip();
+
+    return isSupported
+        ? () => _t("Video call started in %(roomName)s.", { roomName })
+        : () => _t("Video call started in %(roomName)s. (not supported by this browser)", { roomName });
+}
+
 // These functions are frequently used just to check whether an event has
 // any text to display at all. For this reason they return deferred values
 // to avoid the expense of looking up translations when they're not needed.
@@ -798,6 +808,11 @@ for (const evType of ALL_RULE_TYPES) {
     stateHandlers[evType] = textForMjolnirEvent;
 }
 
+// Add both stable and unstable m.call events
+for (const evType of ElementCall.CALL_EVENT_TYPE.names) {
+    stateHandlers[evType] = textForCallEvent;
+}
+
 /**
  * Determines whether the given event has text to display.
  * @param ev The event

src/components/views/rooms/LiveContentSummary.tsx

@@ -18,6 +18,8 @@ import React, { FC } from "react";
 import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
+import { Call } from "../../../models/Call";
+import { useParticipants } from "../../../hooks/useCall";
 
 export enum LiveContentType {
     Video,
@@ -55,3 +57,18 @@ export const LiveContentSummary: FC<Props> = ({ type, text, active, participantC
         </> }
     </span>
 );
+
+interface LiveContentSummaryWithCallProps {
+    call: Call;
+}
+
+export function LiveContentSummaryWithCall({ call }: LiveContentSummaryWithCallProps) {
+    const participants = useParticipants(call);
+
+    return <LiveContentSummary
+        type={LiveContentType.Video}
+        text={_t("Video")}
+        active={false}
+        participantCount={participants.size}
+    />;
+}

src/components/views/settings/devices/DeviceTypeIcon.tsx

@@ -18,6 +18,9 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { Icon as UnknownDeviceIcon } from '../../../../../res/img/element-icons/settings/unknown-device.svg';
+import { Icon as DesktopIcon } from '../../../../../res/img/element-icons/settings/desktop.svg';
+import { Icon as WebIcon } from '../../../../../res/img/element-icons/settings/web.svg';
+import { Icon as MobileIcon } from '../../../../../res/img/element-icons/settings/mobile.svg';
 import { Icon as VerifiedIcon } from '../../../../../res/img/e2e/verified.svg';
 import { Icon as UnverifiedIcon } from '../../../../../res/img/e2e/warning.svg';
 import { _t } from '../../../../languageHandler';
@@ -30,33 +33,51 @@ interface Props {
     deviceType?: DeviceType;
 }
 
+const deviceTypeIcon: Record<DeviceType, React.FC<React.SVGProps<SVGSVGElement>>> = {
+    [DeviceType.Desktop]: DesktopIcon,
+    [DeviceType.Mobile]: MobileIcon,
+    [DeviceType.Web]: WebIcon,
+    [DeviceType.Unknown]: UnknownDeviceIcon,
+};
+const deviceTypeLabel: Record<DeviceType, string> = {
+    [DeviceType.Desktop]: _t('Desktop session'),
+    [DeviceType.Mobile]: _t('Mobile session'),
+    [DeviceType.Web]: _t('Web session'),
+    [DeviceType.Unknown]: _t('Unknown session type'),
+};
+
 export const DeviceTypeIcon: React.FC<Props> = ({
     isVerified,
     isSelected,
     deviceType,
-}) => (
-    <div className={classNames('mx_DeviceTypeIcon', {
-        mx_DeviceTypeIcon_selected: isSelected,
-    })}
-    >
-        { /* TODO(kerrya) all devices have an unknown type until PSG-650 */ }
-        <UnknownDeviceIcon
-            className='mx_DeviceTypeIcon_deviceIcon'
-            role='img'
-            aria-label={_t('Unknown device type')}
-        />
-        {
-            isVerified
-                ? <VerifiedIcon
-                    className={classNames('mx_DeviceTypeIcon_verificationIcon', 'verified')}
-                    role='img'
-                    aria-label={_t('Verified')}
-                />
-                : <UnverifiedIcon
-                    className={classNames('mx_DeviceTypeIcon_verificationIcon', 'unverified')}
+}) => {
+    const Icon = deviceTypeIcon[deviceType] || deviceTypeIcon[DeviceType.Unknown];
+    const label = deviceTypeLabel[deviceType] || deviceTypeLabel[DeviceType.Unknown];
+    return (
+        <div className={classNames('mx_DeviceTypeIcon', {
+            mx_DeviceTypeIcon_selected: isSelected,
+        })}
+        >
+            <div className='mx_DeviceTypeIcon_deviceIconWrapper'>
+                <Icon
+                    className='mx_DeviceTypeIcon_deviceIcon'
                     role='img'
-                    aria-label={_t('Unverified')}
+                    aria-label={label}
                 />
-        }
-    </div>);
+            </div>
+            {
+                isVerified
+                    ? <VerifiedIcon
+                        className={classNames('mx_DeviceTypeIcon_verificationIcon', 'verified')}
+                        role='img'
+                        aria-label={_t('Verified')}
+                    />
+                    : <UnverifiedIcon
+                        className={classNames('mx_DeviceTypeIcon_verificationIcon', 'unverified')}
+                        role='img'
+                        aria-label={_t('Unverified')}
+                    />
+            }
+        </div>);
+};