Fixed scrolling via jump list on series index

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,
+      items
-      scrollIndex
     } = 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}

frontend/src/Series/Index/Overview/SeriesIndexOverview.js

@@ -270,6 +270,7 @@ SeriesIndexOverview.propTypes = {
 };
 
 SeriesIndexOverview.defaultProps = {
+  overview: '',
   statistics: {
     seasonCount: 0,
     episodeCount: 0,

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'}

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'}