diff options
author | Chocobozzz <me@florianbigard.com> | 2019-03-21 16:49:46 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-04-02 11:45:02 +0200 |
commit | 489290b8b16bede6ddfb773adad55dee6471ccfd (patch) | |
tree | 8d3bb73c80df18f1e4d15b23a7e4080a6bc5985e /client/src/app/shared/video/infinite-scroller.directive.ts | |
parent | 7ccddd7b5250bd25a917a6e77e58b87b9484a2a4 (diff) | |
download | PeerTube-489290b8b16bede6ddfb773adad55dee6471ccfd.tar.gz PeerTube-489290b8b16bede6ddfb773adad55dee6471ccfd.tar.zst PeerTube-489290b8b16bede6ddfb773adad55dee6471ccfd.zip |
Restore videos list components
Diffstat (limited to 'client/src/app/shared/video/infinite-scroller.directive.ts')
-rw-r--r-- | client/src/app/shared/video/infinite-scroller.directive.ts | 47 |
1 files changed, 0 insertions, 47 deletions
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts index a9e75007c..5f8a1dd6e 100644 --- a/client/src/app/shared/video/infinite-scroller.directive.ts +++ b/client/src/app/shared/video/infinite-scroller.directive.ts | |||
@@ -6,24 +6,15 @@ import { fromEvent, Subscription } from 'rxjs' | |||
6 | selector: '[myInfiniteScroller]' | 6 | selector: '[myInfiniteScroller]' |
7 | }) | 7 | }) |
8 | export class InfiniteScrollerDirective implements OnInit, OnDestroy { | 8 | export class InfiniteScrollerDirective implements OnInit, OnDestroy { |
9 | @Input() containerHeight: number | ||
10 | @Input() pageHeight: number | ||
11 | @Input() firstLoadedPage = 1 | ||
12 | @Input() percentLimit = 70 | 9 | @Input() percentLimit = 70 |
13 | @Input() autoInit = false | 10 | @Input() autoInit = false |
14 | @Input() onItself = false | 11 | @Input() onItself = false |
15 | 12 | ||
16 | @Output() nearOfBottom = new EventEmitter<void>() | 13 | @Output() nearOfBottom = new EventEmitter<void>() |
17 | @Output() nearOfTop = new EventEmitter<void>() | ||
18 | @Output() pageChanged = new EventEmitter<number>() | ||
19 | 14 | ||
20 | private decimalLimit = 0 | 15 | private decimalLimit = 0 |
21 | private lastCurrentBottom = -1 | 16 | private lastCurrentBottom = -1 |
22 | private lastCurrentTop = 0 | ||
23 | private scrollDownSub: Subscription | 17 | private scrollDownSub: Subscription |
24 | private scrollUpSub: Subscription | ||
25 | private pageChangeSub: Subscription | ||
26 | private middleScreen: number | ||
27 | private container: HTMLElement | 18 | private container: HTMLElement |
28 | 19 | ||
29 | constructor (private el: ElementRef) { | 20 | constructor (private el: ElementRef) { |
@@ -36,8 +27,6 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy { | |||
36 | 27 | ||
37 | ngOnDestroy () { | 28 | ngOnDestroy () { |
38 | if (this.scrollDownSub) this.scrollDownSub.unsubscribe() | 29 | if (this.scrollDownSub) this.scrollDownSub.unsubscribe() |
39 | if (this.scrollUpSub) this.scrollUpSub.unsubscribe() | ||
40 | if (this.pageChangeSub) this.pageChangeSub.unsubscribe() | ||
41 | } | 30 | } |
42 | 31 | ||
43 | initialize () { | 32 | initialize () { |
@@ -45,8 +34,6 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy { | |||
45 | this.container = this.el.nativeElement | 34 | this.container = this.el.nativeElement |
46 | } | 35 | } |
47 | 36 | ||
48 | this.middleScreen = window.innerHeight / 2 | ||
49 | |||
50 | // Emit the last value | 37 | // Emit the last value |
51 | const throttleOptions = { leading: true, trailing: true } | 38 | const throttleOptions = { leading: true, trailing: true } |
52 | 39 | ||
@@ -72,40 +59,6 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy { | |||
72 | filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit) | 59 | filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit) |
73 | ) | 60 | ) |
74 | .subscribe(() => this.nearOfBottom.emit()) | 61 | .subscribe(() => this.nearOfBottom.emit()) |
75 | |||
76 | // Scroll up | ||
77 | this.scrollUpSub = scrollObservable | ||
78 | .pipe( | ||
79 | // Check we scroll up | ||
80 | filter(({ current }) => { | ||
81 | const res = this.lastCurrentTop > current | ||
82 | |||
83 | this.lastCurrentTop = current | ||
84 | return res | ||
85 | }), | ||
86 | filter(({ current, maximumScroll }) => { | ||
87 | return current !== 0 && (1 - (current / maximumScroll)) > this.decimalLimit | ||
88 | }) | ||
89 | ) | ||
90 | .subscribe(() => this.nearOfTop.emit()) | ||
91 | |||
92 | // Page change | ||
93 | this.pageChangeSub = scrollObservable | ||
94 | .pipe( | ||
95 | distinct(), | ||
96 | map(({ current }) => this.calculateCurrentPage(current)), | ||
97 | distinctUntilChanged() | ||
98 | ) | ||
99 | .subscribe(res => this.pageChanged.emit(res)) | ||
100 | } | ||
101 | |||
102 | private calculateCurrentPage (current: number) { | ||
103 | const scrollY = current + this.middleScreen | ||
104 | |||
105 | const page = Math.max(1, Math.ceil(scrollY / this.pageHeight)) | ||
106 | |||
107 | // Offset page | ||
108 | return page + (this.firstLoadedPage - 1) | ||
109 | } | 62 | } |
110 | 63 | ||
111 | private getScrollInfo () { | 64 | private getScrollInfo () { |