Merge branch 'develop' into gsouquet/compact-composer-18533

src/components/structures/LoggedInView.tsx

@@ -151,7 +151,8 @@ class LoggedInView extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     protected readonly _matrixClient: MatrixClient;
     protected readonly _roomView: React.RefObject<any>;
-    protected readonly _resizeContainer: React.RefObject<ResizeHandle>;
+    protected readonly _resizeContainer: React.RefObject<HTMLDivElement>;
+    protected readonly resizeHandler: React.RefObject<HTMLDivElement>;
     protected compactLayoutWatcherRef: string;
     protected backgroundImageWatcherRef: string;
     protected resizer: Resizer;
@@ -176,6 +177,7 @@ class LoggedInView extends React.Component<IProps, IState> {
 
         this._roomView = React.createRef();
         this._resizeContainer = React.createRef();
+        this.resizeHandler = React.createRef();
     }
 
     componentDidMount() {
@@ -280,6 +282,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             isItemCollapsed: domNode => {
                 return domNode.classList.contains("mx_LeftPanel_minimized");
             },
+            handler: this.resizeHandler.current,
         };
         const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
         resizer.setClassNames({
@@ -681,16 +684,17 @@ class LoggedInView extends React.Component<IProps, IState> {
                                 backgroundImage={this.state.backgroundImage}
                             />
                             <div
-                                ref={this._resizeContainer}
                                 className="mx_LeftPanel_wrapper--user"
+                                ref={this._resizeContainer}
+                                data-collapsed={this.props.collapseLhs ? true : undefined}
                             >
                                 <LeftPanel
                                     isMinimized={this.props.collapseLhs || false}
                                     resizeNotifier={this.props.resizeNotifier}
                                 />
-                                <ResizeHandle id="lp-resizer" />
                             </div>
                         </div>
+                        <ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />
                         <div className="mx_RoomView_wrapper">
                             { pageElement }
                         </div>

src/components/views/elements/ResizeHandle.tsx

@@ -1,27 +1,27 @@
 
 import React from 'react'; // eslint-disable-line no-unused-vars
-import PropTypes from 'prop-types';
 
 //see src/resizer for the actual resizing code, this is just the DOM for the resize handle
-const ResizeHandle = (props) => {
+interface IResizeHandleProps {
+    vertical?: boolean;
+    reverse?: boolean;
+    id?: string;
+    passRef?: React.RefObject<HTMLDivElement>;
+}
+
+const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id, passRef }) => {
     const classNames = ['mx_ResizeHandle'];
-    if (props.vertical) {
+    if (vertical) {
         classNames.push('mx_ResizeHandle_vertical');
     } else {
         classNames.push('mx_ResizeHandle_horizontal');
     }
-    if (props.reverse) {
+    if (reverse) {
         classNames.push('mx_ResizeHandle_reverse');
     }
     return (
-        <div className={classNames.join(' ')} data-id={props.id}><div /></div>
+        <div ref={passRef} className={classNames.join(' ')} data-id={id}><div /></div>
     );
 };
 
-ResizeHandle.propTypes = {
-    vertical: PropTypes.bool,
-    reverse: PropTypes.bool,
-    id: PropTypes.string,
-};
-
 export default ResizeHandle;

src/components/views/rooms/RoomList.tsx

@@ -38,7 +38,6 @@ import { StaticNotificationState } from "../../../stores/notifications/StaticNot
 import { Action } from "../../../dispatcher/actions";
 import { ViewRoomDeltaPayload } from "../../../dispatcher/payloads/ViewRoomDeltaPayload";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
-import SettingsStore from "../../../settings/SettingsStore";
 import CustomRoomTagStore from "../../../stores/CustomRoomTagStore";
 import { arrayFastClone, arrayHasDiff } from "../../../utils/arrays";
 import { objectShallowClone, objectWithOnly } from "../../../utils/objects";
@@ -320,11 +319,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
 
     private updateLists = () => {
         const newLists = RoomListStore.instance.orderedLists;
-        if (SettingsStore.getValue("advancedRoomListLogging")) {
-            // TODO: Remove debug: https://github.com/vector-im/element-web/issues/14602
-            console.log("new lists", newLists);
-        }
-
         const previousListIds = Object.keys(this.state.sublists);
         const newListIds = Object.keys(newLists).filter(t => {
             if (!isCustomTag(t)) return true; // always include non-custom tags

src/components/views/settings/tabs/user/LabsUserSettingsTab.js

@@ -88,7 +88,6 @@ export default class LabsUserSettingsTab extends React.Component {
                 <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />
                 <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />
                 <SettingsFlag name="lowBandwidth" level={SettingLevel.DEVICE} />
-                <SettingsFlag name="advancedRoomListLogging" level={SettingLevel.DEVICE} />
                 { hiddenReadReceipts }
             </div>;
         }

src/components/views/voip/VideoFeed.tsx

@@ -45,6 +45,7 @@ interface IProps {
 interface IState {
     audioMuted: boolean;
     videoMuted: boolean;
+    speaking: boolean;
 }
 
 @replaceableComponent("views.voip.VideoFeed")
@@ -57,6 +58,7 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
         this.state = {
             audioMuted: this.props.feed.isAudioMuted(),
             videoMuted: this.props.feed.isVideoMuted(),
+            speaking: false,
         };
     }
 
@@ -103,11 +105,19 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
         if (oldFeed) {
             this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream);
             this.props.feed.removeListener(CallFeedEvent.MuteStateChanged, this.onMuteStateChanged);
+            if (this.props.feed.purpose === SDPStreamMetadataPurpose.Usermedia) {
+                this.props.feed.removeListener(CallFeedEvent.Speaking, this.onSpeaking);
+                this.props.feed.measureVolumeActivity(false);
+            }
             this.stopMedia();
         }
         if (newFeed) {
             this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
             this.props.feed.addListener(CallFeedEvent.MuteStateChanged, this.onMuteStateChanged);
+            if (this.props.feed.purpose === SDPStreamMetadataPurpose.Usermedia) {
+                this.props.feed.addListener(CallFeedEvent.Speaking, this.onSpeaking);
+                this.props.feed.measureVolumeActivity(true);
+            }
             this.playMedia();
         }
     }
@@ -162,6 +172,10 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
         });
     };
 
+    private onSpeaking = (speaking: boolean): void => {
+        this.setState({ speaking });
+    };
+
     private onResize = (e) => {
         if (this.props.onResize && !this.props.feed.isLocal()) {
             this.props.onResize(e);
@@ -173,6 +187,7 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
 
         const wrapperClasses = classnames("mx_VideoFeed", {
             mx_VideoFeed_voice: this.state.videoMuted,
+            mx_VideoFeed_speaking: this.state.speaking,
         });
         const micIconClasses = classnames("mx_VideoFeed_mic", {
             mx_VideoFeed_mic_muted: this.state.audioMuted,