aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-03-08 10:46:12 +0100
committerChocobozzz <me@florianbigard.com>2018-03-08 10:46:12 +0100
commit6a6d92b1ecca1dfcf4b13f291553f2485814f730 (patch)
treee586f275460e888374a131d65d73296bb8a3a8e9
parent2b3b76abb0c363d85ff5c831afd541a9c6982e76 (diff)
downloadPeerTube-6a6d92b1ecca1dfcf4b13f291553f2485814f730.tar.gz
PeerTube-6a6d92b1ecca1dfcf4b13f291553f2485814f730.tar.zst
PeerTube-6a6d92b1ecca1dfcf4b13f291553f2485814f730.zip
Fix infinite scroll
-rw-r--r--client/src/app/shared/video/abstract-video-list.ts2
-rw-r--r--client/src/app/shared/video/infinite-scroller.directive.ts14
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'
7import 'rxjs/add/operator/startWith' 7import 'rxjs/add/operator/startWith'
8import 'rxjs/add/operator/throttleTime' 8import 'rxjs/add/operator/throttleTime'
9import { fromEvent } from 'rxjs/observable/fromEvent' 9import { fromEvent } from 'rxjs/observable/fromEvent'
10import '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}