Merge branch 'feature/design' into develop

37 files changed, 918 insertions, 237 deletions

diff --git a/client/src/app/shared/account/account.model.ts b/client/src/app/shared/account/account.model.ts
new file mode 100644
index 000000000..0b008188a
--- /dev/null
+++ b/client/src/app/shared/account/account.model.ts
@@ -0,0 +1,20 @@
+import { Account as ServerAccount } from '../../../../../shared/models/accounts/account.model'
+import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
+
+export class Account implements ServerAccount {
+  id: number
+  uuid: string
+  name: string
+  host: string
+  followingCount: number
+  followersCount: number
+  createdAt: Date
+  updatedAt: Date
+  avatar: Avatar
+
+  static GET_ACCOUNT_AVATAR_PATH (account: Account) {
+    if (account && account.avatar) return account.avatar.path
+
+    return API_URL + '/client/assets/images/default-avatar.png'
+  }
+}
diff --git a/client/src/app/shared/forms/form-validators/host.validator.ts b/client/src/app/shared/forms/form-validators/host.validator.ts
index 03e810fdb..c18a35f9b 100644
--- a/client/src/app/shared/forms/form-validators/host.validator.ts
+++ b/client/src/app/shared/forms/form-validators/host.validator.ts
@@ -1,14 +1,8 @@
-import { FormControl } from '@angular/forms'
-
-export function validateHost (c: FormControl) {
+export function validateHost (value: string) {
   // Thanks to http://stackoverflow.com/a/106223
   const HOST_REGEXP = new RegExp(
     '^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$'
   )
 
-  return HOST_REGEXP.test(c.value) ? null : {
-    validateHost: {
-      valid: false
-    }
-  }
+  return HOST_REGEXP.test(value)
 }
diff --git a/client/src/app/shared/forms/form-validators/video-abuse.ts b/client/src/app/shared/forms/form-validators/video-abuse.ts
index 3c7f26205..4b2a2b789 100644
--- a/client/src/app/shared/forms/form-validators/video-abuse.ts
+++ b/client/src/app/shared/forms/form-validators/video-abuse.ts
@@ -3,8 +3,8 @@ import { Validators } from '@angular/forms'
 export const VIDEO_ABUSE_REASON = {
   VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
   MESSAGES: {
-    'required': 'Report reason name is required.',
-    'minlength': 'Report reson must be at least 2 characters long.',
-    'maxlength': 'Report reson cannot be more than 300 characters long.'
+    'required': 'Report reason is required.',
+    'minlength': 'Report reason must be at least 2 characters long.',
+    'maxlength': 'Report reason cannot be more than 300 characters long.'
   }
 }
diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts
index 65f11f5da..45da7df4a 100644
--- a/client/src/app/shared/forms/form-validators/video.ts
+++ b/client/src/app/shared/forms/form-validators/video.ts
@@ -1,5 +1,11 @@
 import { Validators } from '@angular/forms'
 
+export type ValidatorMessage = {
+  [ id: string ]: {
+    [ error: string ]: string
+  }
+}
+
 export const VIDEO_NAME = {
   VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(120) ],
   MESSAGES: {
@@ -17,17 +23,13 @@ export const VIDEO_PRIVACY = {
 }
 
 export const VIDEO_CATEGORY = {
-  VALIDATORS: [ Validators.required ],
-  MESSAGES: {
-    'required': 'Video category is required.'
-  }
+  VALIDATORS: [ ],
+  MESSAGES: {}
 }
 
 export const VIDEO_LICENCE = {
-  VALIDATORS: [ Validators.required ],
-  MESSAGES: {
-    'required': 'Video licence is required.'
-  }
+  VALIDATORS: [ ],
+  MESSAGES: {}
 }
 
 export const VIDEO_LANGUAGE = {
@@ -43,9 +45,8 @@ export const VIDEO_CHANNEL = {
 }
 
 export const VIDEO_DESCRIPTION = {
-  VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(3000) ],
+  VALIDATORS: [ Validators.minLength(3), Validators.maxLength(3000) ],
   MESSAGES: {
-    'required': 'Video description is required.',
     'minlength': 'Video description must be at least 3 characters long.',
     'maxlength': 'Video description cannot be more than 3000 characters long.'
   }
@@ -58,10 +59,3 @@ export const VIDEO_TAGS = {
     'maxlength': 'A tag should be less than 30 characters long.'
   }
 }
-
-export const VIDEO_FILE = {
-  VALIDATORS: [ Validators.required ],
-  MESSAGES: {
-    'required': 'Video file is required.'
-  }
-}
diff --git a/client/src/app/shared/index.ts b/client/src/app/shared/index.ts
index 79bf5ef43..413dda16a 100644
--- a/client/src/app/shared/index.ts
+++ b/client/src/app/shared/index.ts
@@ -1,7 +1,6 @@
 export * from './auth'
 export * from './forms'
 export * from './rest'
-export * from './search'
 export * from './users'
 export * from './video-abuse'
 export * from './video-blacklist'
diff --git a/client/src/app/shared/misc/button.component.scss b/client/src/app/shared/misc/button.component.scss
new file mode 100644
index 000000000..5fcae4f10
--- /dev/null
+++ b/client/src/app/shared/misc/button.component.scss
@@ -0,0 +1,27 @@
+.action-button {
+  @include peertube-button-link;
+
+  font-size: 15px;
+  font-weight: $font-semibold;
+  color: #585858;
+  background-color: #E5E5E5;
+
+  &:hover {
+    background-color: #EFEFEF;
+  }
+
+  .icon {
+    @include icon(21px);
+
+    position: relative;
+    top: -2px;
+
+    &.icon-edit {
+      background-image: url('../../../assets/images/global/edit.svg');
+    }
+
+    &.icon-delete-grey {
+      background-image: url('../../../assets/images/global/delete-grey.svg');
+    }
+  }
+}
diff --git a/client/src/app/shared/misc/delete-button.component.html b/client/src/app/shared/misc/delete-button.component.html
new file mode 100644
index 000000000..3db483882
--- /dev/null
+++ b/client/src/app/shared/misc/delete-button.component.html
@@ -0,0 +1,4 @@
+<span class="action-button action-button-delete" >
+  <span class="icon icon-delete-grey"></span>
+  Delete
+</span>
diff --git a/client/src/app/shared/misc/delete-button.component.ts b/client/src/app/shared/misc/delete-button.component.ts
new file mode 100644
index 000000000..e04039f69
--- /dev/null
+++ b/client/src/app/shared/misc/delete-button.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'my-delete-button',
+  styleUrls: [ './button.component.scss' ],
+  templateUrl: './delete-button.component.html'
+})
+
+export class DeleteButtonComponent {
+}
diff --git a/client/src/app/shared/misc/edit-button.component.html b/client/src/app/shared/misc/edit-button.component.html
new file mode 100644
index 000000000..6e9564bd7
--- /dev/null
+++ b/client/src/app/shared/misc/edit-button.component.html
@@ -0,0 +1,4 @@
+<a class="action-button" [routerLink]="routerLink">
+  <span class="icon icon-edit"></span>
+  Edit
+</a>
diff --git a/client/src/app/shared/misc/edit-button.component.ts b/client/src/app/shared/misc/edit-button.component.ts
new file mode 100644
index 000000000..201a618ec
--- /dev/null
+++ b/client/src/app/shared/misc/edit-button.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-edit-button',
+  styleUrls: [ './button.component.scss' ],
+  templateUrl: './edit-button.component.html'
+})
+
+export class EditButtonComponent {
+  @Input() routerLink = []
+}
diff --git a/client/src/app/shared/misc/from-now.pipe.ts b/client/src/app/shared/misc/from-now.pipe.ts
new file mode 100644
index 000000000..fac02af0b
--- /dev/null
+++ b/client/src/app/shared/misc/from-now.pipe.ts
@@ -0,0 +1,36 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+// Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
+@Pipe({ name: 'myFromNow' })
+export class FromNowPipe implements PipeTransform {
+
+  transform (value: number) {
+    const seconds = Math.floor((Date.now() - value) / 1000)
+
+    let interval = Math.floor(seconds / 31536000)
+    if (interval > 1) {
+      return interval + ' years ago'
+    }
+
+    interval = Math.floor(seconds / 2592000)
+    if (interval > 1) return interval + ' months ago'
+    if (interval === 1) return interval + ' month ago'
+
+    interval = Math.floor(seconds / 604800)
+    if (interval > 1) return interval + ' weeks ago'
+    if (interval === 1) return interval + ' week ago'
+
+    interval = Math.floor(seconds / 86400)
+    if (interval > 1) return interval + ' days ago'
+    if (interval === 1) return interval + ' day ago'
+
+    interval = Math.floor(seconds / 3600)
+    if (interval > 1) return interval + ' hours ago'
+    if (interval === 1) return interval + ' hour ago'
+
+    interval = Math.floor(seconds / 60)
+    if (interval >= 1) return interval + ' min ago'
+
+    return Math.floor(seconds) + ' sec ago'
+  }
+}
diff --git a/client/src/app/shared/misc/number-formatter.pipe.ts b/client/src/app/shared/misc/number-formatter.pipe.ts
new file mode 100644
index 000000000..8a0756a36
--- /dev/null
+++ b/client/src/app/shared/misc/number-formatter.pipe.ts
@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
+
+@Pipe({ name: 'myNumberFormatter' })
+export class NumberFormatterPipe implements PipeTransform {
+  private dictionary: Array<{max: number, type: string}> = [
+    { max: 1000, type: '' },
+    { max: 1000000, type: 'K' },
+    { max: 1000000000, type: 'M' }
+  ]
+
+  transform (value: number) {
+    const format = this.dictionary.find(d => value < d.max) || this.dictionary[this.dictionary.length - 1]
+    const calc = Math.floor(value / (format.max / 1000))
+
+    return `${calc}${format.type}`
+  }
+}
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
new file mode 100644
index 000000000..df9e0381a
--- /dev/null
+++ b/client/src/app/shared/misc/utils.ts
@@ -0,0 +1,23 @@
+// Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
+
+function getParameterByName (name: string, url: string) {
+  if (!url) url = window.location.href
+  name = name.replace(/[\[\]]/g, '\\$&')
+
+  const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
+  const results = regex.exec(url)
+
+  if (!results) return null
+  if (!results[2]) return ''
+
+  return decodeURIComponent(results[2].replace(/\+/g, ' '))
+}
+
+function viewportHeight () {
+  return Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
+}
+
+export {
+  viewportHeight,
+  getParameterByName
+}
diff --git a/client/src/app/shared/search/index.ts b/client/src/app/shared/search/index.ts
deleted file mode 100644
index d4016cf89..000000000
--- a/client/src/app/shared/search/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './search-field.type'
-export * from './search.component'
-export * from './search.model'
-export * from './search.service'
diff --git a/client/src/app/shared/search/search-field.type.ts b/client/src/app/shared/search/search-field.type.ts
deleted file mode 100644
index 7323d6cc3..000000000
--- a/client/src/app/shared/search/search-field.type.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type SearchField = 'name' | 'account' | 'host' | 'tags'
diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html
deleted file mode 100644
index 75e9dfa59..000000000
--- a/client/src/app/shared/search/search.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<div class="input-group">
-
-  <span class="hidden-xs input-group-addon icon-addon">
-    <span class="glyphicon glyphicon-search"></span>
-  </span>
-
-  <input
-    type="text" id="search-video" name="search-video" class="form-control" placeholder="Search" class="form-control"
-    [(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(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">
-        <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a>
-      </li>
-    </ul>
-  </div>
-</div>
diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss
deleted file mode 100644
index 583f9586f..000000000
--- a/client/src/app/shared/search/search.component.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.icon-addon {
-  background-color: #fff;
-  border-radius: 0;
-  border-color: $header-border-color;
-  border-width: 0 0 1px 0;
-  text-align: right;
-
-  .glyphicon-search {
-    width: 30px;
-    font-size: 20px;
-  }
-}
-
-input, button, .input-group {
-  height: 100%;
-}
-
-input, .input-group-btn {
-  border-radius: 0;
-  border-top: none;
-  border-left: none;
-}
-
-input {
-  height: $header-height;
-  border-right: none;
-  font-weight: bold;
-  box-shadow: none;
-
-  &, &:focus {
-    border-bottom: 1px solid $header-border-color !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-}
-
-button {
-
-  &, &:hover, &:focus, &:active, &:visited {
-    background-color: #fff !important;
-    border-color: $header-border-color !important;
-    color: #858585 !important;
-    outline: none !important;
-
-    height: $header-height;
-    border-width: 0 0 1px 0;
-    font-weight: bold;
-    text-decoration: none;
-    box-shadow: none;
-  }
-}
diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts
deleted file mode 100644
index 6ef19c97a..000000000
--- a/client/src/app/shared/search/search.component.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
-
-import { Search } from './search.model'
-import { SearchField } from './search-field.type'
-import { SearchService } from './search.service'
-
-@Component({
-  selector: 'my-search',
-  templateUrl: './search.component.html',
-  styleUrls: [ './search.component.scss' ]
-})
-
-export class SearchComponent implements OnInit {
-  fieldChoices = {
-    name: 'Name',
-    account: 'Account',
-    host: 'Host',
-    tags: 'Tags'
-  }
-  searchCriteria: Search = {
-    field: 'name',
-    value: ''
-  }
-
-  constructor (private searchService: SearchService, private router: Router) {}
-
-  ngOnInit () {
-    // Subscribe if the search changed
-    // Usually changed by videos list component
-    this.searchService.updateSearch.subscribe(
-      newSearchCriteria => {
-        // Put a field by default
-        if (!newSearchCriteria.field) {
-          newSearchCriteria.field = 'name'
-        }
-
-        this.searchCriteria = newSearchCriteria
-      }
-    )
-  }
-
-  get choiceKeys () {
-    return Object.keys(this.fieldChoices)
-  }
-
-  choose ($event: MouseEvent, choice: SearchField) {
-    $event.preventDefault()
-    $event.stopPropagation()
-
-    this.searchCriteria.field = choice
-
-    if (this.searchCriteria.value) {
-      this.doSearch()
-    }
-  }
-
-  doSearch () {
-    if (this.router.url.indexOf('/videos/list') === -1) {
-      this.router.navigate([ '/videos/list' ])
-    }
-
-    this.searchService.searchUpdated.next(this.searchCriteria)
-  }
-
-  getStringChoice (choiceKey: SearchField) {
-    return this.fieldChoices[choiceKey]
-  }
-}
diff --git a/client/src/app/shared/search/search.model.ts b/client/src/app/shared/search/search.model.ts
deleted file mode 100644
index 174adf2c6..000000000
--- a/client/src/app/shared/search/search.model.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { SearchField } from './search-field.type'
-
-export interface Search {
-  field: SearchField
-  value: string
-}
diff --git a/client/src/app/shared/search/search.service.ts b/client/src/app/shared/search/search.service.ts
deleted file mode 100644
index 0480b46bd..000000000
--- a/client/src/app/shared/search/search.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Subject } from 'rxjs/Subject'
-import { ReplaySubject } from 'rxjs/ReplaySubject'
-
-import { Search } from './search.model'
-
-// This class is needed to communicate between videos/ and search component
-// Remove it when we'll be able to subscribe to router changes
-@Injectable()
-export class SearchService {
-  searchUpdated: Subject<Search>
-  updateSearch: Subject<Search>
-
-  constructor () {
-    this.updateSearch = new Subject<Search>()
-    this.searchUpdated = new ReplaySubject<Search>(1)
-  }
-}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 456ce851e..d0e163f69 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -1,25 +1,29 @@
-import { NgModule } from '@angular/core'
-import { HttpClientModule } from '@angular/common/http'
 import { CommonModule } from '@angular/common'
+import { HttpClientModule } from '@angular/common/http'
+import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 
-import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'
-import { KeysPipe } from 'angular-pipes/src/object/keys.pipe'
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
-import { ProgressbarModule } from 'ngx-bootstrap/progressbar'
-import { PaginationModule } from 'ngx-bootstrap/pagination'
 import { ModalModule } from 'ngx-bootstrap/modal'
-import { DataTableModule } from 'primeng/components/datatable/datatable'
+import { InfiniteScrollModule } from 'ngx-infinite-scroll'
+import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
+import { DataTableModule } from 'primeng/components/datatable/datatable'
 
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
+import { DeleteButtonComponent } from './misc/delete-button.component'
+import { EditButtonComponent } from './misc/edit-button.component'
+import { FromNowPipe } from './misc/from-now.pipe'
+import { LoaderComponent } from './misc/loader.component'
+import { NumberFormatterPipe } from './misc/number-formatter.pipe'
 import { RestExtractor, RestService } from './rest'
-import { SearchComponent, SearchService } from './search'
 import { UserService } from './users'
 import { VideoAbuseService } from './video-abuse'
 import { VideoBlacklistService } from './video-blacklist'
-import { LoaderComponent } from './misc/loader.component'
+import { VideoMiniatureComponent } from './video/video-miniature.component'
+import { VideoThumbnailComponent } from './video/video-thumbnail.component'
+import { VideoService } from './video/video.service'
 
 @NgModule({
   imports: [
@@ -31,18 +35,21 @@ import { LoaderComponent } from './misc/loader.component'
 
     BsDropdownModule.forRoot(),
     ModalModule.forRoot(),
-    PaginationModule.forRoot(),
-    ProgressbarModule.forRoot(),
 
     DataTableModule,
-    PrimeSharedModule
+    PrimeSharedModule,
+    InfiniteScrollModule,
+    NgPipesModule
   ],
 
   declarations: [
-    BytesPipe,
-    KeysPipe,
-    SearchComponent,
-    LoaderComponent
+    LoaderComponent,
+    VideoThumbnailComponent,
+    VideoMiniatureComponent,
+    DeleteButtonComponent,
+    EditButtonComponent,
+    NumberFormatterPipe,
+    FromNowPipe
   ],
 
   exports: [
@@ -54,25 +61,30 @@ import { LoaderComponent } from './misc/loader.component'
 
     BsDropdownModule,
     ModalModule,
-    PaginationModule,
-    ProgressbarModule,
     DataTableModule,
     PrimeSharedModule,
+    InfiniteScrollModule,
     BytesPipe,
     KeysPipe,
 
-    SearchComponent,
-    LoaderComponent
+    LoaderComponent,
+    VideoThumbnailComponent,
+    VideoMiniatureComponent,
+    DeleteButtonComponent,
+    EditButtonComponent,
+
+    NumberFormatterPipe,
+    FromNowPipe
   ],
 
   providers: [
     AUTH_INTERCEPTOR_PROVIDER,
     RestExtractor,
     RestService,
-    SearchService,
     VideoAbuseService,
     VideoBlacklistService,
-    UserService
+    UserService,
+    VideoService
   ]
 })
 export class SharedModule { }
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index b075ab717..b4d13f37c 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -1,10 +1,5 @@
-import {
-  User as UserServerModel,
-  UserRole,
-  VideoChannel,
-  UserRight,
-  hasUserRight
-} from '../../../../../shared'
+import { hasUserRight, User as UserServerModel, UserRight, UserRole, VideoChannel } from '../../../../../shared'
+import { Account } from '../account/account.model'
 
 export type UserConstructorHash = {
   id: number,
@@ -14,10 +9,7 @@ export type UserConstructorHash = {
   videoQuota?: number,
   displayNSFW?: boolean,
   createdAt?: Date,
-  account?: {
-    id: number
-    uuid: string
-  },
+  account?: Account,
   videoChannels?: VideoChannel[]
 }
 export class User implements UserServerModel {
@@ -27,10 +19,7 @@ export class User implements UserServerModel {
   role: UserRole
   displayNSFW: boolean
   videoQuota: number
-  account: {
-    id: number
-    uuid: string
-  }
+  account: Account
   videoChannels: VideoChannel[]
   createdAt: Date
 
@@ -61,4 +50,8 @@ export class User implements UserServerModel {
   hasRight (right: UserRight) {
     return hasUserRight(this.role, right)
   }
+
+  getAvatarPath () {
+    return Account.GET_ACCOUNT_AVATAR_PATH(this.account)
+  }
 }
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
new file mode 100644
index 000000000..5761f2c81
--- /dev/null
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -0,0 +1,20 @@
+<div class="margin-content">
+  <div class="title-page title-page-single">
+    {{ titlePage }}
+  </div>
+
+  <div
+    class="videos"
+    infiniteScroll
+    [infiniteScrollUpDistance]="1.5"
+    [infiniteScrollDistance]="0.5"
+    (scrolled)="onNearOfBottom()"
+    (scrolledUp)="onNearOfTop()"
+  >
+    <my-video-miniature
+      class="ng-animate"
+      *ngFor="let video of videos" [video]="video" [user]="user"
+    >
+    </my-video-miniature>
+  </div>
+</div>
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
new file mode 100644
index 000000000..52797bc6c
--- /dev/null
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -0,0 +1,7 @@
+.videos {
+  text-align: center;
+
+  my-video-miniature {
+    text-align: left;
+  }
+}
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
new file mode 100644
index 000000000..ba1635a18
--- /dev/null
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -0,0 +1,133 @@
+import { OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import { Observable } from 'rxjs/Observable'
+import { SortField } from './sort-field.type'
+import { VideoPagination } from './video-pagination.model'
+import { Video } from './video.model'
+
+export abstract class AbstractVideoList implements OnInit {
+  pagination: VideoPagination = {
+    currentPage: 1,
+    itemsPerPage: 25,
+    totalItems: null
+  }
+  sort: SortField = '-createdAt'
+  defaultSort: SortField = '-createdAt'
+  videos: Video[] = []
+  loadOnInit = true
+
+  protected notificationsService: NotificationsService
+  protected router: Router
+  protected route: ActivatedRoute
+
+  protected abstract currentRoute: string
+
+  abstract titlePage: string
+  private loadedPages: { [ id: number ]: boolean } = {}
+
+  abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
+
+  ngOnInit () {
+    // Subscribe to route changes
+    const routeParams = this.route.snapshot.params
+    this.loadRouteParams(routeParams)
+
+    if (this.loadOnInit === true) this.loadMoreVideos('after')
+  }
+
+  onNearOfTop () {
+    if (this.pagination.currentPage > 1) {
+      this.previousPage()
+    }
+  }
+
+  onNearOfBottom () {
+    if (this.hasMoreVideos()) {
+      this.nextPage()
+    }
+  }
+
+  reloadVideos () {
+    this.videos = []
+    this.loadedPages = {}
+    this.loadMoreVideos('before')
+  }
+
+  loadMoreVideos (where: 'before' | 'after') {
+    if (this.loadedPages[this.pagination.currentPage] === true) return
+
+    const observable = this.getVideosObservable()
+
+    observable.subscribe(
+      ({ videos, totalVideos }) => {
+        // Paging is too high, return to the first one
+        if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) {
+          this.pagination.currentPage = 1
+          this.setNewRouteParams()
+          return this.reloadVideos()
+        }
+
+        this.loadedPages[this.pagination.currentPage] = true
+        this.pagination.totalItems = totalVideos
+
+        if (where === 'before') {
+          this.videos = videos.concat(this.videos)
+        } else {
+          this.videos = this.videos.concat(videos)
+        }
+      },
+      error => this.notificationsService.error('Error', error.text)
+    )
+  }
+
+  protected hasMoreVideos () {
+    // No results
+    if (this.pagination.totalItems === 0) return false
+
+    // Not loaded yet
+    if (!this.pagination.totalItems) return true
+
+    const maxPage = this.pagination.totalItems / this.pagination.itemsPerPage
+    return maxPage > this.pagination.currentPage
+  }
+
+  protected previousPage () {
+    this.pagination.currentPage--
+
+    this.setNewRouteParams()
+    this.loadMoreVideos('before')
+  }
+
+  protected nextPage () {
+    this.pagination.currentPage++
+
+    this.setNewRouteParams()
+    this.loadMoreVideos('after')
+  }
+
+  protected buildRouteParams () {
+    // There is always a sort and a current page
+    const params = {
+      sort: this.sort,
+      page: this.pagination.currentPage
+    }
+
+    return params
+  }
+
+  protected loadRouteParams (routeParams: { [ key: string ]: any }) {
+    this.sort = routeParams['sort'] as SortField || this.defaultSort
+
+    if (routeParams['page'] !== undefined) {
+      this.pagination.currentPage = parseInt(routeParams['page'], 10)
+    } else {
+      this.pagination.currentPage = 1
+    }
+  }
+
+  protected setNewRouteParams () {
+    const routeParams = this.buildRouteParams()
+    this.router.navigate([ this.currentRoute, routeParams ])
+  }
+}
diff --git a/client/src/app/shared/video/sort-field.type.ts b/client/src/app/shared/video/sort-field.type.ts
new file mode 100644
index 000000000..776f360f8
--- /dev/null
+++ b/client/src/app/shared/video/sort-field.type.ts
@@ -0,0 +1,5 @@
+export type SortField = 'name' | '-name'
+                      | 'duration' | '-duration'
+                      | 'createdAt' | '-createdAt'
+                      | 'views' | '-views'
+                      | 'likes' | '-likes'
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
new file mode 100644
index 000000000..b96f8f6c8
--- /dev/null
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -0,0 +1,92 @@
+import { Account } from '../../../../../shared/models/accounts'
+import { Video } from '../../shared/video/video.model'
+import { AuthUser } from '../../core'
+import {
+  VideoDetails as VideoDetailsServerModel,
+  VideoFile,
+  VideoChannel,
+  VideoResolution,
+  UserRight,
+  VideoPrivacy
+} from '../../../../../shared'
+
+export class VideoDetails extends Video implements VideoDetailsServerModel {
+  accountName: string
+  by: string
+  createdAt: Date
+  updatedAt: Date
+  categoryLabel: string
+  category: number
+  licenceLabel: string
+  licence: number
+  languageLabel: string
+  language: number
+  description: string
+  duration: number
+  durationLabel: string
+  id: number
+  uuid: string
+  isLocal: boolean
+  name: string
+  serverHost: string
+  tags: string[]
+  thumbnailPath: string
+  thumbnailUrl: string
+  previewPath: string
+  previewUrl: string
+  embedPath: string
+  embedUrl: string
+  views: number
+  likes: number
+  dislikes: number
+  nsfw: boolean
+  descriptionPath: string
+  files: VideoFile[]
+  channel: VideoChannel
+  privacy: VideoPrivacy
+  privacyLabel: string
+  account: Account
+  likesPercent: number
+  dislikesPercent: number
+
+  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
+    this.account = hash.account
+
+    this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
+    this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
+  }
+
+  getAppropriateMagnetUri (actualDownloadSpeed = 0) {
+    if (this.files === undefined || this.files.length === 0) return ''
+    if (this.files.length === 1) return this.files[0].magnetUri
+
+    // Find first video that is good for our download speed (remember they are sorted)
+    let betterResolutionFile = this.files.find(f => actualDownloadSpeed > (f.size / this.duration))
+
+    // If the download speed is too bad, return the lowest resolution we have
+    if (betterResolutionFile === undefined) {
+      betterResolutionFile = this.files.find(f => f.resolution === VideoResolution.H_240P)
+    }
+
+    return betterResolutionFile.magnetUri
+  }
+
+  isRemovableBy (user: AuthUser) {
+    return user && this.isLocal === true && (this.accountName === user.username || user.hasRight(UserRight.REMOVE_ANY_VIDEO))
+  }
+
+  isBlackistableBy (user: AuthUser) {
+    return user && user.hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) === true && this.isLocal === false
+  }
+
+  isUpdatableBy (user: AuthUser) {
+    return user && this.isLocal === true && user.username === this.accountName
+  }
+}
diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts
new file mode 100644
index 000000000..955255bfa
--- /dev/null
+++ b/client/src/app/shared/video/video-edit.model.ts
@@ -0,0 +1,52 @@
+import { VideoDetails } from './video-details.model'
+import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
+
+export class VideoEdit {
+  category: number
+  licence: number
+  language: number
+  description: string
+  name: string
+  tags: string[]
+  nsfw: boolean
+  channel: number
+  privacy: VideoPrivacy
+  uuid?: string
+  id?: number
+
+  constructor (videoDetails?: VideoDetails) {
+    if (videoDetails) {
+      this.id = videoDetails.id
+      this.uuid = videoDetails.uuid
+      this.category = videoDetails.category
+      this.licence = videoDetails.licence
+      this.language = videoDetails.language
+      this.description = videoDetails.description
+      this.name = videoDetails.name
+      this.tags = videoDetails.tags
+      this.nsfw = videoDetails.nsfw
+      this.channel = videoDetails.channel.id
+      this.privacy = videoDetails.privacy
+    }
+  }
+
+  patch (values: Object) {
+    Object.keys(values).forEach((key) => {
+      this[key] = values[key]
+    })
+  }
+
+  toJSON () {
+    return {
+      category: this.category,
+      licence: this.licence,
+      language: this.language,
+      description: this.description,
+      name: this.name,
+      tags: this.tags,
+      nsfw: this.nsfw,
+      channel: this.channel,
+      privacy: this.privacy
+    }
+  }
+}
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
new file mode 100644
index 000000000..7ac017235
--- /dev/null
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -0,0 +1,17 @@
+<div class="video-miniature">
+  <my-video-thumbnail [video]="video" [nsfw]="isVideoNSFWForThisUser()"></my-video-thumbnail>
+
+  <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>
+
+    <span class="video-miniature-created-at-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
+    <span class="video-miniature-account">{{ video.by }}</span>
+  </div>
+</div>
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
new file mode 100644
index 000000000..37e84897b
--- /dev/null
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -0,0 +1,44 @@
+.video-miniature {
+  display: inline-block;
+  padding-right: 15px;
+  margin-bottom: 30px;
+  height: 175px;
+  vertical-align: top;
+
+  .video-miniature-information {
+    width: 200px;
+    margin-top: 2px;
+    line-height: normal;
+
+    .video-miniature-name {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: bold;
+      transition: color 0.2s;
+      font-size: 16px;
+      font-weight: $font-semibold;
+      color: #000;
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      &.blur-filter {
+        filter: blur(3px);
+        padding-left: 4px;
+      }
+    }
+
+    .video-miniature-created-at-views {
+      display: block;
+      font-size: 13px;
+    }
+
+    .video-miniature-account {
+      font-size: 13px;
+      color: #585858;
+    }
+  }
+}
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
new file mode 100644
index 000000000..4d79a74bb
--- /dev/null
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core'
+import { User } from '../users'
+import { Video } from './video.model'
+
+@Component({
+  selector: 'my-video-miniature',
+  styleUrls: [ './video-miniature.component.scss' ],
+  templateUrl: './video-miniature.component.html'
+})
+export class VideoMiniatureComponent {
+  @Input() user: User
+  @Input() video: Video
+
+  isVideoNSFWForThisUser () {
+    return this.video.isVideoNSFWForUser(this.user)
+  }
+}
diff --git a/client/src/app/shared/video/video-pagination.model.ts b/client/src/app/shared/video/video-pagination.model.ts
new file mode 100644
index 000000000..e9db61596
--- /dev/null
+++ b/client/src/app/shared/video/video-pagination.model.ts
@@ -0,0 +1,5 @@
+export interface VideoPagination {
+  currentPage: number
+  itemsPerPage: number
+  totalItems?: number
+}
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
new file mode 100644
index 000000000..5c698e8f6
--- /dev/null
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -0,0 +1,10 @@
+<a
+  [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
+class="video-thumbnail"
+>
+<img [attr.src]="video.thumbnailUrl" alt="video thumbnail" [ngClass]="{ 'blur-filter': nsfw }" />
+
+<div class="video-thumbnail-overlay">
+  {{ video.durationLabel }}
+</div>
+</a>
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
new file mode 100644
index 000000000..ab4f9bcb1
--- /dev/null
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -0,0 +1,28 @@
+.video-thumbnail {
+  display: inline-block;
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+
+  &:hover {
+    text-decoration: none !important;
+  }
+
+  img.blur-filter {
+    filter: blur(5px);
+    transform : scale(1.03);
+  }
+
+  .video-thumbnail-overlay {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    display: inline-block;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    font-size: 12px;
+    font-weight: $font-bold;
+    border-radius: 3px;
+    padding: 0 5px;
+  }
+}
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
new file mode 100644
index 000000000..e543e9903
--- /dev/null
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core'
+import { Video } from './video.model'
+
+@Component({
+  selector: 'my-video-thumbnail',
+  styleUrls: [ './video-thumbnail.component.scss' ],
+  templateUrl: './video-thumbnail.component.html'
+})
+export class VideoThumbnailComponent {
+  @Input() video: Video
+  @Input() nsfw = false
+}
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
new file mode 100644
index 000000000..d86ef8f92
--- /dev/null
+++ b/client/src/app/shared/video/video.model.ts
@@ -0,0 +1,92 @@
+import { Video as VideoServerModel } from '../../../../../shared'
+import { User } from '../'
+import { Account } from '../../../../../shared/models/accounts'
+
+export class Video implements VideoServerModel {
+  accountName: string
+  by: string
+  createdAt: Date
+  updatedAt: Date
+  categoryLabel: string
+  category: number
+  licenceLabel: string
+  licence: number
+  languageLabel: string
+  language: number
+  description: string
+  duration: number
+  durationLabel: string
+  id: number
+  uuid: string
+  isLocal: boolean
+  name: string
+  serverHost: string
+  tags: string[]
+  thumbnailPath: string
+  thumbnailUrl: string
+  previewPath: string
+  previewUrl: string
+  embedPath: string
+  embedUrl: string
+  views: number
+  likes: number
+  dislikes: number
+  nsfw: boolean
+  account: Account
+
+  private static createByString (account: string, serverHost: string) {
+    return account + '@' + serverHost
+  }
+
+  private static createDurationString (duration: number) {
+    const minutes = Math.floor(duration / 60)
+    const seconds = duration % 60
+    const minutesPadding = minutes >= 10 ? '' : '0'
+    const secondsPadding = seconds >= 10 ? '' : '0'
+
+    return minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
+  }
+
+  constructor (hash: VideoServerModel) {
+    let absoluteAPIUrl = API_URL
+    if (!absoluteAPIUrl) {
+      // The API is on the same domain
+      absoluteAPIUrl = window.location.origin
+    }
+
+    this.accountName = hash.accountName
+    this.createdAt = new Date(hash.createdAt.toString())
+    this.categoryLabel = hash.categoryLabel
+    this.category = hash.category
+    this.licenceLabel = hash.licenceLabel
+    this.licence = hash.licence
+    this.languageLabel = hash.languageLabel
+    this.language = hash.language
+    this.description = hash.description
+    this.duration = hash.duration
+    this.durationLabel = Video.createDurationString(hash.duration)
+    this.id = hash.id
+    this.uuid = hash.uuid
+    this.isLocal = hash.isLocal
+    this.name = hash.name
+    this.serverHost = hash.serverHost
+    this.tags = hash.tags
+    this.thumbnailPath = hash.thumbnailPath
+    this.thumbnailUrl = absoluteAPIUrl + hash.thumbnailPath
+    this.previewPath = hash.previewPath
+    this.previewUrl = absoluteAPIUrl + hash.previewPath
+    this.embedPath = hash.embedPath
+    this.embedUrl = absoluteAPIUrl + hash.embedPath
+    this.views = hash.views
+    this.likes = hash.likes
+    this.dislikes = hash.dislikes
+    this.nsfw = hash.nsfw
+
+    this.by = Video.createByString(hash.accountName, hash.serverHost)
+  }
+
+  isVideoNSFWForUser (user: User) {
+    // If the video is NSFW and the user is not logged in, or the user does not want to display NSFW videos...
+    return (this.nsfw && (!user || user.displayNSFW === false))
+  }
+}
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
new file mode 100644
index 000000000..1a0644c3d
--- /dev/null
+++ b/client/src/app/shared/video/video.service.ts
@@ -0,0 +1,172 @@
+import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import 'rxjs/add/operator/catch'
+import 'rxjs/add/operator/map'
+import { Observable } from 'rxjs/Observable'
+import { Video as VideoServerModel, VideoDetails as VideoDetailsServerModel } from '../../../../../shared'
+import { ResultList } from '../../../../../shared/models/result-list.model'
+import { UserVideoRateUpdate } from '../../../../../shared/models/videos/user-video-rate-update.model'
+import { UserVideoRate } from '../../../../../shared/models/videos/user-video-rate.model'
+import { VideoRateType } from '../../../../../shared/models/videos/video-rate.type'
+import { VideoUpdate } from '../../../../../shared/models/videos/video-update.model'
+import { RestExtractor } from '../rest/rest-extractor.service'
+import { RestService } from '../rest/rest.service'
+import { Search } from '../header/search.model'
+import { UserService } from '../users/user.service'
+import { SortField } from './sort-field.type'
+import { VideoDetails } from './video-details.model'
+import { VideoEdit } from './video-edit.model'
+import { VideoPagination } from './video-pagination.model'
+import { Video } from './video.model'
+
+@Injectable()
+export class VideoService {
+  private static BASE_VIDEO_URL = API_URL + '/api/v1/videos/'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService
+  ) {}
+
+  getVideo (uuid: string): Observable<VideoDetails> {
+    return this.authHttp.get<VideoDetailsServerModel>(VideoService.BASE_VIDEO_URL + uuid)
+                        .map(videoHash => new VideoDetails(videoHash))
+                        .catch((res) => this.restExtractor.handleError(res))
+  }
+
+  viewVideo (uuid: string): Observable<VideoDetails> {
+    return this.authHttp.post(VideoService.BASE_VIDEO_URL + uuid + '/views', {})
+      .map(this.restExtractor.extractDataBool)
+      .catch(this.restExtractor.handleError)
+  }
+
+  updateVideo (video: VideoEdit) {
+    const language = video.language || undefined
+    const licence = video.licence || undefined
+    const category = video.category || undefined
+    const description = video.description || undefined
+
+    const body: VideoUpdate = {
+      name: video.name,
+      category,
+      licence,
+      language,
+      description,
+      privacy: video.privacy,
+      tags: video.tags,
+      nsfw: video.nsfw
+    }
+
+    return this.authHttp.put(VideoService.BASE_VIDEO_URL + video.id, body)
+                        .map(this.restExtractor.extractDataBool)
+                        .catch(this.restExtractor.handleError)
+  }
+
+  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)
+  }
+
+  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(UserService.BASE_USERS_URL + '/me/videos', { params })
+      .map(this.extractVideos)
+      .catch((res) => this.restExtractor.handleError(res))
+  }
+
+  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: string, videoPagination: VideoPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> {
+    const url = VideoService.BASE_VIDEO_URL + 'search'
+
+    const pagination = this.videoPaginationToRestPagination(videoPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+    params = params.append('search', search)
+
+    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))
+  }
+
+  loadCompleteDescription (descriptionPath: string) {
+    return this.authHttp
+      .get(API_URL + descriptionPath)
+      .map(res => res['description'])
+      .catch((res) => this.restExtractor.handleError(res))
+  }
+
+  setVideoLike (id: number) {
+    return this.setVideoRate(id, 'like')
+  }
+
+  setVideoDislike (id: number) {
+    return this.setVideoRate(id, 'dislike')
+  }
+
+  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))
+  }
+
+  private videoPaginationToRestPagination (videoPagination: VideoPagination) {
+    const start: number = (videoPagination.currentPage - 1) * videoPagination.itemsPerPage
+    const count: number = videoPagination.itemsPerPage
+
+    return { start, count }
+  }
+
+  private setVideoRate (id: number, rateType: VideoRateType) {
+    const url = VideoService.BASE_VIDEO_URL + id + '/rate'
+    const body: UserVideoRateUpdate = {
+      rating: rateType
+    }
+
+    return this.authHttp
+      .put(url, body)
+      .map(this.restExtractor.extractDataBool)
+      .catch(res => this.restExtractor.handleError(res))
+  }
+
+  private extractVideos (result: ResultList<VideoServerModel>) {
+    const videosJson = result.data
+    const totalVideos = result.total
+    const videos = []
+
+    for (const videoJson of videosJson) {
+      videos.push(new Video(videoJson))
+    }
+
+    return { videos, totalVideos }
+  }
+}