X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2Fvideo-list%2Fvideo-list.component.ts;h=4714ce01eb690c77cd50d9c4536569fb1d15d6f2;hb=db7af09bd8e9de57cdda88c2e32387551235b3a4;hp=16e1b5bcc75c5af891e8a25fcf156d832114d0b9;hpb=383bfc8356d444cbed1dab7e5c1b3bb16becfdfd;p=github%2FChocobozzz%2FPeerTube.git 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 16e1b5bcc..4714ce01e 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,18 @@ -import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core' +import { ActivatedRoute, Router } from '@angular/router' +import { Subscription } from 'rxjs/Subscription' +import { BehaviorSubject } from 'rxjs/BehaviorSubject' -import { NotificationsService } from 'angular2-notifications'; +import { NotificationsService } from 'angular2-notifications' import { SortField, Video, - VideoService -} from '../shared'; -import { AuthService, AuthUser } from '../../core'; -import { RestPagination, Search, SearchField } from '../../shared'; -import { SearchService } from '../../shared'; + VideoService, + VideoPagination +} from '../shared' +import { AuthService, AuthUser } from '../../core' +import { Search, SearchField, SearchService } from '../../shared' @Component({ selector: 'my-videos-list', @@ -19,21 +20,21 @@ import { SearchService } from '../../shared'; templateUrl: './video-list.component.html' }) export class VideoListComponent implements OnInit, OnDestroy { - loading: BehaviorSubject = new BehaviorSubject(false); - pagination: RestPagination = { + loading: BehaviorSubject = new BehaviorSubject(false) + pagination: VideoPagination = { currentPage: 1, itemsPerPage: 25, totalItems: null - }; - sort: SortField; - user: AuthUser = null; - videos: Video[] = []; + } + sort: SortField + user: AuthUser = null + videos: Video[] = [] - private search: Search; - private subActivatedRoute: any; - private subSearch: any; + private search: Search + private subActivatedRoute: Subscription + private subSearch: Subscription - constructor( + constructor ( private notificationsService: NotificationsService, private authService: AuthService, private changeDetector: ChangeDetectorRef, @@ -43,119 +44,114 @@ export class VideoListComponent implements OnInit, OnDestroy { private searchService: SearchService ) {} - ngOnInit() { + ngOnInit () { if (this.authService.isLoggedIn()) { - this.user = AuthUser.load(); + this.user = AuthUser.load() } // Subscribe to route changes this.subActivatedRoute = this.route.params.subscribe(routeParams => { - this.loadRouteParams(routeParams); + this.loadRouteParams(routeParams) // Update the search service component - this.searchService.updateSearch.next(this.search); - this.getVideos(); - }); + this.searchService.updateSearch.next(this.search) + this.getVideos() + }) // Subscribe to search changes this.subSearch = this.searchService.searchUpdated.subscribe(search => { - this.search = search; + this.search = search // Reset pagination - this.pagination.currentPage = 1; + this.pagination.currentPage = 1 - this.navigateToNewParams(); - }); + this.navigateToNewParams() + }) } - ngOnDestroy() { - this.subActivatedRoute.unsubscribe(); - this.subSearch.unsubscribe(); + ngOnDestroy () { + this.subActivatedRoute.unsubscribe() + this.subSearch.unsubscribe() } - getVideos() { - this.loading.next(true); - this.videos = []; - - this.changeDetector.detectChanges(); - - let observable = null; + getVideos () { + this.loading.next(true) + this.videos = [] + let observable = null if (this.search.value) { - observable = this.videoService.searchVideos(this.search, this.pagination, this.sort); + observable = this.videoService.searchVideos(this.search, this.pagination, this.sort) } else { - observable = this.videoService.getVideos(this.pagination, this.sort); + observable = this.videoService.getVideos(this.pagination, this.sort) } observable.subscribe( ({ videos, totalVideos }) => { - this.videos = videos; - this.pagination.totalItems = totalVideos; + this.videos = videos + this.pagination.totalItems = totalVideos - this.loading.next(false); + this.loading.next(false) }, error => this.notificationsService.error('Error', error.text) - ); + ) } - isThereNoVideo() { - return !this.loading.getValue() && this.videos.length === 0; + isThereNoVideo () { + return !this.loading.getValue() && this.videos.length === 0 } - onPageChanged(event: any) { + onPageChanged (event: { page: number }) { // Be sure the current page is set - this.pagination.currentPage = event.page; + this.pagination.currentPage = event.page - this.navigateToNewParams(); + this.navigateToNewParams() } - onSort(sort: SortField) { - this.sort = sort; + onSort (sort: SortField) { + this.sort = sort - this.navigateToNewParams(); + this.navigateToNewParams() } - private buildRouteParams() { + private buildRouteParams () { // There is always a sort and a current page - const params: any = { + const params = { sort: this.sort, page: this.pagination.currentPage - }; + } // Maybe there is a search if (this.search.value) { - params.field = this.search.field; - params.search = this.search.value; + params['field'] = this.search.field + params['search'] = this.search.value } - return params; + return params } - private loadRouteParams(routeParams) { + private loadRouteParams (routeParams: { [ key: string ]: any }) { if (routeParams['search'] !== undefined) { this.search = { value: routeParams['search'], - field: routeParams['field'] - }; + field: routeParams['field'] as SearchField + } } else { this.search = { value: '', field: 'name' - }; + } } - this.sort = routeParams['sort'] || '-createdAt'; + this.sort = routeParams['sort'] as SortField || '-createdAt' if (routeParams['page'] !== undefined) { - this.pagination.currentPage = parseInt(routeParams['page']); + this.pagination.currentPage = parseInt(routeParams['page'], 10) } else { - this.pagination.currentPage = 1; + this.pagination.currentPage = 1 } - - this.changeDetector.detectChanges(); } - private navigateToNewParams() { - const routeParams = this.buildRouteParams(); - this.router.navigate(['/videos/list', routeParams]); + private navigateToNewParams () { + const routeParams = this.buildRouteParams() + this.router.navigate([ '/videos/list', routeParams ]) } }