Merge remote-tracking branch 'origin/develop' into rav/report_dm_errors

res/css/_common.pcss

@@ -183,6 +183,10 @@ fieldset {
     border: none;
 }
 
+summary {
+    cursor: pointer;
+}
+
 legend {
     padding-inline: unset;
     border: none;

res/css/compound/_Icon.pcss

@@ -29,6 +29,10 @@ limitations under the License.
     color: $accent;
 }
 
+.mx_Icon_alert {
+    color: $alert;
+}
+
 .mx_Icon_8 {
     flex: 0 0 8px;
     height: 8px;

res/css/views/elements/_ReplyChain.pcss

@@ -16,50 +16,51 @@ limitations under the License.
 
 .mx_ReplyChain {
     margin: 0 0 $spacing-8 0;
-    padding: 0 10px; /* TODO: Use a spacing variable */
-    border-left: 2px solid $accent;
-    border-radius: 2px;
+    padding-left: 10px; // TODO: Use a spacing variable
+    border-left: 2px solid var(--username-color); // TODO: Use a spacing variable
+    border-radius: 2px; // TODO: Use a spacing variable
 
     .mx_ReplyChain_show {
         &.mx_AccessibleButton_kind_link_inline {
-            color: unset;
             white-space: nowrap; /* Enforce 'In reply to' to be a single line */
+            color: $secondary-content;
+            transition: color ease 0.15s;
 
             &:hover {
-                color: $links;
+                color: $primary-content;
             }
         }
     }
 
     &.mx_ReplyChain_color1 {
-        border-left-color: $username-variant1-color;
+        --username-color: $username-variant1-color;
     }
 
     &.mx_ReplyChain_color2 {
-        border-left-color: $username-variant2-color;
+        --username-color: $username-variant2-color;
     }
 
     &.mx_ReplyChain_color3 {
-        border-left-color: $username-variant3-color;
+        --username-color: $username-variant3-color;
     }
 
     &.mx_ReplyChain_color4 {
-        border-left-color: $username-variant4-color;
+        --username-color: $username-variant4-color;
     }
 
     &.mx_ReplyChain_color5 {
-        border-left-color: $username-variant5-color;
+        --username-color: $username-variant5-color;
     }
 
     &.mx_ReplyChain_color6 {
-        border-left-color: $username-variant6-color;
+        --username-color: $username-variant6-color;
     }
 
     &.mx_ReplyChain_color7 {
-        border-left-color: $username-variant7-color;
+        --username-color: $username-variant7-color;
     }
 
     &.mx_ReplyChain_color8 {
-        border-left-color: $username-variant8-color;
+        --username-color: $username-variant8-color;
     }
 }

res/css/views/rooms/_ReplyTile.pcss

@@ -27,21 +27,21 @@ limitations under the License.
         mask-image: url("$(res)/img/element-icons/call/video-call.svg");
     }
 
-    .mx_MFileBody {
-        .mx_MFileBody_info {
-            margin: 5px 0;
-        }
-
-        .mx_MFileBody_download {
-            display: none;
-        }
-    }
-
     > a {
         display: flex;
         flex-direction: column;
         text-decoration: none;
-        color: $primary-content;
+        color: $secondary-content;
+        transition: color ease 0.15s;
+        gap: 2px;
+
+        &:hover {
+            color: $primary-content;
+        }
+    }
+
+    .mx_RedactedBody {
+        line-height: $font-18px;
     }
 
     .mx_RedactedBody,
@@ -52,13 +52,14 @@ limitations under the License.
         &::before {
             height: 13px;
             width: 13px;
-            top: 5px;
+            top: 3px;
         }
     }
 
     /* We do reply size limiting with CSS to avoid duplicating the TextualBody component. */
     .mx_EventTile_content {
         $reply-lines: 2;
+        $line-height: $font-18px;
 
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -70,8 +71,8 @@ limitations under the License.
             font-size: $font-14px !important; /* Override the big emoji override */
         }
 
-        /* Hide line numbers */
-        .mx_EventTile_lineNumbers {
+        // Hide line numbers and edited indicator
+        .mx_EventTile_lineNumbers, .mx_EventTile_edited {
             display: none;
         }
 
@@ -101,7 +102,26 @@ limitations under the License.
         padding-top: 0;
     }
 
-    .mx_DisambiguatedProfile {
-        line-height: $font-17px;
+    .mx_ReplyTile_sender {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        .mx_DisambiguatedProfile {
+            font-size: $font-14px;
+
+            display: inline-block; // anti-zalgo, with overflow hidden
+            padding: 0;
+            margin: 0;
+
+            // truncate long display names
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .mx_BaseAvatar {
+            line-height: 14px; // To match size
+        }
     }
 }

res/css/views/rooms/_RoomInfoLine.pcss

@@ -36,8 +36,8 @@ limitations under the License.
     }
 
     &.mx_RoomInfoLine_private::before {
-        width: 14px;
-        mask-size: 14px;
+        width: 10px;
+        mask-size: 10px;
         mask-image: url("$(res)/img/element-icons/lock.svg");
     }
 

res/css/views/voip/_CallView.pcss

@@ -31,6 +31,8 @@ limitations under the License.
         width: auto;
         height: 100%;
         border: none;
+        border-radius: inherit;
+        background-color: $call-lobby-background;
     }
 
     /* While the lobby is shown, the widget needs to stay loaded but hidden in the background */

res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss

@@ -28,3 +28,8 @@ limitations under the License.
 .mx_VoiceBroadcastControl-recording {
     color: $alert;
 }
+
+.mx_VoiceBroadcastControl-play .mx_Icon {
+    left: 1px;
+    position: relative;
+}

src/RoomNotifs.ts

@@ -25,6 +25,7 @@ import {
     TweakName,
 } from "matrix-js-sdk/src/@types/PushRules";
 import { EventType } from 'matrix-js-sdk/src/@types/event';
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg } from './MatrixClientPeg';
 
@@ -35,8 +36,8 @@ export enum RoomNotifState {
     Mute = 'mute',
 }
 
-export function getRoomNotifsState(roomId: string): RoomNotifState {
-    if (MatrixClientPeg.get().isGuest()) return RoomNotifState.AllMessages;
+export function getRoomNotifsState(client: MatrixClient, roomId: string): RoomNotifState {
+    if (client.isGuest()) return RoomNotifState.AllMessages;
 
     // look through the override rules for a rule affecting this room:
     // if one exists, it will take precedence.
@@ -48,7 +49,7 @@ export function getRoomNotifsState(roomId: string): RoomNotifState {
     // for everything else, look at the room rule.
     let roomRule = null;
     try {
-        roomRule = MatrixClientPeg.get().getRoomPushRule('global', roomId);
+        roomRule = client.getRoomPushRule('global', roomId);
     } catch (err) {
         // Possible that the client doesn't have pushRules yet. If so, it
         // hasn't started either, so indicate that this room is not notifying.

src/components/structures/RoomView.tsx

@@ -534,8 +534,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         const roomId = this.context.roomViewStore.getRoomId();
         const room = this.context.client.getRoom(roomId);
 
-        // This convoluted type signature ensures we get IntelliSense *and* correct typing
-        const newState: Partial<IRoomState> & Pick<IRoomState, any> = {
+        const newState: Partial<IRoomState> = {
             roomId,
             roomAlias: this.context.roomViewStore.getRoomAlias(),
             roomLoading: this.context.roomViewStore.isRoomLoading(),
@@ -679,11 +678,15 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         // Clear the search results when clicking a search result (which changes the
         // currently scrolled to event, this.state.initialEventId).
-        if (this.state.initialEventId !== newState.initialEventId) {
-            newState.searchResults = null;
+        if (this.state.timelineRenderingType === TimelineRenderingType.Search &&
+            this.state.initialEventId !== newState.initialEventId
+        ) {
+            newState.timelineRenderingType = TimelineRenderingType.Room;
+            this.state.search?.abortController?.abort();
+            newState.search = undefined;
         }
 
-        this.setState(newState);
+        this.setState(newState as IRoomState);
         // At this point, newState.roomId could be null (e.g. the alias might not
         // have been resolved yet) so anything called here must handle this case.
 

src/components/structures/ViewSource.tsx

@@ -167,6 +167,13 @@ export default class ViewSource extends React.Component<IProps, IState> {
                     <CopyableText getTextToCopy={() => eventId} border={false}>
                         { _t("Event ID: %(eventId)s", { eventId }) }
                     </CopyableText>
+                    { mxEvent.threadRootId && (
+                        <CopyableText getTextToCopy={() => mxEvent.threadRootId!} border={false}>
+                            { _t("Thread root ID: %(threadRootId)s", {
+                                threadRootId: mxEvent.threadRootId,
+                            }) }
+                        </CopyableText>
+                    ) }
                 </div>
                 { isEditing ? this.editSourceContent() : this.viewSourceContent() }
                 { !isEditing && canEdit && (

src/components/views/audio_messages/DevicesContextMenu.tsx

@@ -0,0 +1,56 @@
+/*
+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.
+*/
+
+import React, { MutableRefObject } from "react";
+
+import { toLeftOrRightOf } from "../../structures/ContextMenu";
+import IconizedContextMenu, {
+    IconizedContextMenuOptionList,
+    IconizedContextMenuRadio,
+} from "../context_menus/IconizedContextMenu";
+
+interface Props {
+    containerRef: MutableRefObject<HTMLElement | null>;
+    currentDevice: MediaDeviceInfo | null;
+    devices: MediaDeviceInfo[];
+    onDeviceSelect: (device: MediaDeviceInfo) => void;
+}
+
+export const DevicesContextMenu: React.FC<Props> = ({
+    containerRef,
+    currentDevice,
+    devices,
+    onDeviceSelect,
+}) => {
+    const deviceOptions = devices.map((d: MediaDeviceInfo) => {
+        return <IconizedContextMenuRadio
+            key={d.deviceId}
+            active={d.deviceId === currentDevice?.deviceId}
+            onClick={() => onDeviceSelect(d)}
+            label={d.label}
+        />;
+    });
+
+    return <IconizedContextMenu
+        mountAsChild={false}
+        onFinished={() => {}}
+        {...toLeftOrRightOf(containerRef.current.getBoundingClientRect(), 0)}
+    >
+        <IconizedContextMenuOptionList>
+            { deviceOptions }
+        </IconizedContextMenuOptionList>
+    </IconizedContextMenu>;
+};

src/components/views/audio_messages/SeekBar.tsx

@@ -93,6 +93,11 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
         this.props.playback.skipTo(Number(ev.target.value) * this.props.playback.durationSeconds);
     };
 
+    private onMouseDown = (event: React.MouseEvent<Element, MouseEvent>) => {
+        // do not propagate mouse down events, because these should be handled by the seekbar
+        event.stopPropagation();
+    };
+
     public render(): ReactNode {
         // We use a range input to avoid having to re-invent accessibility handling on
         // a custom set of divs.
@@ -101,6 +106,7 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
             className='mx_SeekBar'
             tabIndex={this.props.tabIndex}
             onChange={this.onChange}
+            onMouseDown={this.onMouseDown}
             min={0}
             max={1}
             value={this.state.percentage}