diff options
Diffstat (limited to 'client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts')
-rw-r--r-- | client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts | 22 |
1 files changed, 18 insertions, 4 deletions
diff --git a/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts index dc212788a..bebc6efa7 100644 --- a/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts +++ b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts | |||
@@ -1,16 +1,19 @@ | |||
1 | import { fromEvent, Observable, Subscription } from 'rxjs' | 1 | import { fromEvent, Observable, Subscription } from 'rxjs' |
2 | import { distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators' | 2 | import { distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators' |
3 | import { AfterViewChecked, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core' | 3 | import { AfterViewChecked, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core' |
4 | import { PeerTubeRouterService, RouterSetting } from '@app/core' | ||
4 | 5 | ||
5 | @Directive({ | 6 | @Directive({ |
6 | selector: '[myInfiniteScroller]' | 7 | selector: '[myInfiniteScroller]' |
7 | }) | 8 | }) |
8 | export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewChecked { | 9 | export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewChecked { |
9 | @Input() percentLimit = 70 | 10 | @Input() percentLimit = 70 |
10 | @Input() autoInit = false | ||
11 | @Input() onItself = false | 11 | @Input() onItself = false |
12 | @Input() dataObservable: Observable<any[]> | 12 | @Input() dataObservable: Observable<any[]> |
13 | 13 | ||
14 | // Add angular state in query params to reuse the routed component | ||
15 | @Input() setAngularState: boolean | ||
16 | |||
14 | @Output() nearOfBottom = new EventEmitter<void>() | 17 | @Output() nearOfBottom = new EventEmitter<void>() |
15 | 18 | ||
16 | private decimalLimit = 0 | 19 | private decimalLimit = 0 |
@@ -20,7 +23,10 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewCh | |||
20 | 23 | ||
21 | private checkScroll = false | 24 | private checkScroll = false |
22 | 25 | ||
23 | constructor (private el: ElementRef) { | 26 | constructor ( |
27 | private peertubeRouter: PeerTubeRouterService, | ||
28 | private el: ElementRef | ||
29 | ) { | ||
24 | this.decimalLimit = this.percentLimit / 100 | 30 | this.decimalLimit = this.percentLimit / 100 |
25 | } | 31 | } |
26 | 32 | ||
@@ -36,7 +42,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewCh | |||
36 | } | 42 | } |
37 | 43 | ||
38 | ngOnInit () { | 44 | ngOnInit () { |
39 | if (this.autoInit === true) return this.initialize() | 45 | this.initialize() |
40 | } | 46 | } |
41 | 47 | ||
42 | ngOnDestroy () { | 48 | ngOnDestroy () { |
@@ -67,7 +73,11 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewCh | |||
67 | filter(({ current }) => this.isScrollingDown(current)), | 73 | filter(({ current }) => this.isScrollingDown(current)), |
68 | filter(({ current, maximumScroll }) => (current / maximumScroll) > this.decimalLimit) | 74 | filter(({ current, maximumScroll }) => (current / maximumScroll) > this.decimalLimit) |
69 | ) | 75 | ) |
70 | .subscribe(() => this.nearOfBottom.emit()) | 76 | .subscribe(() => { |
77 | if (this.setAngularState) this.setScrollRouteParams() | ||
78 | |||
79 | this.nearOfBottom.emit() | ||
80 | }) | ||
71 | 81 | ||
72 | if (this.dataObservable) { | 82 | if (this.dataObservable) { |
73 | this.dataObservable | 83 | this.dataObservable |
@@ -96,4 +106,8 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewCh | |||
96 | this.lastCurrentBottom = current | 106 | this.lastCurrentBottom = current |
97 | return result | 107 | return result |
98 | } | 108 | } |
109 | |||
110 | private setScrollRouteParams () { | ||
111 | this.peertubeRouter.addRouteSetting(RouterSetting.REUSE_COMPONENT) | ||
112 | } | ||
99 | } | 113 | } |