X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fvideo%2Finfinite-scroller.directive.ts;h=0448e2c2309942f3dc900e1eb8a191f6c0f850ae;hb=fbad87b0472f574409f7aa3ae7f8b54927d0cdd6;hp=e2730423f38e9fd19d17085e6a3396897ea8b4e8;hpb=9af61e84309c23ffbfd7562435a5fadd86cdf20c;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts index e2730423f..0448e2c23 100644 --- a/client/src/app/shared/video/infinite-scroller.directive.ts +++ b/client/src/app/shared/video/infinite-scroller.directive.ts @@ -1,14 +1,6 @@ +import { distinct, distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators' import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core' -import 'rxjs/add/operator/debounceTime' -import 'rxjs/add/operator/distinct' -import 'rxjs/add/operator/distinctUntilChanged' -import 'rxjs/add/operator/filter' -import 'rxjs/add/operator/map' -import 'rxjs/add/operator/share' -import 'rxjs/add/operator/startWith' -import 'rxjs/add/operator/throttleTime' -import { fromEvent } from 'rxjs/observable/fromEvent' -import { Subscription } from 'rxjs/Subscription' +import { fromEvent, Subscription } from 'rxjs' @Directive({ selector: '[myInfiniteScroller]' @@ -51,43 +43,51 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy { const throttleOptions = { leading: true, trailing: true } const scrollObservable = fromEvent(window, 'scroll') - .startWith(true) - .throttleTime(200, undefined, throttleOptions) - .map(() => ({ current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight })) - .distinctUntilChanged((o1, o2) => o1.current === o2.current) - .share() + .pipe( + startWith(null), + throttleTime(200, undefined, throttleOptions), + map(() => ({ current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight })), + distinctUntilChanged((o1, o2) => o1.current === o2.current), + share() + ) // Scroll Down this.scrollDownSub = scrollObservable - // Check we scroll down - .filter(({ current }) => { - const res = this.lastCurrentBottom < current + .pipe( + // Check we scroll down + filter(({ current }) => { + const res = this.lastCurrentBottom < current - this.lastCurrentBottom = current - return res - }) - .filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit) + this.lastCurrentBottom = current + return res + }), + filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit) + ) .subscribe(() => this.nearOfBottom.emit()) // Scroll up this.scrollUpSub = scrollObservable - // Check we scroll up - .filter(({ current }) => { - const res = this.lastCurrentTop > current + .pipe( + // Check we scroll up + filter(({ current }) => { + const res = this.lastCurrentTop > current - this.lastCurrentTop = current - return res - }) - .filter(({ current, maximumScroll }) => { - return current !== 0 && (1 - (current / maximumScroll)) > this.decimalLimit - }) + this.lastCurrentTop = current + return res + }), + filter(({ current, maximumScroll }) => { + return current !== 0 && (1 - (current / maximumScroll)) > this.decimalLimit + }) + ) .subscribe(() => this.nearOfTop.emit()) // Page change this.pageChangeSub = scrollObservable - .distinct() - .map(({ current }) => this.calculateCurrentPage(current)) - .distinctUntilChanged() + .pipe( + distinct(), + map(({ current }) => this.calculateCurrentPage(current)), + distinctUntilChanged() + ) .subscribe(res => this.pageChanged.emit(res)) }