diff options
Diffstat (limited to 'client/src/app/videos/video-list')
14 files changed, 170 insertions, 87 deletions
diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts index a490e6bb5..ed2bb1657 100644 --- a/client/src/app/videos/video-list/index.ts +++ b/client/src/app/videos/video-list/index.ts | |||
@@ -1,4 +1,3 @@ | |||
1 | export * from './loader.component' | 1 | export * from './my-videos.component' |
2 | export * from './video-list.component' | 2 | export * from './video-list.component' |
3 | export * from './video-miniature.component' | 3 | export * from './shared' |
4 | export * from './video-sort.component' | ||
diff --git a/client/src/app/videos/video-list/my-videos.component.ts b/client/src/app/videos/video-list/my-videos.component.ts new file mode 100644 index 000000000..648741a40 --- /dev/null +++ b/client/src/app/videos/video-list/my-videos.component.ts | |||
@@ -0,0 +1,36 @@ | |||
1 | import { Component, OnDestroy, OnInit } from '@angular/core' | ||
2 | import { ActivatedRoute, Router } from '@angular/router' | ||
3 | |||
4 | import { NotificationsService } from 'angular2-notifications' | ||
5 | |||
6 | import { AbstractVideoList } from './shared' | ||
7 | import { VideoService } from '../shared' | ||
8 | |||
9 | @Component({ | ||
10 | selector: 'my-videos', | ||
11 | styleUrls: [ './shared/abstract-video-list.scss' ], | ||
12 | templateUrl: './shared/abstract-video-list.html' | ||
13 | }) | ||
14 | export class MyVideosComponent extends AbstractVideoList implements OnInit, OnDestroy { | ||
15 | |||
16 | constructor ( | ||
17 | protected router: Router, | ||
18 | protected route: ActivatedRoute, | ||
19 | protected notificationsService: NotificationsService, | ||
20 | private videoService: VideoService | ||
21 | ) { | ||
22 | super() | ||
23 | } | ||
24 | |||
25 | ngOnInit () { | ||
26 | super.ngOnInit() | ||
27 | } | ||
28 | |||
29 | ngOnDestroy () { | ||
30 | this.subActivatedRoute.unsubscribe() | ||
31 | } | ||
32 | |||
33 | getVideosObservable () { | ||
34 | return this.videoService.getMyVideos(this.pagination, this.sort) | ||
35 | } | ||
36 | } | ||
diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/shared/abstract-video-list.html index 680fba3f5..680fba3f5 100644 --- a/client/src/app/videos/video-list/video-list.component.html +++ b/client/src/app/videos/video-list/shared/abstract-video-list.html | |||
diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/shared/abstract-video-list.scss index 4b4409602..4b4409602 100644 --- a/client/src/app/videos/video-list/video-list.component.scss +++ b/client/src/app/videos/video-list/shared/abstract-video-list.scss | |||
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 new file mode 100644 index 000000000..87d5bc48a --- /dev/null +++ b/client/src/app/videos/video-list/shared/abstract-video-list.ts | |||
@@ -0,0 +1,104 @@ | |||
1 | import { OnDestroy, OnInit } from '@angular/core' | ||
2 | import { ActivatedRoute, Router } from '@angular/router' | ||
3 | import { Subscription } from 'rxjs/Subscription' | ||
4 | import { BehaviorSubject } from 'rxjs/BehaviorSubject' | ||
5 | import { Observable } from 'rxjs/Observable' | ||
6 | |||
7 | import { NotificationsService } from 'angular2-notifications' | ||
8 | |||
9 | import { | ||
10 | SortField, | ||
11 | Video, | ||
12 | VideoPagination | ||
13 | } from '../../shared' | ||
14 | |||
15 | export abstract class AbstractVideoList implements OnInit, OnDestroy { | ||
16 | loading: BehaviorSubject<boolean> = new BehaviorSubject(false) | ||
17 | pagination: VideoPagination = { | ||
18 | currentPage: 1, | ||
19 | itemsPerPage: 25, | ||
20 | totalItems: null | ||
21 | } | ||
22 | sort: SortField | ||
23 | videos: Video[] = [] | ||
24 | |||
25 | protected notificationsService: NotificationsService | ||
26 | protected router: Router | ||
27 | protected route: ActivatedRoute | ||
28 | |||
29 | protected subActivatedRoute: Subscription | ||
30 | |||
31 | abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}> | ||
32 | |||
33 | ngOnInit () { | ||
34 | // Subscribe to route changes | ||
35 | this.subActivatedRoute = this.route.params.subscribe(routeParams => { | ||
36 | this.loadRouteParams(routeParams) | ||
37 | |||
38 | this.getVideos() | ||
39 | }) | ||
40 | } | ||
41 | |||
42 | ngOnDestroy () { | ||
43 | this.subActivatedRoute.unsubscribe() | ||
44 | } | ||
45 | |||
46 | getVideos () { | ||
47 | this.loading.next(true) | ||
48 | this.videos = [] | ||
49 | |||
50 | const observable = this.getVideosObservable() | ||
51 | |||
52 | observable.subscribe( | ||
53 | ({ videos, totalVideos }) => { | ||
54 | this.videos = videos | ||
55 | this.pagination.totalItems = totalVideos | ||
56 | |||
57 | this.loading.next(false) | ||
58 | }, | ||
59 | error => this.notificationsService.error('Error', error.text) | ||
60 | ) | ||
61 | } | ||
62 | |||
63 | isThereNoVideo () { | ||
64 | return !this.loading.getValue() && this.videos.length === 0 | ||
65 | } | ||
66 | |||
67 | onPageChanged (event: { page: number }) { | ||
68 | // Be sure the current page is set | ||
69 | this.pagination.currentPage = event.page | ||
70 | |||
71 | this.navigateToNewParams() | ||
72 | } | ||
73 | |||
74 | onSort (sort: SortField) { | ||
75 | this.sort = sort | ||
76 | |||
77 | this.navigateToNewParams() | ||
78 | } | ||
79 | |||
80 | protected buildRouteParams () { | ||
81 | // There is always a sort and a current page | ||
82 | const params = { | ||
83 | sort: this.sort, | ||
84 | page: this.pagination.currentPage | ||
85 | } | ||
86 | |||
87 | return params | ||
88 | } | ||
89 | |||
90 | protected loadRouteParams (routeParams: { [ key: string ]: any }) { | ||
91 | this.sort = routeParams['sort'] as SortField || '-createdAt' | ||
92 | |||
93 | if (routeParams['page'] !== undefined) { | ||
94 | this.pagination.currentPage = parseInt(routeParams['page'], 10) | ||
95 | } else { | ||
96 | this.pagination.currentPage = 1 | ||
97 | } | ||
98 | } | ||
99 | |||
100 | protected navigateToNewParams () { | ||
101 | const routeParams = this.buildRouteParams() | ||
102 | this.router.navigate([ '/videos/list', routeParams ]) | ||
103 | } | ||
104 | } | ||
diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts new file mode 100644 index 000000000..2c9804e6d --- /dev/null +++ b/client/src/app/videos/video-list/shared/index.ts | |||
@@ -0,0 +1,4 @@ | |||
1 | export * from './abstract-video-list' | ||
2 | export * from './loader.component' | ||
3 | export * from './video-miniature.component' | ||
4 | export * from './video-sort.component' | ||
diff --git a/client/src/app/videos/video-list/loader.component.html b/client/src/app/videos/video-list/shared/loader.component.html index 38d06950e..38d06950e 100644 --- a/client/src/app/videos/video-list/loader.component.html +++ b/client/src/app/videos/video-list/shared/loader.component.html | |||
diff --git a/client/src/app/videos/video-list/loader.component.ts b/client/src/app/videos/video-list/shared/loader.component.ts index f37d70c85..f37d70c85 100644 --- a/client/src/app/videos/video-list/loader.component.ts +++ b/client/src/app/videos/video-list/shared/loader.component.ts | |||
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/shared/video-miniature.component.html index abe87025f..abe87025f 100644 --- a/client/src/app/videos/video-list/video-miniature.component.html +++ b/client/src/app/videos/video-list/shared/video-miniature.component.html | |||
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss index 066792d10..066792d10 100644 --- a/client/src/app/videos/video-list/video-miniature.component.scss +++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss | |||
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/shared/video-miniature.component.ts index 18434dad2..e5a87907b 100644 --- a/client/src/app/videos/video-list/video-miniature.component.ts +++ b/client/src/app/videos/video-list/shared/video-miniature.component.ts | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Component, Input } from '@angular/core' | 1 | import { Component, Input } from '@angular/core' |
2 | 2 | ||
3 | import { SortField, Video } from '../shared' | 3 | import { SortField, Video } from '../../shared' |
4 | import { User } from '../../shared' | 4 | import { User } from '../../../shared' |
5 | 5 | ||
6 | @Component({ | 6 | @Component({ |
7 | selector: 'my-video-miniature', | 7 | selector: 'my-video-miniature', |
diff --git a/client/src/app/videos/video-list/video-sort.component.html b/client/src/app/videos/video-list/shared/video-sort.component.html index 3bece0b22..3bece0b22 100644 --- a/client/src/app/videos/video-list/video-sort.component.html +++ b/client/src/app/videos/video-list/shared/video-sort.component.html | |||
diff --git a/client/src/app/videos/video-list/video-sort.component.ts b/client/src/app/videos/video-list/shared/video-sort.component.ts index 64916bf16..8aa89d32b 100644 --- a/client/src/app/videos/video-list/video-sort.component.ts +++ b/client/src/app/videos/video-list/shared/video-sort.component.ts | |||
@@ -1,6 +1,6 @@ | |||
1 | import { Component, EventEmitter, Input, Output } from '@angular/core' | 1 | import { Component, EventEmitter, Input, Output } from '@angular/core' |
2 | 2 | ||
3 | import { SortField } from '../shared' | 3 | import { SortField } from '../../shared' |
4 | 4 | ||
5 | @Component({ | 5 | @Component({ |
6 | selector: 'my-video-sort', | 6 | selector: 'my-video-sort', |
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts index bf6f60215..784162679 100644 --- a/client/src/app/videos/video-list/video-list.component.ts +++ b/client/src/app/videos/video-list/video-list.component.ts | |||
@@ -1,51 +1,33 @@ | |||
1 | import { Component, OnDestroy, OnInit } from '@angular/core' | 1 | import { Component, OnDestroy, OnInit } from '@angular/core' |
2 | import { ActivatedRoute, Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { Subscription } from 'rxjs/Subscription' | 3 | import { Subscription } from 'rxjs/Subscription' |
4 | import { BehaviorSubject } from 'rxjs/BehaviorSubject' | ||
5 | 4 | ||
6 | import { NotificationsService } from 'angular2-notifications' | 5 | import { NotificationsService } from 'angular2-notifications' |
7 | 6 | ||
8 | import { AuthService } from '../../core' | 7 | import { VideoService } from '../shared' |
9 | import { | 8 | import { Search, SearchField, SearchService } from '../../shared' |
10 | SortField, | 9 | import { AbstractVideoList } from './shared' |
11 | Video, | ||
12 | VideoService, | ||
13 | VideoPagination | ||
14 | } from '../shared' | ||
15 | import { Search, SearchField, SearchService, User } from '../../shared' | ||
16 | 10 | ||
17 | @Component({ | 11 | @Component({ |
18 | selector: 'my-videos-list', | 12 | selector: 'my-videos-list', |
19 | styleUrls: [ './video-list.component.scss' ], | 13 | styleUrls: [ './shared/abstract-video-list.scss' ], |
20 | templateUrl: './video-list.component.html' | 14 | templateUrl: './shared/abstract-video-list.html' |
21 | }) | 15 | }) |
22 | export class VideoListComponent implements OnInit, OnDestroy { | 16 | export class VideoListComponent extends AbstractVideoList implements OnInit, OnDestroy { |
23 | loading: BehaviorSubject<boolean> = new BehaviorSubject(false) | ||
24 | pagination: VideoPagination = { | ||
25 | currentPage: 1, | ||
26 | itemsPerPage: 25, | ||
27 | totalItems: null | ||
28 | } | ||
29 | sort: SortField | ||
30 | user: User | ||
31 | videos: Video[] = [] | ||
32 | |||
33 | private search: Search | 17 | private search: Search |
34 | private subActivatedRoute: Subscription | ||
35 | private subSearch: Subscription | 18 | private subSearch: Subscription |
36 | 19 | ||
37 | constructor ( | 20 | constructor ( |
38 | private authService: AuthService, | 21 | protected router: Router, |
39 | private notificationsService: NotificationsService, | 22 | protected route: ActivatedRoute, |
40 | private router: Router, | 23 | protected notificationsService: NotificationsService, |
41 | private route: ActivatedRoute, | ||
42 | private videoService: VideoService, | 24 | private videoService: VideoService, |
43 | private searchService: SearchService | 25 | private searchService: SearchService |
44 | ) {} | 26 | ) { |
27 | super() | ||
28 | } | ||
45 | 29 | ||
46 | ngOnInit () { | 30 | ngOnInit () { |
47 | this.user = this.authService.getUser() | ||
48 | |||
49 | // Subscribe to route changes | 31 | // Subscribe to route changes |
50 | this.subActivatedRoute = this.route.params.subscribe(routeParams => { | 32 | this.subActivatedRoute = this.route.params.subscribe(routeParams => { |
51 | this.loadRouteParams(routeParams) | 33 | this.loadRouteParams(routeParams) |
@@ -66,14 +48,12 @@ export class VideoListComponent implements OnInit, OnDestroy { | |||
66 | } | 48 | } |
67 | 49 | ||
68 | ngOnDestroy () { | 50 | ngOnDestroy () { |
69 | this.subActivatedRoute.unsubscribe() | 51 | super.ngOnDestroy() |
52 | |||
70 | this.subSearch.unsubscribe() | 53 | this.subSearch.unsubscribe() |
71 | } | 54 | } |
72 | 55 | ||
73 | getVideos () { | 56 | getVideosObservable () { |
74 | this.loading.next(true) | ||
75 | this.videos = [] | ||
76 | |||
77 | let observable = null | 57 | let observable = null |
78 | if (this.search.value) { | 58 | if (this.search.value) { |
79 | observable = this.videoService.searchVideos(this.search, this.pagination, this.sort) | 59 | observable = this.videoService.searchVideos(this.search, this.pagination, this.sort) |
@@ -81,40 +61,11 @@ export class VideoListComponent implements OnInit, OnDestroy { | |||
81 | observable = this.videoService.getVideos(this.pagination, this.sort) | 61 | observable = this.videoService.getVideos(this.pagination, this.sort) |
82 | } | 62 | } |
83 | 63 | ||
84 | observable.subscribe( | 64 | return observable |
85 | ({ videos, totalVideos }) => { | ||
86 | this.videos = videos | ||
87 | this.pagination.totalItems = totalVideos | ||
88 | |||
89 | this.loading.next(false) | ||
90 | }, | ||
91 | error => this.notificationsService.error('Error', error.text) | ||
92 | ) | ||
93 | } | ||
94 | |||
95 | isThereNoVideo () { | ||
96 | return !this.loading.getValue() && this.videos.length === 0 | ||
97 | } | ||
98 | |||
99 | onPageChanged (event: { page: number }) { | ||
100 | // Be sure the current page is set | ||
101 | this.pagination.currentPage = event.page | ||
102 | |||
103 | this.navigateToNewParams() | ||
104 | } | 65 | } |
105 | 66 | ||
106 | onSort (sort: SortField) { | 67 | protected buildRouteParams () { |
107 | this.sort = sort | 68 | const params = super.buildRouteParams() |
108 | |||
109 | this.navigateToNewParams() | ||
110 | } | ||
111 | |||
112 | private buildRouteParams () { | ||
113 | // There is always a sort and a current page | ||
114 | const params = { | ||
115 | sort: this.sort, | ||
116 | page: this.pagination.currentPage | ||
117 | } | ||
118 | 69 | ||
119 | // Maybe there is a search | 70 | // Maybe there is a search |
120 | if (this.search.value) { | 71 | if (this.search.value) { |
@@ -125,7 +76,9 @@ export class VideoListComponent implements OnInit, OnDestroy { | |||
125 | return params | 76 | return params |
126 | } | 77 | } |
127 | 78 | ||
128 | private loadRouteParams (routeParams: { [ key: string ]: any }) { | 79 | protected loadRouteParams (routeParams: { [ key: string ]: any }) { |
80 | super.loadRouteParams(routeParams) | ||
81 | |||
129 | if (routeParams['search'] !== undefined) { | 82 | if (routeParams['search'] !== undefined) { |
130 | this.search = { | 83 | this.search = { |
131 | value: routeParams['search'], | 84 | value: routeParams['search'], |
@@ -137,18 +90,5 @@ export class VideoListComponent implements OnInit, OnDestroy { | |||
137 | field: 'name' | 90 | field: 'name' |
138 | } | 91 | } |
139 | } | 92 | } |
140 | |||
141 | this.sort = routeParams['sort'] as SortField || '-createdAt' | ||
142 | |||
143 | if (routeParams['page'] !== undefined) { | ||
144 | this.pagination.currentPage = parseInt(routeParams['page'], 10) | ||
145 | } else { | ||
146 | this.pagination.currentPage = 1 | ||
147 | } | ||
148 | } | ||
149 | |||
150 | private navigateToNewParams () { | ||
151 | const routeParams = this.buildRouteParams() | ||
152 | this.router.navigate([ '/videos/list', routeParams ]) | ||
153 | } | 93 | } |
154 | } | 94 | } |