diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-06-16 14:32:15 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-06-16 14:32:15 +0200 |
commit | df98563e2104b82b119c00a3cd83cd0dc1242d25 (patch) | |
tree | a9720bf01bac9ad5646bd3d3c9bc7653617afdad /client/src/app/videos/video-list | |
parent | 46757b477c1adb5f98060d15998a3852e18902a6 (diff) | |
download | PeerTube-df98563e2104b82b119c00a3cd83cd0dc1242d25.tar.gz PeerTube-df98563e2104b82b119c00a3cd83cd0dc1242d25.tar.zst PeerTube-df98563e2104b82b119c00a3cd83cd0dc1242d25.zip |
Use typescript standard and lint all files
Diffstat (limited to 'client/src/app/videos/video-list')
6 files changed, 97 insertions, 96 deletions
diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts index 71d3b78e6..a490e6bb5 100644 --- a/client/src/app/videos/video-list/index.ts +++ b/client/src/app/videos/video-list/index.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | export * from './loader.component'; | 1 | export * from './loader.component' |
2 | export * from './video-list.component'; | 2 | export * from './video-list.component' |
3 | export * from './video-miniature.component'; | 3 | export * from './video-miniature.component' |
4 | export * from './video-sort.component'; | 4 | export * from './video-sort.component' |
diff --git a/client/src/app/videos/video-list/loader.component.ts b/client/src/app/videos/video-list/loader.component.ts index e72d2f3f3..e5780e0fa 100644 --- a/client/src/app/videos/video-list/loader.component.ts +++ b/client/src/app/videos/video-list/loader.component.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | import { Component, Input } from '@angular/core'; | 1 | import { Component, Input } from '@angular/core' |
2 | 2 | ||
3 | @Component({ | 3 | @Component({ |
4 | selector: 'my-loader', | 4 | selector: 'my-loader', |
@@ -7,5 +7,5 @@ import { Component, Input } from '@angular/core'; | |||
7 | }) | 7 | }) |
8 | 8 | ||
9 | export class LoaderComponent { | 9 | export class LoaderComponent { |
10 | @Input() loading: boolean; | 10 | @Input() loading: boolean |
11 | } | 11 | } |
diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html index f80592279..680fba3f5 100644 --- a/client/src/app/videos/video-list/video-list.component.html +++ b/client/src/app/videos/video-list/video-list.component.html | |||
@@ -17,7 +17,7 @@ | |||
17 | 17 | ||
18 | <my-video-miniature | 18 | <my-video-miniature |
19 | class="ng-animate" | 19 | class="ng-animate" |
20 | *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort" (removed)="onRemoved(video)" | 20 | *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort" |
21 | > | 21 | > |
22 | </my-video-miniature> | 22 | </my-video-miniature> |
23 | </div> | 23 | </div> |
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 16a40bdc4..0c36e5b08 100644 --- a/client/src/app/videos/video-list/video-list.component.ts +++ b/client/src/app/videos/video-list/video-list.component.ts | |||
@@ -1,17 +1,17 @@ | |||
1 | import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; | 1 | import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core' |
2 | import { ActivatedRoute, Router } from '@angular/router'; | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { BehaviorSubject } from 'rxjs/BehaviorSubject'; | 3 | import { BehaviorSubject } from 'rxjs/BehaviorSubject' |
4 | 4 | ||
5 | import { NotificationsService } from 'angular2-notifications'; | 5 | import { NotificationsService } from 'angular2-notifications' |
6 | 6 | ||
7 | import { | 7 | import { |
8 | SortField, | 8 | SortField, |
9 | Video, | 9 | Video, |
10 | VideoService | 10 | VideoService |
11 | } from '../shared'; | 11 | } from '../shared' |
12 | import { AuthService, AuthUser } from '../../core'; | 12 | import { AuthService, AuthUser } from '../../core' |
13 | import { RestPagination, Search, SearchField } from '../../shared'; | 13 | import { RestPagination, Search, SearchField } from '../../shared' |
14 | import { SearchService } from '../../shared'; | 14 | import { SearchService } from '../../shared' |
15 | 15 | ||
16 | @Component({ | 16 | @Component({ |
17 | selector: 'my-videos-list', | 17 | selector: 'my-videos-list', |
@@ -19,21 +19,21 @@ import { SearchService } from '../../shared'; | |||
19 | templateUrl: './video-list.component.html' | 19 | templateUrl: './video-list.component.html' |
20 | }) | 20 | }) |
21 | export class VideoListComponent implements OnInit, OnDestroy { | 21 | export class VideoListComponent implements OnInit, OnDestroy { |
22 | loading: BehaviorSubject<boolean> = new BehaviorSubject(false); | 22 | loading: BehaviorSubject<boolean> = new BehaviorSubject(false) |
23 | pagination: RestPagination = { | 23 | pagination: RestPagination = { |
24 | currentPage: 1, | 24 | currentPage: 1, |
25 | itemsPerPage: 25, | 25 | itemsPerPage: 25, |
26 | totalItems: null | 26 | totalItems: null |
27 | }; | 27 | } |
28 | sort: SortField; | 28 | sort: SortField |
29 | user: AuthUser = null; | 29 | user: AuthUser = null |
30 | videos: Video[] = []; | 30 | videos: Video[] = [] |
31 | 31 | ||
32 | private search: Search; | 32 | private search: Search |
33 | private subActivatedRoute: any; | 33 | private subActivatedRoute: any |
34 | private subSearch: any; | 34 | private subSearch: any |
35 | 35 | ||
36 | constructor( | 36 | constructor ( |
37 | private notificationsService: NotificationsService, | 37 | private notificationsService: NotificationsService, |
38 | private authService: AuthService, | 38 | private authService: AuthService, |
39 | private changeDetector: ChangeDetectorRef, | 39 | private changeDetector: ChangeDetectorRef, |
@@ -43,114 +43,114 @@ export class VideoListComponent implements OnInit, OnDestroy { | |||
43 | private searchService: SearchService | 43 | private searchService: SearchService |
44 | ) {} | 44 | ) {} |
45 | 45 | ||
46 | ngOnInit() { | 46 | ngOnInit () { |
47 | if (this.authService.isLoggedIn()) { | 47 | if (this.authService.isLoggedIn()) { |
48 | this.user = AuthUser.load(); | 48 | this.user = AuthUser.load() |
49 | } | 49 | } |
50 | 50 | ||
51 | // Subscribe to route changes | 51 | // Subscribe to route changes |
52 | this.subActivatedRoute = this.route.params.subscribe(routeParams => { | 52 | this.subActivatedRoute = this.route.params.subscribe(routeParams => { |
53 | this.loadRouteParams(routeParams); | 53 | this.loadRouteParams(routeParams) |
54 | 54 | ||
55 | // Update the search service component | 55 | // Update the search service component |
56 | this.searchService.updateSearch.next(this.search); | 56 | this.searchService.updateSearch.next(this.search) |
57 | this.getVideos(); | 57 | this.getVideos() |
58 | }); | 58 | }) |
59 | 59 | ||
60 | // Subscribe to search changes | 60 | // Subscribe to search changes |
61 | this.subSearch = this.searchService.searchUpdated.subscribe(search => { | 61 | this.subSearch = this.searchService.searchUpdated.subscribe(search => { |
62 | this.search = search; | 62 | this.search = search |
63 | // Reset pagination | 63 | // Reset pagination |
64 | this.pagination.currentPage = 1; | 64 | this.pagination.currentPage = 1 |
65 | 65 | ||
66 | this.navigateToNewParams(); | 66 | this.navigateToNewParams() |
67 | }); | 67 | }) |
68 | } | 68 | } |
69 | 69 | ||
70 | ngOnDestroy() { | 70 | ngOnDestroy () { |
71 | this.subActivatedRoute.unsubscribe(); | 71 | this.subActivatedRoute.unsubscribe() |
72 | this.subSearch.unsubscribe(); | 72 | this.subSearch.unsubscribe() |
73 | } | 73 | } |
74 | 74 | ||
75 | getVideos() { | 75 | getVideos () { |
76 | this.loading.next(true); | 76 | this.loading.next(true) |
77 | this.videos = []; | 77 | this.videos = [] |
78 | 78 | ||
79 | let observable = null; | 79 | let observable = null |
80 | if (this.search.value) { | 80 | if (this.search.value) { |
81 | observable = this.videoService.searchVideos(this.search, this.pagination, this.sort); | 81 | observable = this.videoService.searchVideos(this.search, this.pagination, this.sort) |
82 | } else { | 82 | } else { |
83 | observable = this.videoService.getVideos(this.pagination, this.sort); | 83 | observable = this.videoService.getVideos(this.pagination, this.sort) |
84 | } | 84 | } |
85 | 85 | ||
86 | observable.subscribe( | 86 | observable.subscribe( |
87 | ({ videos, totalVideos }) => { | 87 | ({ videos, totalVideos }) => { |
88 | this.videos = videos; | 88 | this.videos = videos |
89 | this.pagination.totalItems = totalVideos; | 89 | this.pagination.totalItems = totalVideos |
90 | 90 | ||
91 | this.loading.next(false); | 91 | this.loading.next(false) |
92 | }, | 92 | }, |
93 | error => this.notificationsService.error('Error', error.text) | 93 | error => this.notificationsService.error('Error', error.text) |
94 | ); | 94 | ) |
95 | } | 95 | } |
96 | 96 | ||
97 | isThereNoVideo() { | 97 | isThereNoVideo () { |
98 | return !this.loading.getValue() && this.videos.length === 0; | 98 | return !this.loading.getValue() && this.videos.length === 0 |
99 | } | 99 | } |
100 | 100 | ||
101 | onPageChanged(event: any) { | 101 | onPageChanged (event: any) { |
102 | // Be sure the current page is set | 102 | // Be sure the current page is set |
103 | this.pagination.currentPage = event.page; | 103 | this.pagination.currentPage = event.page |
104 | 104 | ||
105 | this.navigateToNewParams(); | 105 | this.navigateToNewParams() |
106 | } | 106 | } |
107 | 107 | ||
108 | onSort(sort: SortField) { | 108 | onSort (sort: SortField) { |
109 | this.sort = sort; | 109 | this.sort = sort |
110 | 110 | ||
111 | this.navigateToNewParams(); | 111 | this.navigateToNewParams() |
112 | } | 112 | } |
113 | 113 | ||
114 | private buildRouteParams() { | 114 | private buildRouteParams () { |
115 | // There is always a sort and a current page | 115 | // There is always a sort and a current page |
116 | const params: any = { | 116 | const params: any = { |
117 | sort: this.sort, | 117 | sort: this.sort, |
118 | page: this.pagination.currentPage | 118 | page: this.pagination.currentPage |
119 | }; | 119 | } |
120 | 120 | ||
121 | // Maybe there is a search | 121 | // Maybe there is a search |
122 | if (this.search.value) { | 122 | if (this.search.value) { |
123 | params.field = this.search.field; | 123 | params.field = this.search.field |
124 | params.search = this.search.value; | 124 | params.search = this.search.value |
125 | } | 125 | } |
126 | 126 | ||
127 | return params; | 127 | return params |
128 | } | 128 | } |
129 | 129 | ||
130 | private loadRouteParams(routeParams) { | 130 | private loadRouteParams (routeParams) { |
131 | if (routeParams['search'] !== undefined) { | 131 | if (routeParams['search'] !== undefined) { |
132 | this.search = { | 132 | this.search = { |
133 | value: routeParams['search'], | 133 | value: routeParams['search'], |
134 | field: <SearchField>routeParams['field'] | 134 | field: routeParams['field'] as SearchField |
135 | }; | 135 | } |
136 | } else { | 136 | } else { |
137 | this.search = { | 137 | this.search = { |
138 | value: '', | 138 | value: '', |
139 | field: 'name' | 139 | field: 'name' |
140 | }; | 140 | } |
141 | } | 141 | } |
142 | 142 | ||
143 | this.sort = <SortField>routeParams['sort'] || '-createdAt'; | 143 | this.sort = routeParams['sort'] as SortField || '-createdAt' |
144 | 144 | ||
145 | if (routeParams['page'] !== undefined) { | 145 | if (routeParams['page'] !== undefined) { |
146 | this.pagination.currentPage = parseInt(routeParams['page']); | 146 | this.pagination.currentPage = parseInt(routeParams['page'], 10) |
147 | } else { | 147 | } else { |
148 | this.pagination.currentPage = 1; | 148 | this.pagination.currentPage = 1 |
149 | } | 149 | } |
150 | } | 150 | } |
151 | 151 | ||
152 | private navigateToNewParams() { | 152 | private navigateToNewParams () { |
153 | const routeParams = this.buildRouteParams(); | 153 | const routeParams = this.buildRouteParams() |
154 | this.router.navigate(['/videos/list', routeParams]); | 154 | this.router.navigate(['/videos/list', routeParams]) |
155 | } | 155 | } |
156 | } | 156 | } |
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts index 28601ca7f..1cfeacf36 100644 --- a/client/src/app/videos/video-list/video-miniature.component.ts +++ b/client/src/app/videos/video-list/video-miniature.component.ts | |||
@@ -1,10 +1,10 @@ | |||
1 | import { Component, Input, Output, EventEmitter } from '@angular/core'; | 1 | import { Component, Input, Output, EventEmitter } from '@angular/core' |
2 | 2 | ||
3 | import { NotificationsService } from 'angular2-notifications'; | 3 | import { NotificationsService } from 'angular2-notifications' |
4 | 4 | ||
5 | import { ConfirmService, ConfigService } from '../../core'; | 5 | import { ConfirmService, ConfigService } from '../../core' |
6 | import { SortField, Video, VideoService } from '../shared'; | 6 | import { SortField, Video, VideoService } from '../shared' |
7 | import { User } from '../../shared'; | 7 | import { User } from '../../shared' |
8 | 8 | ||
9 | @Component({ | 9 | @Component({ |
10 | selector: 'my-video-miniature', | 10 | selector: 'my-video-miniature', |
@@ -13,25 +13,26 @@ import { User } from '../../shared'; | |||
13 | }) | 13 | }) |
14 | 14 | ||
15 | export class VideoMiniatureComponent { | 15 | export class VideoMiniatureComponent { |
16 | @Input() currentSort: SortField; | 16 | @Input() currentSort: SortField |
17 | @Input() user: User; | 17 | @Input() user: User |
18 | @Input() video: Video; | 18 | @Input() video: Video |
19 | 19 | ||
20 | constructor( | 20 | constructor ( |
21 | private notificationsService: NotificationsService, | 21 | private notificationsService: NotificationsService, |
22 | private confirmService: ConfirmService, | 22 | private confirmService: ConfirmService, |
23 | private configService: ConfigService, | 23 | private configService: ConfigService, |
24 | private videoService: VideoService | 24 | private videoService: VideoService |
25 | ) {} | 25 | ) {} |
26 | 26 | ||
27 | getVideoName() { | 27 | getVideoName () { |
28 | if (this.isVideoNSFWForThisUser()) | 28 | if (this.isVideoNSFWForThisUser()) { |
29 | return 'NSFW'; | 29 | return 'NSFW' |
30 | } | ||
30 | 31 | ||
31 | return this.video.name; | 32 | return this.video.name |
32 | } | 33 | } |
33 | 34 | ||
34 | isVideoNSFWForThisUser() { | 35 | isVideoNSFWForThisUser () { |
35 | return this.video.isVideoNSFWForUser(this.user); | 36 | return this.video.isVideoNSFWForUser(this.user) |
36 | } | 37 | } |
37 | } | 38 | } |
diff --git a/client/src/app/videos/video-list/video-sort.component.ts b/client/src/app/videos/video-list/video-sort.component.ts index 20979a395..64916bf16 100644 --- a/client/src/app/videos/video-list/video-sort.component.ts +++ b/client/src/app/videos/video-list/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', |
@@ -8,9 +8,9 @@ import { SortField } from '../shared'; | |||
8 | }) | 8 | }) |
9 | 9 | ||
10 | export class VideoSortComponent { | 10 | export class VideoSortComponent { |
11 | @Output() sort = new EventEmitter<any>(); | 11 | @Output() sort = new EventEmitter<any>() |
12 | 12 | ||
13 | @Input() currentSort: SortField; | 13 | @Input() currentSort: SortField |
14 | 14 | ||
15 | sortChoices: { [ P in SortField ]: string } = { | 15 | sortChoices: { [ P in SortField ]: string } = { |
16 | 'name': 'Name - Asc', | 16 | 'name': 'Name - Asc', |
@@ -23,17 +23,17 @@ export class VideoSortComponent { | |||
23 | '-views': 'Views - Desc', | 23 | '-views': 'Views - Desc', |
24 | 'likes': 'Likes - Asc', | 24 | 'likes': 'Likes - Asc', |
25 | '-likes': 'Likes - Desc' | 25 | '-likes': 'Likes - Desc' |
26 | }; | 26 | } |
27 | 27 | ||
28 | get choiceKeys() { | 28 | get choiceKeys () { |
29 | return Object.keys(this.sortChoices); | 29 | return Object.keys(this.sortChoices) |
30 | } | 30 | } |
31 | 31 | ||
32 | getStringChoice(choiceKey: SortField) { | 32 | getStringChoice (choiceKey: SortField) { |
33 | return this.sortChoices[choiceKey]; | 33 | return this.sortChoices[choiceKey] |
34 | } | 34 | } |
35 | 35 | ||
36 | onSortChange() { | 36 | onSortChange () { |
37 | this.sort.emit(this.currentSort); | 37 | this.sort.emit(this.currentSort) |
38 | } | 38 | } |
39 | } | 39 | } |