diff options
Diffstat (limited to 'client/src/app/shared/video')
-rw-r--r-- | client/src/app/shared/video/abstract-video-list.ts | 2 | ||||
-rw-r--r-- | client/src/app/shared/video/infinite-scroller.directive.ts | 14 |
2 files changed, 11 insertions, 5 deletions
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index 16ff38558..abc9feb06 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts | |||
@@ -125,7 +125,7 @@ export abstract class AbstractVideoList implements OnInit { | |||
125 | if (!this.pagination.totalItems) return true | 125 | if (!this.pagination.totalItems) return true |
126 | 126 | ||
127 | const maxPage = this.pagination.totalItems / this.pagination.itemsPerPage | 127 | const maxPage = this.pagination.totalItems / this.pagination.itemsPerPage |
128 | return maxPage > this.pagination.currentPage | 128 | return maxPage > this.maxPageLoaded() |
129 | } | 129 | } |
130 | 130 | ||
131 | protected previousPage () { | 131 | protected previousPage () { |
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts index 16e901c34..ed49a9e81 100644 --- a/client/src/app/shared/video/infinite-scroller.directive.ts +++ b/client/src/app/shared/video/infinite-scroller.directive.ts | |||
@@ -7,6 +7,7 @@ import 'rxjs/add/operator/map' | |||
7 | import 'rxjs/add/operator/startWith' | 7 | import 'rxjs/add/operator/startWith' |
8 | import 'rxjs/add/operator/throttleTime' | 8 | import 'rxjs/add/operator/throttleTime' |
9 | import { fromEvent } from 'rxjs/observable/fromEvent' | 9 | import { fromEvent } from 'rxjs/observable/fromEvent' |
10 | import 'rxjs/add/operator/share' | ||
10 | 11 | ||
11 | @Directive({ | 12 | @Directive({ |
12 | selector: '[myInfiniteScroller]' | 13 | selector: '[myInfiniteScroller]' |
@@ -36,10 +37,14 @@ export class InfiniteScrollerDirective implements OnInit { | |||
36 | } | 37 | } |
37 | 38 | ||
38 | initialize () { | 39 | initialize () { |
40 | // Emit the last value | ||
41 | const throttleOptions = { leading: false, trailing: true } | ||
42 | |||
39 | const scrollObservable = fromEvent(window, 'scroll') | 43 | const scrollObservable = fromEvent(window, 'scroll') |
40 | .startWith(true) | 44 | .startWith(true) |
41 | .throttleTime(200) | 45 | .throttleTime(200, undefined, throttleOptions) |
42 | .map(() => ({ current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight })) | 46 | .map(() => ({ current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight })) |
47 | .share() | ||
43 | 48 | ||
44 | // Scroll Down | 49 | // Scroll Down |
45 | scrollObservable | 50 | scrollObservable |
@@ -51,7 +56,6 @@ export class InfiniteScrollerDirective implements OnInit { | |||
51 | return res | 56 | return res |
52 | }) | 57 | }) |
53 | .filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit) | 58 | .filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit) |
54 | .distinct() | ||
55 | .subscribe(() => this.nearOfBottom.emit()) | 59 | .subscribe(() => this.nearOfBottom.emit()) |
56 | 60 | ||
57 | // Scroll up | 61 | // Scroll up |
@@ -66,15 +70,17 @@ export class InfiniteScrollerDirective implements OnInit { | |||
66 | .filter(({ current, maximumScroll }) => { | 70 | .filter(({ current, maximumScroll }) => { |
67 | return current !== 0 && (1 - (current / maximumScroll)) > this.decimalLimit | 71 | return current !== 0 && (1 - (current / maximumScroll)) > this.decimalLimit |
68 | }) | 72 | }) |
69 | .distinct() | ||
70 | .subscribe(() => this.nearOfTop.emit()) | 73 | .subscribe(() => this.nearOfTop.emit()) |
71 | 74 | ||
72 | // Page change | 75 | // Page change |
73 | scrollObservable | 76 | scrollObservable |
74 | .distinct() | 77 | .distinct() |
75 | .map(({ current }) => Math.max(1, Math.round((current + InfiniteScrollerDirective.PAGE_VIEW_TOP_MARGIN) / this.pageHeight))) | 78 | .map(({ current }) => this.calculateCurrentPage(current)) |
76 | .distinctUntilChanged() | 79 | .distinctUntilChanged() |
77 | .subscribe(res => this.pageChanged.emit(res)) | 80 | .subscribe(res => this.pageChanged.emit(res)) |
78 | } | 81 | } |
79 | 82 | ||
83 | private calculateCurrentPage (current: number) { | ||
84 | return Math.max(1, Math.round((current + InfiniteScrollerDirective.PAGE_VIEW_TOP_MARGIN) / this.pageHeight)) | ||
85 | } | ||
80 | } | 86 | } |