Merge remote-tracking branch 'upstream/develop' into feature/voice-activity

src/components/structures/BackdropPanel.tsx

@@ -140,12 +140,13 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
     public render() {
         if (!this.props.backgroundImage) return null;
         return <div className="mx_BackdropPanel">
-            <img
+            { this.state?.llpImage !== 'data:,' && <img
                 className="mx_BackdropPanel--canvas"
-                src={this.state.llpImage} />
-            <img
+                src={this.state.llpImage} /> }
+
+            { this.state?.lpImage !== 'data:,' && <img
                 className="mx_BackdropPanel--canvas"
-                src={this.state.lpImage} />
+                src={this.state.lpImage} /> }
             <canvas
                 ref={this.leftLeftPanelRef}
                 className="mx_BackdropPanel--canvas"

src/components/structures/LoggedInView.tsx

@@ -644,18 +644,22 @@ class LoggedInView extends React.Component<IProps, IState> {
                     aria-hidden={this.props.hideToSRUsers}
                 >
                     <ToastContainer />
-                    <div ref={this._resizeContainer} className={bodyClasses}>
-                        <BackdropPanel
-                            backgroundImage={this.state.backgroundImage}
-                        />
-                        { SpaceStore.spacesEnabled ? <SpacePanel /> : null }
-                        <LeftPanel
-                            isMinimized={this.props.collapseLhs || false}
-                            resizeNotifier={this.props.resizeNotifier}
-                        />
-                        <ResizeHandle />
+                    <div className={bodyClasses}>
+                        <div ref={this._resizeContainer} className='mx_LeftPanel_wrapper'>
+                            <BackdropPanel
+                                backgroundImage={this.state.backgroundImage}
+                            />
+                            { SpaceStore.spacesEnabled ? <SpacePanel /> : null }
+                            <LeftPanel
+                                isMinimized={this.props.collapseLhs || false}
+                                resizeNotifier={this.props.resizeNotifier}
+                            />
+                            <ResizeHandle />
+                        </div>
+                        <div className="mx_RoomView_wrapper">
+                            { pageElement }
+                        </div>
                     </div>
-                    { pageElement }
                 </div>
                 <CallContainer />
                 <NonUrgentToastContainer />

src/components/views/rooms/EventTile.tsx

@@ -857,7 +857,12 @@ export default class EventTile extends React.Component<IProps, IState> {
     render() {
         const msgtype = this.props.mxEvent.getContent().msgtype;
         const eventType = this.props.mxEvent.getType() as EventType;
-        const { tileHandler, isBubbleMessage, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent);
+        const {
+            tileHandler,
+            isBubbleMessage,
+            isInfoMessage,
+            isLeftAlignedBubbleMessage,
+        } = getEventDisplayInfo(this.props.mxEvent);
 
         // This shouldn't happen: the caller should check we support this type
         // before trying to instantiate us
@@ -879,6 +884,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         const isEditing = !!this.props.editState;
         const classes = classNames({
             mx_EventTile_bubbleContainer: isBubbleMessage,
+            mx_EventTile_leftAlignedBubble: isLeftAlignedBubbleMessage,
             mx_EventTile: true,
             mx_EventTile_isEditing: isEditing,
             mx_EventTile_info: isInfoMessage,

src/components/views/rooms/MemberList.tsx

@@ -45,6 +45,8 @@ import BaseAvatar from '../avatars/BaseAvatar';
 import { throttle } from 'lodash';
 import SpaceStore from "../../../stores/SpaceStore";
 
+const getSearchQueryLSKey = (roomId: string) => `mx_MemberList_searchQuarry_${roomId}`;
+
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
 const SHOW_MORE_INCREMENT = 100;
@@ -171,6 +173,13 @@ export default class MemberList extends React.Component<IProps, IState> {
     }
 
     private getMembersState(members: Array<RoomMember>): IState {
+        let searchQuery;
+        try {
+            searchQuery = window.localStorage.getItem(getSearchQueryLSKey(this.props.roomId));
+        } catch (error) {
+            console.warn("Failed to get last the MemberList search query", error);
+        }
+
         // set the state after determining showPresence to make sure it's
         // taken into account while rendering
         return {
@@ -184,7 +193,7 @@ export default class MemberList extends React.Component<IProps, IState> {
             // in practice I find that a little constraining
             truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS,
             truncateAtInvited: INITIAL_LOAD_NUM_INVITED,
-            searchQuery: "",
+            searchQuery: searchQuery ?? "",
         };
     }
 
@@ -414,6 +423,12 @@ export default class MemberList extends React.Component<IProps, IState> {
     };
 
     private onSearchQueryChanged = (searchQuery: string): void => {
+        try {
+            window.localStorage.setItem(getSearchQueryLSKey(this.props.roomId), searchQuery);
+        } catch (error) {
+            console.warn("Failed to set the last MemberList search query", error);
+        }
+
         this.setState({
             searchQuery,
             filteredJoinedMembers: this.filterMembers(this.state.members, 'join', searchQuery),
@@ -554,7 +569,9 @@ export default class MemberList extends React.Component<IProps, IState> {
             <SearchBox
                 className="mx_MemberList_query mx_textinput_icon mx_textinput_search"
                 placeholder={_t('Filter room members')}
-                onSearch={this.onSearchQueryChanged} />
+                onSearch={this.onSearchQueryChanged}
+                initialValue={this.state.searchQuery}
+            />
         );
 
         let previousPhase = RightPanelPhases.RoomSummary;