Add video channel view

1 files changed, 18 insertions, 5 deletions

diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts
index 186597a3a..a9e75007c 100644
--- a/client/src/app/shared/video/infinite-scroller.directive.ts
+++ b/client/src/app/shared/video/infinite-scroller.directive.ts
@@ -1,5 +1,5 @@
 import { distinct, distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators'
-import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
 import { fromEvent, Subscription } from 'rxjs'
 
 @Directive({
@@ -11,7 +11,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
   @Input() firstLoadedPage = 1
   @Input() percentLimit = 70
   @Input() autoInit = false
-  @Input() container = document.body
+  @Input() onItself = false
 
   @Output() nearOfBottom = new EventEmitter<void>()
   @Output() nearOfTop = new EventEmitter<void>()
@@ -24,8 +24,9 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
   private scrollUpSub: Subscription
   private pageChangeSub: Subscription
   private middleScreen: number
+  private container: HTMLElement
 
-  constructor () {
+  constructor (private el: ElementRef) {
     this.decimalLimit = this.percentLimit / 100
   }
 
@@ -40,16 +41,20 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
   }
 
   initialize () {
+    if (this.onItself) {
+      this.container = this.el.nativeElement
+    }
+
     this.middleScreen = window.innerHeight / 2
 
     // Emit the last value
     const throttleOptions = { leading: true, trailing: true }
 
-    const scrollObservable = fromEvent(window, 'scroll')
+    const scrollObservable = fromEvent(this.container || window, 'scroll')
       .pipe(
         startWith(null),
         throttleTime(200, undefined, throttleOptions),
-        map(() => ({ current: window.scrollY, maximumScroll: this.container.clientHeight - window.innerHeight })),
+        map(() => this.getScrollInfo()),
         distinctUntilChanged((o1, o2) => o1.current === o2.current),
         share()
       )
@@ -102,4 +107,12 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
     // Offset page
     return page + (this.firstLoadedPage - 1)
   }
+
+  private getScrollInfo () {
+    if (this.container) {
+      return { current: this.container.scrollTop, maximumScroll: this.container.scrollHeight }
+    }
+
+    return { current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight }
+  }
 }