Client: fix loading server configurations

[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 0ebf0ef5c459016e9a2bc9edafe7f25366eb311f..4714ce01eb690c77cd50d9c4536569fb1d15d6f2 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,45 +1,41 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { AsyncPipe } from '@angular/common';
-import { ActivatedRoute, Router, ROUTER_DIRECTIVES } 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 { 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 { SearchService } from '../../shared';
+  VideoService,
+  VideoPagination
+} from '../shared'
+import { AuthService, AuthUser } from '../../core'
+import { Search, SearchField, SearchService } from '../../shared'
 
 @Component({
   selector: 'my-videos-list',
-  styles: [ require('./video-list.component.scss') ],
-  pipes: [ AsyncPipe ],
-  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, OnDestroy {
-  loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
-  pagination: Pagination = {
+  loading: BehaviorSubject<boolean> = new BehaviorSubject(false)
+  pagination: VideoPagination = {
     currentPage: 1,
-    itemsPerPage: 9,
+    itemsPerPage: 25,
     totalItems: null
-  };
-  sort: SortField;
-  user: User = null;
-  videos: Video[] = [];
+  }
+  sort: SortField
+  user: AuthUser = null
+  videos: Video[] = []
 
-  private search: Search;
-  private sub: any;
+  private search: Search
+  private subActivatedRoute: Subscription
+  private subSearch: Subscription
 
-  constructor(
+  constructor (
+    private notificationsService: NotificationsService,
     private authService: AuthService,
     private changeDetector: ChangeDetectorRef,
     private router: Router,
@@ -48,76 +44,114 @@ export class VideoListComponent implements OnInit, OnDestroy {
     private searchService: SearchService
   ) {}
 
-  ngOnInit() {
-    this.sub = this.route.params.subscribe(routeParams => {
-      if (this.authService.isLoggedIn()) {
-        this.user = User.load();
-      }
+  ngOnInit () {
+    if (this.authService.isLoggedIn()) {
+      this.user = AuthUser.load()
+    }
 
-      this.search = {
-        value: routeParams['search'],
-        field: <SearchField>routeParams['field']
-      };
+    // Subscribe to route changes
+    this.subActivatedRoute = this.route.params.subscribe(routeParams => {
+      this.loadRouteParams(routeParams)
 
       // Update the search service component
-      this.searchService.searchChanged.next(this.search);
-
-      this.sort = <SortField>routeParams['sort'] || '-createdDate';
-
-      this.getVideos();
-    });
+      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.sub.unsubscribe();
+  ngOnDestroy () {
+    this.subActivatedRoute.unsubscribe()
+    this.subSearch.unsubscribe()
   }
 
-  getVideos(detectChanges = true) {
-    this.loading.next(true);
-    this.videos = [];
-    this.pagination.currentPage = 1;
-
-    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 => 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
   }
 
-  onRemoved(video: Video) {
-    this.getVideos(false);
+  onPageChanged (event: { page: number }) {
+    // Be sure the current page is set
+    this.pagination.currentPage = event.page
+
+    this.navigateToNewParams()
   }
 
-  onSort(sort: SortField) {
-    this.sort = sort;
+  onSort (sort: SortField) {
+    this.sort = sort
 
-    const params: any = {
-      sort: this.sort
-    };
+    this.navigateToNewParams()
+  }
 
+  private buildRouteParams () {
+    // There is always a sort and a current page
+    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
     }
 
-    this.router.navigate(['/videos/list', params]);
+    return params
+  }
+
+  private loadRouteParams (routeParams: { [ key: string ]: any }) {
+    if (routeParams['search'] !== undefined) {
+      this.search = {
+        value: routeParams['search'],
+        field: routeParams['field'] as SearchField
+      }
+    } else {
+      this.search = {
+        value: '',
+        field: 'name'
+      }
+    }
+
+    this.sort = routeParams['sort'] as SortField || '-createdAt'
+
+    if (routeParams['page'] !== undefined) {
+      this.pagination.currentPage = parseInt(routeParams['page'], 10)
+    } else {
+      this.pagination.currentPage = 1
+    }
+  }
+
+  private navigateToNewParams () {
+    const routeParams = this.buildRouteParams()
+    this.router.navigate([ '/videos/list', routeParams ])
   }
 }