From 54cd385e6d5bf07c0e47dee2e448e9d9c4f14245 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 27 Aug 2021 13:31:43 +0200 Subject: [PATCH 1/2] Improve AUX panel behaviour MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/structures/_RoomView.scss | 1 - src/components/structures/RoomView.tsx | 34 ------------------- src/components/views/rooms/AuxPanel.tsx | 32 ++--------------- src/components/views/voip/CallViewForRoom.tsx | 7 +--- 4 files changed, 3 insertions(+), 71 deletions(-) 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 474b99262da..ef5600eed23 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'; @@ -156,7 +155,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() @@ -563,10 +561,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) { @@ -654,9 +648,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) { @@ -1617,28 +1608,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 }); @@ -1926,11 +1895,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..7d3877025c8 100644 --- a/src/components/views/rooms/AuxPanel.tsx +++ b/src/components/views/rooms/AuxPanel.tsx @@ -35,16 +35,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 +82,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 +121,6 @@ export default class AuxPanel extends React.Component { const callView = ( ); @@ -148,7 +130,6 @@ export default class AuxPanel extends React.Component { appsDrawer = ; @@ -204,21 +185,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 (
Date: Fri, 27 Aug 2021 14:07:36 +0200 Subject: [PATCH 2/2] Remove unused import MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/AuxPanel.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx index 7d3877025c8..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';