Merge remote-tracking branch 'origin/develop' into settings-changed

* origin/develop: (48 commits)
  fix/leftover-emoji-checkboxes-in-settings
  Apply 1 suggestion(s) to 1 file(s)
  Translated using Weblate (Spanish)
  Translated using Weblate (Persian)
  Translated using Weblate (Persian)
  Translated using Weblate (Polish)
  update changelog
  Stop click propagation when unhiding nsfw
  Fix Follow Requests title style
  Translated using Weblate (Persian)
  Translated using Weblate (Persian)
  Translated using Weblate (French)
  Added translation using Weblate (Persian)
  Translated using Weblate (Chinese (Traditional))
  Translated using Weblate (Chinese (Simplified))
  Translated using Weblate (Italian)
  Translated using Weblate (English)
  Translated using Weblate (English)
  Translated using Weblate (Basque)
  Translated using Weblate (Spanish)
  ...

1 files changed, 61 insertions, 3 deletions

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 5a7f7a78..17680542 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -33,7 +33,8 @@ const Timeline = {
     return {
       paused: false,
       unfocused: false,
-      bottomedOut: false
+      bottomedOut: false,
+      virtualScrollIndex: 0
     }
   },
   components: {
@@ -78,6 +79,16 @@ const Timeline = {
     },
     pinnedStatusIdsObject () {
       return keyBy(this.pinnedStatusIds)
+    },
+    statusesToDisplay () {
+      const amount = this.timeline.visibleStatuses.length
+      const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
+      const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
+      const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
+      return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id)
+    },
+    virtualScrollingEnabled () {
+      return this.$store.getters.mergedConfig.virtualScrolling
     }
   },
   created () {
@@ -85,7 +96,7 @@ const Timeline = {
     const credentials = store.state.users.currentUser.credentials
     const showImmediately = this.timeline.visibleStatuses.length === 0
 
-    window.addEventListener('scroll', this.scrollLoad)
+    window.addEventListener('scroll', this.handleScroll)
 
     if (store.state.api.fetchers[this.timelineName]) { return false }
 
@@ -104,9 +115,10 @@ const Timeline = {
       this.unfocused = document.hidden
     }
     window.addEventListener('keydown', this.handleShortKey)
+    setTimeout(this.determineVisibleStatuses, 250)
   },
   destroyed () {
-    window.removeEventListener('scroll', this.scrollLoad)
+    window.removeEventListener('scroll', this.handleScroll)
     window.removeEventListener('keydown', this.handleShortKey)
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
@@ -146,6 +158,48 @@ const Timeline = {
         }
       })
     }, 1000, this),
+    determineVisibleStatuses () {
+      if (!this.$refs.timeline) return
+      if (!this.virtualScrollingEnabled) return
+
+      const statuses = this.$refs.timeline.children
+      const cappedScrollIndex = Math.max(0, Math.min(this.virtualScrollIndex, statuses.length - 1))
+
+      if (statuses.length === 0) return
+
+      const height = Math.max(document.body.offsetHeight, window.pageYOffset)
+
+      const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5)
+
+      // Start from approximating the index of some visible status by using the
+      // the center of the screen on the timeline.
+      let approxIndex = Math.floor(statuses.length * (centerOfScreen / height))
+      let err = statuses[approxIndex].getBoundingClientRect().y
+
+      // if we have a previous scroll index that can be used, test if it's
+      // closer than the previous approximation, use it if so
+
+      const virtualScrollIndexY = statuses[cappedScrollIndex].getBoundingClientRect().y
+      if (Math.abs(err) > virtualScrollIndexY) {
+        approxIndex = cappedScrollIndex
+        err = virtualScrollIndexY
+      }
+
+      // if the status is too far from viewport, check the next/previous ones if
+      // they happen to be better
+      while (err < -20 && approxIndex < statuses.length - 1) {
+        err += statuses[approxIndex].offsetHeight
+        approxIndex++
+      }
+      while (err > window.innerHeight + 100 && approxIndex > 0) {
+        approxIndex--
+        err -= statuses[approxIndex].offsetHeight
+      }
+
+      // this status is now the center point for virtual scrolling and visible
+      // statuses will be nearby statuses before and after it
+      this.virtualScrollIndex = approxIndex
+    },
     scrollLoad (e) {
       const bodyBRect = document.body.getBoundingClientRect()
       const height = Math.max(bodyBRect.height, -(bodyBRect.y))
@@ -155,6 +209,10 @@ const Timeline = {
         this.fetchOlderStatuses()
       }
     },
+    handleScroll: throttle(function (e) {
+      this.determineVisibleStatuses()
+      this.scrollLoad(e)
+    }, 200),
     handleVisibilityChange () {
       this.unfocused = document.hidden
     }