Merge pull request #4388 from ThobyV/thobyv/make-filepanel-remember-scroll-position

Fix Filepanel scroll position state lost when room is changed

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 timelinePanel = this._timelinePanel;
+        const scrollState = timelinePanel.getScrollState();
+
+        if (!timelinePanel) return null;
+
+        if (!scrollState || scrollState.stuckAtBottom) {
+            return null;
+        }
+
+        return {
+            focussedEvent: scrollState.trackedScrollToken,
+            pixelOffset: scrollState.pixelOffset,
+        };
+    },
+
+    _getTimelinePanelRef: function(ref) {
+        this._timelinePanel = 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/components/structures/RoomView.js

@@ -269,7 +269,7 @@ export default createReactClass({
             // If an event ID wasn't specified, default to the one saved for this room
             // in the scroll state store. Assume initialEventPixelOffset should be set.
             if (!newState.initialEventId) {
-                const roomScrollState = RoomScrollStateStore.getScrollState(newState.roomId);
+                const roomScrollState = RoomScrollStateStore.getRoomViewScrollState(newState.roomId);
                 if (roomScrollState) {
                     newState.initialEventId = roomScrollState.focussedEvent;
                     newState.initialEventPixelOffset = roomScrollState.pixelOffset;
@@ -466,7 +466,7 @@ export default createReactClass({
 
         // update the scroll map before we get unmounted
         if (this.state.roomId) {
-            RoomScrollStateStore.setScrollState(this.state.roomId, this._getScrollState());
+            RoomScrollStateStore.setRoomViewScrollState(this.state.roomId, this._getScrollState());
         }
 
         if (this.state.shouldPeek) {

src/stores/RoomScrollStateStore.js

@@ -32,15 +32,24 @@ class RoomScrollStateStore {
         //
         //    pixelOffset: the number of pixels the window is scrolled down
         //        from the focussedEvent.
-        this._scrollStateMap = {};
+        this._RoomViewScrollStateMap = {};
+        this._FilePanelScrollStateMap = {};
     }
 
-    getScrollState(roomId) {
+    getRoomViewScrollState(roomId) {
-        return this._scrollStateMap[roomId];
+        return this._RoomViewScrollStateMap[roomId];
     }
 
-    setScrollState(roomId, scrollState) {
+    setRoomViewScrollState(roomId, scrollState) {
-        this._scrollStateMap[roomId] = scrollState;
+        this._RoomViewScrollStateMap[roomId] = scrollState;
+    }
+
+    getFilePanelScrollState(roomId, scrollState) {
+        return this._FilePanelScrollStateMap[roomId];
+    }
+
+    setFilePanelScrollState(roomId, scrollState) {
+        this._FilePanelScrollStateMap[roomId] = scrollState;
     }
 }