diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 86c2efeb4a8..fd9c4a14fc1 100644 --- a/res/css/structures/_RoomView.scss +++ b/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 { diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 743928c272a..15bf327a740 100644 --- a/src/components/structures/RoomView.tsx +++ b/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 { }); 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 { } 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 { }; } - 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 { const auxPanel = ( { aux } diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx index 4a62d6711e4..7afa29624af 100644 --- a/src/components/views/rooms/AuxPanel.tsx +++ b/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 { 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 { const callView = ( ); @@ -148,7 +129,6 @@ export default class AuxPanel extends React.Component { appsDrawer = ; @@ -204,21 +184,12 @@ export default class AuxPanel extends React.Component { } } - 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 ( - + { stateViews } + { this.props.children } { appsDrawer } { callView } - { this.props.children } ); } diff --git a/src/components/views/voip/CallViewForRoom.tsx b/src/components/views/voip/CallViewForRoom.tsx index a5aa3e7734e..b0a6f170953 100644 --- a/src/components/views/voip/CallViewForRoom.tsx +++ b/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 { 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 (