diff options
Diffstat (limited to 'client/src/app/shared/video/abstract-video-list.ts')
-rw-r--r-- | client/src/app/shared/video/abstract-video-list.ts | 29 |
1 files changed, 22 insertions, 7 deletions
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 @@ | |||
1 | import { ElementRef, OnInit, ViewChild } from '@angular/core' | 1 | import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core' |
2 | import { ActivatedRoute, Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { isInMobileView } from '@app/shared/misc/utils' | 3 | import { isInMobileView } from '@app/shared/misc/utils' |
4 | import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' | 4 | import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' |
@@ -6,12 +6,13 @@ import { NotificationsService } from 'angular2-notifications' | |||
6 | import 'rxjs/add/operator/debounceTime' | 6 | import 'rxjs/add/operator/debounceTime' |
7 | import { Observable } from 'rxjs/Observable' | 7 | import { Observable } from 'rxjs/Observable' |
8 | import { fromEvent } from 'rxjs/observable/fromEvent' | 8 | import { fromEvent } from 'rxjs/observable/fromEvent' |
9 | import { Subscription } from 'rxjs/Subscription' | ||
9 | import { AuthService } from '../../core/auth' | 10 | import { AuthService } from '../../core/auth' |
10 | import { ComponentPagination } from '../rest/component-pagination.model' | 11 | import { ComponentPagination } from '../rest/component-pagination.model' |
11 | import { SortField } from './sort-field.type' | 12 | import { SortField } from './sort-field.type' |
12 | import { Video } from './video.model' | 13 | import { Video } from './video.model' |
13 | 14 | ||
14 | export abstract class AbstractVideoList implements OnInit { | 15 | export abstract class AbstractVideoList implements OnInit, OnDestroy { |
15 | private static LINES_PER_PAGE = 3 | 16 | private static LINES_PER_PAGE = 3 |
16 | 17 | ||
17 | @ViewChild('videoElement') videosElement: ElementRef | 18 | @ViewChild('videoElement') videosElement: ElementRef |
@@ -30,6 +31,9 @@ export abstract class AbstractVideoList implements OnInit { | |||
30 | videoHeight: number | 31 | videoHeight: number |
31 | videoPages: Video[][] = [] | 32 | videoPages: Video[][] = [] |
32 | 33 | ||
34 | protected baseVideoWidth = 215 | ||
35 | protected baseVideoHeight = 230 | ||
36 | |||
33 | protected abstract notificationsService: NotificationsService | 37 | protected abstract notificationsService: NotificationsService |
34 | protected abstract authService: AuthService | 38 | protected abstract authService: AuthService |
35 | protected abstract router: Router | 39 | protected abstract router: Router |
@@ -40,6 +44,8 @@ export abstract class AbstractVideoList implements OnInit { | |||
40 | protected loadedPages: { [ id: number ]: Video[] } = {} | 44 | protected loadedPages: { [ id: number ]: Video[] } = {} |
41 | protected otherRouteParams = {} | 45 | protected otherRouteParams = {} |
42 | 46 | ||
47 | private resizeSubscription: Subscription | ||
48 | |||
43 | abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}> | 49 | abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}> |
44 | 50 | ||
45 | get user () { | 51 | get user () { |
@@ -51,7 +57,7 @@ export abstract class AbstractVideoList implements OnInit { | |||
51 | const routeParams = this.route.snapshot.params | 57 | const routeParams = this.route.snapshot.params |
52 | this.loadRouteParams(routeParams) | 58 | this.loadRouteParams(routeParams) |
53 | 59 | ||
54 | fromEvent(window, 'resize') | 60 | this.resizeSubscription = fromEvent(window, 'resize') |
55 | .debounceTime(500) | 61 | .debounceTime(500) |
56 | .subscribe(() => this.calcPageSizes()) | 62 | .subscribe(() => this.calcPageSizes()) |
57 | 63 | ||
@@ -59,6 +65,10 @@ export abstract class AbstractVideoList implements OnInit { | |||
59 | if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage) | 65 | if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage) |
60 | } | 66 | } |
61 | 67 | ||
68 | ngOnDestroy () { | ||
69 | if (this.resizeSubscription) this.resizeSubscription.unsubscribe() | ||
70 | } | ||
71 | |||
62 | onNearOfTop () { | 72 | onNearOfTop () { |
63 | this.previousPage() | 73 | this.previousPage() |
64 | } | 74 | } |
@@ -168,15 +178,15 @@ export abstract class AbstractVideoList implements OnInit { | |||
168 | } | 178 | } |
169 | 179 | ||
170 | private calcPageSizes () { | 180 | private calcPageSizes () { |
171 | if (isInMobileView()) { | 181 | if (isInMobileView() || this.baseVideoWidth === -1) { |
172 | this.pagination.itemsPerPage = 5 | 182 | this.pagination.itemsPerPage = 5 |
173 | 183 | ||
174 | // Video takes all the width | 184 | // Video takes all the width |
175 | this.videoWidth = -1 | 185 | this.videoWidth = -1 |
176 | this.pageHeight = this.pagination.itemsPerPage * this.videoHeight | 186 | this.pageHeight = this.pagination.itemsPerPage * this.videoHeight |
177 | } else { | 187 | } else { |
178 | this.videoWidth = 215 | 188 | this.videoWidth = this.baseVideoWidth |
179 | this.videoHeight = 230 | 189 | this.videoHeight = this.baseVideoHeight |
180 | 190 | ||
181 | const videosWidth = this.videosElement.nativeElement.offsetWidth | 191 | const videosWidth = this.videosElement.nativeElement.offsetWidth |
182 | this.pagination.itemsPerPage = Math.floor(videosWidth / this.videoWidth) * AbstractVideoList.LINES_PER_PAGE | 192 | this.pagination.itemsPerPage = Math.floor(videosWidth / this.videoWidth) * AbstractVideoList.LINES_PER_PAGE |
@@ -194,7 +204,12 @@ export abstract class AbstractVideoList implements OnInit { | |||
194 | i++ | 204 | i++ |
195 | } | 205 | } |
196 | 206 | ||
197 | this.buildVideoPages() | 207 | // Re fetch the last page |
208 | if (videos.length !== 0) { | ||
209 | this.loadMoreVideos(i) | ||
210 | } else { | ||
211 | this.buildVideoPages() | ||
212 | } | ||
198 | 213 | ||
199 | console.log('Rebuilt pages with %s elements per page.', this.pagination.itemsPerPage) | 214 | console.log('Rebuilt pages with %s elements per page.', this.pagination.itemsPerPage) |
200 | } | 215 | } |