Add video privacy setting

32 files changed, 346 insertions, 178 deletions

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
@@ -18,6 +18,18 @@
       </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"
           formControlName="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
@@ -18,6 +18,18 @@
     </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"
         formControlName="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>
@@ -144,6 +144,15 @@
     <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:
         </span>
         <span class="video-details-attribute-value">
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/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/video-list.component.html b/client/src/app/videos/video-list/shared/abstract-video-list.html
index 680fba3f5..680fba3f5 100644
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.html
diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/shared/abstract-video-list.scss
index 4b4409602..4b4409602 100644
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/shared/abstract-video-list.scss
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/loader.component.html b/client/src/app/videos/video-list/shared/loader.component.html
index 38d06950e..38d06950e 100644
--- a/client/src/app/videos/video-list/loader.component.html
+++ b/client/src/app/videos/video-list/shared/loader.component.html
diff --git a/client/src/app/videos/video-list/loader.component.ts b/client/src/app/videos/video-list/shared/loader.component.ts
index f37d70c85..f37d70c85 100644
--- a/client/src/app/videos/video-list/loader.component.ts
+++ b/client/src/app/videos/video-list/shared/loader.component.ts
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/shared/video-miniature.component.html
index abe87025f..abe87025f 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.html
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss
index 066792d10..066792d10 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/shared/video-miniature.component.ts
index 18434dad2..e5a87907b 100644
--- a/client/src/app/videos/video-list/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, Video } from '../../shared'
+import { User } from '../../../shared'
 
 @Component({
   selector: 'my-video-miniature',
diff --git a/client/src/app/videos/video-list/video-sort.component.html b/client/src/app/videos/video-list/shared/video-sort.component.html
index 3bece0b22..3bece0b22 100644
--- a/client/src/app/videos/video-list/video-sort.component.html
+++ b/client/src/app/videos/video-list/shared/video-sort.component.html
diff --git a/client/src/app/videos/video-list/video-sort.component.ts b/client/src/app/videos/video-list/shared/video-sort.component.ts
index 64916bf16..8aa89d32b 100644
--- a/client/src/app/videos/video-list/video-sort.component.ts
+++ b/client/src/app/videos/video-list/shared/video-sort.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 
-import { SortField } from '../shared'
+import { SortField } from '../../shared'
 
 @Component({
   selector: 'my-video-sort',
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/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 = [
@@ -13,6 +13,15 @@ const videosRoutes: Routes = [
     canActivateChild: [ MetaGuard ],
     children: [
       {
+        path: 'mine',
+        component: MyVideosComponent,
+        data: {
+          meta: {
+            title: 'My videos'
+          }
+        }
+      },
+      {
         path: 'list',
         component: VideoListComponent,
         data: {
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);
     }
   }