Client: Update to Angular RC4

5 files changed, 78 insertions, 57 deletions

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 52abc3dc2..0e17ef2c4 100644
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/video-list.component.html
@@ -1,8 +1,8 @@
 <div class="row videos-info">
   <div class="col-md-9 videos-total-results">
-    {{ pagination.total }} videos
+    <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
 
-    <my-loader [loading]="loading"></my-loader>
+    <my-loader [loading]="loading | async"></my-loader>
   </div>
   <my-video-sort class="col-md-3" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
 </div>
@@ -14,7 +14,7 @@
   </my-video-miniature>
 </div>
 
-<pagination
-  [totalItems]="pagination.total" [itemsPerPage]="pagination.itemsPerPage" [maxSize]="6" [boundaryLinks]="true" [rotate]="false"
-  (ngModelChange)="getVideos()" [(ngModel)]="pagination.currentPage"
+<pagination *ngIf="pagination.totalItems !== null"
+  [totalItems]="pagination.totalItems" [itemsPerPage]="pagination.itemsPerPage" [maxSize]="6" [boundaryLinks]="true" [rotate]="false"
+  [(ngModel)]="pagination.currentPage" (pageChanged)="getVideos()"
 ></pagination>
diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/video-list.component.scss
index dc2c065d8..1f491a6c3 100644
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/video-list.component.scss
@@ -24,7 +24,7 @@
 }
 
 .videos-miniatures {
-  min-height: 600px;
+  min-height: 650px;
 
   my-video-miniature {
     transition: all 0.5s ease;
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 46263eb65..0ebf0ef5c 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -1,5 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-import { Router, ROUTER_DIRECTIVES, RouteSegment } from '@angular/router';
+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 { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
 
@@ -18,52 +20,64 @@ import { 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 ]
 })
 
-export class VideoListComponent implements OnInit {
-  loading = false;
+export class VideoListComponent implements OnInit, OnDestroy {
+  loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
   pagination: Pagination = {
     currentPage: 1,
     itemsPerPage: 9,
-    total: 0
+    totalItems: null
   };
   sort: SortField;
   user: User = null;
   videos: Video[] = [];
 
   private search: Search;
+  private sub: any;
 
   constructor(
     private authService: AuthService,
+    private changeDetector: ChangeDetectorRef,
     private router: Router,
-    private routeSegment: RouteSegment,
+    private route: ActivatedRoute,
     private videoService: VideoService,
-    private searchService: SearchService // Temporary
+    private searchService: SearchService
   ) {}
 
   ngOnInit() {
-    if (this.authService.isLoggedIn()) {
-      this.user = User.load();
-    }
+    this.sub = this.route.params.subscribe(routeParams => {
+      if (this.authService.isLoggedIn()) {
+        this.user = User.load();
+      }
 
-    this.search = {
-      value: this.routeSegment.getParam('search'),
-      field: <SearchField>this.routeSegment.getParam('field')
-    };
+      this.search = {
+        value: routeParams['search'],
+        field: <SearchField>routeParams['field']
+      };
 
-    // Temporary
-    this.searchChanged(this.search);
+      // Update the search service component
+      this.searchService.searchChanged.next(this.search);
 
-    this.sort = <SortField>this.routeSegment.getParam('sort') || '-createdDate';
+      this.sort = <SortField>routeParams['sort'] || '-createdDate';
+
+      this.getVideos();
+    });
+  }
 
-    this.getVideos();
+  ngOnDestroy() {
+    this.sub.unsubscribe();
   }
 
-  getVideos() {
-    this.loading = true;
+  getVideos(detectChanges = true) {
+    this.loading.next(true);
     this.videos = [];
+    this.pagination.currentPage = 1;
+
+    this.changeDetector.detectChanges();
 
     let observable = null;
 
@@ -76,9 +90,9 @@ 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)
     );
@@ -89,7 +103,7 @@ export class VideoListComponent implements OnInit {
   }
 
   onRemoved(video: Video) {
-    this.getVideos();
+    this.getVideos(false);
   }
 
   onSort(sort: SortField) {
@@ -106,8 +120,4 @@ export class VideoListComponent implements OnInit {
 
     this.router.navigate(['/videos/list', params]);
   }
-
-  searchChanged(search: Search) {
-    this.searchService.searchChanged.next(search);
-  }
 }
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index 92e19bb8b..3cf28620e 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -13,14 +13,16 @@
 
   <div class="video-miniature-informations">
     <span class="video-miniature-name-tags">
-      <a [routerLink]="['/videos/watch', video.id]" class="video-miniature-name">{{ video.name }}</a>
+      <a [routerLink]="['/videos/watch', video.id]" [attr.title] class="video-miniature-name">{{ video.name }}</a>
 
-      <span *ngFor="let tag of video.tags" class="video-miniature-tag">
-        <a [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">{{ tag }}</a>
-      </span>
+      <div class="video-miniature-tags">
+        <span *ngFor="let tag of video.tags" class="video-miniature-tag">
+          <a [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">{{ tag }}</a>
+        </span>
+      </div>
     </span>
 
-    <a [routerLink]="['/videos/list', { field: 'author', search: video.author }]" class="video-miniature-author">by {{ video.by }}</a>
-    <span class="video-miniature-created-date">on {{ video.createdDate | date:'short' }}</span>
+    <a [routerLink]="['/videos/list', { field: 'author', search: video.author }]" class="video-miniature-author">{{ video.by }}</a>
+    <span class="video-miniature-created-date">{{ video.createdDate | date:'short' }}</span>
   </div>
 </div>
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index 40d37b83f..3a096dabd 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -1,3 +1,5 @@
+@import "../../../sass/pre-customizations.scss";
+
 .video-miniature {
   margin-top: 30px;
   display: inline-block;
@@ -34,34 +36,40 @@
   }
 
   .video-miniature-informations {
-    margin-left: 3px;
     width: 200px;
 
     .video-miniature-name-tags {
       display: block;
 
       .video-miniature-name {
+        height: 23px;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         font-weight: bold;
+        transition: color 0.2s;
+        font-size: 15px;
 
         &:hover {
           text-decoration: none;
         }
-
-        &::after {
-          content: '\002022';
-          margin-left: 3px;
-        }
       }
 
-      .video-miniature-tag {
-        font-size: 12px;
-        cursor: pointer;
-        transition: opacity 0.5s;
-        position: relative;
-        top: -2px;
+      .video-miniature-tags {
+        // Fix for chrome when tags a long
+        width: 201px;
 
-        &:hover {
-          opacity: 0.9;
+        .video-miniature-tag {
+          font-size: 13px;
+          cursor: pointer;
+          position: relative;
+          top: -2px;
+
+          .label {
+            line-height: $line-height-base;
+            transition: background-color 0.2s;
+          }
         }
       }
     }
@@ -69,16 +77,17 @@
     .video-miniature-author, .video-miniature-created-date {
       display: block;
       margin-left: 1px;
-      font-size: 11px;
-      color: rgb(54, 118, 173);
+      font-size: 12px;
+      color: #337ab7;
+      opacity: 0.9;
     }
 
     .video-miniature-author {
-      transition: opacity 0.5s;
+      transition: color 0.2s;
 
       &:hover {
+        color: #23527c;
         text-decoration: none;
-        opacity: 0.9;
       }
     }
   }