From fd45e8f43c2638478599ca75632518054461da85 Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Tue, 31 Oct 2017 11:52:52 +0100
Subject: Add video privacy setting

---
 client/src/app/app.component.ts                    |   6 +-
 client/src/app/core/menu/menu.component.html       |   5 +
 client/src/app/core/server/server.service.ts       |  14 ++-
 .../src/app/shared/forms/form-validators/video.ts  |   7 ++
 client/src/app/shared/search/search-field.type.ts  |   2 +-
 client/src/app/shared/search/search.component.html |   4 +-
 client/src/app/shared/search/search.component.ts   |  17 ++--
 .../videos/+video-edit/video-add.component.html    |  12 +++
 .../app/videos/+video-edit/video-add.component.ts  |  10 +-
 .../videos/+video-edit/video-update.component.html |  12 +++
 .../videos/+video-edit/video-update.component.ts   |  20 +++-
 .../videos/+video-watch/video-watch.component.html |  11 ++-
 .../src/app/videos/shared/video-details.model.ts   |   7 +-
 client/src/app/videos/shared/video-edit.model.ts   |   6 +-
 client/src/app/videos/shared/video.service.ts      |  55 +++++++----
 client/src/app/videos/video-list/index.ts          |   5 +-
 .../app/videos/video-list/loader.component.html    |   3 -
 .../src/app/videos/video-list/loader.component.ts  |  11 ---
 .../app/videos/video-list/my-videos.component.ts   |  36 +++++++
 .../video-list/shared/abstract-video-list.html     |  28 ++++++
 .../video-list/shared/abstract-video-list.scss     |  37 ++++++++
 .../video-list/shared/abstract-video-list.ts       | 104 +++++++++++++++++++++
 client/src/app/videos/video-list/shared/index.ts   |   4 +
 .../videos/video-list/shared/loader.component.html |   3 +
 .../videos/video-list/shared/loader.component.ts   |  11 +++
 .../shared/video-miniature.component.html          |  33 +++++++
 .../shared/video-miniature.component.scss          | 102 ++++++++++++++++++++
 .../video-list/shared/video-miniature.component.ts |  19 ++++
 .../video-list/shared/video-sort.component.html    |   5 +
 .../video-list/shared/video-sort.component.ts      |  39 ++++++++
 .../videos/video-list/video-list.component.html    |  28 ------
 .../videos/video-list/video-list.component.scss    |  37 --------
 .../app/videos/video-list/video-list.component.ts  | 102 +++++---------------
 .../video-list/video-miniature.component.html      |  33 -------
 .../video-list/video-miniature.component.scss      | 102 --------------------
 .../videos/video-list/video-miniature.component.ts |  19 ----
 .../videos/video-list/video-sort.component.html    |   5 -
 .../app/videos/video-list/video-sort.component.ts  |  39 --------
 client/src/app/videos/videos-routing.module.ts     |  11 ++-
 client/src/app/videos/videos.module.ts             |   9 +-
 client/src/sass/video-js-custom.scss               |  59 +++---------
 41 files changed, 620 insertions(+), 452 deletions(-)
 delete mode 100644 client/src/app/videos/video-list/loader.component.html
 delete mode 100644 client/src/app/videos/video-list/loader.component.ts
 create mode 100644 client/src/app/videos/video-list/my-videos.component.ts
 create mode 100644 client/src/app/videos/video-list/shared/abstract-video-list.html
 create mode 100644 client/src/app/videos/video-list/shared/abstract-video-list.scss
 create mode 100644 client/src/app/videos/video-list/shared/abstract-video-list.ts
 create mode 100644 client/src/app/videos/video-list/shared/index.ts
 create mode 100644 client/src/app/videos/video-list/shared/loader.component.html
 create mode 100644 client/src/app/videos/video-list/shared/loader.component.ts
 create mode 100644 client/src/app/videos/video-list/shared/video-miniature.component.html
 create mode 100644 client/src/app/videos/video-list/shared/video-miniature.component.scss
 create mode 100644 client/src/app/videos/video-list/shared/video-miniature.component.ts
 create mode 100644 client/src/app/videos/video-list/shared/video-sort.component.html
 create mode 100644 client/src/app/videos/video-list/shared/video-sort.component.ts
 delete mode 100644 client/src/app/videos/video-list/video-list.component.html
 delete mode 100644 client/src/app/videos/video-list/video-list.component.scss
 delete mode 100644 client/src/app/videos/video-list/video-miniature.component.html
 delete mode 100644 client/src/app/videos/video-list/video-miniature.component.scss
 delete mode 100644 client/src/app/videos/video-list/video-miniature.component.ts
 delete mode 100644 client/src/app/videos/video-list/video-sort.component.html
 delete mode 100644 client/src/app/videos/video-list/video-sort.component.ts

(limited to 'client/src')

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 984470d69..bef1599fc 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewContainerRef } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 
 import { AuthService, ServerService } from './core'
@@ -28,8 +28,7 @@ export class AppComponent implements OnInit {
   constructor (
     private router: Router,
     private authService: AuthService,
-    private serverService: ServerService,
-    private userService: UserService
+    private serverService: ServerService
   ) {}
 
   ngOnInit () {
@@ -45,6 +44,7 @@ export class AppComponent implements OnInit {
     this.serverService.loadVideoCategories()
     this.serverService.loadVideoLanguages()
     this.serverService.loadVideoLicences()
+    this.serverService.loadVideoPrivacies()
 
     // Do not display menu on small screens
     if (window.innerWidth < 600) {
diff --git a/client/src/app/core/menu/menu.component.html b/client/src/app/core/menu/menu.component.html
index 2d8aace54..fcde23fdd 100644
--- a/client/src/app/core/menu/menu.component.html
+++ b/client/src/app/core/menu/menu.component.html
@@ -23,6 +23,11 @@
       <span class="hidden-xs glyphicon glyphicon-user"></span>
       My account
     </a>
+
+    <a *ngIf="isLoggedIn" routerLink="/videos/mine" routerLinkActive="active">
+      <span class="hidden-xs glyphicon glyphicon-folder-open"></span>
+      My videos
+    </a>
   </div>
 
   <div class="panel-block">
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index ae507afce..cbc4074c9 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -19,6 +19,7 @@ export class ServerService {
   private videoCategories: Array<{ id: number, label: string }> = []
   private videoLicences: Array<{ id: number, label: string }> = []
   private videoLanguages: Array<{ id: number, label: string }> = []
+  private videoPrivacies: Array<{ id: number, label: string }> = []
 
   constructor (private http: HttpClient) {}
 
@@ -39,6 +40,10 @@ export class ServerService {
     return this.loadVideoAttributeEnum('languages', this.videoLanguages)
   }
 
+  loadVideoPrivacies () {
+    return this.loadVideoAttributeEnum('privacies', this.videoPrivacies)
+  }
+
   getConfig () {
     return this.config
   }
@@ -55,7 +60,14 @@ export class ServerService {
     return this.videoLanguages
   }
 
-  private loadVideoAttributeEnum (attributeName: 'categories' | 'licences' | 'languages', hashToPopulate: { id: number, label: string }[]) {
+  getVideoPrivacies () {
+    return this.videoPrivacies
+  }
+
+  private loadVideoAttributeEnum (
+    attributeName: 'categories' | 'licences' | 'languages' | 'privacies',
+    hashToPopulate: { id: number, label: string }[]
+  ) {
     return this.http.get(ServerService.BASE_VIDEO_URL + attributeName)
                .subscribe(data => {
                  Object.keys(data)
diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts
index 434773501..65f11f5da 100644
--- a/client/src/app/shared/forms/form-validators/video.ts
+++ b/client/src/app/shared/forms/form-validators/video.ts
@@ -9,6 +9,13 @@ export const VIDEO_NAME = {
   }
 }
 
+export const VIDEO_PRIVACY = {
+  VALIDATORS: [ Validators.required ],
+  MESSAGES: {
+    'required': 'Video privacy is required.'
+  }
+}
+
 export const VIDEO_CATEGORY = {
   VALIDATORS: [ Validators.required ],
   MESSAGES: {
diff --git a/client/src/app/shared/search/search-field.type.ts b/client/src/app/shared/search/search-field.type.ts
index 63557898a..ff0bb8de1 100644
--- a/client/src/app/shared/search/search-field.type.ts
+++ b/client/src/app/shared/search/search-field.type.ts
@@ -1 +1 @@
-export type SearchField = 'name' | 'author' | 'host' | 'magnetUri' | 'tags'
+export type SearchField = 'name' | 'author' | 'host' | 'tags'
diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html
index c6c6ff6a8..0302447d0 100644
--- a/client/src/app/shared/search/search.component.html
+++ b/client/src/app/shared/search/search.component.html
@@ -6,12 +6,12 @@
 
   <input
     type="text" id="search-video" name="search-video" class="form-control" placeholder="Search" class="form-control"
-    [(ngModel)]="searchCriterias.value" (keyup.enter)="doSearch()"
+    [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
   >
 
   <div class="input-group-btn" dropdown placement="bottom right">
     <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle>
-      {{ getStringChoice(searchCriterias.field) }} <span class="caret"></span>
+      {{ getStringChoice(searchCriteria.field) }} <span class="caret"></span>
     </button>
     <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu>
       <li *ngFor="let choice of choiceKeys" class="dropdown-item" role="menu-item">
diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts
index ecce20666..6e2827fe3 100644
--- a/client/src/app/shared/search/search.component.ts
+++ b/client/src/app/shared/search/search.component.ts
@@ -16,10 +16,9 @@ export class SearchComponent implements OnInit {
     name: 'Name',
     author: 'Author',
     host: 'Pod Host',
-    magnetUri: 'Magnet URI',
     tags: 'Tags'
   }
-  searchCriterias: Search = {
+  searchCriteria: Search = {
     field: 'name',
     value: ''
   }
@@ -30,13 +29,13 @@ export class SearchComponent implements OnInit {
     // Subscribe if the search changed
     // Usually changed by videos list component
     this.searchService.updateSearch.subscribe(
-      newSearchCriterias => {
+      newSearchCriteria => {
         // Put a field by default
-        if (!newSearchCriterias.field) {
-          newSearchCriterias.field = 'name'
+        if (!newSearchCriteria.field) {
+          newSearchCriteria.field = 'name'
         }
 
-        this.searchCriterias = newSearchCriterias
+        this.searchCriteria = newSearchCriteria
       }
     )
   }
@@ -49,9 +48,9 @@ export class SearchComponent implements OnInit {
     $event.preventDefault()
     $event.stopPropagation()
 
-    this.searchCriterias.field = choice
+    this.searchCriteria.field = choice
 
-    if (this.searchCriterias.value) {
+    if (this.searchCriteria.value) {
       this.doSearch()
     }
   }
@@ -61,7 +60,7 @@ export class SearchComponent implements OnInit {
       this.router.navigate([ '/videos/list' ])
     }
 
-    this.searchService.searchUpdated.next(this.searchCriterias)
+    this.searchService.searchUpdated.next(this.searchCriteria)
   }
 
   getStringChoice (choiceKey: SearchField) {
diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
index a70788ed8..b4e0f9f7c 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -17,6 +17,18 @@
         </div>
       </div>
 
+      <div class="form-group">
+        <label for="privacy">Privacy</label>
+        <select class="form-control" id="privacy" formControlName="privacy">
+          <option></option>
+          <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+        </select>
+
+        <div *ngIf="formErrors.privacy" class="alert alert-danger">
+          {{ formErrors.privacy }}
+        </div>
+      </div>
+
       <div class="form-group">
         <input
           type="checkbox" id="nsfw"
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 5b5557ed9..c8094f792 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -13,7 +13,8 @@ import {
   VIDEO_DESCRIPTION,
   VIDEO_TAGS,
   VIDEO_CHANNEL,
-  VIDEO_FILE
+  VIDEO_FILE,
+  VIDEO_PRIVACY
 } from '../../shared'
 import { AuthService, ServerService } from '../../core'
 import { VideoService } from '../shared'
@@ -34,6 +35,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   videoCategories = []
   videoLicences = []
   videoLanguages = []
+  videoPrivacies = []
   userVideoChannels = []
 
   tagValidators = VIDEO_TAGS.VALIDATORS
@@ -43,6 +45,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   form: FormGroup
   formErrors = {
     name: '',
+    privacy: '',
     category: '',
     licence: '',
     language: '',
@@ -52,6 +55,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   }
   validationMessages = {
     name: VIDEO_NAME.MESSAGES,
+    privacy: VIDEO_PRIVACY.MESSAGES,
     category: VIDEO_CATEGORY.MESSAGES,
     licence: VIDEO_LICENCE.MESSAGES,
     language: VIDEO_LANGUAGE.MESSAGES,
@@ -79,6 +83,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     this.form = this.formBuilder.group({
       name: [ '', VIDEO_NAME.VALIDATORS ],
       nsfw: [ false ],
+      privacy: [ '', VIDEO_PRIVACY.VALIDATORS ],
       category: [ '', VIDEO_CATEGORY.VALIDATORS ],
       licence: [ '', VIDEO_LICENCE.VALIDATORS ],
       language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
@@ -95,6 +100,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     this.videoCategories = this.serverService.getVideoCategories()
     this.videoLicences = this.serverService.getVideoLicences()
     this.videoLanguages = this.serverService.getVideoLanguages()
+    this.videoPrivacies = this.serverService.getVideoPrivacies()
 
     this.buildForm()
 
@@ -139,6 +145,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     const formValue: VideoCreate = this.form.value
 
     const name = formValue.name
+    const privacy = formValue.privacy
     const nsfw = formValue.nsfw
     const category = formValue.category
     const licence = formValue.licence
@@ -150,6 +157,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
 
     const formData = new FormData()
     formData.append('name', name)
+    formData.append('privacy', privacy.toString())
     formData.append('category', '' + category)
     formData.append('nsfw', '' + nsfw)
     formData.append('licence', '' + licence)
diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index ec040630e..b9c6139b2 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -17,6 +17,18 @@
       </div>
     </div>
 
+    <div class="form-group">
+      <label for="privacy">Privacy</label>
+      <select class="form-control" id="privacy" formControlName="privacy">
+        <option></option>
+        <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+      </select>
+
+      <div *ngIf="formErrors.privacy" class="alert alert-danger">
+        {{ formErrors.privacy }}
+      </div>
+    </div>
+
     <div class="form-group">
       <input
         type="checkbox" id="nsfw"
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 6ced77f1a..be663575f 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
-import { Observable } from 'rxjs/Observable'
 import 'rxjs/add/observable/forkJoin'
 
 import { NotificationsService } from 'angular2-notifications'
@@ -14,9 +13,11 @@ import {
   VIDEO_LICENCE,
   VIDEO_LANGUAGE,
   VIDEO_DESCRIPTION,
-  VIDEO_TAGS
+  VIDEO_TAGS,
+  VIDEO_PRIVACY
 } from '../../shared'
 import { VideoEdit, VideoService } from '../shared'
+import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
 
 @Component({
   selector: 'my-videos-update',
@@ -29,6 +30,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
   videoCategories = []
   videoLicences = []
   videoLanguages = []
+  videoPrivacies = []
   video: VideoEdit
 
   tagValidators = VIDEO_TAGS.VALIDATORS
@@ -38,6 +40,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
   form: FormGroup
   formErrors = {
     name: '',
+    privacy: '',
     category: '',
     licence: '',
     language: '',
@@ -45,6 +48,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
   }
   validationMessages = {
     name: VIDEO_NAME.MESSAGES,
+    privacy: VIDEO_PRIVACY.MESSAGES,
     category: VIDEO_CATEGORY.MESSAGES,
     licence: VIDEO_LICENCE.MESSAGES,
     language: VIDEO_LANGUAGE.MESSAGES,
@@ -67,6 +71,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
   buildForm () {
     this.form = this.formBuilder.group({
       name: [ '', VIDEO_NAME.VALIDATORS ],
+      privacy: [ '', VIDEO_PRIVACY.VALIDATORS ],
       nsfw: [ false ],
       category: [ '', VIDEO_CATEGORY.VALIDATORS ],
       licence: [ '', VIDEO_LICENCE.VALIDATORS ],
@@ -84,6 +89,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
     this.videoCategories = this.serverService.getVideoCategories()
     this.videoLicences = this.serverService.getVideoLicences()
     this.videoLanguages = this.serverService.getVideoLanguages()
+    this.videoPrivacies = this.serverService.getVideoPrivacies()
 
     const uuid: string = this.route.snapshot.params['uuid']
 
@@ -98,6 +104,16 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
         video => {
           this.video = new VideoEdit(video)
 
+          // We cannot set private a video that was not private anymore
+          if (video.privacy !== VideoPrivacy.PRIVATE) {
+            const newVideoPrivacies = []
+            for (const p of this.videoPrivacies) {
+              if (p.id !== VideoPrivacy.PRIVATE) newVideoPrivacies.push(p)
+            }
+
+            this.videoPrivacies = newVideoPrivacies
+          }
+
           this.hydrateFormFromVideo()
         },
 
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 71f986ccd..53648a8d8 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -22,7 +22,7 @@
   <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
 </div>
 
-<!-- P2P informations -->
+<!-- P2P information -->
 <div id="torrent-info" class="row">
   <div id="torrent-info-download" class="col-md-4 col-sm-4 col-xs-4">Download: {{ downloadSpeed | bytes }}/s</div>
   <div id="torrent-info-upload" class="col-md-4 col-sm-4 col-xs-4">Upload: {{ uploadSpeed | bytes }}/s</div>
@@ -142,6 +142,15 @@
     </div>
 
     <div class="video-details-attributes col-xs-4 col-md-3">
+      <div class="video-details-attribute">
+        <span class="video-details-attribute-label">
+          Privacy:
+        </span>
+        <span class="video-details-attribute-value">
+          {{ video.privacyLabel }}
+        </span>
+      </div>
+
       <div class="video-details-attribute">
         <span class="video-details-attribute-label">
           Category:
diff --git a/client/src/app/videos/shared/video-details.model.ts b/client/src/app/videos/shared/video-details.model.ts
index 68ded5210..84f96a25f 100644
--- a/client/src/app/videos/shared/video-details.model.ts
+++ b/client/src/app/videos/shared/video-details.model.ts
@@ -5,7 +5,8 @@ import {
   VideoFile,
   VideoChannel,
   VideoResolution,
-  UserRight
+  UserRight,
+  VideoPrivacy
 } from '../../../../../shared'
 
 export class VideoDetails extends Video implements VideoDetailsServerModel {
@@ -41,10 +42,14 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   descriptionPath: string
   files: VideoFile[]
   channel: VideoChannel
+  privacy: VideoPrivacy
+  privacyLabel: string
 
   constructor (hash: VideoDetailsServerModel) {
     super(hash)
 
+    this.privacy = hash.privacy
+    this.privacyLabel = hash.privacyLabel
     this.descriptionPath = hash.descriptionPath
     this.files = hash.files
     this.channel = hash.channel
diff --git a/client/src/app/videos/shared/video-edit.model.ts b/client/src/app/videos/shared/video-edit.model.ts
index e0b7bf130..88d23a59f 100644
--- a/client/src/app/videos/shared/video-edit.model.ts
+++ b/client/src/app/videos/shared/video-edit.model.ts
@@ -1,4 +1,5 @@
 import { VideoDetails } from './video-details.model'
+import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
 
 export class VideoEdit {
   category: number
@@ -9,6 +10,7 @@ export class VideoEdit {
   tags: string[]
   nsfw: boolean
   channel: number
+  privacy: VideoPrivacy
   uuid?: string
   id?: number
 
@@ -23,6 +25,7 @@ export class VideoEdit {
     this.tags = videoDetails.tags
     this.nsfw = videoDetails.nsfw
     this.channel = videoDetails.channel.id
+    this.privacy = videoDetails.privacy
   }
 
   patch (values: Object) {
@@ -40,7 +43,8 @@ export class VideoEdit {
       name: this.name,
       tags: this.tags,
       nsfw: this.nsfw,
-      channel: this.channel
+      channel: this.channel,
+      privacy: this.privacy
     }
   }
 }
diff --git a/client/src/app/videos/shared/video.service.ts b/client/src/app/videos/shared/video.service.ts
index 7d5372334..8459aa0d3 100644
--- a/client/src/app/videos/shared/video.service.ts
+++ b/client/src/app/videos/shared/video.service.ts
@@ -19,7 +19,6 @@ import {
   UserVideoRate,
   VideoRateType,
   VideoUpdate,
-  VideoAbuseCreate,
   UserVideoRateUpdate,
   Video as VideoServerModel,
   VideoDetails as VideoDetailsServerModel,
@@ -51,6 +50,7 @@ export class VideoService {
       licence: video.licence,
       language,
       description: video.description,
+      privacy: video.privacy,
       tags: video.tags,
       nsfw: video.nsfw
     }
@@ -63,22 +63,35 @@ export class VideoService {
   uploadVideo (video: FormData) {
     const req = new HttpRequest('POST', VideoService.BASE_VIDEO_URL + 'upload', video, { reportProgress: true })
 
-    return this.authHttp.request(req)
-                        .catch(this.restExtractor.handleError)
+    return this.authHttp
+      .request(req)
+      .catch(this.restExtractor.handleError)
   }
 
-  getVideos (videoPagination: VideoPagination, sort: SortField) {
+  getMyVideos (videoPagination: VideoPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> {
     const pagination = this.videoPaginationToRestPagination(videoPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
-    return this.authHttp.get(VideoService.BASE_VIDEO_URL, { params })
-                        .map(this.extractVideos)
-                        .catch((res) => this.restExtractor.handleError(res))
+    return this.authHttp.get(UserService.BASE_USERS_URL + '/me/videos', { params })
+      .map(this.extractVideos)
+      .catch((res) => this.restExtractor.handleError(res))
   }
 
-  searchVideos (search: Search, videoPagination: VideoPagination, sort: SortField) {
+  getVideos (videoPagination: VideoPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> {
+    const pagination = this.videoPaginationToRestPagination(videoPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp
+      .get(VideoService.BASE_VIDEO_URL, { params })
+      .map(this.extractVideos)
+      .catch((res) => this.restExtractor.handleError(res))
+  }
+
+  searchVideos (search: Search, videoPagination: VideoPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> {
     const url = VideoService.BASE_VIDEO_URL + 'search/' + encodeURIComponent(search.value)
 
     const pagination = this.videoPaginationToRestPagination(videoPagination)
@@ -88,15 +101,17 @@ export class VideoService {
 
     if (search.field) params.set('field', search.field)
 
-    return this.authHttp.get<ResultList<VideoServerModel>>(url, { params })
-                        .map(this.extractVideos)
-                        .catch((res) => this.restExtractor.handleError(res))
+    return this.authHttp
+      .get<ResultList<VideoServerModel>>(url, { params })
+      .map(this.extractVideos)
+      .catch((res) => this.restExtractor.handleError(res))
   }
 
   removeVideo (id: number) {
-    return this.authHttp.delete(VideoService.BASE_VIDEO_URL + id)
-               .map(this.restExtractor.extractDataBool)
-               .catch((res) => this.restExtractor.handleError(res))
+    return this.authHttp
+      .delete(VideoService.BASE_VIDEO_URL + id)
+      .map(this.restExtractor.extractDataBool)
+      .catch((res) => this.restExtractor.handleError(res))
   }
 
   loadCompleteDescription (descriptionPath: string) {
@@ -117,8 +132,9 @@ export class VideoService {
   getUserVideoRating (id: number): Observable<UserVideoRate> {
     const url = UserService.BASE_USERS_URL + 'me/videos/' + id + '/rating'
 
-    return this.authHttp.get(url)
-                        .catch(res => this.restExtractor.handleError(res))
+    return this.authHttp
+      .get(url)
+      .catch(res => this.restExtractor.handleError(res))
   }
 
   private videoPaginationToRestPagination (videoPagination: VideoPagination) {
@@ -134,9 +150,10 @@ export class VideoService {
       rating: rateType
     }
 
-    return this.authHttp.put(url, body)
-                        .map(this.restExtractor.extractDataBool)
-                        .catch(res => this.restExtractor.handleError(res))
+    return this.authHttp
+      .put(url, body)
+      .map(this.restExtractor.extractDataBool)
+      .catch(res => this.restExtractor.handleError(res))
   }
 
   private extractVideos (result: ResultList<VideoServerModel>) {
diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts
index a490e6bb5..ed2bb1657 100644
--- a/client/src/app/videos/video-list/index.ts
+++ b/client/src/app/videos/video-list/index.ts
@@ -1,4 +1,3 @@
-export * from './loader.component'
+export * from './my-videos.component'
 export * from './video-list.component'
-export * from './video-miniature.component'
-export * from './video-sort.component'
+export * from './shared'
diff --git a/client/src/app/videos/video-list/loader.component.html b/client/src/app/videos/video-list/loader.component.html
deleted file mode 100644
index 38d06950e..000000000
--- a/client/src/app/videos/video-list/loader.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<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/loader.component.ts b/client/src/app/videos/video-list/loader.component.ts
deleted file mode 100644
index f37d70c85..000000000
--- a/client/src/app/videos/video-list/loader.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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/my-videos.component.ts b/client/src/app/videos/video-list/my-videos.component.ts
new file mode 100644
index 000000000..648741a40
--- /dev/null
+++ b/client/src/app/videos/video-list/my-videos.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+
+import { NotificationsService } from 'angular2-notifications'
+
+import { AbstractVideoList } from './shared'
+import { VideoService } from '../shared'
+
+@Component({
+  selector: 'my-videos',
+  styleUrls: [ './shared/abstract-video-list.scss' ],
+  templateUrl: './shared/abstract-video-list.html'
+})
+export class MyVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
+
+  constructor (
+    protected router: Router,
+    protected route: ActivatedRoute,
+    protected notificationsService: NotificationsService,
+    private videoService: VideoService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+  }
+
+  ngOnDestroy () {
+    this.subActivatedRoute.unsubscribe()
+  }
+
+  getVideosObservable () {
+    return this.videoService.getMyVideos(this.pagination, this.sort)
+  }
+}
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)
+  }
+}
diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html
deleted file mode 100644
index 680fba3f5..000000000
--- a/client/src/app/videos/video-list/video-list.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<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/video-list.component.scss b/client/src/app/videos/video-list/video-list.component.scss
deleted file mode 100644
index 4b4409602..000000000
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.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/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index bf6f60215..784162679 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -1,51 +1,33 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Subscription } from 'rxjs/Subscription'
-import { BehaviorSubject } from 'rxjs/BehaviorSubject'
 
 import { NotificationsService } from 'angular2-notifications'
 
-import { AuthService } from '../../core'
-import {
-  SortField,
-  Video,
-  VideoService,
-  VideoPagination
-} from '../shared'
-import { Search, SearchField, SearchService, User } from '../../shared'
+import { VideoService } from '../shared'
+import { Search, SearchField, SearchService } from '../../shared'
+import { AbstractVideoList } from './shared'
 
 @Component({
   selector: 'my-videos-list',
-  styleUrls: [ './video-list.component.scss' ],
-  templateUrl: './video-list.component.html'
+  styleUrls: [ './shared/abstract-video-list.scss' ],
+  templateUrl: './shared/abstract-video-list.html'
 })
-export class VideoListComponent implements OnInit, OnDestroy {
-  loading: BehaviorSubject<boolean> = new BehaviorSubject(false)
-  pagination: VideoPagination = {
-    currentPage: 1,
-    itemsPerPage: 25,
-    totalItems: null
-  }
-  sort: SortField
-  user: User
-  videos: Video[] = []
-
+export class VideoListComponent extends AbstractVideoList implements OnInit, OnDestroy {
   private search: Search
-  private subActivatedRoute: Subscription
   private subSearch: Subscription
 
   constructor (
-    private authService: AuthService,
-    private notificationsService: NotificationsService,
-    private router: Router,
-    private route: ActivatedRoute,
+    protected router: Router,
+    protected route: ActivatedRoute,
+    protected notificationsService: NotificationsService,
     private videoService: VideoService,
     private searchService: SearchService
-  ) {}
+  ) {
+    super()
+  }
 
   ngOnInit () {
-    this.user = this.authService.getUser()
-
     // Subscribe to route changes
     this.subActivatedRoute = this.route.params.subscribe(routeParams => {
       this.loadRouteParams(routeParams)
@@ -66,14 +48,12 @@ export class VideoListComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy () {
-    this.subActivatedRoute.unsubscribe()
+    super.ngOnDestroy()
+
     this.subSearch.unsubscribe()
   }
 
-  getVideos () {
-    this.loading.next(true)
-    this.videos = []
-
+  getVideosObservable () {
     let observable = null
     if (this.search.value) {
       observable = this.videoService.searchVideos(this.search, this.pagination, this.sort)
@@ -81,40 +61,11 @@ export class VideoListComponent implements OnInit, OnDestroy {
       observable = this.videoService.getVideos(this.pagination, this.sort)
     }
 
-    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()
+    return observable
   }
 
-  onSort (sort: SortField) {
-    this.sort = sort
-
-    this.navigateToNewParams()
-  }
-
-  private buildRouteParams () {
-    // There is always a sort and a current page
-    const params = {
-      sort: this.sort,
-      page: this.pagination.currentPage
-    }
+  protected buildRouteParams () {
+    const params = super.buildRouteParams()
 
     // Maybe there is a search
     if (this.search.value) {
@@ -125,7 +76,9 @@ export class VideoListComponent implements OnInit, OnDestroy {
     return params
   }
 
-  private loadRouteParams (routeParams: { [ key: string ]: any }) {
+  protected loadRouteParams (routeParams: { [ key: string ]: any }) {
+    super.loadRouteParams(routeParams)
+
     if (routeParams['search'] !== undefined) {
       this.search = {
         value: routeParams['search'],
@@ -137,18 +90,5 @@ export class VideoListComponent implements OnInit, OnDestroy {
         field: 'name'
       }
     }
-
-    this.sort = routeParams['sort'] as SortField || '-createdAt'
-
-    if (routeParams['page'] !== undefined) {
-      this.pagination.currentPage = parseInt(routeParams['page'], 10)
-    } else {
-      this.pagination.currentPage = 1
-    }
-  }
-
-  private navigateToNewParams () {
-    const routeParams = this.buildRouteParams()
-    this.router.navigate([ '/videos/list', routeParams ])
   }
 }
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
deleted file mode 100644
index abe87025f..000000000
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<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/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
deleted file mode 100644
index 066792d10..000000000
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-.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/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts
deleted file mode 100644
index 18434dad2..000000000
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-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/video-sort.component.html b/client/src/app/videos/video-list/video-sort.component.html
deleted file mode 100644
index 3bece0b22..000000000
--- a/client/src/app/videos/video-list/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/video-sort.component.ts b/client/src/app/videos/video-list/video-sort.component.ts
deleted file mode 100644
index 64916bf16..000000000
--- a/client/src/app/videos/video-list/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/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts
index d3869748b..3ca3e5486 100644
--- a/client/src/app/videos/videos-routing.module.ts
+++ b/client/src/app/videos/videos-routing.module.ts
@@ -3,7 +3,7 @@ import { RouterModule, Routes } from '@angular/router'
 
 import { MetaGuard } from '@ngx-meta/core'
 
-import { VideoListComponent } from './video-list'
+import { VideoListComponent, MyVideosComponent } from './video-list'
 import { VideosComponent } from './videos.component'
 
 const videosRoutes: Routes = [
@@ -12,6 +12,15 @@ const videosRoutes: Routes = [
     component: VideosComponent,
     canActivateChild: [ MetaGuard ],
     children: [
+      {
+        path: 'mine',
+        component: MyVideosComponent,
+        data: {
+          meta: {
+            title: 'My videos'
+          }
+        }
+      },
       {
         path: 'list',
         component: VideoListComponent,
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
index 3a0c3feac..ecc351b65 100644
--- a/client/src/app/videos/videos.module.ts
+++ b/client/src/app/videos/videos.module.ts
@@ -2,7 +2,13 @@ import { NgModule } from '@angular/core'
 
 import { VideosRoutingModule } from './videos-routing.module'
 import { VideosComponent } from './videos.component'
-import { LoaderComponent, VideoListComponent, VideoMiniatureComponent, VideoSortComponent } from './video-list'
+import {
+  LoaderComponent,
+  VideoListComponent,
+  MyVideosComponent,
+  VideoMiniatureComponent,
+  VideoSortComponent
+} from './video-list'
 import { VideoService } from './shared'
 import { SharedModule } from '../shared'
 
@@ -16,6 +22,7 @@ import { SharedModule } from '../shared'
     VideosComponent,
 
     VideoListComponent,
+    MyVideosComponent,
     VideoMiniatureComponent,
     VideoSortComponent,
 
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index c5f668f17..6ad21988e 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -334,71 +334,34 @@ $slider-bg-color: lighten($primary-background-color, 33%);
 
 // Thanks: https://projects.lukehaas.me/css-loaders/
 .vjs-loading-spinner {
-  border: none;
-  opacity: 1;
+  margin: -25px 0 0 -25px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
   font-size: 10px;
-  text-indent: -9999em;
-  width: 5em;
-  height: 5em;
-  border-radius: 50%;
-  background: #ffffff;
-  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
   position: relative;
-  -webkit-animation: load3 1.4s infinite linear;
-  animation: load3 1.4s infinite linear;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
+  text-indent: -9999em;
+  border: 0.7em solid rgba(255, 255, 255, 0.2);
+  border-left-color: #ffffff;
   transform: translateZ(0);
+  animation: spinner 1.4s infinite linear;
 
   &:before {
-    width: 50%;
-    height: 50%;
-    background: #ffffff;
-    border-radius: 100% 0 0 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    content: '';
     animation: none !important;
-    margin: 0 !important;
   }
 
   &:after {
-    background: #000;
-    width: 75%;
-    height: 75%;
     border-radius: 50%;
-    content: '';
-    margin: auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+    width: 6em;
+    height: 6em;
     animation: none !important;
   }
 
-  @-webkit-keyframes load3 {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    100% {
-      -webkit-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-  }
-  @keyframes load3 {
+  @keyframes spinner {
     0% {
-      -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
     }
     100% {
-      -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
     }
   }
-- 
cgit v1.2.3