11 files changed, 385 insertions, 0 deletions

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
new file mode 100644
index 000000000..680fba3f5
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.html
@@ -0,0 +1,28 @@
+<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>
+
+<div class="content-padding videos-miniatures">
+  <div class="no-video" *ngIf="isThereNoVideo()">There is no video.</div>
+
+  <my-video-miniature
+    class="ng-animate"
+    *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort"
+  >
+  </my-video-miniature>
+</div>
+
+<pagination *ngIf="pagination.totalItems !== null && pagination.totalItems !== 0"
+  [totalItems]="pagination.totalItems" [itemsPerPage]="pagination.itemsPerPage" [maxSize]="6" [boundaryLinks]="true" [rotate]="false"
+  [(ngModel)]="pagination.currentPage" (pageChanged)="onPageChanged($event)"
+></pagination>
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
new file mode 100644
index 000000000..4b4409602
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.scss
@@ -0,0 +1,37 @@
+.videos-info {
+  @media screen and (max-width: 400px) {
+    margin-left: 0;
+  }
+
+  border-bottom: 1px solid #f1f1f1;
+  height: 40px;
+  line-height: 40px;
+
+  .videos-total-results {
+    font-size: 13px;
+  }
+
+  my-loader {
+    display: inline-block;
+    margin-left: 5px;
+  }
+}
+
+.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
new file mode 100644
index 000000000..87d5bc48a
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.ts
@@ -0,0 +1,104 @@
+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 {
+  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
+  videos: Video[] = []
+
+  protected notificationsService: NotificationsService
+  protected router: Router
+  protected route: ActivatedRoute
+
+  protected subActivatedRoute: Subscription
+
+  abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
+
+  ngOnInit () {
+    // Subscribe to route changes
+    this.subActivatedRoute = this.route.params.subscribe(routeParams => {
+      this.loadRouteParams(routeParams)
+
+      this.getVideos()
+    })
+  }
+
+  ngOnDestroy () {
+    this.subActivatedRoute.unsubscribe()
+  }
+
+  getVideos () {
+    this.loading.next(true)
+    this.videos = []
+
+    const observable = this.getVideosObservable()
+
+    observable.subscribe(
+      ({ 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
+
+    this.navigateToNewParams()
+  }
+
+  onSort (sort: SortField) {
+    this.sort = sort
+
+    this.navigateToNewParams()
+  }
+
+  protected buildRouteParams () {
+    // There is always a sort and a current page
+    const params = {
+      sort: this.sort,
+      page: this.pagination.currentPage
+    }
+
+    return params
+  }
+
+  protected loadRouteParams (routeParams: { [ key: string ]: any }) {
+    this.sort = routeParams['sort'] as SortField || '-createdAt'
+
+    if (routeParams['page'] !== undefined) {
+      this.pagination.currentPage = parseInt(routeParams['page'], 10)
+    } else {
+      this.pagination.currentPage = 1
+    }
+  }
+
+  protected navigateToNewParams () {
+    const routeParams = this.buildRouteParams()
+    this.router.navigate([ '/videos/list', routeParams ])
+  }
+}
diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts
new file mode 100644
index 000000000..2c9804e6d
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/index.ts
@@ -0,0 +1,4 @@
+export * from './abstract-video-list'
+export * from './loader.component'
+export * from './video-miniature.component'
+export * from './video-sort.component'
diff --git a/client/src/app/videos/video-list/shared/loader.component.html b/client/src/app/videos/video-list/shared/loader.component.html
new file mode 100644
index 000000000..38d06950e
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/loader.component.html
@@ -0,0 +1,3 @@
+<div id="video-loading" *ngIf="loading">
+  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
diff --git a/client/src/app/videos/video-list/shared/loader.component.ts b/client/src/app/videos/video-list/shared/loader.component.ts
new file mode 100644
index 000000000..f37d70c85
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/loader.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-loader',
+  styleUrls: [ ],
+  templateUrl: './loader.component.html'
+})
+
+export class LoaderComponent {
+  @Input() loading: boolean
+}
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
new file mode 100644
index 000000000..abe87025f
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.html
@@ -0,0 +1,33 @@
+<div class="video-miniature">
+  <a
+    [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.description"
+    class="video-miniature-thumbnail"
+  >
+    <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>
+    </div>
+  </a>
+
+  <div class="video-miniature-information">
+    <span class="video-miniature-name">
+      <a
+        class="video-miniature-name"
+        [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }"
+      >
+          {{ video.name }}
+      </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: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
+    <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</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
new file mode 100644
index 000000000..066792d10
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss
@@ -0,0 +1,102 @@
+.video-miniature {
+  margin-top: 30px;
+  display: inline-block;
+  position: relative;
+  height: 190px;
+  width: 220px;
+  vertical-align: top;
+
+  .video-miniature-thumbnail {
+    display: inline-block;
+    position: relative;
+    border-radius: 3px;
+    overflow: hidden;
+
+    &:hover {
+      text-decoration: none !important;
+    }
+
+    img.blur-filter {
+      filter: blur(5px);
+      transform : scale(1.03);
+    }
+
+    .video-miniature-thumbnail-overlay {
+      position: absolute;
+      right: 0px;
+      bottom: 0px;
+      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;
+      }
+    }
+  }
+
+  .video-miniature-information {
+    width: 200px;
+
+    .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;
+      }
+
+      &.blur-filter {
+        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-author, .video-miniature-created-at {
+      display: block;
+      margin-left: 1px;
+      font-size: 11px;
+      color: $video-miniature-other-infos;
+      opacity: 0.9;
+    }
+
+    .video-miniature-author {
+      transition: color 0.2s;
+
+      &:hover {
+        color: #23527c;
+        text-decoration: none;
+      }
+    }
+  }
+}
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.ts b/client/src/app/videos/video-list/shared/video-miniature.component.ts
new file mode 100644
index 000000000..e5a87907b
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core'
+
+import { SortField, Video } from '../../shared'
+import { User } from '../../../shared'
+
+@Component({
+  selector: 'my-video-miniature',
+  styleUrls: [ './video-miniature.component.scss' ],
+  templateUrl: './video-miniature.component.html'
+})
+export class VideoMiniatureComponent {
+  @Input() currentSort: SortField
+  @Input() user: User
+  @Input() video: Video
+
+  isVideoNSFWForThisUser () {
+    return this.video.isVideoNSFWForUser(this.user)
+  }
+}
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
new file mode 100644
index 000000000..3bece0b22
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/video-sort.component.html
@@ -0,0 +1,5 @@
+<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
new file mode 100644
index 000000000..8aa89d32b
--- /dev/null
+++ b/client/src/app/videos/video-list/shared/video-sort.component.ts
@@ -0,0 +1,39 @@
+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)
+  }
+}