Merge branch 'develop' into gsouquet/threaded-messaging-2349

res/css/structures/_LeftPanel.scss

@@ -24,6 +24,11 @@ $roomListCollapsedWidth: 68px;
     }
 }
 
+.mx_LeftPanel_wrapper {
+    display: flex;
+    max-width: 50%;
+}
+
 .mx_LeftPanel {
     background-color: $roomlist-bg-color;
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel

res/css/structures/_MatrixChat.scss

@@ -47,9 +47,7 @@ limitations under the License.
     display: flex;
 
     flex: 1;
-    flex-grow: 0;
     min-height: 0;
-    max-width: 50%;
 }
 
 .mx_MatrixChat_syncError {
@@ -65,7 +63,7 @@ limitations under the License.
 }
 
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
     background-color: $primary-bg-color;
 
     flex: 1 1 0;

res/css/structures/_RoomView.scss

@@ -14,6 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_RoomView_wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    position: relative;
+    justify-content: center;
+}
+
 .mx_RoomView {
     word-wrap: break-word;
     display: flex;

res/css/views/messages/_CallEvent.scss

@@ -41,7 +41,7 @@ limitations under the License.
 
                 height: 16px;
                 width: 16px;
-                background-color: $tertiary-fg-color;
+                background-color: $secondary-fg-color;
                 mask-repeat: no-repeat;
                 mask-size: contain;
                 mask-position: center;
@@ -132,7 +132,7 @@ limitations under the License.
                             position: absolute;
                             height: 13px;
                             width: 13px;
-                            background-color: $tertiary-fg-color;
+                            background-color: $secondary-fg-color;
                             mask-repeat: no-repeat;
                             mask-size: contain;
                         }

res/css/views/rooms/_Autocomplete.scss

@@ -60,7 +60,7 @@
 .mx_Autocomplete_Completion_container_pill {
     margin: 12px;
     display: flex;
-    flex-flow: wrap;
+    flex-direction: column;
 }
 
 .mx_Autocomplete_Completion_container_truncate {
@@ -68,7 +68,6 @@
     .mx_Autocomplete_Completion_subtitle,
     .mx_Autocomplete_Completion_description {
         /* Ellipsis for long names/subtitles/descriptions */
-        max-width: 150px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

res/css/views/rooms/_EventBubbleTile.scss

@@ -264,6 +264,7 @@ limitations under the License.
 }
 
 .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
+.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
 .mx_EventTile.mx_EventTile_info[data-layout=bubble],
 .mx_EventListSummary[data-layout=bubble][data-expanded=false] {
     --backgroundColor: transparent;

res/css/views/voip/_CallContainer.scss

@@ -26,19 +26,6 @@ limitations under the License.
     // different level.
     pointer-events: none;
 
-    .mx_CallPreview {
-        pointer-events: initial; // restore pointer events so the user can leave/interact
-
-        .mx_VideoFeed_remote.mx_VideoFeed_voice {
-            min-height: 150px;
-        }
-
-        .mx_VideoFeed_local {
-            border-radius: 8px;
-            overflow: hidden;
-        }
-    }
-
     .mx_AppTile_persistedWrapper div {
         min-width: 350px;
     }

res/css/views/voip/_CallPreview.scss

@@ -18,4 +18,15 @@ limitations under the License.
     position: fixed;
     left: 0;
     top: 0;
+
+    pointer-events: initial; // restore pointer events so the user can leave/interact
+
+    .mx_VideoFeed_remote.mx_VideoFeed_voice {
+        min-height: 150px;
+    }
+
+    .mx_VideoFeed_local {
+        border-radius: 8px;
+        overflow: hidden;
+    }
 }

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} />
+                src={this.state.llpImage} /> }
-            <img
+
+            { 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

@@ -152,6 +152,7 @@ class LoggedInView extends React.Component<IProps, IState> {
     protected readonly _roomView: React.RefObject<any>;
     protected readonly _resizeContainer: React.RefObject<ResizeHandle>;
     protected compactLayoutWatcherRef: string;
+    protected backgroundImageWatcherRef: string;
     protected resizer: Resizer;
 
     constructor(props, context) {
@@ -195,6 +196,9 @@ class LoggedInView extends React.Component<IProps, IState> {
         this.compactLayoutWatcherRef = SettingsStore.watchSetting(
             "useCompactLayout", null, this.onCompactLayoutChanged,
         );
+        this.backgroundImageWatcherRef = SettingsStore.watchSetting(
+            "RoomList.backgroundImage", null, this.refreshBackgroundImage,
+        );
 
         this.resizer = this.createResizer();
         this.resizer.attach();
@@ -212,6 +216,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
         OwnProfileStore.instance.off(UPDATE_EVENT, this.refreshBackgroundImage);
         SettingsStore.unwatchSetting(this.compactLayoutWatcherRef);
+        SettingsStore.unwatchSetting(this.backgroundImageWatcherRef);
         this.resizer.detach();
     }
 
@@ -644,7 +649,8 @@ class LoggedInView extends React.Component<IProps, IState> {
                     aria-hidden={this.props.hideToSRUsers}
                 >
                     <ToastContainer />
-                    <div ref={this._resizeContainer} className={bodyClasses}>
+                    <div className={bodyClasses}>
+                        <div ref={this._resizeContainer} className='mx_LeftPanel_wrapper'>
                             <BackdropPanel
                                 backgroundImage={this.state.backgroundImage}
                             />
@@ -655,8 +661,11 @@ class LoggedInView extends React.Component<IProps, IState> {
                             />
                             <ResizeHandle />
                         </div>
+                        <div className="mx_RoomView_wrapper">
                             { pageElement }
                         </div>
+                    </div>
+                </div>
                 <CallContainer />
                 <NonUrgentToastContainer />
                 <HostSignupContainer />

src/components/views/rooms/EventTile.tsx

@@ -915,7 +915,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
@@ -937,6 +942,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;

src/utils/EventUtils.ts

@@ -103,6 +103,7 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
     isInfoMessage: boolean;
     tileHandler: string;
     isBubbleMessage: boolean;
+    isLeftAlignedBubbleMessage: boolean;
 } {
     const content = mxEvent.getContent();
     const msgtype = content.msgtype;
@@ -118,12 +119,16 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
         (eventType === EventType.RoomEncryption) ||
         (tileHandler === "messages.MJitsiWidgetEvent")
     );
+    const isLeftAlignedBubbleMessage = (
+        !isBubbleMessage &&
+        eventType === EventType.CallInvite
+    );
     let isInfoMessage = (
         !isBubbleMessage &&
+        !isLeftAlignedBubbleMessage &&
         eventType !== EventType.RoomMessage &&
         eventType !== EventType.Sticker &&
-        eventType !== EventType.RoomCreate &&
+        eventType !== EventType.RoomCreate
-        eventType !== EventType.CallInvite
     );
 
     // If we're showing hidden events in the timeline, we should use the
@@ -137,5 +142,5 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
         isInfoMessage = true;
     }
 
-    return { tileHandler, isInfoMessage, isBubbleMessage };
+    return { tileHandler, isInfoMessage, isBubbleMessage, isLeftAlignedBubbleMessage };
 }