Begin videos of an account

34 files changed, 179 insertions, 139 deletions

diff --git a/client/src/app/account/account-routing.module.ts b/client/src/app/account/account-routing.module.ts
index 2e9de1cfb..070b9b5c5 100644
--- a/client/src/app/account/account-routing.module.ts
+++ b/client/src/app/account/account-routing.module.ts
@@ -6,6 +6,7 @@ import { MetaGuard } from '@ngx-meta/core'
 import { LoginGuard } from '../core'
 import { AccountComponent } from './account.component'
 import { AccountSettingsComponent } from './account-settings/account-settings.component'
+import { AccountVideosComponent } from './account-videos/account-videos.component'
 
 const accountRoutes: Routes = [
   {
@@ -22,15 +23,15 @@ const accountRoutes: Routes = [
           }
         }
       },
-      // {
-      //   path: 'videos',
-      //   component: AccountVideosComponent,
-      //   data: {
-      //     meta: {
-      //       title: 'Account videos'
-      //     }
-      //   }
-      // }
+      {
+        path: 'videos',
+        component: AccountVideosComponent,
+        data: {
+          meta: {
+            title: 'Account videos'
+          }
+        }
+      }
     ]
   }
 ]
diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html
new file mode 100644
index 000000000..6c8ac4508
--- /dev/null
+++ b/client/src/app/account/account-videos/account-videos.component.html
@@ -0,0 +1,9 @@
+<div
+  infiniteScroll
+  [infiniteScrollDistance]="0.5"
+  (scrolled)="onNearOfBottom()"
+>
+  <div *ngFor="let video of videos">
+    <my-video-thumbnail [video]="video"></my-video-thumbnail>
+  </div>
+</div>
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.scss b/client/src/app/account/account-videos/account-videos.component.scss
index e69de29bb..e69de29bb 100644
--- a/client/src/app/videos/video-list/shared/abstract-video-list.scss
+++ b/client/src/app/account/account-videos/account-videos.component.scss
diff --git a/client/src/app/account/account-videos/account-videos.component.ts b/client/src/app/account/account-videos/account-videos.component.ts
new file mode 100644
index 000000000..ff945825d
--- /dev/null
+++ b/client/src/app/account/account-videos/account-videos.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { AbstractVideoList } from '../../shared/video/abstract-video-list'
+import { ActivatedRoute } from '@angular/router'
+import { Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import { VideoService } from '../../shared/video/video.service'
+
+@Component({
+  selector: 'my-account-videos',
+  templateUrl: './account-videos.component.html',
+  styleUrls: [ './account-videos.component.scss' ]
+})
+export class AccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  titlePage = 'My videos'
+  currentRoute = '/account/videos'
+
+  constructor (protected router: Router,
+               protected route: ActivatedRoute,
+               protected notificationsService: NotificationsService,
+               private videoService: VideoService) {
+    super()
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+  }
+
+  ngOnDestroy () {
+    super.ngOnDestroy()
+  }
+
+  getVideosObservable () {
+    return this.videoService.getMyVideos(this.pagination, this.sort)
+  }
+}
diff --git a/client/src/app/account/account.module.ts b/client/src/app/account/account.module.ts
index ff444ddeb..020199e23 100644
--- a/client/src/app/account/account.module.ts
+++ b/client/src/app/account/account.module.ts
@@ -6,6 +6,7 @@ import { AccountDetailsComponent } from './account-settings/account-details/acco
 import { AccountSettingsComponent } from './account-settings/account-settings.component'
 import { AccountComponent } from './account.component'
 import { AccountService } from './account.service'
+import { AccountVideosComponent } from './account-videos/account-videos.component'
 
 @NgModule({
   imports: [
@@ -17,7 +18,8 @@ import { AccountService } from './account.service'
     AccountComponent,
     AccountSettingsComponent,
     AccountChangePasswordComponent,
-    AccountDetailsComponent
+    AccountDetailsComponent,
+    AccountVideosComponent
   ],
 
   exports: [
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 7618748e9..e76f7636a 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -20,6 +20,9 @@ import { SearchComponent, SearchService } from './search'
 import { UserService } from './users'
 import { VideoAbuseService } from './video-abuse'
 import { VideoBlacklistService } from './video-blacklist'
+import { VideoThumbnailComponent } from './video/video-thumbnail.component'
+import { VideoService } from './video/video.service'
+import { InfiniteScrollModule } from 'ngx-infinite-scroll'
 
 @NgModule({
   imports: [
@@ -34,7 +37,8 @@ import { VideoBlacklistService } from './video-blacklist'
     ProgressbarModule.forRoot(),
 
     DataTableModule,
-    PrimeSharedModule
+    PrimeSharedModule,
+    InfiniteScrollModule
   ],
 
   declarations: [
@@ -42,6 +46,7 @@ import { VideoBlacklistService } from './video-blacklist'
     KeysPipe,
     SearchComponent,
     LoaderComponent,
+    VideoThumbnailComponent,
     NumberFormatterPipe,
     FromNowPipe
   ],
@@ -58,11 +63,13 @@ import { VideoBlacklistService } from './video-blacklist'
     ProgressbarModule,
     DataTableModule,
     PrimeSharedModule,
+    InfiniteScrollModule,
     BytesPipe,
     KeysPipe,
 
     SearchComponent,
     LoaderComponent,
+    VideoThumbnailComponent,
 
     NumberFormatterPipe,
     FromNowPipe
@@ -75,7 +82,8 @@ import { VideoBlacklistService } from './video-blacklist'
     SearchService,
     VideoAbuseService,
     VideoBlacklistService,
-    UserService
+    UserService,
+    VideoService
   ]
 })
 export class SharedModule { }
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index bd4f6b1f8..bd4f6b1f8 100644
--- a/client/src/app/videos/video-list/shared/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/client/src/app/shared/video/abstract-video-list.scss
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index a684ffef4..cf717cf4c 100644
--- a/client/src/app/videos/video-list/shared/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -1,11 +1,11 @@
 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'
+import { SortField } from './sort-field.type'
+import { VideoPagination } from './video-pagination.model'
+import { Video } from './video.model'
 
 export abstract class AbstractVideoList implements OnInit, OnDestroy {
   pagination: VideoPagination = {
@@ -76,7 +76,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   protected hasMoreVideos () {
     if (!this.pagination.totalItems) return true
 
-    const maxPage = this.pagination.totalItems/this.pagination.itemsPerPage
+    const maxPage = this.pagination.totalItems / this.pagination.itemsPerPage
     return maxPage > this.pagination.currentPage
   }
 
diff --git a/client/src/app/videos/shared/sort-field.type.ts b/client/src/app/shared/video/sort-field.type.ts
index 776f360f8..776f360f8 100644
--- a/client/src/app/videos/shared/sort-field.type.ts
+++ b/client/src/app/shared/video/sort-field.type.ts
diff --git a/client/src/app/videos/shared/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index 64cb4f847..93c380b73 100644
--- a/client/src/app/videos/shared/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -1,4 +1,4 @@
-import { Video } from './video.model'
+import { Video } from '../../shared/video/video.model'
 import { AuthUser } from '../../core'
 import {
   VideoDetails as VideoDetailsServerModel,
diff --git a/client/src/app/videos/shared/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts
index 88d23a59f..88d23a59f 100644
--- a/client/src/app/videos/shared/video-edit.model.ts
+++ b/client/src/app/shared/video/video-edit.model.ts
diff --git a/client/src/app/videos/shared/video-pagination.model.ts b/client/src/app/shared/video/video-pagination.model.ts
index 9e71769cb..9e71769cb 100644
--- a/client/src/app/videos/shared/video-pagination.model.ts
+++ b/client/src/app/shared/video/video-pagination.model.ts
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
new file mode 100644
index 000000000..5c698e8f6
--- /dev/null
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -0,0 +1,10 @@
+<a
+  [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
+class="video-thumbnail"
+>
+<img [attr.src]="video.thumbnailUrl" alt="video thumbnail" [ngClass]="{ 'blur-filter': nsfw }" />
+
+<div class="video-thumbnail-overlay">
+  {{ video.durationLabel }}
+</div>
+</a>
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
new file mode 100644
index 000000000..ab4f9bcb1
--- /dev/null
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -0,0 +1,28 @@
+.video-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-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;
+  }
+}
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
new file mode 100644
index 000000000..e543e9903
--- /dev/null
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core'
+import { Video } from './video.model'
+
+@Component({
+  selector: 'my-video-thumbnail',
+  styleUrls: [ './video-thumbnail.component.scss' ],
+  templateUrl: './video-thumbnail.component.html'
+})
+export class VideoThumbnailComponent {
+  @Input() video: Video
+  @Input() nsfw = false
+}
diff --git a/client/src/app/videos/shared/video.model.ts b/client/src/app/shared/video/video.model.ts
index 0dd41d71b..6929c8755 100644
--- a/client/src/app/videos/shared/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -1,5 +1,5 @@
 import { Video as VideoServerModel } from '../../../../../shared'
-import { User } from '../../shared'
+import { User } from '../'
 
 export class Video implements VideoServerModel {
   account: string
diff --git a/client/src/app/videos/shared/video.service.ts b/client/src/app/shared/video/video.service.ts
index 5d25a26d4..b2a26417c 100644
--- a/client/src/app/videos/shared/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -1,29 +1,23 @@
-import { Injectable } from '@angular/core'
-import { Observable } from 'rxjs/Observable'
 import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http'
+import { Injectable } from '@angular/core'
 import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
-
+import { Observable } from 'rxjs/Observable'
+import { Video as VideoServerModel, VideoDetails as VideoDetailsServerModel } from '../../../../../shared'
+import { ResultList } from '../../../../../shared/models/result-list.model'
+import { UserVideoRateUpdate } from '../../../../../shared/models/videos/user-video-rate-update.model'
+import { UserVideoRate } from '../../../../../shared/models/videos/user-video-rate.model'
+import { VideoRateType } from '../../../../../shared/models/videos/video-rate.type'
+import { VideoUpdate } from '../../../../../shared/models/videos/video-update.model'
+import { RestExtractor } from '../rest/rest-extractor.service'
+import { RestService } from '../rest/rest.service'
+import { Search } from '../search/search.model'
+import { UserService } from '../users/user.service'
 import { SortField } from './sort-field.type'
-import {
-  RestExtractor,
-  RestService,
-  UserService,
-  Search
-} from '../../shared'
-import { Video } from './video.model'
 import { VideoDetails } from './video-details.model'
 import { VideoEdit } from './video-edit.model'
 import { VideoPagination } from './video-pagination.model'
-import {
-  UserVideoRate,
-  VideoRateType,
-  VideoUpdate,
-  UserVideoRateUpdate,
-  Video as VideoServerModel,
-  VideoDetails as VideoDetailsServerModel,
-  ResultList
-} from '../../../../../shared'
+import { Video } from './video.model'
 
 @Injectable()
 export class VideoService {
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index c64cea920..cdab694f9 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core'
 import { TagInputModule } from 'ngx-chips'
 import { TabsModule } from 'ngx-bootstrap/tabs'
 
-import { VideoService, MarkdownService, VideoDescriptionComponent } from '../../shared'
+import { MarkdownService, VideoDescriptionComponent } from '../../shared'
 import { SharedModule } from '../../../shared'
 
 @NgModule({
@@ -26,7 +26,6 @@ import { SharedModule } from '../../../shared'
   ],
 
   providers: [
-    VideoService,
     MarkdownService
   ]
 })
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 76bfbb515..989addbd7 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -1,25 +1,23 @@
+import { HttpEventType, HttpResponse } from '@angular/common/http'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { Router } from '@angular/router'
-
 import { NotificationsService } from 'angular2-notifications'
-
+import { VideoService } from 'app/shared/video/video.service'
+import { VideoCreate } from '../../../../../shared'
+import { AuthService, ServerService } from '../../core'
 import {
   FormReactive,
-  VIDEO_NAME,
   VIDEO_CATEGORY,
-  VIDEO_LICENCE,
-  VIDEO_LANGUAGE,
-  VIDEO_DESCRIPTION,
-  VIDEO_TAGS,
   VIDEO_CHANNEL,
+  VIDEO_DESCRIPTION,
   VIDEO_FILE,
-  VIDEO_PRIVACY
+  VIDEO_LANGUAGE,
+  VIDEO_LICENCE,
+  VIDEO_NAME,
+  VIDEO_PRIVACY,
+  VIDEO_TAGS
 } from '../../shared'
-import { AuthService, ServerService } from '../../core'
-import { VideoService } from '../shared'
-import { VideoCreate } from '../../../../../shared'
-import { HttpEventType, HttpResponse } from '@angular/common/http'
 
 @Component({
   selector: 'my-videos-add',
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index 0e966cb50..017781866 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -1,23 +1,22 @@
 import { Component, OnInit } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
-import 'rxjs/add/observable/forkJoin'
-
 import { NotificationsService } from 'angular2-notifications'
-
+import 'rxjs/add/observable/forkJoin'
+import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
 import { ServerService } from '../../core'
 import {
   FormReactive,
-  VIDEO_NAME,
   VIDEO_CATEGORY,
-  VIDEO_LICENCE,
-  VIDEO_LANGUAGE,
   VIDEO_DESCRIPTION,
-  VIDEO_TAGS,
-  VIDEO_PRIVACY
+  VIDEO_LANGUAGE,
+  VIDEO_LICENCE,
+  VIDEO_NAME,
+  VIDEO_PRIVACY,
+  VIDEO_TAGS
 } from '../../shared'
-import { VideoEdit, VideoService } from '../shared'
-import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
+import { VideoService } from '../../shared/video/video.service'
+import { VideoEdit } from '../../shared/video/video-edit.model'
 
 @Component({
   selector: 'my-videos-update',
diff --git a/client/src/app/videos/+video-watch/video-download.component.ts b/client/src/app/videos/+video-watch/video-download.component.ts
index c32f8d586..010a246cd 100644
--- a/client/src/app/videos/+video-watch/video-download.component.ts
+++ b/client/src/app/videos/+video-watch/video-download.component.ts
@@ -1,8 +1,6 @@
 import { Component, Input, ViewChild } from '@angular/core'
-
 import { ModalDirective } from 'ngx-bootstrap/modal'
-
-import { VideoDetails } from '../shared'
+import { VideoDetails } from '../../shared/video/video-details.model'
 
 @Component({
   selector: 'my-video-download',
diff --git a/client/src/app/videos/+video-watch/video-report.component.ts b/client/src/app/videos/+video-watch/video-report.component.ts
index fc9b5a9d4..b94e4144e 100644
--- a/client/src/app/videos/+video-watch/video-report.component.ts
+++ b/client/src/app/videos/+video-watch/video-report.component.ts
@@ -1,11 +1,9 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
-
-import { ModalDirective } from 'ngx-bootstrap/modal'
 import { NotificationsService } from 'angular2-notifications'
-
-import { FormReactive, VideoAbuseService, VIDEO_ABUSE_REASON } from '../../shared'
-import { VideoDetails, VideoService } from '../shared'
+import { ModalDirective } from 'ngx-bootstrap/modal'
+import { FormReactive, VIDEO_ABUSE_REASON, VideoAbuseService } from '../../shared'
+import { VideoDetails } from '../../shared/video/video-details.model'
 
 @Component({
   selector: 'my-video-report',
diff --git a/client/src/app/videos/+video-watch/video-share.component.ts b/client/src/app/videos/+video-watch/video-share.component.ts
index aeef65ecf..4df9adf29 100644
--- a/client/src/app/videos/+video-watch/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/video-share.component.ts
@@ -1,8 +1,6 @@
 import { Component, Input, ViewChild } from '@angular/core'
-
 import { ModalDirective } from 'ngx-bootstrap/modal'
-
-import { VideoDetails } from '../shared'
+import { VideoDetails } from '../../shared/video/video-details.model'
 
 @Component({
   selector: 'my-video-share',
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index b26f3092f..eac676be8 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -2,6 +2,7 @@ import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/co
 import { ActivatedRoute, Router } from '@angular/router'
 import { MetaService } from '@ngx-meta/core'
 import { NotificationsService } from 'angular2-notifications'
+import { VideoService } from 'app/shared/video/video.service'
 import { Observable } from 'rxjs/Observable'
 import { Subscription } from 'rxjs/Subscription'
 import videojs from 'video.js'
@@ -9,10 +10,11 @@ import { UserVideoRateType, VideoRateType } from '../../../../../shared'
 import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
 import { VideoBlacklistService } from '../../shared'
-import { MarkdownService, VideoDetails, VideoService } from '../shared'
+import { MarkdownService } from '../shared'
 import { VideoDownloadComponent } from './video-download.component'
 import { VideoReportComponent } from './video-report.component'
 import { VideoShareComponent } from './video-share.component'
+import { VideoDetails } from '../../shared/video/video-details.model'
 
 @Component({
   selector: 'my-video-watch',
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
index 1b983200d..0b1dd5c15 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core'
 
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
-import { VideoService, MarkdownService } from '../shared'
+import { MarkdownService } from '../shared'
 import { SharedModule } from '../../shared'
 
 import { VideoWatchComponent } from './video-watch.component'
@@ -28,8 +28,7 @@ import { VideoDownloadComponent } from './video-download.component'
   ],
 
   providers: [
-    MarkdownService,
-    VideoService
+    MarkdownService
   ]
 })
 export class VideoWatchModule { }
diff --git a/client/src/app/videos/shared/index.ts b/client/src/app/videos/shared/index.ts
index 3f1458088..3c72ed895 100644
--- a/client/src/app/videos/shared/index.ts
+++ b/client/src/app/videos/shared/index.ts
@@ -1,8 +1,2 @@
-export * from './sort-field.type'
 export * from './markdown.service'
-export * from './video.model'
-export * from './video-details.model'
-export * from './video-edit.model'
-export * from './video.service'
 export * from './video-description.component'
-export * from './video-pagination.model'
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'
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
index 1d6194158..6d846fd3b 100644
--- a/client/src/app/videos/videos.module.ts
+++ b/client/src/app/videos/videos.module.ts
@@ -1,7 +1,5 @@
 import { NgModule } from '@angular/core'
-import { InfiniteScrollModule } from 'ngx-infinite-scroll'
 import { SharedModule } from '../shared'
-import { VideoService } from './shared'
 import { VideoMiniatureComponent } from './video-list'
 import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
 import { VideoTrendingComponent } from './video-list/video-trending.component'
@@ -11,8 +9,7 @@ import { VideosComponent } from './videos.component'
 @NgModule({
   imports: [
     VideosRoutingModule,
-    SharedModule,
-    InfiniteScrollModule
+    SharedModule
   ],
 
   declarations: [
@@ -27,8 +24,6 @@ import { VideosComponent } from './videos.component'
     VideosComponent
   ],
 
-  providers: [
-    VideoService
-  ]
+  providers: []
 })
 export class VideosModule { }