Begin videos list new design

16 files changed, 126 insertions, 261 deletions

diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index 1704cf486..76bfbb515 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -184,7 +184,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
           this.notificationsService.success('Success', 'Video uploaded.')
 
           // Display all the videos once it's finished
-          this.router.navigate([ '/videos/list' ])
+          this.router.navigate([ '/videos/trending' ])
         }
       },
 
diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts
index ed2bb1657..a5a60364a 100644
--- a/client/src/app/videos/video-list/index.ts
+++ b/client/src/app/videos/video-list/index.ts
@@ -1,3 +1,4 @@
 export * from './my-videos.component'
-export * from './video-list.component'
+export * from './video-recently-added.component'
+export * from './video-trending.component'
 export * from './shared'
diff --git a/client/src/app/videos/video-list/my-videos.component.ts b/client/src/app/videos/video-list/my-videos.component.ts
index 648741a40..146db8262 100644
--- a/client/src/app/videos/video-list/my-videos.component.ts
+++ b/client/src/app/videos/video-list/my-videos.component.ts
@@ -27,7 +27,7 @@ export class MyVideosComponent extends AbstractVideoList implements OnInit, OnDe
   }
 
   ngOnDestroy () {
-    this.subActivatedRoute.unsubscribe()
+    super.ngOnDestroy()
   }
 
   getVideosObservable () {
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.html b/client/src/app/videos/video-list/shared/abstract-video-list.html
index 680fba3f5..ab5530e68 100644
--- a/client/src/app/videos/video-list/shared/abstract-video-list.html
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.html
@@ -1,20 +1,8 @@
-<div class="row">
-  <div class="content-padding">
-    <div class="videos-info">
-      <div class="col-md-9 col-xs-5 videos-total-results">
-        <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
-
-        <my-loader [loading]="loading | async"></my-loader>
-      </div>
-
-      <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
-    </div>
-  </div>
+<div class="title-page">
+  {{ titlePage }}
 </div>
 
-<div class="content-padding videos-miniatures">
-  <div class="no-video" *ngIf="isThereNoVideo()">There is no video.</div>
-
+<div class="videos-miniatures">
   <my-video-miniature
     class="ng-animate"
     *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort"
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.scss b/client/src/app/videos/video-list/shared/abstract-video-list.scss
index 4b4409602..de174802b 100644
--- a/client/src/app/videos/video-list/shared/abstract-video-list.scss
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.scss
@@ -17,20 +17,6 @@
   }
 }
 
-.videos-miniatures {
-  text-align: center;
-  padding-top: 0;
-
-  my-video-miniature {
-    text-align: left;
-  }
-
-  .no-video {
-    margin-top: 50px;
-    text-align: center;
-  }
-}
-
 pagination {
   display: block;
   text-align: center;
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.ts b/client/src/app/videos/video-list/shared/abstract-video-list.ts
index 87d5bc48a..262ea4e21 100644
--- a/client/src/app/videos/video-list/shared/abstract-video-list.ts
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.ts
@@ -1,25 +1,19 @@
 import { OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { Subscription } from 'rxjs/Subscription'
-import { BehaviorSubject } from 'rxjs/BehaviorSubject'
-import { Observable } from 'rxjs/Observable'
 
 import { NotificationsService } from 'angular2-notifications'
+import { Observable } from 'rxjs/Observable'
+import { Subscription } from 'rxjs/Subscription'
 
-import {
-  SortField,
-  Video,
-  VideoPagination
-} from '../../shared'
+import { SortField, Video, VideoPagination } from '../../shared'
 
 export abstract class AbstractVideoList implements OnInit, OnDestroy {
-  loading: BehaviorSubject<boolean> = new BehaviorSubject(false)
   pagination: VideoPagination = {
     currentPage: 1,
     itemsPerPage: 25,
     totalItems: null
   }
-  sort: SortField
+  sort: SortField = '-createdAt'
   videos: Video[] = []
 
   protected notificationsService: NotificationsService
@@ -28,6 +22,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
 
   protected subActivatedRoute: Subscription
 
+  abstract titlePage: string
   abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
 
   ngOnInit () {
@@ -44,7 +39,6 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   }
 
   getVideos () {
-    this.loading.next(true)
     this.videos = []
 
     const observable = this.getVideosObservable()
@@ -53,17 +47,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
       ({ videos, totalVideos }) => {
         this.videos = videos
         this.pagination.totalItems = totalVideos
-
-        this.loading.next(false)
       },
       error => this.notificationsService.error('Error', error.text)
     )
   }
 
-  isThereNoVideo () {
-    return !this.loading.getValue() && this.videos.length === 0
-  }
-
   onPageChanged (event: { page: number }) {
     // Be sure the current page is set
     this.pagination.currentPage = event.page
@@ -71,12 +59,6 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
     this.navigateToNewParams()
   }
 
-  onSort (sort: SortField) {
-    this.sort = sort
-
-    this.navigateToNewParams()
-  }
-
   protected buildRouteParams () {
     // There is always a sort and a current page
     const params = {
diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts
index d8f73bcda..170ca4832 100644
--- a/client/src/app/videos/video-list/shared/index.ts
+++ b/client/src/app/videos/video-list/shared/index.ts
@@ -1,3 +1,2 @@
 export * from './abstract-video-list'
 export * from './video-miniature.component'
-export * from './video-sort.component'
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.html b/client/src/app/videos/video-list/shared/video-miniature.component.html
index 6bbd29666..aea85b6c6 100644
--- a/client/src/app/videos/video-list/shared/video-miniature.component.html
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.html
@@ -6,8 +6,7 @@
     <img [attr.src]="video.thumbnailUrl" alt="video thumbnail" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }" />
 
     <div class="video-miniature-thumbnail-overlay">
-      <span class="video-miniature-thumbnail-overlay-views">{{ video.views }} views</span>
-      <span class="video-miniature-thumbnail-overlay-duration">{{ video.durationLabel }}</span>
+      {{ video.durationLabel }}
     </div>
   </a>
 
@@ -21,13 +20,7 @@
       </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, sort: currentSort }]" class="label label-primary">{{ tag }}</a>
-      </span>
-    </div>
-
-    <a [routerLink]="['/videos/list', { field: 'account', search: video.account, sort: currentSort }]" class="video-miniature-account">{{ video.by }}</a>
-    <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
+    <span class="video-miniature-created-at-views">{{ video.createdAt | fromNow }} - {{ video.views | numberFormatter }} views</span>
+    <span class="video-miniature-account">{{ video.by }}</span>
   </div>
 </div>
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss
index 507ace098..ed15864d9 100644
--- a/client/src/app/videos/video-list/shared/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss
@@ -1,14 +1,14 @@
 .video-miniature {
-  margin: 15px 10px;
   display: inline-block;
-  position: relative;
-  height: 190px;
+  padding-right: 15px;
+  margin-bottom: 30px;
+  height: 175px;
   vertical-align: top;
 
   .video-miniature-thumbnail {
     display: inline-block;
     position: relative;
-    border-radius: 3px;
+    border-radius: 4px;
     overflow: hidden;
 
     &:hover {
@@ -22,38 +22,33 @@
 
     .video-miniature-thumbnail-overlay {
       position: absolute;
-      right: 0px;
-      bottom: 0px;
+      right: 5px;
+      bottom: 5px;
       display: inline-block;
       background-color: rgba(0, 0, 0, 0.7);
       color: #fff;
-      padding: 3px 5px;
-      font-size: 11px;
-      font-weight: bold;
-      width: 100%;
-
-      .video-miniature-thumbnail-overlay-views {
-
-      }
-
-      .video-miniature-thumbnail-overlay-duration {
-        float: right;
-      }
+      font-size: 12px;
+      font-weight: $font-bold;
+      border-radius: 3px;
+      padding: 0 5px;
     }
   }
 
   .video-miniature-information {
     width: 200px;
+    margin-top: 2px;
+    line-height: normal;
 
     .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;
+      font-size: 16px;
+      font-weight: $font-semibold;
+      color: #000;
 
       &:hover {
         text-decoration: none;
@@ -63,39 +58,16 @@
         filter: blur(3px);
         padding-left: 4px;
       }
-
-      .video-miniature-tags {
-        // Fix for chrome when tags are long
-        width: 201px;
-
-        .video-miniature-tag {
-          font-size: 13px;
-          cursor: pointer;
-          position: relative;
-          top: -2px;
-
-          .label {
-            transition: background-color 0.2s;
-          }
-        }
-      }
     }
 
-    .video-miniature-account, .video-miniature-created-at {
+    .video-miniature-created-at-views {
       display: block;
-      margin-left: 1px;
-      font-size: 11px;
-      color: $video-miniature-other-infos;
-      opacity: 0.9;
+      font-size: 13px;
     }
 
     .video-miniature-account {
-      transition: color 0.2s;
-
-      &:hover {
-        color: #23527c;
-        text-decoration: none;
-      }
+      font-size: 12px;
+      color: #585858;
     }
   }
 }
diff --git a/client/src/app/videos/video-list/shared/video-sort.component.html b/client/src/app/videos/video-list/shared/video-sort.component.html
deleted file mode 100644
index 3bece0b22..000000000
--- a/client/src/app/videos/video-list/shared/video-sort.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<select class="form-control input-sm" [(ngModel)]="currentSort" (ngModelChange)="onSortChange()">
-  <option *ngFor="let choice of choiceKeys" [value]="choice">
-    {{ getStringChoice(choice) }}
-  </option>
-</select>
diff --git a/client/src/app/videos/video-list/shared/video-sort.component.ts b/client/src/app/videos/video-list/shared/video-sort.component.ts
deleted file mode 100644
index 8aa89d32b..000000000
--- a/client/src/app/videos/video-list/shared/video-sort.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
-
-import { SortField } from '../../shared'
-
-@Component({
-  selector: 'my-video-sort',
-  templateUrl: './video-sort.component.html'
-})
-
-export class VideoSortComponent {
-  @Output() sort = new EventEmitter<any>()
-
-  @Input() currentSort: SortField
-
-  sortChoices: { [ P in SortField ]: string } = {
-    'name': 'Name - Asc',
-    '-name': 'Name - Desc',
-    'duration': 'Duration - Asc',
-    '-duration': 'Duration - Desc',
-    'createdAt': 'Created Date - Asc',
-    '-createdAt': 'Created Date - Desc',
-    'views': 'Views - Asc',
-    '-views': 'Views - Desc',
-    'likes': 'Likes - Asc',
-    '-likes': 'Likes - Desc'
-  }
-
-  get choiceKeys () {
-    return Object.keys(this.sortChoices)
-  }
-
-  getStringChoice (choiceKey: SortField) {
-    return this.sortChoices[choiceKey]
-  }
-
-  onSortChange () {
-    this.sort.emit(this.currentSort)
-  }
-}
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
deleted file mode 100644
index 784162679..000000000
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { Subscription } from 'rxjs/Subscription'
-
-import { NotificationsService } from 'angular2-notifications'
-
-import { VideoService } from '../shared'
-import { Search, SearchField, SearchService } from '../../shared'
-import { AbstractVideoList } from './shared'
-
-@Component({
-  selector: 'my-videos-list',
-  styleUrls: [ './shared/abstract-video-list.scss' ],
-  templateUrl: './shared/abstract-video-list.html'
-})
-export class VideoListComponent extends AbstractVideoList implements OnInit, OnDestroy {
-  private search: Search
-  private subSearch: Subscription
-
-  constructor (
-    protected router: Router,
-    protected route: ActivatedRoute,
-    protected notificationsService: NotificationsService,
-    private videoService: VideoService,
-    private searchService: SearchService
-  ) {
-    super()
-  }
-
-  ngOnInit () {
-    // 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 () {
-    super.ngOnDestroy()
-
-    this.subSearch.unsubscribe()
-  }
-
-  getVideosObservable () {
-    let observable = null
-    if (this.search.value) {
-      observable = this.videoService.searchVideos(this.search, this.pagination, this.sort)
-    } else {
-      observable = this.videoService.getVideos(this.pagination, this.sort)
-    }
-
-    return observable
-  }
-
-  protected buildRouteParams () {
-    const params = super.buildRouteParams()
-
-    // Maybe there is a search
-    if (this.search.value) {
-      params['field'] = this.search.field
-      params['search'] = this.search.value
-    }
-
-    return params
-  }
-
-  protected loadRouteParams (routeParams: { [ key: string ]: any }) {
-    super.loadRouteParams(routeParams)
-
-    if (routeParams['search'] !== undefined) {
-      this.search = {
-        value: routeParams['search'],
-        field: routeParams['field'] as SearchField
-      }
-    } else {
-      this.search = {
-        value: '',
-        field: 'name'
-      }
-    }
-  }
-}
diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts
new file mode 100644
index 000000000..dbba264df
--- /dev/null
+++ b/client/src/app/videos/video-list/video-recently-added.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import { VideoService } from '../shared'
+import { AbstractVideoList } from './shared'
+
+@Component({
+  selector: 'my-videos-recently-added',
+  styleUrls: [ './shared/abstract-video-list.scss' ],
+  templateUrl: './shared/abstract-video-list.html'
+})
+export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  titlePage = 'Recently added'
+
+  constructor (protected router: Router,
+               protected route: ActivatedRoute,
+               protected notificationsService: NotificationsService,
+               private videoService: VideoService) {
+    super()
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+  }
+
+  ngOnDestroy () {
+    super.ngOnDestroy()
+  }
+
+  getVideosObservable () {
+    return this.videoService.getVideos(this.pagination, this.sort)
+  }
+}
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
new file mode 100644
index 000000000..b97966c12
--- /dev/null
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import { VideoService } from '../shared'
+import { AbstractVideoList } from './shared'
+
+@Component({
+  selector: 'my-videos-trending',
+  styleUrls: [ './shared/abstract-video-list.scss' ],
+  templateUrl: './shared/abstract-video-list.html'
+})
+export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  titlePage = 'Trending'
+
+  constructor (protected router: Router,
+               protected route: ActivatedRoute,
+               protected notificationsService: NotificationsService,
+               private videoService: VideoService) {
+    super()
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+  }
+
+  ngOnDestroy () {
+    super.ngOnDestroy()
+  }
+
+  getVideosObservable () {
+    return this.videoService.getVideos(this.pagination, this.sort)
+  }
+}
diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts
index 3ca3e5486..1f894df7a 100644
--- a/client/src/app/videos/videos-routing.module.ts
+++ b/client/src/app/videos/videos-routing.module.ts
@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-
 import { MetaGuard } from '@ngx-meta/core'
-
-import { VideoListComponent, MyVideosComponent } from './video-list'
+import { MyVideosComponent } from './video-list'
+import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
+import { VideoTrendingComponent } from './video-list/video-trending.component'
 import { VideosComponent } from './videos.component'
 
 const videosRoutes: Routes = [
@@ -13,6 +13,11 @@ const videosRoutes: Routes = [
     canActivateChild: [ MetaGuard ],
     children: [
       {
+        path: 'list',
+        pathMatch: 'full',
+        redirectTo: 'recently-added'
+      },
+      {
         path: 'mine',
         component: MyVideosComponent,
         data: {
@@ -22,11 +27,20 @@ const videosRoutes: Routes = [
         }
       },
       {
-        path: 'list',
-        component: VideoListComponent,
+        path: 'trending',
+        component: VideoTrendingComponent,
+        data: {
+          meta: {
+            title: 'Trending videos'
+          }
+        }
+      },
+      {
+        path: 'recently-added',
+        component: VideoRecentlyAddedComponent,
         data: {
           meta: {
-            title: 'Videos list'
+            title: 'Recently added videos'
           }
         }
       },
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
index 4f3054c3a..93193000c 100644
--- a/client/src/app/videos/videos.module.ts
+++ b/client/src/app/videos/videos.module.ts
@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core'
 import { SharedModule } from '../shared'
 import { VideoService } from './shared'
-import { MyVideosComponent, VideoListComponent, VideoMiniatureComponent, VideoSortComponent } from './video-list'
+import { MyVideosComponent, VideoMiniatureComponent } from './video-list'
+import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
+import { VideoTrendingComponent } from './video-list/video-trending.component'
 import { VideosRoutingModule } from './videos-routing.module'
 import { VideosComponent } from './videos.component'
 
@@ -14,10 +16,10 @@ import { VideosComponent } from './videos.component'
   declarations: [
     VideosComponent,
 
-    VideoListComponent,
+    VideoTrendingComponent,
+    VideoRecentlyAddedComponent,
     MyVideosComponent,
-    VideoMiniatureComponent,
-    VideoSortComponent
+    VideoMiniatureComponent
   ],
 
   exports: [