fix file panel scroll position lost on room change

src/components/structures/FilePanel.js

@@ -25,6 +25,8 @@ import {MatrixClientPeg} from '../../MatrixClientPeg';
 import EventIndexPeg from "../../indexing/EventIndexPeg";
 import { _t } from '../../languageHandler';
 
+import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
+
 /*
  * Component which shows the filtered file using a TimelinePanel
  */
@@ -41,6 +43,8 @@ const FilePanel = createReactClass({
     getInitialState: function() {
         return {
             timelineSet: null,
+            initialEventId: null,
+            initialEventPixelOffset: null,
         };
     },
 
@@ -84,6 +88,16 @@ const FilePanel = createReactClass({
 
         await this.updateTimelineSet(this.props.roomId);
 
+        if (this.props.roomId) {
+            const filePanelScrollState = RoomScrollStateStore.getFilePanelScrollState(this.props.roomId);
+            if (filePanelScrollState) {
+                this.setState({
+                    initialEventId: filePanelScrollState.focussedEvent,
+                    initialEventPixelOffset: filePanelScrollState.pixelOffset,
+                });
+            }
+        }
+
         if (!MatrixClientPeg.get().isRoomEncrypted(this.props.roomId)) return;
 
         // The timelineSets filter makes sure that encrypted events that contain
@@ -101,6 +115,10 @@ const FilePanel = createReactClass({
     },
 
     componentWillUnmount() {
+        if (this.props.roomId) {
+            RoomScrollStateStore.setFilePanelScrollState(this.props.roomId, this._getScrollState());
+        }
+
         const client = MatrixClientPeg.get();
         if (client === null) return;
 
@@ -190,6 +208,26 @@ const FilePanel = createReactClass({
         }
     },
 
+    _getScrollState: function() {
+        const messagePanel = this._messagePanel;
+        const scrollState = messagePanel.getScrollState();
+
+        if (!messagePanel) return null;
+
+        if (!scrollState || scrollState.stuckAtBottom) {
+            return null;
+        }
+
+        return {
+            focussedEvent: scrollState.trackedScrollToken,
+            pixelOffset: scrollState.pixelOffset,
+        };
+    },
+
+    _getTimelinePanelRef: function(ref) {
+        this._messagePanel = ref;
+    },
+
     render: function() {
         if (MatrixClientPeg.get().isGuest()) {
             return <div className="mx_FilePanel mx_RoomView_messageListWrapper">
@@ -215,11 +253,15 @@ const FilePanel = createReactClass({
             //             "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId);
             return (
                 <div className="mx_FilePanel" role="tabpanel">
-                    <TimelinePanel key={"filepanel_" + this.props.roomId}
+                    <TimelinePanel
+                        ref={this._getTimelinePanelRef}
+                        key={"filepanel_" + this.props.roomId}
                         manageReadReceipts={false}
                         manageReadMarkers={false}
                         timelineSet={this.state.timelineSet}
                         showUrlPreview = {false}
+                        eventId={this.state.initialEventId}
+                        eventPixelOffset={this.state.initialEventPixelOffset}
                         onPaginationRequest={this.onPaginationRequest}
                         tileShape="file_grid"
                         resizeNotifier={this.props.resizeNotifier}

src/stores/RoomScrollStateStore.js

@@ -33,6 +33,7 @@ class RoomScrollStateStore {
         //    pixelOffset: the number of pixels the window is scrolled down
         //        from the focussedEvent.
         this._RoomViewScrollStateMap = {};
+        this._FilePanelScrollStateMap = {};
     }
 
     getRoomViewScrollState(roomId) {
@@ -42,6 +43,14 @@ class RoomScrollStateStore {
     setRoomViewScrollState(roomId, scrollState) {
         this._RoomViewScrollStateMap[roomId] = scrollState;
     }
+
+    getFilePanelScrollState(roomId, scrollState) {
+        return this._FilePanelScrollStateMap[roomId];
+    }
+
+    setFilePanelScrollState(roomId, scrollState) {
+        this._FilePanelScrollStateMap[roomId] = scrollState;
+    }
 }
 
 if (global.mx_RoomScrollStateStore === undefined) {