FilePanel: Implement pagination requesting using the EventIndex.

src/components/structures/FilePanel.js

@@ -71,6 +71,20 @@ const FilePanel = createReactClass({
         return timelineSet;
     },
 
+    onPaginationRequest(timelineWindow, direction, limit) {
+        const client = MatrixClientPeg.get();
+        const eventIndex = EventIndexPeg.get();
+        const roomId = this.props.roomId;
+
+        const room = client.getRoom(roomId);
+
+        if (client.isRoomEncrypted(roomId) && eventIndex !== null) {
+            return eventIndex.paginateTimelineWindow(room, timelineWindow, direction, limit);
+        } else {
+            return timelineWindow.paginate(direction, limit);
+        }
+    },
+
     async updateTimelineSet(roomId: string) {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(roomId);
@@ -85,7 +99,8 @@ const FilePanel = createReactClass({
                 timelineSet = await this.fetchFileEventsServer(room)
 
                 if (client.isRoomEncrypted(roomId) && eventIndex !== null) {
-                    await eventIndex.populateFileTimeline(room, timelineSet);
+                    const timeline = timelineSet.getLiveTimeline();
+                    await eventIndex.populateFileTimeline(timelineSet, timeline, room, 1);
                 }
 
                 this.setState({ timelineSet: timelineSet });
@@ -128,6 +143,7 @@ const FilePanel = createReactClass({
                         manageReadMarkers={false}
                         timelineSet={this.state.timelineSet}
                         showUrlPreview = {false}
+                        onPaginationRequest={this.onPaginationRequest}
                         tileShape="file_grid"
                         resizeNotifier={this.props.resizeNotifier}
                         empty={_t('There are no visible files in this room')}

src/components/structures/TimelinePanel.js

@@ -94,6 +94,10 @@ const TimelinePanel = createReactClass({
         // callback which is called when the read-up-to mark is updated.
         onReadMarkerUpdated: PropTypes.func,
 
+        // callback which is called when we wish to paginate the timeline
+        // window.
+        onPaginationRequest: PropTypes.func,
+
         // maximum number of events to show in a timeline
         timelineCap: PropTypes.number,
 
@@ -338,6 +342,14 @@ const TimelinePanel = createReactClass({
         }
     },
 
+    onPaginationRequest(timelineWindow, direction, size) {
+        if (this.props.onPaginationRequest) {
+            return this.props.onPaginationRequest(timelineWindow, direction, size);
+        } else {
+            return timelineWindow.paginate(direction, size);
+        }
+    },
+
     // set off a pagination request.
     onMessageListFillRequest: function(backwards) {
         if (!this._shouldPaginate()) return Promise.resolve(false);
@@ -360,7 +372,7 @@ const TimelinePanel = createReactClass({
         debuglog("TimelinePanel: Initiating paginate; backwards:"+backwards);
         this.setState({[paginatingKey]: true});
 
-        return this._timelineWindow.paginate(dir, PAGINATE_SIZE).then((r) => {
+        return this.onPaginationRequest(this._timelineWindow, dir, PAGINATE_SIZE).then((r) => {
             if (this.unmounted) { return; }
 
             debuglog("TimelinePanel: paginate complete backwards:"+backwards+"; success:"+r);