diff options
Diffstat (limited to 'client/src/app/videos/video-list/shared')
-rw-r--r-- | client/src/app/videos/video-list/shared/abstract-video-list.html | 14 | ||||
-rw-r--r-- | client/src/app/videos/video-list/shared/abstract-video-list.ts | 63 |
2 files changed, 56 insertions, 21 deletions
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.html b/client/src/app/videos/video-list/shared/abstract-video-list.html index ab5530e68..69e16319e 100644 --- a/client/src/app/videos/video-list/shared/abstract-video-list.html +++ b/client/src/app/videos/video-list/shared/abstract-video-list.html | |||
@@ -2,15 +2,17 @@ | |||
2 | {{ titlePage }} | 2 | {{ titlePage }} |
3 | </div> | 3 | </div> |
4 | 4 | ||
5 | <div class="videos-miniatures"> | 5 | <div |
6 | class="videos-miniatures" | ||
7 | infiniteScroll | ||
8 | [infiniteScrollUpDistance]="1.5" | ||
9 | [infiniteScrollDistance]="0.5" | ||
10 | (scrolled)="onNearOfBottom()" | ||
11 | (scrolledUp)="onNearOfTop()" | ||
12 | > | ||
6 | <my-video-miniature | 13 | <my-video-miniature |
7 | class="ng-animate" | 14 | class="ng-animate" |
8 | *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort" | 15 | *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort" |
9 | > | 16 | > |
10 | </my-video-miniature> | 17 | </my-video-miniature> |
11 | </div> | 18 | </div> |
12 | |||
13 | <pagination *ngIf="pagination.totalItems !== null && pagination.totalItems !== 0" | ||
14 | [totalItems]="pagination.totalItems" [itemsPerPage]="pagination.itemsPerPage" [maxSize]="6" [boundaryLinks]="true" [rotate]="false" | ||
15 | [(ngModel)]="pagination.currentPage" (pageChanged)="onPageChanged($event)" | ||
16 | ></pagination> | ||
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.ts b/client/src/app/videos/video-list/shared/abstract-video-list.ts index 262ea4e21..44cdc1d9f 100644 --- a/client/src/app/videos/video-list/shared/abstract-video-list.ts +++ b/client/src/app/videos/video-list/shared/abstract-video-list.ts | |||
@@ -19,44 +19,77 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
19 | protected notificationsService: NotificationsService | 19 | protected notificationsService: NotificationsService |
20 | protected router: Router | 20 | protected router: Router |
21 | protected route: ActivatedRoute | 21 | protected route: ActivatedRoute |
22 | |||
23 | protected subActivatedRoute: Subscription | 22 | protected subActivatedRoute: Subscription |
24 | 23 | ||
24 | protected abstract currentRoute: string | ||
25 | |||
25 | abstract titlePage: string | 26 | abstract titlePage: string |
27 | private loadedPages: { [ id: number ]: boolean } = {} | ||
28 | |||
26 | abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}> | 29 | abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}> |
27 | 30 | ||
28 | ngOnInit () { | 31 | ngOnInit () { |
29 | // Subscribe to route changes | 32 | // Subscribe to route changes |
30 | this.subActivatedRoute = this.route.params.subscribe(routeParams => { | 33 | const routeParams = this.route.snapshot.params |
31 | this.loadRouteParams(routeParams) | 34 | this.loadRouteParams(routeParams) |
32 | 35 | this.loadMoreVideos('after') | |
33 | this.getVideos() | ||
34 | }) | ||
35 | } | 36 | } |
36 | 37 | ||
37 | ngOnDestroy () { | 38 | ngOnDestroy () { |
38 | this.subActivatedRoute.unsubscribe() | 39 | this.subActivatedRoute.unsubscribe() |
39 | } | 40 | } |
40 | 41 | ||
41 | getVideos () { | 42 | onNearOfTop () { |
42 | this.videos = [] | 43 | if (this.pagination.currentPage > 1) { |
44 | this.previousPage() | ||
45 | } | ||
46 | } | ||
47 | |||
48 | onNearOfBottom () { | ||
49 | if (this.hasMoreVideos()) { | ||
50 | this.nextPage() | ||
51 | } | ||
52 | } | ||
53 | |||
54 | loadMoreVideos (where: 'before' | 'after') { | ||
55 | if (this.loadedPages[this.pagination.currentPage] === true) return | ||
43 | 56 | ||
44 | const observable = this.getVideosObservable() | 57 | const observable = this.getVideosObservable() |
45 | 58 | ||
46 | observable.subscribe( | 59 | observable.subscribe( |
47 | ({ videos, totalVideos }) => { | 60 | ({ videos, totalVideos }) => { |
48 | this.videos = videos | 61 | this.loadedPages[this.pagination.currentPage] = true |
49 | this.pagination.totalItems = totalVideos | 62 | this.pagination.totalItems = totalVideos |
63 | |||
64 | if (where === 'before') { | ||
65 | this.videos = videos.concat(this.videos) | ||
66 | } else { | ||
67 | this.videos = this.videos.concat(videos) | ||
68 | } | ||
50 | }, | 69 | }, |
51 | error => this.notificationsService.error('Error', error.text) | 70 | error => this.notificationsService.error('Error', error.text) |
52 | ) | 71 | ) |
53 | } | 72 | } |
54 | 73 | ||
55 | onPageChanged (event: { page: number }) { | 74 | protected hasMoreVideos () { |
56 | // Be sure the current page is set | 75 | if (!this.pagination.totalItems) return true |
57 | this.pagination.currentPage = event.page | 76 | |
77 | const maxPage = this.pagination.totalItems/this.pagination.itemsPerPage | ||
78 | return maxPage > this.pagination.currentPage | ||
79 | } | ||
80 | |||
81 | protected previousPage () { | ||
82 | this.pagination.currentPage-- | ||
83 | |||
84 | this.setNewRouteParams() | ||
85 | this.loadMoreVideos('before') | ||
86 | } | ||
87 | |||
88 | protected nextPage () { | ||
89 | this.pagination.currentPage++ | ||
58 | 90 | ||
59 | this.navigateToNewParams() | 91 | this.setNewRouteParams() |
92 | this.loadMoreVideos('after') | ||
60 | } | 93 | } |
61 | 94 | ||
62 | protected buildRouteParams () { | 95 | protected buildRouteParams () { |
@@ -79,8 +112,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
79 | } | 112 | } |
80 | } | 113 | } |
81 | 114 | ||
82 | protected navigateToNewParams () { | 115 | protected setNewRouteParams () { |
83 | const routeParams = this.buildRouteParams() | 116 | const routeParams = this.buildRouteParams() |
84 | this.router.navigate([ '/videos/list', routeParams ]) | 117 | this.router.navigate([ this.currentRoute, routeParams ]) |
85 | } | 118 | } |
86 | } | 119 | } |