1 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
2 import { AsyncPipe } from '@angular/common';
3 import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from '@angular/router';
4 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
6 import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
15 import { AuthService, Search, SearchField, User } from '../../shared';
16 import { VideoMiniatureComponent } from './video-miniature.component';
17 import { VideoSortComponent } from './video-sort.component';
18 import { SearchService } from '../../shared';
21 selector: 'my-videos-list',
22 styles: [ require('./video-list.component.scss') ],
24 template: require('./video-list.component.html'),
25 directives: [ LoaderComponent, PAGINATION_DIRECTIVES, ROUTER_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ]
28 export class VideoListComponent implements OnInit, OnDestroy {
29 loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
30 pagination: Pagination = {
39 private search: Search;
43 private authService: AuthService,
44 private changeDetector: ChangeDetectorRef,
45 private router: Router,
46 private route: ActivatedRoute,
47 private videoService: VideoService,
48 private searchService: SearchService
52 this.sub = this.route.params.subscribe(routeParams => {
53 if (this.authService.isLoggedIn()) {
54 this.user = User.load();
58 value: routeParams['search'],
59 field: <SearchField>routeParams['field']
62 // Update the search service component
63 this.searchService.searchChanged.next(this.search);
65 this.sort = <SortField>routeParams['sort'] || '-createdDate';
72 this.sub.unsubscribe();
75 getVideos(detectChanges = true) {
76 this.loading.next(true);
78 this.pagination.currentPage = 1;
80 this.changeDetector.detectChanges();
82 let observable = null;
84 if (this.search.value) {
85 observable = this.videoService.searchVideos(this.search, this.pagination, this.sort);
87 observable = this.videoService.getVideos(this.pagination, this.sort);
91 ({ videos, totalVideos }) => {
93 this.pagination.totalItems = totalVideos;
95 this.loading.next(false);
102 return !this.loading && this.videos.length === 0;
105 onRemoved(video: Video) {
106 this.getVideos(false);
109 onSort(sort: SortField) {
112 const params: any = {
116 if (this.search.value) {
117 params.field = this.search.field;
118 params.search = this.search.value;
121 this.router.navigate(['/videos/list', params]);