create ResizeNotifier to derive which areas of the app resize and emit

src/components/structures/FilePanel.js

@@ -123,6 +123,7 @@ const FilePanel = React.createClass({
                     timelineSet={this.state.timelineSet}
                     showUrlPreview = {false}
                     tileShape="file_grid"
+                    resizeNotifier={this.props.resizeNotifier}
                     empty={_t('There are no visible files in this room')}
                 />
             );

src/components/structures/LoggedInView.js

@@ -173,6 +173,7 @@ const LoggedInView = React.createClass({
             },
             onResized: (size) => {
                 window.localStorage.setItem("mx_lhs_size", '' + size);
+                this.props.resizeNotifier.notifyLeftHandleResized();
             },
         };
         const resizer = new Resizer(
@@ -448,6 +449,7 @@ const LoggedInView = React.createClass({
                         disabled={this.props.middleDisabled}
                         collapsedRhs={this.props.collapsedRhs}
                         ConferenceHandler={this.props.ConferenceHandler}
+                        resizeNotifier={this.props.resizeNotifier}
                     />;
                 break;
 

src/components/structures/MainSplit.js

@@ -27,6 +27,7 @@ export default class MainSplit extends React.Component {
 
     _onResized(size) {
         window.localStorage.setItem("mx_rhs_size", size);
+        this.props.resizeNotifier.notifyRightHandleResized();
     }
 
     _createResizer() {

src/components/structures/MatrixChat.js

@@ -48,6 +48,7 @@ import { _t, getCurrentLanguage } from '../../languageHandler';
 import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
 import { startAnyRegistrationFlow } from "../../Registration.js";
 import { messageForSyncError } from '../../utils/ErrorUtils';
+import ResizeNotifier from "../../utils/ResizeNotifier";
 
 const AutoDiscovery = Matrix.AutoDiscovery;
 
@@ -194,6 +195,7 @@ export default React.createClass({
             hideToSRUsers: false,
 
             syncError: null, // If the current syncing status is ERROR, the error object, otherwise null.
+            resizeNotifier: new ResizeNotifier(),
         };
         return s;
     },
@@ -1661,6 +1663,7 @@ export default React.createClass({
             dis.dispatch({ action: 'show_right_panel' });
         }
 
+        this.state.resizeNotifier.notifyWindowResized();
         this._windowWidth = window.innerWidth;
     },
 

src/components/structures/MessagePanel.js

@@ -703,7 +703,8 @@ module.exports = React.createClass({
                     onFillRequest={this.props.onFillRequest}
                     onUnfillRequest={this.props.onUnfillRequest}
                     style={style}
-                    stickyBottom={this.props.stickyBottom}>
+                    stickyBottom={this.props.stickyBottom}
+                    resizeNotifier={this.props.resizeNotifier}>
                 { topSpinner }
                 { this._getEventTiles() }
                 { whoIsTyping }

src/components/structures/RightPanel.js

@@ -193,7 +193,7 @@ export default class RightPanel extends React.Component {
         } else if (this.state.phase === RightPanel.Phase.NotificationPanel) {
             panel = <NotificationPanel />;
         } else if (this.state.phase === RightPanel.Phase.FilePanel) {
-            panel = <FilePanel roomId={this.props.roomId} />;
+            panel = <FilePanel roomId={this.props.roomId} resizeNotifier={this.props.resizeNotifier} />;
         }
 
         const classes = classNames("mx_RightPanel", "mx_fadable", {

src/components/structures/RoomView.js

@@ -392,7 +392,7 @@ module.exports = React.createClass({
         this._updateConfCallNotification();
 
         window.addEventListener('beforeunload', this.onPageUnload);
-        window.addEventListener('resize', this.onResize);
+        this.props.resizeNotifier.on("middlePanelResized", this.onResize);
         this.onResize();
 
         document.addEventListener("keydown", this.onKeyDown);
@@ -472,7 +472,7 @@ module.exports = React.createClass({
         }
 
         window.removeEventListener('beforeunload', this.onPageUnload);
-        window.removeEventListener('resize', this.onResize);
+        this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
 
         document.removeEventListener("keydown", this.onKeyDown);
 
@@ -1838,6 +1838,7 @@ module.exports = React.createClass({
                 className="mx_RoomView_messagePanel"
                 membersLoaded={this.state.membersLoaded}
                 permalinkCreator={this.state.permalinkCreator}
+                resizeNotifier={this.props.resizeNotifier}
             />);
 
         let topUnreadMessagesBar = null;
@@ -1870,7 +1871,7 @@ module.exports = React.createClass({
             },
         );
 
-        const rightPanel = this.state.room ? <RightPanel roomId={this.state.room.roomId} /> : undefined;
+        const rightPanel = this.state.room ? <RightPanel roomId={this.state.room.roomId} resizeNotifier={this.props.resizeNotifier} /> : undefined;
 
         return (
             <main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
@@ -1886,7 +1887,11 @@ module.exports = React.createClass({
                     onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
                     e2eStatus={this.state.e2eStatus}
                 />
-                <MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs}>
+                <MainSplit
+                    panel={rightPanel}
+                    collapsedRhs={this.props.collapsedRhs}
+                    resizeNotifier={this.props.resizeNotifier}
+                >
                     <div className={fadableSectionClasses}>
                         { auxPanel }
                         <div className="mx_RoomView_timeline">

src/components/structures/ScrollPanel.js

@@ -149,6 +149,8 @@ module.exports = React.createClass({
 
     componentWillMount: function() {
         this._pendingFillRequests = {b: null, f: null};
+        this.props.resizeNotifier.on("middlePanelResized", this.onResize);
+
         this.resetScrollState();
     },
 
@@ -171,6 +173,7 @@ module.exports = React.createClass({
         //
         // (We could use isMounted(), but facebook have deprecated that.)
         this.unmounted = true;
+        this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
     },
 
     onScroll: function(ev) {

src/components/structures/TimelinePanel.js

@@ -1228,6 +1228,7 @@ var TimelinePanel = React.createClass({
                           alwaysShowTimestamps={this.state.alwaysShowTimestamps}
                           className={this.props.className}
                           tileShape={this.props.tileShape}
+                          resizeNotifier={this.props.resizeNotifier}
             />
         );
     },

src/utils/ResizeNotifier.js

@@ -0,0 +1,52 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+ * Fires when the middle panel has been resized.
+ * @event module:utils~ResizeNotifier#"middlePanelResized"
+ */
+import { EventEmitter } from "events";
+import { throttle } from "lodash";
+
+export default class ResizeNotifier extends EventEmitter {
+
+    constructor() {
+        super();
+        // with default options, will call fn once at first call, and then every x ms
+        // if there was another call in that timespan
+        this._throttledMiddlePanel = throttle(() => this.emit("middlePanelResized"), 200);
+    }
+
+    notifyBannersChanged() {
+        this.emit("middlePanelResized");
+    }
+
+    // can be called in quick succession
+    notifyLeftHandleResized() {
+        this._throttledMiddlePanel();
+    }
+
+    // can be called in quick succession
+    notifyRightHandleResized() {
+        this._throttledMiddlePanel();
+    }
+
+    // can be called in quick succession
+    notifyWindowResized() {
+        this._throttledMiddlePanel();
+    }
+}
+