1 files changed, 10 insertions, 3 deletions

diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts
index 4dc1f86e7..a02e9444a 100644
--- a/client/src/app/shared/video/infinite-scroller.directive.ts
+++ b/client/src/app/shared/video/infinite-scroller.directive.ts
@@ -6,10 +6,9 @@ import { fromEvent, Subscription } from 'rxjs'
   selector: '[myInfiniteScroller]'
 })
 export class InfiniteScrollerDirective implements OnInit, OnDestroy {
-  private static PAGE_VIEW_TOP_MARGIN = 500
-
   @Input() containerHeight: number
   @Input() pageHeight: number
+  @Input() firstLoadedPage = 1
   @Input() percentLimit = 70
   @Input() autoInit = false
 
@@ -23,6 +22,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
   private scrollDownSub: Subscription
   private scrollUpSub: Subscription
   private pageChangeSub: Subscription
+  private middleScreen: number
 
   constructor () {
     this.decimalLimit = this.percentLimit / 100
@@ -39,6 +39,8 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
   }
 
   initialize () {
+    this.middleScreen = window.innerHeight / 2
+
     // Emit the last value
     const throttleOptions = { leading: true, trailing: true }
 
@@ -92,6 +94,11 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
   }
 
   private calculateCurrentPage (current: number) {
-    return Math.max(1, Math.round((current + InfiniteScrollerDirective.PAGE_VIEW_TOP_MARGIN) / this.pageHeight))
+    const scrollY = current + this.middleScreen
+
+    const page = Math.max(1, Math.ceil(scrollY / this.pageHeight))
+
+    // Offset page
+    return page + (this.firstLoadedPage - 1)
   }
 }