diff options
author | Chocobozzz <me@florianbigard.com> | 2018-03-19 18:00:31 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-03-19 18:00:31 +0100 |
commit | 9af61e84309c23ffbfd7562435a5fadd86cdf20c (patch) | |
tree | eb367495b082a776c21b603c40bbe2ad0a8ebc6d /client/src/app/shared/video/infinite-scroller.directive.ts | |
parent | 606ca5bccf55e75a20a70d41a4d1f2cbf12d2563 (diff) | |
download | PeerTube-9af61e84309c23ffbfd7562435a5fadd86cdf20c.tar.gz PeerTube-9af61e84309c23ffbfd7562435a5fadd86cdf20c.tar.zst PeerTube-9af61e84309c23ffbfd7562435a5fadd86cdf20c.zip |
Don't forget to clean up subscriptions
Diffstat (limited to 'client/src/app/shared/video/infinite-scroller.directive.ts')
-rw-r--r-- | client/src/app/shared/video/infinite-scroller.directive.ts | 22 |
1 files changed, 16 insertions, 6 deletions
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts index e0f9f4f83..e2730423f 100644 --- a/client/src/app/shared/video/infinite-scroller.directive.ts +++ b/client/src/app/shared/video/infinite-scroller.directive.ts | |||
@@ -1,18 +1,19 @@ | |||
1 | import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core' | 1 | import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core' |
2 | import 'rxjs/add/operator/debounceTime' | 2 | import 'rxjs/add/operator/debounceTime' |
3 | import 'rxjs/add/operator/distinct' | 3 | import 'rxjs/add/operator/distinct' |
4 | import 'rxjs/add/operator/distinctUntilChanged' | 4 | import 'rxjs/add/operator/distinctUntilChanged' |
5 | import 'rxjs/add/operator/filter' | 5 | import 'rxjs/add/operator/filter' |
6 | import 'rxjs/add/operator/map' | 6 | import 'rxjs/add/operator/map' |
7 | import 'rxjs/add/operator/share' | ||
7 | import 'rxjs/add/operator/startWith' | 8 | import 'rxjs/add/operator/startWith' |
8 | import 'rxjs/add/operator/throttleTime' | 9 | import 'rxjs/add/operator/throttleTime' |
9 | import { fromEvent } from 'rxjs/observable/fromEvent' | 10 | import { fromEvent } from 'rxjs/observable/fromEvent' |
10 | import 'rxjs/add/operator/share' | 11 | import { Subscription } from 'rxjs/Subscription' |
11 | 12 | ||
12 | @Directive({ | 13 | @Directive({ |
13 | selector: '[myInfiniteScroller]' | 14 | selector: '[myInfiniteScroller]' |
14 | }) | 15 | }) |
15 | export class InfiniteScrollerDirective implements OnInit { | 16 | export class InfiniteScrollerDirective implements OnInit, OnDestroy { |
16 | private static PAGE_VIEW_TOP_MARGIN = 500 | 17 | private static PAGE_VIEW_TOP_MARGIN = 500 |
17 | 18 | ||
18 | @Input() containerHeight: number | 19 | @Input() containerHeight: number |
@@ -27,6 +28,9 @@ export class InfiniteScrollerDirective implements OnInit { | |||
27 | private decimalLimit = 0 | 28 | private decimalLimit = 0 |
28 | private lastCurrentBottom = -1 | 29 | private lastCurrentBottom = -1 |
29 | private lastCurrentTop = 0 | 30 | private lastCurrentTop = 0 |
31 | private scrollDownSub: Subscription | ||
32 | private scrollUpSub: Subscription | ||
33 | private pageChangeSub: Subscription | ||
30 | 34 | ||
31 | constructor () { | 35 | constructor () { |
32 | this.decimalLimit = this.percentLimit / 100 | 36 | this.decimalLimit = this.percentLimit / 100 |
@@ -36,6 +40,12 @@ export class InfiniteScrollerDirective implements OnInit { | |||
36 | if (this.autoLoading === true) return this.initialize() | 40 | if (this.autoLoading === true) return this.initialize() |
37 | } | 41 | } |
38 | 42 | ||
43 | ngOnDestroy () { | ||
44 | if (this.scrollDownSub) this.scrollDownSub.unsubscribe() | ||
45 | if (this.scrollUpSub) this.scrollUpSub.unsubscribe() | ||
46 | if (this.pageChangeSub) this.pageChangeSub.unsubscribe() | ||
47 | } | ||
48 | |||
39 | initialize () { | 49 | initialize () { |
40 | // Emit the last value | 50 | // Emit the last value |
41 | const throttleOptions = { leading: true, trailing: true } | 51 | const throttleOptions = { leading: true, trailing: true } |
@@ -48,7 +58,7 @@ export class InfiniteScrollerDirective implements OnInit { | |||
48 | .share() | 58 | .share() |
49 | 59 | ||
50 | // Scroll Down | 60 | // Scroll Down |
51 | scrollObservable | 61 | this.scrollDownSub = scrollObservable |
52 | // Check we scroll down | 62 | // Check we scroll down |
53 | .filter(({ current }) => { | 63 | .filter(({ current }) => { |
54 | const res = this.lastCurrentBottom < current | 64 | const res = this.lastCurrentBottom < current |
@@ -60,7 +70,7 @@ export class InfiniteScrollerDirective implements OnInit { | |||
60 | .subscribe(() => this.nearOfBottom.emit()) | 70 | .subscribe(() => this.nearOfBottom.emit()) |
61 | 71 | ||
62 | // Scroll up | 72 | // Scroll up |
63 | scrollObservable | 73 | this.scrollUpSub = scrollObservable |
64 | // Check we scroll up | 74 | // Check we scroll up |
65 | .filter(({ current }) => { | 75 | .filter(({ current }) => { |
66 | const res = this.lastCurrentTop > current | 76 | const res = this.lastCurrentTop > current |
@@ -74,7 +84,7 @@ export class InfiniteScrollerDirective implements OnInit { | |||
74 | .subscribe(() => this.nearOfTop.emit()) | 84 | .subscribe(() => this.nearOfTop.emit()) |
75 | 85 | ||
76 | // Page change | 86 | // Page change |
77 | scrollObservable | 87 | this.pageChangeSub = scrollObservable |
78 | .distinct() | 88 | .distinct() |
79 | .map(({ current }) => this.calculateCurrentPage(current)) | 89 | .map(({ current }) => this.calculateCurrentPage(current)) |
80 | .distinctUntilChanged() | 90 | .distinctUntilChanged() |