9 files changed, 11 insertions, 190 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
deleted file mode 100644
index bd4f6b1f8..000000000
--- a/client/src/app/videos/video-list/shared/abstract-video-list.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="margin-content">
-  <div class="title-page title-page-single">
-    {{ titlePage }}
-  </div>
-
-  <div
-    infiniteScroll
-    [infiniteScrollUpDistance]="1.5"
-    [infiniteScrollDistance]="0.5"
-    (scrolled)="onNearOfBottom()"
-    (scrolledUp)="onNearOfTop()"
-  >
-    <my-video-miniature
-      class="ng-animate"
-      *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort"
-    >
-    </my-video-miniature>
-  </div>
-</div>
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
deleted file mode 100644
index e69de29bb..000000000
--- a/client/src/app/videos/video-list/shared/abstract-video-list.scss
+++ /dev/null
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
deleted file mode 100644
index a684ffef4..000000000
--- a/client/src/app/videos/video-list/shared/abstract-video-list.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import { OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-
-import { NotificationsService } from 'angular2-notifications'
-import { Observable } from 'rxjs/Observable'
-import { Subscription } from 'rxjs/Subscription'
-
-import { SortField, Video, VideoPagination } from '../../shared'
-
-export abstract class AbstractVideoList implements OnInit, OnDestroy {
-  pagination: VideoPagination = {
-    currentPage: 1,
-    itemsPerPage: 25,
-    totalItems: null
-  }
-  sort: SortField = '-createdAt'
-  videos: Video[] = []
-
-  protected notificationsService: NotificationsService
-  protected router: Router
-  protected route: ActivatedRoute
-  protected subActivatedRoute: Subscription
-
-  protected abstract currentRoute: string
-
-  abstract titlePage: string
-  private loadedPages: { [ id: number ]: boolean } = {}
-
-  abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
-
-  ngOnInit () {
-    // Subscribe to route changes
-    const routeParams = this.route.snapshot.params
-    this.loadRouteParams(routeParams)
-    this.loadMoreVideos('after')
-  }
-
-  ngOnDestroy () {
-    if (this.subActivatedRoute) {
-      this.subActivatedRoute.unsubscribe()
-    }
-  }
-
-  onNearOfTop () {
-    if (this.pagination.currentPage > 1) {
-      this.previousPage()
-    }
-  }
-
-  onNearOfBottom () {
-    if (this.hasMoreVideos()) {
-      this.nextPage()
-    }
-  }
-
-  loadMoreVideos (where: 'before' | 'after') {
-    if (this.loadedPages[this.pagination.currentPage] === true) return
-
-    const observable = this.getVideosObservable()
-
-    observable.subscribe(
-      ({ videos, totalVideos }) => {
-        this.loadedPages[this.pagination.currentPage] = true
-        this.pagination.totalItems = totalVideos
-
-        if (where === 'before') {
-          this.videos = videos.concat(this.videos)
-        } else {
-          this.videos = this.videos.concat(videos)
-        }
-      },
-      error => this.notificationsService.error('Error', error.text)
-    )
-  }
-
-  protected hasMoreVideos () {
-    if (!this.pagination.totalItems) return true
-
-    const maxPage = this.pagination.totalItems/this.pagination.itemsPerPage
-    return maxPage > this.pagination.currentPage
-  }
-
-  protected previousPage () {
-    this.pagination.currentPage--
-
-    this.setNewRouteParams()
-    this.loadMoreVideos('before')
-  }
-
-  protected nextPage () {
-    this.pagination.currentPage++
-
-    this.setNewRouteParams()
-    this.loadMoreVideos('after')
-  }
-
-  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 setNewRouteParams () {
-    const routeParams = this.buildRouteParams()
-    this.router.navigate([ this.currentRoute, routeParams ])
-  }
-}
diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts
index 170ca4832..2778f2d9e 100644
--- a/client/src/app/videos/video-list/shared/index.ts
+++ b/client/src/app/videos/video-list/shared/index.ts
@@ -1,2 +1 @@
-export * from './abstract-video-list'
 export * from './video-miniature.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 aea85b6c6..f2756ca3d 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
@@ -1,14 +1,5 @@
 <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">
-      {{ video.durationLabel }}
-    </div>
-  </a>
+  <my-video-thumbnail [video]="video" [nsfw]="isVideoNSFWForThisUser()"></my-video-thumbnail>
 
   <div class="video-miniature-information">
     <span class="video-miniature-name">
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 ed15864d9..658d7af9d 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
@@ -5,35 +5,6 @@
   height: 175px;
   vertical-align: top;
 
-  .video-miniature-thumbnail {
-    display: inline-block;
-    position: relative;
-    border-radius: 4px;
-    overflow: hidden;
-
-    &:hover {
-      text-decoration: none !important;
-    }
-
-    img.blur-filter {
-      filter: blur(5px);
-      transform : scale(1.03);
-    }
-
-    .video-miniature-thumbnail-overlay {
-      position: absolute;
-      right: 5px;
-      bottom: 5px;
-      display: inline-block;
-      background-color: rgba(0, 0, 0, 0.7);
-      color: #fff;
-      font-size: 12px;
-      font-weight: $font-bold;
-      border-radius: 3px;
-      padding: 0 5px;
-    }
-  }
-
   .video-miniature-information {
     width: 200px;
     margin-top: 2px;
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
index e5a87907b..e8fc8e911 100644
--- a/client/src/app/videos/video-list/shared/video-miniature.component.ts
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core'
-
-import { SortField, Video } from '../../shared'
 import { User } from '../../../shared'
+import { SortField } from '../../../shared/video/sort-field.type'
+import { Video } from '../../../shared/video/video.model'
 
 @Component({
   selector: 'my-video-miniature',
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
index 9bf69bd78..d48804414 100644
--- a/client/src/app/videos/video-list/video-recently-added.component.ts
+++ b/client/src/app/videos/video-list/video-recently-added.component.ts
@@ -1,13 +1,13 @@
 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'
+import { VideoService } from '../../shared/video/video.service'
+import { AbstractVideoList } from '../../shared/video/abstract-video-list'
 
 @Component({
   selector: 'my-videos-recently-added',
-  styleUrls: [ './shared/abstract-video-list.scss' ],
-  templateUrl: './shared/abstract-video-list.html'
+  styleUrls: [ '../../shared/video/abstract-video-list.scss' ],
+  templateUrl: '../../shared/video/abstract-video-list.html'
 })
 export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy {
   titlePage = 'Recently added'
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
index a1df68711..9108289c9 100644
--- a/client/src/app/videos/video-list/video-trending.component.ts
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -1,13 +1,13 @@
 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'
+import { VideoService } from '../../shared/video/video.service'
+import { AbstractVideoList } from 'app/shared/video/abstract-video-list'
 
 @Component({
   selector: 'my-videos-trending',
-  styleUrls: [ './shared/abstract-video-list.scss' ],
-  templateUrl: './shared/abstract-video-list.html'
+  styleUrls: [ '../../shared/video/abstract-video-list.scss' ],
+  templateUrl: '../../shared/video/abstract-video-list.html'
 })
 export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy {
   titlePage = 'Trending'