Merge pull request #6699 from SimonBrandner/fix/improve-aux-panel/18787

Improve AUX panel behaviour

res/css/structures/_RoomView.scss

@@ -89,7 +89,6 @@ limitations under the License.
     margin: 0px auto;
 
     overflow: auto;
-    flex: 0 0 auto;
 }
 
 .mx_RoomView_auxPanel_fullHeight {

src/components/structures/RoomView.tsx

@@ -78,7 +78,6 @@ import { objectHasDiff } from "../../utils/objects";
 import SpaceRoomView from "./SpaceRoomView";
 import { IOpts } from "../../createRoom";
 import { replaceableComponent } from "../../utils/replaceableComponent";
-import UIStore from "../../stores/UIStore";
 import EditorStateTransfer from "../../utils/EditorStateTransfer";
 import { throttle } from "lodash";
 import ErrorDialog from '../views/dialogs/ErrorDialog';
@@ -158,7 +157,6 @@ export interface IState {
     // used by componentDidUpdate to avoid unnecessary checks
     atEndOfLiveTimelineInit: boolean;
     showTopUnreadMessagesBar: boolean;
-    auxPanelMaxHeight?: number;
     statusBarVisible: boolean;
     // We load this later by asking the js-sdk to suggest a version for us.
     // This object is the result of Room#getRecommendedVersion()
@@ -565,10 +563,6 @@ export default class RoomView extends React.Component<IProps, IState> {
         });
 
         window.addEventListener('beforeunload', this.onPageUnload);
-        if (this.props.resizeNotifier) {
-            this.props.resizeNotifier.on("middlePanelResized", this.onResize);
-        }
-        this.onResize();
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -656,9 +650,6 @@ export default class RoomView extends React.Component<IProps, IState> {
         }
 
         window.removeEventListener('beforeunload', this.onPageUnload);
-        if (this.props.resizeNotifier) {
-            this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
-        }
 
         // Remove RoomStore listener
         if (this.roomStoreToken) {
@@ -1619,28 +1610,6 @@ export default class RoomView extends React.Component<IProps, IState> {
         };
     }
 
-    private onResize = () => {
-        // It seems flexbox doesn't give us a way to constrain the auxPanel height to have
-        // a minimum of the height of the video element, whilst also capping it from pushing out the page
-        // so we have to do it via JS instead.  In this implementation we cap the height by putting
-        // a maxHeight on the underlying remote video tag.
-
-        // header + footer + status + give us at least 120px of scrollback at all times.
-        let auxPanelMaxHeight = UIStore.instance.windowHeight -
-                (54 + // height of RoomHeader
-                 36 + // height of the status area
-                 51 + // minimum height of the message composer
-                 120); // amount of desired scrollback
-
-        // XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway
-        // but it's better than the video going missing entirely
-        if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
-
-        if (this.state.auxPanelMaxHeight !== auxPanelMaxHeight) {
-            this.setState({ auxPanelMaxHeight });
-        }
-    };
-
     private onStatusBarVisible = () => {
         if (this.unmounted || this.state.statusBarVisible) return;
         this.setState({ statusBarVisible: true });
@@ -1941,11 +1910,8 @@ export default class RoomView extends React.Component<IProps, IState> {
         const auxPanel = (
             <AuxPanel
                 room={this.state.room}
-                fullHeight={false}
                 userId={this.context.credentials.userId}
-                maxHeight={this.state.auxPanelMaxHeight}
                 showApps={this.state.showApps}
-                onResize={this.onResize}
                 resizeNotifier={this.props.resizeNotifier}
             >
                 { aux }

src/components/views/rooms/AuxPanel.tsx

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import classNames from 'classnames';
 import { lexicographicCompare } from 'matrix-js-sdk/src/utils';
 import { Room } from 'matrix-js-sdk/src/models/room';
 
@@ -35,16 +34,6 @@ interface IProps {
     room: Room;
     userId: string;
     showApps: boolean; // Render apps
-
-    // maxHeight attribute for the aux panel and the video
-    // therein
-    maxHeight: number;
-
-    // a callback which is called when the content of the aux panel changes
-    // content in a way that is likely to make it change size.
-    onResize: () => void;
-    fullHeight: boolean;
-
     resizeNotifier: ResizeNotifier;
 }
 
@@ -92,13 +81,6 @@ export default class AuxPanel extends React.Component<IProps, IState> {
         return objectHasDiff(this.props, nextProps) || objectHasDiff(this.state, nextState);
     }
 
-    componentDidUpdate(prevProps, prevState) {
-        // most changes are likely to cause a resize
-        if (this.props.onResize) {
-            this.props.onResize();
-        }
-    }
-
     private rateLimitedUpdate = throttle(() => {
         this.setState({ counters: this.computeCounters() });
     }, 500, { leading: true, trailing: true });
@@ -138,7 +120,6 @@ export default class AuxPanel extends React.Component<IProps, IState> {
         const callView = (
             <CallViewForRoom
                 roomId={this.props.room.roomId}
-                maxVideoHeight={this.props.maxHeight}
                 resizeNotifier={this.props.resizeNotifier}
             />
         );
@@ -148,7 +129,6 @@ export default class AuxPanel extends React.Component<IProps, IState> {
             appsDrawer = <AppsDrawer
                 room={this.props.room}
                 userId={this.props.userId}
-                maxHeight={this.props.maxHeight}
                 showApps={this.props.showApps}
                 resizeNotifier={this.props.resizeNotifier}
             />;
@@ -204,21 +184,12 @@ export default class AuxPanel extends React.Component<IProps, IState> {
             }
         }
 
-        const classes = classNames({
-            "mx_RoomView_auxPanel": true,
-            "mx_RoomView_auxPanel_fullHeight": this.props.fullHeight,
-        });
-        const style: React.CSSProperties = {};
-        if (!this.props.fullHeight) {
-            style.maxHeight = this.props.maxHeight;
-        }
-
         return (
-            <AutoHideScrollbar className={classes} style={style}>
+            <AutoHideScrollbar className="mx_RoomView_auxPanel">
                 { stateViews }
+                { this.props.children }
                 { appsDrawer }
                 { callView }
-                { this.props.children }
             </AutoHideScrollbar>
         );
     }

src/components/views/voip/CallViewForRoom.tsx

@@ -27,9 +27,6 @@ interface IProps {
     // What room we should display the call for
     roomId: string;
 
-    // maxHeight style attribute for the video panel
-    maxVideoHeight?: number;
-
     resizeNotifier: ResizeNotifier;
 }
 
@@ -99,14 +96,12 @@ export default class CallViewForRoom extends React.Component<IProps, IState> {
 
     public render() {
         if (!this.state.call) return null;
-        // We subtract 8 as it the margin-bottom of the mx_CallViewForRoom_ResizeWrapper
-        const maxHeight = this.props.maxVideoHeight - 8;
 
         return (
             <div className="mx_CallViewForRoom">
                 <Resizable
                     minHeight={380}
-                    maxHeight={maxHeight}
+                    maxHeight="80vh"
                     enable={{
                         top: false,
                         right: false,