From 9af61e84309c23ffbfd7562435a5fadd86cdf20c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 19 Mar 2018 18:00:31 +0100 Subject: Don't forget to clean up subscriptions --- client/src/app/shared/video/abstract-video-list.ts | 29 ++++++++++++++++------ .../shared/video/infinite-scroller.directive.ts | 22 +++++++++++----- 2 files changed, 38 insertions(+), 13 deletions(-) (limited to 'client/src/app/shared/video') diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index 570aaae9d..4a220c93d 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -1,4 +1,4 @@ -import { ElementRef, OnInit, ViewChild } from '@angular/core' +import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { isInMobileView } from '@app/shared/misc/utils' import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' @@ -6,12 +6,13 @@ import { NotificationsService } from 'angular2-notifications' import 'rxjs/add/operator/debounceTime' import { Observable } from 'rxjs/Observable' import { fromEvent } from 'rxjs/observable/fromEvent' +import { Subscription } from 'rxjs/Subscription' import { AuthService } from '../../core/auth' import { ComponentPagination } from '../rest/component-pagination.model' import { SortField } from './sort-field.type' import { Video } from './video.model' -export abstract class AbstractVideoList implements OnInit { +export abstract class AbstractVideoList implements OnInit, OnDestroy { private static LINES_PER_PAGE = 3 @ViewChild('videoElement') videosElement: ElementRef @@ -30,6 +31,9 @@ export abstract class AbstractVideoList implements OnInit { videoHeight: number videoPages: Video[][] = [] + protected baseVideoWidth = 215 + protected baseVideoHeight = 230 + protected abstract notificationsService: NotificationsService protected abstract authService: AuthService protected abstract router: Router @@ -40,6 +44,8 @@ export abstract class AbstractVideoList implements OnInit { protected loadedPages: { [ id: number ]: Video[] } = {} protected otherRouteParams = {} + private resizeSubscription: Subscription + abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}> get user () { @@ -51,7 +57,7 @@ export abstract class AbstractVideoList implements OnInit { const routeParams = this.route.snapshot.params this.loadRouteParams(routeParams) - fromEvent(window, 'resize') + this.resizeSubscription = fromEvent(window, 'resize') .debounceTime(500) .subscribe(() => this.calcPageSizes()) @@ -59,6 +65,10 @@ export abstract class AbstractVideoList implements OnInit { if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage) } + ngOnDestroy () { + if (this.resizeSubscription) this.resizeSubscription.unsubscribe() + } + onNearOfTop () { this.previousPage() } @@ -168,15 +178,15 @@ export abstract class AbstractVideoList implements OnInit { } private calcPageSizes () { - if (isInMobileView()) { + if (isInMobileView() || this.baseVideoWidth === -1) { this.pagination.itemsPerPage = 5 // Video takes all the width this.videoWidth = -1 this.pageHeight = this.pagination.itemsPerPage * this.videoHeight } else { - this.videoWidth = 215 - this.videoHeight = 230 + this.videoWidth = this.baseVideoWidth + this.videoHeight = this.baseVideoHeight const videosWidth = this.videosElement.nativeElement.offsetWidth this.pagination.itemsPerPage = Math.floor(videosWidth / this.videoWidth) * AbstractVideoList.LINES_PER_PAGE @@ -194,7 +204,12 @@ export abstract class AbstractVideoList implements OnInit { i++ } - this.buildVideoPages() + // Re fetch the last page + if (videos.length !== 0) { + this.loadMoreVideos(i) + } else { + this.buildVideoPages() + } console.log('Rebuilt pages with %s elements per page.', this.pagination.itemsPerPage) } 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 @@ -import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core' +import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core' import 'rxjs/add/operator/debounceTime' import 'rxjs/add/operator/distinct' import 'rxjs/add/operator/distinctUntilChanged' import 'rxjs/add/operator/filter' import 'rxjs/add/operator/map' +import 'rxjs/add/operator/share' import 'rxjs/add/operator/startWith' import 'rxjs/add/operator/throttleTime' import { fromEvent } from 'rxjs/observable/fromEvent' -import 'rxjs/add/operator/share' +import { Subscription } from 'rxjs/Subscription' @Directive({ selector: '[myInfiniteScroller]' }) -export class InfiniteScrollerDirective implements OnInit { +export class InfiniteScrollerDirective implements OnInit, OnDestroy { private static PAGE_VIEW_TOP_MARGIN = 500 @Input() containerHeight: number @@ -27,6 +28,9 @@ export class InfiniteScrollerDirective implements OnInit { private decimalLimit = 0 private lastCurrentBottom = -1 private lastCurrentTop = 0 + private scrollDownSub: Subscription + private scrollUpSub: Subscription + private pageChangeSub: Subscription constructor () { this.decimalLimit = this.percentLimit / 100 @@ -36,6 +40,12 @@ export class InfiniteScrollerDirective implements OnInit { if (this.autoLoading === true) return this.initialize() } + ngOnDestroy () { + if (this.scrollDownSub) this.scrollDownSub.unsubscribe() + if (this.scrollUpSub) this.scrollUpSub.unsubscribe() + if (this.pageChangeSub) this.pageChangeSub.unsubscribe() + } + initialize () { // Emit the last value const throttleOptions = { leading: true, trailing: true } @@ -48,7 +58,7 @@ export class InfiniteScrollerDirective implements OnInit { .share() // Scroll Down - scrollObservable + this.scrollDownSub = scrollObservable // Check we scroll down .filter(({ current }) => { const res = this.lastCurrentBottom < current @@ -60,7 +70,7 @@ export class InfiniteScrollerDirective implements OnInit { .subscribe(() => this.nearOfBottom.emit()) // Scroll up - scrollObservable + this.scrollUpSub = scrollObservable // Check we scroll up .filter(({ current }) => { const res = this.lastCurrentTop > current @@ -74,7 +84,7 @@ export class InfiniteScrollerDirective implements OnInit { .subscribe(() => this.nearOfTop.emit()) // Page change - scrollObservable + this.pageChangeSub = scrollObservable .distinct() .map(({ current }) => this.calculateCurrentPage(current)) .distinctUntilChanged() -- cgit v1.2.3