Fix autoscroll jankiness

src/components/Audioplayer/index.js

@@ -141,11 +141,12 @@ export class Audioplayer extends Component {
 
     if (isPlaying) pause();
 
-    if (!this[camelize(`get_${direction}`)]()) return pause();
+    const nextVerse = this[camelize(`get_${direction}`)]();
+    if (!nextVerse) return pause();
 
     this.props[direction](currentVerse);
 
-    this.handleScrollTo(currentVerse);
+    this.handleScrollTo(nextVerse);
 
     this.preloadNext();
 
@@ -154,11 +155,15 @@ export class Audioplayer extends Component {
     return false;
   }
 
-  handleScrollTo = (ayahNum = this.props.currentVerse) => {
+  scrollToVerse = (ayahNum = this.props.currentVerse) => {
+    scroller.scrollTo(`verse:${ayahNum}`, -45);
+  }
+
+  handleScrollTo = (ayahNum) => {
     const { shouldScroll } = this.props;
 
     if (shouldScroll) {
-      scroller.scrollTo(`ayah:${ayahNum}`, -150);
+      this.scrollToVerse(ayahNum);
     }
   }
 
@@ -250,12 +255,7 @@ export class Audioplayer extends Component {
     const { shouldScroll, currentVerse } = this.props;
 
     if (!shouldScroll) { // we use the inverse (!) here because we're toggling, so false is true
-      const elem = document.getElementsByName(`ayah:${currentVerse}`)[0];
-      if (elem && elem.getBoundingClientRect().top < 0) { // if the ayah is above our scroll offset
-        scroller.scrollTo(`ayah:${currentVerse}`, -150);
-      } else {
-        scroller.scrollTo(`ayah:${currentVerse}`, -80);
-      }
+      this.scrollToVerse(currentVerse);
     }
 
     this.props.toggleScroll();

src/redux/schemas.js

@@ -1,7 +1,7 @@
 import { schema } from 'normalizr';
 
 export const chaptersSchema = new schema.Entity('chapters', {}, { idAttribute: 'id' });
-export const versesSchema = new schema.Entity('verses', {}, { idAttribute: 'id' });
+export const versesSchema = new schema.Entity('verses', {}, { idAttribute: 'verseKey' });
 export const bookmarksSchema = new schema.Entity('bookmarks', {}, { idAttribute: 'verseKey' });
 
 const schemas = {

src/utils/scroller.js

@@ -10,8 +10,17 @@ export default {
 
     const nodeRect = node.getBoundingClientRect();
     const bodyRect = document.body.getBoundingClientRect();
-    const scrollOffset = nodeRect.top - bodyRect.top;
+    const scrollOffset = (nodeRect.top - bodyRect.top) + offset;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 
-    window.scrollTo(0, scrollOffset + offset);
+
+    // Only scroll if item is not already on screen.
+    // If an item is larger than the screen, don't scroll to the top of it if it's already filling
+    // the screen.
+    if ((scrollOffset < scrollTop) !==
+        (scrollOffset + nodeRect.height > scrollTop + viewportHeight + offset)) {
+      window.scrollTo(0, scrollOffset);
+    }
   }
 };