From 5d316ad7dc62af8b6d49cfe192847a786cbb81ed Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sat, 24 Apr 2021 21:57:54 -0700
Subject: [PATCH] Fixed scrolling via jump list on series index

---
 frontend/src/Components/Table/VirtualTable.js | 23 ++++++-------
 .../Index/Overview/SeriesIndexOverview.js     |  1 +
 .../Index/Overview/SeriesIndexOverviews.js    | 34 +++++++++++--------
 .../Index/Posters/SeriesIndexPosters.js       | 29 ++++++++--------
 4 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/frontend/src/Components/Table/VirtualTable.js b/frontend/src/Components/Table/VirtualTable.js
index b2d68a888..310459866 100644
--- a/frontend/src/Components/Table/VirtualTable.js
+++ b/frontend/src/Components/Table/VirtualTable.js
@@ -7,8 +7,6 @@ import { WindowScroller, Grid } from 'react-virtualized';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import styles from './VirtualTable.css';
 
-const ROW_HEIGHT = 38;
-
 function overscanIndicesGetter(options) {
   const {
     cellCount,
@@ -47,8 +45,7 @@ class VirtualTable extends Component {
 
   componentDidUpdate(prevProps, prevState) {
     const {
-      items,
-      scrollIndex
+      items
     } = this.props;
 
     const {
@@ -59,13 +56,6 @@ class VirtualTable extends Component {
       // recomputeGridSize also forces Grid to discard its cache of rendered cells
       this._grid.recomputeGridSize();
     }
-
-    if (scrollIndex != null && scrollIndex !== prevProps.scrollIndex) {
-      this._grid.scrollToCell({
-        rowIndex: scrollIndex,
-        columnIndex: 0
-      });
-    }
   }
 
   //
@@ -96,6 +86,8 @@ class VirtualTable extends Component {
       header,
       headerHeight,
       rowRenderer,
+      rowHeight,
+      scrollIndex,
       ...otherProps
     } = this.props;
 
@@ -125,6 +117,11 @@ class VirtualTable extends Component {
           if (!height) {
             return null;
           }
+
+          const finalScrollTop = scrollIndex == null ?
+            scrollTop :
+            scrollIndex * rowHeight;
+
           return (
             <Measure
               whitelist={['width']}
@@ -144,11 +141,11 @@ class VirtualTable extends Component {
                     width={width}
                     height={height}
                     headerHeight={height - headerHeight}
-                    rowHeight={ROW_HEIGHT}
+                    rowHeight={rowHeight}
                     rowCount={items.length}
                     columnCount={1}
                     columnWidth={width}
-                    scrollTop={scrollTop}
+                    scrollTop={finalScrollTop}
                     onScroll={onChildScroll}
                     overscanRowCount={2}
                     cellRenderer={rowRenderer}
diff --git a/frontend/src/Series/Index/Overview/SeriesIndexOverview.js b/frontend/src/Series/Index/Overview/SeriesIndexOverview.js
index 0e7af9d90..e279e507e 100644
--- a/frontend/src/Series/Index/Overview/SeriesIndexOverview.js
+++ b/frontend/src/Series/Index/Overview/SeriesIndexOverview.js
@@ -270,6 +270,7 @@ SeriesIndexOverview.propTypes = {
 };
 
 SeriesIndexOverview.defaultProps = {
+  overview: '',
   statistics: {
     seasonCount: 0,
     episodeCount: 0,
diff --git a/frontend/src/Series/Index/Overview/SeriesIndexOverviews.js b/frontend/src/Series/Index/Overview/SeriesIndexOverviews.js
index eab7fc7fd..24ec769c8 100644
--- a/frontend/src/Series/Index/Overview/SeriesIndexOverviews.js
+++ b/frontend/src/Series/Index/Overview/SeriesIndexOverviews.js
@@ -71,7 +71,6 @@ class SeriesIndexOverviews extends Component {
       items,
       sortKey,
       overviewOptions,
-      jumpToCharacter,
       isSmallScreen
     } = this.props;
 
@@ -96,18 +95,6 @@ class SeriesIndexOverviews extends Component {
       // recomputeGridSize also forces Grid to discard its cache of rendered cells
       this._grid.recomputeGridSize();
     }
-
-    if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
-      const index = getIndexOfFirstCharacter(items, jumpToCharacter);
-
-      if (this._grid && index != null) {
-
-        this._grid.scrollToCell({
-          rowIndex: index,
-          columnIndex: 0
-        });
-      }
-    }
   }
 
   //
@@ -201,6 +188,7 @@ class SeriesIndexOverviews extends Component {
     const {
       scroller,
       items,
+      jumpToCharacter,
       isSmallScreen
     } = this.props;
 
@@ -222,6 +210,24 @@ class SeriesIndexOverviews extends Component {
               return <div />;
             }
 
+            let finalScrollTop = scrollTop;
+
+            if (jumpToCharacter != null) {
+              const index = getIndexOfFirstCharacter(items, jumpToCharacter);
+
+              if (index != null) {
+                if (index > 0) {
+                  // Adjust 5px upwards so there is a gap between the bottom
+                  // of the toolbar and top of the poster.
+
+                  finalScrollTop = rowHeight * index - 5;
+                } else {
+                  finalScrollTop = 0;
+                }
+
+              }
+            }
+
             return (
               <div ref={registerChild}>
                 <Grid
@@ -235,7 +241,7 @@ class SeriesIndexOverviews extends Component {
                   rowHeight={rowHeight}
                   width={width}
                   onScroll={onChildScroll}
-                  scrollTop={scrollTop}
+                  scrollTop={finalScrollTop}
                   overscanRowCount={2}
                   cellRenderer={this.cellRenderer}
                   scrollToAlignment={'start'}
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosters.js b/frontend/src/Series/Index/Posters/SeriesIndexPosters.js
index 44201f56c..d452f3fbd 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPosters.js
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPosters.js
@@ -114,7 +114,6 @@ class SeriesIndexPosters extends Component {
       items,
       sortKey,
       posterOptions,
-      jumpToCharacter,
       isSmallScreen
     } = this.props;
 
@@ -139,19 +138,6 @@ class SeriesIndexPosters extends Component {
       // recomputeGridSize also forces Grid to discard its cache of rendered cells
       this._grid.recomputeGridSize();
     }
-
-    if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
-      const index = getIndexOfFirstCharacter(items, jumpToCharacter);
-
-      if (this._grid && index != null) {
-        const row = Math.floor(index / columnCount);
-
-        this._grid.scrollToCell({
-          rowIndex: row,
-          columnIndex: 0
-        });
-      }
-    }
   }
 
   //
@@ -256,6 +242,7 @@ class SeriesIndexPosters extends Component {
     const {
       scroller,
       items,
+      jumpToCharacter,
       isSmallScreen
     } = this.props;
 
@@ -281,6 +268,18 @@ class SeriesIndexPosters extends Component {
               return <div />;
             }
 
+            let finalScrollTop = scrollTop;
+
+            if (jumpToCharacter != null) {
+              const index = getIndexOfFirstCharacter(items, jumpToCharacter);
+
+              if (index != null) {
+                const row = Math.floor(index / columnCount);
+
+                finalScrollTop = rowHeight * row;
+              }
+            }
+
             return (
               <div ref={registerChild}>
                 <Grid
@@ -294,7 +293,7 @@ class SeriesIndexPosters extends Component {
                   rowHeight={rowHeight}
                   width={width}
                   onScroll={onChildScroll}
-                  scrollTop={scrollTop}
+                  scrollTop={finalScrollTop}
                   overscanRowCount={2}
                   cellRenderer={this.cellRenderer}
                   scrollToAlignment={'start'}