Client: check token valitidy at startup

[github/Chocobozzz/PeerTube.git] / client / src / app / videos / video-list / video-list.component.ts

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 b1ce5584526843dec4ada62c04edcaace8281dce..844e14567883b88b65df53770265c207ddf8a01b 100644 (file)
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -1,68 +1,87 @@
-import { Component, OnInit } from '@angular/core';
-import { Router, ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
+import { NotificationsService } from 'angular2-notifications';
 
 import {
-  LoaderComponent,
-  Pagination,
   SortField,
   Video,
   VideoService
 } from '../shared';
-import { AuthService, Search, SearchField, User } from '../../shared';
-import { VideoMiniatureComponent } from './video-miniature.component';
-import { VideoSortComponent } from './video-sort.component';
+import { AuthService, AuthUser } from '../../core';
+import { RestPagination, Search, SearchField } from '../../shared';
+import { SearchService } from '../../shared';
 
 @Component({
   selector: 'my-videos-list',
-  styles: [ require('./video-list.component.scss') ],
-  template: require('./video-list.component.html'),
-  directives: [ LoaderComponent, PAGINATION_DIRECTIVES, ROUTER_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ]
+  styleUrls: [ './video-list.component.scss' ],
+  templateUrl: './video-list.component.html'
 })
 
-export class VideoListComponent implements OnInit {
-  loading = false;
-  pagination: Pagination = {
+export class VideoListComponent implements OnInit, OnDestroy {
+  loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  pagination: RestPagination = {
     currentPage: 1,
     itemsPerPage: 9,
-    total: 0
+    totalItems: null
   };
   sort: SortField;
-  user: User = null;
+  user: AuthUser = null;
   videos: Video[] = [];
 
   private search: Search;
+  private subActivatedRoute: any;
+  private subSearch: any;
 
   constructor(
+    private notificationsService: NotificationsService,
     private authService: AuthService,
+    private changeDetector: ChangeDetectorRef,
     private router: Router,
-    private routeParams: RouteParams,
-    private videoService: VideoService
-  ) {
-    this.search = {
-      value: this.routeParams.get('search'),
-      field: <SearchField>this.routeParams.get('field')
-    };
-
-    this.sort = <SortField>this.routeParams.get('sort') || '-createdDate';
-  }
+    private route: ActivatedRoute,
+    private videoService: VideoService,
+    private searchService: SearchService
+  ) {}
 
   ngOnInit() {
     if (this.authService.isLoggedIn()) {
-      this.user = User.load();
+      this.user = AuthUser.load();
     }
 
-    this.getVideos();
+    // Subscribe to route changes
+    this.subActivatedRoute = this.route.params.subscribe(routeParams => {
+      this.loadRouteParams(routeParams);
+
+      // Update the search service component
+      this.searchService.updateSearch.next(this.search);
+      this.getVideos();
+    });
+
+    // Subscribe to search changes
+    this.subSearch = this.searchService.searchUpdated.subscribe(search => {
+      this.search = search;
+      // Reset pagination
+      this.pagination.currentPage = 1;
+
+      this.navigateToNewParams();
+    });
+  }
+
+  ngOnDestroy() {
+    this.subActivatedRoute.unsubscribe();
+    this.subSearch.unsubscribe();
   }
 
   getVideos() {
-    this.loading = true;
+    this.loading.next(true);
     this.videos = [];
 
+    this.changeDetector.detectChanges();
+
     let observable = null;
 
-    if (this.search.value !== null) {
+    if (this.search.value) {
       observable = this.videoService.searchVideos(this.search, this.pagination, this.sort);
     } else {
       observable = this.videoService.getVideos(this.pagination, this.sort);
@@ -71,35 +90,78 @@ export class VideoListComponent implements OnInit {
     observable.subscribe(
       ({ videos, totalVideos }) => {
         this.videos = videos;
-        this.pagination.total = totalVideos;
+        this.pagination.totalItems = totalVideos;
 
-        this.loading = false;
+        this.loading.next(false);
       },
-      error => alert(error)
+      error => this.notificationsService.error('Error', error.text)
     );
   }
 
-  noVideo() {
-    return !this.loading && this.videos.length === 0;
+  isThereNoVideo() {
+    return !this.loading.getValue() && this.videos.length === 0;
+  }
+
+  onPageChanged(event: any) {
+    // Be sure the current page is set
+    this.pagination.currentPage = event.page;
+
+    this.navigateToNewParams();
   }
 
   onRemoved(video: Video) {
-    this.videos.splice(this.videos.indexOf(video), 1);
+    this.notificationsService.success('Success', `Video ${video.name} deleted.`);
+    this.getVideos();
   }
 
   onSort(sort: SortField) {
     this.sort = sort;
 
+    this.navigateToNewParams();
+  }
+
+  private buildRouteParams() {
+    // There is always a sort and a current page
     const params: any = {
-      sort: this.sort
+      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;
     }
 
-    this.router.navigate(['VideosList', params]);
-    this.getVideos();
+    return params;
+  }
+
+  private loadRouteParams(routeParams) {
+    if (routeParams['search'] !== undefined) {
+      this.search = {
+        value: routeParams['search'],
+        field: <SearchField>routeParams['field']
+      };
+    } else {
+      this.search = {
+        value: '',
+        field: 'name'
+      };
+    }
+
+    this.sort = <SortField>routeParams['sort'] || '-createdAt';
+
+    if (routeParams['page'] !== undefined) {
+      this.pagination.currentPage = parseInt(routeParams['page']);
+    } else {
+      this.pagination.currentPage = 1;
+    }
+
+    this.changeDetector.detectChanges();
+  }
+
+  private navigateToNewParams() {
+    const routeParams = this.buildRouteParams();
+    this.router.navigate(['/videos/list', routeParams]);
   }
 }