Reorganize client shared modules

73 files changed, 3514 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-main/account/account.model.ts b/client/src/app/shared/shared-main/account/account.model.ts
new file mode 100644
index 000000000..6df2e9d10
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -0,0 +1,30 @@
+import { Account as ServerAccount } from '@shared/models/actors/account.model'
+import { Actor } from './actor.model'
+
+export class Account extends Actor implements ServerAccount {
+  displayName: string
+  description: string
+  nameWithHost: string
+  nameWithHostForced: string
+  mutedByUser: boolean
+  mutedByInstance: boolean
+  mutedServerByUser: boolean
+  mutedServerByInstance: boolean
+
+  userId?: number
+
+  constructor (hash: ServerAccount) {
+    super(hash)
+
+    this.displayName = hash.displayName
+    this.description = hash.description
+    this.userId = hash.userId
+    this.nameWithHost = Actor.CREATE_BY_STRING(this.name, this.host)
+    this.nameWithHostForced = Actor.CREATE_BY_STRING(this.name, this.host, true)
+
+    this.mutedByUser = false
+    this.mutedByInstance = false
+    this.mutedServerByUser = false
+    this.mutedServerByInstance = false
+  }
+}
diff --git a/client/src/app/shared/shared-main/account/account.service.ts b/client/src/app/shared/shared-main/account/account.service.ts
new file mode 100644
index 000000000..8f4abf070
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/account.service.ts
@@ -0,0 +1,29 @@
+import { Observable, ReplaySubject } from 'rxjs'
+import { catchError, map, tap } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor } from '@app/core'
+import { Account as ServerAccount } from '@shared/models'
+import { environment } from '../../../../environments/environment'
+import { Account } from './account.model'
+
+@Injectable()
+export class AccountService {
+  static BASE_ACCOUNT_URL = environment.apiUrl + '/api/v1/accounts/'
+
+  accountLoaded = new ReplaySubject<Account>(1)
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) {}
+
+  getAccount (id: number | string): Observable<Account> {
+    return this.authHttp.get<ServerAccount>(AccountService.BASE_ACCOUNT_URL + id)
+               .pipe(
+                 map(accountHash => new Account(accountHash)),
+                 tap(account => this.accountLoaded.next(account)),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+}
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
new file mode 100644
index 000000000..d01b9ac7f
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
@@ -0,0 +1,24 @@
+<ng-container *ngIf="actor">
+  <div class="actor">
+    <div class="d-flex">
+      <img [src]="actor.avatarUrl" alt="Avatar" />
+
+      <div class="actor-img-edit-container">
+        <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', '+ maxSizeText +': '+ maxAvatarSizeInBytes +')'" placement="right" container="body">
+          <my-global-icon iconName="edit"></my-global-icon>
+          <label for="avatarfile" i18n>Change your avatar</label>
+          <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="actor-info">
+      <div class="actor-info-names">
+        <div class="actor-info-display-name">{{ actor.displayName }}</div>
+        <div class="actor-info-username">{{ actor.name }}</div>
+      </div>
+      <div i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div>
+    </div>
+  </div>
+</ng-container>
\ No newline at end of file
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
new file mode 100644
index 000000000..5a66ecfd2
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
@@ -0,0 +1,71 @@
+@import '_variables';
+@import '_mixins';
+
+.actor {
+  display: flex;
+
+  img {
+    @include avatar(100px);
+
+    margin-right: 15px;
+  }
+
+  .actor-img-edit-container {
+    position: relative;
+    width: 0;
+
+    .actor-img-edit-button {
+      @include peertube-button-file(21px);
+      @include button-with-icon(19px);
+    
+      margin-top: 10px;
+      margin-bottom: 5px;
+      border-radius: 50%;
+      top: 55px;
+      right: 45px;
+      cursor: pointer;
+
+      input {
+        width: 30px;
+        height: 30px;
+      }
+
+      my-global-icon {
+        right: 7px;
+      }
+    }
+  }
+
+  .actor-info {
+    justify-content: center;
+    display: inline-flex;
+    flex-direction: column;
+
+    .actor-info-names {
+      display: flex;
+      align-items: center;
+
+      .actor-info-display-name {
+        font-size: 20px;
+        font-weight: $font-bold;
+
+        @media screen and (max-width: $small-view) {
+          font-size: 16px;
+        }
+      }
+
+      .actor-info-username {
+        margin-left: 7px;
+        position: relative;
+        top: 2px;
+        font-size: 14px;
+        color: $grey-actor-name;
+      }
+    }
+
+    .actor-info-followers {
+      font-size: 15px;
+      padding-bottom: .5rem;
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
new file mode 100644
index 000000000..0c04ae4a6
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
@@ -0,0 +1,64 @@
+import { BytesPipe } from 'ngx-pipes'
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { Notifier, ServerService } from '@app/core'
+import { Account, VideoChannel } from '@app/shared/shared-main'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ServerConfig } from '@shared/models'
+
+@Component({
+  selector: 'my-actor-avatar-info',
+  templateUrl: './actor-avatar-info.component.html',
+  styleUrls: [ './actor-avatar-info.component.scss' ]
+})
+export class ActorAvatarInfoComponent implements OnInit {
+  @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
+
+  @Input() actor: VideoChannel | Account
+
+  @Output() avatarChange = new EventEmitter<FormData>()
+
+  maxSizeText: string
+
+  private serverConfig: ServerConfig
+  private bytesPipe: BytesPipe
+
+  constructor (
+    private serverService: ServerService,
+    private notifier: Notifier,
+    private i18n: I18n
+  ) {
+    this.bytesPipe = new BytesPipe()
+    this.maxSizeText = this.i18n('max size')
+  }
+
+  ngOnInit (): void {
+    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverService.getConfig()
+        .subscribe(config => this.serverConfig = config)
+  }
+
+  onAvatarChange () {
+    const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
+    if (avatarfile.size > this.maxAvatarSize) {
+      this.notifier.error('Error', 'This image is too large.')
+      return
+    }
+
+    const formData = new FormData()
+    formData.append('avatarfile', avatarfile)
+
+    this.avatarChange.emit(formData)
+  }
+
+  get maxAvatarSize () {
+    return this.serverConfig.avatar.file.size.max
+  }
+
+  get maxAvatarSizeInBytes () {
+    return this.bytesPipe.transform(this.maxAvatarSize)
+  }
+
+  get avatarExtensions () {
+    return this.serverConfig.avatar.file.extensions.join(', ')
+  }
+}
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts
new file mode 100644
index 000000000..5fc7989dd
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -0,0 +1,65 @@
+import { Actor as ActorServer, Avatar } from '@shared/models'
+import { getAbsoluteAPIUrl } from '@app/helpers'
+
+export abstract class Actor implements ActorServer {
+  id: number
+  url: string
+  name: string
+  host: string
+  followingCount: number
+  followersCount: number
+  createdAt: Date | string
+  updatedAt: Date | string
+  avatar: Avatar
+
+  avatarUrl: string
+
+  static GET_ACTOR_AVATAR_URL (actor: { avatar?: Avatar }) {
+    if (actor?.avatar?.url) return actor.avatar.url
+
+    if (actor && actor.avatar) {
+      const absoluteAPIUrl = getAbsoluteAPIUrl()
+
+      return absoluteAPIUrl + actor.avatar.path
+    }
+
+    return this.GET_DEFAULT_AVATAR_URL()
+  }
+
+  static GET_DEFAULT_AVATAR_URL () {
+    return window.location.origin + '/client/assets/images/default-avatar.png'
+  }
+
+  static CREATE_BY_STRING (accountName: string, host: string, forceHostname = false) {
+    const absoluteAPIUrl = getAbsoluteAPIUrl()
+    const thisHost = new URL(absoluteAPIUrl).host
+
+    if (host.trim() === thisHost && !forceHostname) return accountName
+
+    return accountName + '@' + host
+  }
+
+  protected constructor (hash: ActorServer) {
+    this.id = hash.id
+    this.url = hash.url
+    this.name = hash.name
+    this.host = hash.host
+    this.followingCount = hash.followingCount
+    this.followersCount = hash.followersCount
+    this.createdAt = new Date(hash.createdAt.toString())
+    this.updatedAt = new Date(hash.updatedAt.toString())
+    this.avatar = hash.avatar
+
+    this.updateComputedAttributes()
+  }
+
+  updateAvatar (newAvatar: Avatar) {
+    this.avatar = newAvatar
+
+    this.updateComputedAttributes()
+  }
+
+  private updateComputedAttributes () {
+    this.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(this)
+  }
+}
diff --git a/client/src/app/shared/shared-main/account/avatar.component.html b/client/src/app/shared/shared-main/account/avatar.component.html
new file mode 100644
index 000000000..09871fca4
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/avatar.component.html
@@ -0,0 +1,8 @@
+<div class="wrapper" [ngClass]="'avatar-' + size">
+  <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+    <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" />
+  </a>
+  <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
+    <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
+  </a>
+</div>
diff --git a/client/src/app/shared/shared-main/account/avatar.component.scss b/client/src/app/shared/shared-main/account/avatar.component.scss
new file mode 100644
index 000000000..37709fce6
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/avatar.component.scss
@@ -0,0 +1,40 @@
+@import '_mixins';
+
+.wrapper {
+  $avatar-size: 35px;
+
+  width: $avatar-size;
+  height: $avatar-size;
+  position: relative;
+  margin-right: 5px;
+  margin-bottom: 5px;
+
+  &.avatar-sm {
+    width: 28px;
+    height: 28px;
+    margin-bottom: 3px;
+  }
+
+  a {
+    @include disable-outline;
+  }
+
+  a img {
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top:50%;
+    left:50%;
+    border-radius: 50%;
+    transform: translate(-50%,-50%)
+  }
+
+  a:nth-of-type(2) img {
+    height: 60%;
+    width: 60%;
+    border: 2px solid pvar(--mainBackgroundColor);
+    transform: translateX(15%);
+    position: relative;
+    background-color: pvar(--mainBackgroundColor);
+  }
+}
diff --git a/client/src/app/shared/shared-main/account/avatar.component.ts b/client/src/app/shared/shared-main/account/avatar.component.ts
new file mode 100644
index 000000000..31f39c200
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/avatar.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { Video } from '../video/video.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+@Component({
+  selector: 'avatar-channel',
+  templateUrl: './avatar.component.html',
+  styleUrls: [ './avatar.component.scss' ]
+})
+export class AvatarComponent implements OnInit {
+  @Input() video: Video
+  @Input() size: 'md' | 'sm' = 'md'
+
+  channelLinkTitle = ''
+  accountLinkTitle = ''
+
+  constructor (
+    private i18n: I18n
+  ) {}
+
+  ngOnInit () {
+    this.channelLinkTitle = this.i18n(
+      '{{name}} (channel page)',
+      { name: this.video.channel.name, handle: this.video.byVideoChannel }
+    )
+    this.accountLinkTitle = this.i18n(
+      '{{name}} (account page)',
+      { name: this.video.account.name, handle: this.video.byAccount }
+    )
+  }
+}
diff --git a/client/src/app/shared/shared-main/account/index.ts b/client/src/app/shared/shared-main/account/index.ts
new file mode 100644
index 000000000..f5b9f3634
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/index.ts
@@ -0,0 +1,5 @@
+export * from './account.model'
+export * from './account.service'
+export * from './actor-avatar-info.component'
+export * from './actor.model'
+export * from './avatar.component'
diff --git a/client/src/app/shared/shared-main/angular/from-now.pipe.ts b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
new file mode 100644
index 000000000..9851468ee
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
@@ -0,0 +1,39 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+// 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 {
+
+  constructor (private i18n: I18n) { }
+
+  transform (arg: number | Date | string) {
+    const argDate = new Date(arg)
+    const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000)
+
+    let interval = Math.floor(seconds / 31536000)
+    if (interval > 1) return this.i18n('{{interval}} years ago', { interval })
+    if (interval === 1) return this.i18n('{{interval}} year ago', { interval })
+
+    interval = Math.floor(seconds / 2592000)
+    if (interval > 1) return this.i18n('{{interval}} months ago', { interval })
+    if (interval === 1) return this.i18n('{{interval}} month ago', { interval })
+
+    interval = Math.floor(seconds / 604800)
+    if (interval > 1) return this.i18n('{{interval}} weeks ago', { interval })
+    if (interval === 1) return this.i18n('{{interval}} week ago', { interval })
+
+    interval = Math.floor(seconds / 86400)
+    if (interval > 1) return this.i18n('{{interval}} days ago', { interval })
+    if (interval === 1) return this.i18n('{{interval}} day ago', { interval })
+
+    interval = Math.floor(seconds / 3600)
+    if (interval > 1) return this.i18n('{{interval}} hours ago', { interval })
+    if (interval === 1) return this.i18n('{{interval}} hour ago', { interval })
+
+    interval = Math.floor(seconds / 60)
+    if (interval >= 1) return this.i18n('{{interval}} min ago', { interval })
+
+    return this.i18n('just now')
+  }
+}
diff --git a/client/src/app/shared/shared-main/angular/index.ts b/client/src/app/shared/shared-main/angular/index.ts
new file mode 100644
index 000000000..3b072fb84
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/index.ts
@@ -0,0 +1,4 @@
+export * from './from-now.pipe'
+export * from './infinite-scroller.directive'
+export * from './number-formatter.pipe'
+export * from './peertube-template.directive'
diff --git a/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts
new file mode 100644
index 000000000..f09c3d1fc
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts
@@ -0,0 +1,96 @@
+import { distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators'
+import { AfterContentChecked, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { fromEvent, Observable, Subscription } from 'rxjs'
+
+@Directive({
+  selector: '[myInfiniteScroller]'
+})
+export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterContentChecked {
+  @Input() percentLimit = 70
+  @Input() autoInit = false
+  @Input() onItself = false
+  @Input() dataObservable: Observable<any[]>
+
+  @Output() nearOfBottom = new EventEmitter<void>()
+
+  private decimalLimit = 0
+  private lastCurrentBottom = -1
+  private scrollDownSub: Subscription
+  private container: HTMLElement
+
+  private checkScroll = false
+
+  constructor (private el: ElementRef) {
+    this.decimalLimit = this.percentLimit / 100
+  }
+
+  ngAfterContentChecked () {
+    if (this.checkScroll) {
+      this.checkScroll = false
+
+      console.log('Checking if the initial state has a scroll.')
+
+      if (this.hasScroll() === false) this.nearOfBottom.emit()
+    }
+  }
+
+  ngOnInit () {
+    if (this.autoInit === true) return this.initialize()
+  }
+
+  ngOnDestroy () {
+    if (this.scrollDownSub) this.scrollDownSub.unsubscribe()
+  }
+
+  initialize () {
+    this.container = this.onItself
+      ? this.el.nativeElement
+      : document.documentElement
+
+    // Emit the last value
+    const throttleOptions = { leading: true, trailing: true }
+
+    const scrollableElement = this.onItself ? this.container : window
+    const scrollObservable = fromEvent(scrollableElement, 'scroll')
+      .pipe(
+        startWith(true),
+        throttleTime(200, undefined, throttleOptions),
+        map(() => this.getScrollInfo()),
+        distinctUntilChanged((o1, o2) => o1.current === o2.current),
+        share()
+      )
+
+    // Scroll Down
+    this.scrollDownSub = scrollObservable
+      .pipe(
+        filter(({ current }) => this.isScrollingDown(current)),
+        filter(({ current, maximumScroll }) => (current / maximumScroll) > this.decimalLimit)
+      )
+      .subscribe(() => this.nearOfBottom.emit())
+
+    if (this.dataObservable) {
+      this.dataObservable
+          .pipe(filter(d => d.length !== 0))
+          .subscribe(() => this.checkScroll = true)
+    }
+  }
+
+  private getScrollInfo () {
+    return { current: this.container.scrollTop, maximumScroll: this.getMaximumScroll() }
+  }
+
+  private getMaximumScroll () {
+    return this.container.scrollHeight - window.innerHeight
+  }
+
+  private hasScroll () {
+    return this.getMaximumScroll() > 0
+  }
+
+  private isScrollingDown (current: number) {
+    const result = this.lastCurrentBottom < current
+
+    this.lastCurrentBottom = current
+    return result
+  }
+}
diff --git a/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts b/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts
new file mode 100644
index 000000000..8a0756a36
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/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/shared-main/angular/peertube-template.directive.ts b/client/src/app/shared/shared-main/angular/peertube-template.directive.ts
new file mode 100644
index 000000000..e04c25d9a
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/peertube-template.directive.ts
@@ -0,0 +1,12 @@
+import { Directive, Input, TemplateRef } from '@angular/core'
+
+@Directive({
+  selector: '[ptTemplate]'
+})
+export class PeerTubeTemplateDirective <T extends string> {
+  @Input('ptTemplate') name: T
+
+  constructor (public template: TemplateRef<any>) {
+    // empty
+  }
+}
diff --git a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
new file mode 100644
index 000000000..68a4acdb5
--- /dev/null
+++ b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
@@ -0,0 +1,60 @@
+import { Observable, throwError as observableThrowError } from 'rxjs'
+import { catchError, switchMap } from 'rxjs/operators'
+import { HTTP_INTERCEPTORS, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'
+import { Injectable, Injector } from '@angular/core'
+import { AuthService } from '@app/core/auth/auth.service'
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+  private authService: AuthService
+
+  // https://github.com/angular/angular/issues/18224#issuecomment-316957213
+  constructor (private injector: Injector) {}
+
+  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if (this.authService === undefined) {
+      this.authService = this.injector.get(AuthService)
+    }
+
+    const authReq = this.cloneRequestWithAuth(req)
+
+    // Pass on the cloned request instead of the original request
+    // Catch 401 errors (refresh token expired)
+    return next.handle(authReq)
+               .pipe(
+                 catchError(err => {
+                   if (err.status === 401 && err.error && err.error.code === 'invalid_token') {
+                     return this.handleTokenExpired(req, next)
+                   }
+
+                   return observableThrowError(err)
+                 })
+               )
+  }
+
+  private handleTokenExpired (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return this.authService.refreshAccessToken()
+               .pipe(
+                 switchMap(() => {
+                   const authReq = this.cloneRequestWithAuth(req)
+
+                   return next.handle(authReq)
+                 })
+               )
+  }
+
+  private cloneRequestWithAuth (req: HttpRequest<any>) {
+    const authHeaderValue = this.authService.getRequestHeaderValue()
+
+    if (authHeaderValue === null) return req
+
+    // Clone the request to add the new header
+    return req.clone({ headers: req.headers.set('Authorization', authHeaderValue) })
+  }
+}
+
+export const AUTH_INTERCEPTOR_PROVIDER = {
+  provide: HTTP_INTERCEPTORS,
+  useClass: AuthInterceptor,
+  multi: true
+}
diff --git a/client/src/app/shared/shared-main/auth/index.ts b/client/src/app/shared/shared-main/auth/index.ts
new file mode 100644
index 000000000..84a07196f
--- /dev/null
+++ b/client/src/app/shared/shared-main/auth/index.ts
@@ -0,0 +1 @@
+export * from './auth-interceptor.service'
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
new file mode 100644
index 000000000..12933d4ca
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -0,0 +1,55 @@
+<div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
+  <button
+    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
+    ngbDropdownToggle role="button"
+  >
+    <my-global-icon *ngIf="!label && buttonDirection === 'horizontal'" class="more-icon" iconName="more-horizontal"></my-global-icon>
+    <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon>
+
+    <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
+</button>
+
+  <div ngbDropdownMenu class="dropdown-menu">
+    <ng-container *ngFor="let actions of getActions()">
+
+      <ng-container *ngFor="let action of actions">
+        <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
+
+          <ng-template #templateActionLabel let-action>
+            <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName" aria-hidden="true"></my-global-icon>
+
+            <div class="d-flex flex-column">
+              <span i18n>{{ action.label }}</span>
+              <small class="text-muted" *ngIf="action.description">{{ action.description }}</small>
+            </div>
+          </ng-template>
+
+          <a
+            *ngIf="action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="dropdown-item"  [routerLink]="action.linkBuilder(entry)" [title]="action.title || ''"
+          >
+            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+          </a>
+
+          <span
+            *ngIf="!action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="custom-action dropdown-item" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
+          >
+            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+          </span>
+
+          <h6
+            *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
+          >
+            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+          </h6>
+
+        </ng-container>
+      </ng-container>
+
+      <div *ngIf="areActionsDisplayed(actions, entry)" class="dropdown-divider"></div>
+
+    </ng-container>
+  </div>
+</div>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
new file mode 100644
index 000000000..724a04efc
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
@@ -0,0 +1,72 @@
+@import '_variables';
+@import '_mixins';
+
+.dropdown-divider:last-child {
+  display: none;
+}
+
+.action-button {
+  @include peertube-button;
+
+  &.button-styled {
+
+    &.grey {
+      @include grey-button;
+    }
+
+    &.orange {
+      @include orange-button;
+    }
+
+    &:hover, &:active, &:focus {
+      background-color: $grey-background-color;
+    }
+  }
+
+  display: inline-block;
+  padding: 0 10px;
+
+  &::after {
+    display: none;
+  }
+
+  .more-icon {
+    width: 21px;
+
+    ::ng-deep {
+      @include apply-svg-color(pvar(--actionButtonColor));
+    }
+  }
+
+  &.small {
+    font-size: 14px;
+    height: 20px;
+    line-height: 20px;
+  }
+}
+
+.dropdown-toggle::after {
+  position: relative;
+  top: 1px;
+}
+
+.dropdown-menu {
+  .dropdown-header {
+    padding: 0.2rem 1rem;
+  }
+
+  .dropdown-item {
+    display: flex;
+    cursor: pointer;
+    color: #000 !important;
+
+    &.with-icon {
+      @include dropdown-with-icon-item;
+    }
+
+    a, span {
+      display: block;
+      width: 100%;
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
new file mode 100644
index 000000000..36d7d6229
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
@@ -0,0 +1,52 @@
+import { Component, Input } from '@angular/core'
+import { GlobalIconName } from '@app/shared/shared-icons'
+
+export type DropdownAction<T> = {
+  label?: string
+  iconName?: GlobalIconName
+  description?: string
+  title?: string
+  handler?: (a: T) => any
+  linkBuilder?: (a: T) => (string | number)[]
+  isDisplayed?: (a: T) => boolean
+  isHeader?: boolean
+}
+
+export type DropdownButtonSize = 'normal' | 'small'
+export type DropdownTheme = 'orange' | 'grey'
+export type DropdownDirection = 'horizontal' | 'vertical'
+
+@Component({
+  selector: 'my-action-dropdown',
+  styleUrls: [ './action-dropdown.component.scss' ],
+  templateUrl: './action-dropdown.component.html'
+})
+
+export class ActionDropdownComponent<T> {
+  @Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = []
+  @Input() entry: T
+
+  @Input() placement = 'bottom-left auto'
+  @Input() container: null | 'body'
+
+  @Input() buttonSize: DropdownButtonSize = 'normal'
+  @Input() buttonDirection: DropdownDirection = 'horizontal'
+  @Input() buttonStyled = true
+
+  @Input() label: string
+  @Input() theme: DropdownTheme = 'grey'
+
+  getActions (): DropdownAction<T>[][] {
+    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions as DropdownAction<T>[][]
+
+    return [ this.actions as DropdownAction<T>[] ]
+  }
+
+  areActionsDisplayed (actions: Array<DropdownAction<T> | DropdownAction<T>[]>, entry: T): boolean {
+    return actions.some(a => {
+      if (Array.isArray(a)) return this.areActionsDisplayed(a, entry)
+
+      return a.isDisplayed === undefined || a.isDisplayed(entry)
+    })
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
new file mode 100644
index 000000000..d2b0eb81a
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -0,0 +1,6 @@
+<span class="action-button" [ngClass]="className" [title]="getTitle()">
+  <my-global-icon *ngIf="!loading" [iconName]="icon"></my-global-icon>
+  <my-small-loader [loading]="loading"></my-small-loader>
+
+  <span class="button-label">{{ label }}</span>
+</span>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
new file mode 100644
index 000000000..3ccfefd7e
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -0,0 +1,46 @@
+@import '_variables';
+@import '_mixins';
+
+my-small-loader ::ng-deep .root {
+  display: inline-block;
+  margin: 0 3px 0 0;
+  width: 20px;
+}
+
+.action-button {
+  @include peertube-button-link;
+  @include button-with-icon(21px, 0, -2px);
+}
+
+.orange-button {
+  @include peertube-button;
+  @include orange-button;
+}
+
+.orange-button-link {
+  @include peertube-button-link;
+  @include orange-button;
+}
+
+.grey-button {
+  @include peertube-button;
+  @include grey-button;
+}
+
+.grey-button-link {
+  @include peertube-button-link;
+  @include grey-button;
+}
+
+// In a table, try to minimize the space taken by this button
+@media screen and (max-width: 1400px) {
+  :host-context(td) {
+    .action-button {
+      padding: 0 13px;
+    }
+
+    .button-label {
+      display: none;
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
new file mode 100644
index 000000000..e23b90945
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core'
+import { GlobalIconName } from '@app/shared/shared-icons'
+
+@Component({
+  selector: 'my-button',
+  styleUrls: ['./button.component.scss'],
+  templateUrl: './button.component.html'
+})
+
+export class ButtonComponent {
+  @Input() label = ''
+  @Input() className = 'grey-button'
+  @Input() icon: GlobalIconName = undefined
+  @Input() title: string = undefined
+  @Input() loading = false
+
+  getTitle () {
+    return this.title || this.label
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.html b/client/src/app/shared/shared-main/buttons/delete-button.component.html
new file mode 100644
index 000000000..398b6db1e
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.html
@@ -0,0 +1,6 @@
+<span class="action-button action-button-delete grey-button" [title]="title" role="button">
+  <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
+
+  <span class="button-label" *ngIf="label">{{ label }}</span>
+  <span class="button-label" i18n *ngIf="!label">Delete</span>
+</span>
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.ts b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
new file mode 100644
index 000000000..39e31900f
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+@Component({
+  selector: 'my-delete-button',
+  styleUrls: [ './button.component.scss' ],
+  templateUrl: './delete-button.component.html'
+})
+
+export class DeleteButtonComponent implements OnInit {
+  @Input() label: string
+
+  title: string
+
+  constructor (private i18n: I18n) { }
+
+  ngOnInit () {
+    this.title = this.label || this.i18n('Delete')
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.html b/client/src/app/shared/shared-main/buttons/edit-button.component.html
new file mode 100644
index 000000000..b852bb38a
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.html
@@ -0,0 +1,6 @@
+<a class="action-button action-button-edit grey-button" [routerLink]="routerLink" i18n-title title="Edit">
+  <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
+
+  <span class="button-label" *ngIf="label">{{ label }}</span>
+  <span i18n class="button-label" *ngIf="!label">Edit</span>
+</a>
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
new file mode 100644
index 000000000..9cfe1a3bb
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-edit-button',
+  styleUrls: [ './button.component.scss' ],
+  templateUrl: './edit-button.component.html'
+})
+
+export class EditButtonComponent {
+  @Input() label: string
+  @Input() routerLink: string[] | string = []
+}
diff --git a/client/src/app/shared/shared-main/buttons/index.ts b/client/src/app/shared/shared-main/buttons/index.ts
new file mode 100644
index 000000000..775a47a39
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/index.ts
@@ -0,0 +1,4 @@
+export * from './action-dropdown.component'
+export * from './button.component'
+export * from './delete-button.component'
+export * from './edit-button.component'
diff --git a/client/src/app/shared/shared-main/date/date-toggle.component.html b/client/src/app/shared/shared-main/date/date-toggle.component.html
new file mode 100644
index 000000000..ebd4ce442
--- /dev/null
+++ b/client/src/app/shared/shared-main/date/date-toggle.component.html
@@ -0,0 +1,6 @@
+<span
+  class="date-toggle"
+  [title]="getTitle()"
+  [innerHtml]="getContent()"
+  (click)="toggle()"
+></span>
diff --git a/client/src/app/shared/shared-main/date/date-toggle.component.scss b/client/src/app/shared/shared-main/date/date-toggle.component.scss
new file mode 100644
index 000000000..86700d1d4
--- /dev/null
+++ b/client/src/app/shared/shared-main/date/date-toggle.component.scss
@@ -0,0 +1,5 @@
+.date-toggle {
+  &:hover {
+    cursor: default
+  }
+}
diff --git a/client/src/app/shared/shared-main/date/date-toggle.component.ts b/client/src/app/shared/shared-main/date/date-toggle.component.ts
new file mode 100644
index 000000000..bedf0ba4e
--- /dev/null
+++ b/client/src/app/shared/shared-main/date/date-toggle.component.ts
@@ -0,0 +1,46 @@
+import { DatePipe } from '@angular/common'
+import { Component, Input, OnChanges, OnInit } from '@angular/core'
+import { FromNowPipe } from '../angular/from-now.pipe'
+
+@Component({
+  selector: 'my-date-toggle',
+  templateUrl: './date-toggle.component.html',
+  styleUrls: [ './date-toggle.component.scss' ]
+})
+export class DateToggleComponent implements OnInit, OnChanges {
+  @Input() date: Date
+  @Input() toggled = false
+
+  dateRelative: string
+  dateAbsolute: string
+
+  constructor (
+    private datePipe: DatePipe,
+    private fromNowPipe: FromNowPipe
+  ) { }
+
+  ngOnInit () {
+    this.updateDates()
+  }
+
+  ngOnChanges () {
+    this.updateDates()
+  }
+
+  toggle () {
+    this.toggled = !this.toggled
+  }
+
+  getTitle () {
+    return this.toggled ? this.dateRelative : this.dateAbsolute
+  }
+
+  getContent () {
+    return this.toggled ? this.dateAbsolute : this.dateRelative
+  }
+
+  private updateDates () {
+    this.dateRelative = this.fromNowPipe.transform(this.date)
+    this.dateAbsolute = this.datePipe.transform(this.date, 'long')
+  }
+}
diff --git a/client/src/app/shared/shared-main/date/index.ts b/client/src/app/shared/shared-main/date/index.ts
new file mode 100644
index 000000000..db00aef52
--- /dev/null
+++ b/client/src/app/shared/shared-main/date/index.ts
@@ -0,0 +1 @@
+export * from './date-toggle.component'
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.html b/client/src/app/shared/shared-main/feeds/feed.component.html
new file mode 100644
index 000000000..ac0b1f454
--- /dev/null
+++ b/client/src/app/shared/shared-main/feeds/feed.component.html
@@ -0,0 +1,15 @@
+<div class="video-feed"
+  [ngbTooltip]="'Feeds available'"
+  placement="right auto"
+  container="body"
+>
+  <my-global-icon
+    *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom"
+    class="icon-syndication" role="button" iconName="syndication"
+  >
+  </my-global-icon>
+
+  <ng-template #feedsList>
+    <a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a>
+  </ng-template>
+</div>
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.scss b/client/src/app/shared/shared-main/feeds/feed.component.scss
new file mode 100644
index 000000000..34dd0e937
--- /dev/null
+++ b/client/src/app/shared/shared-main/feeds/feed.component.scss
@@ -0,0 +1,20 @@
+@import '_variables';
+@import '_mixins';
+
+.video-feed {
+  width: min-content;
+
+  a {
+    color: black;
+    display: block;
+  }
+
+  my-global-icon {
+    cursor: pointer;
+    width: 12px;
+    position: relative;
+    top: -2px;
+
+    @include apply-svg-color(pvar(--mainForegroundColor))
+  }
+}
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.ts b/client/src/app/shared/shared-main/feeds/feed.component.ts
new file mode 100644
index 000000000..ee3731c1d
--- /dev/null
+++ b/client/src/app/shared/shared-main/feeds/feed.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+import { Syndication } from './syndication.model'
+
+@Component({
+  selector: 'my-feed',
+  styleUrls: [ './feed.component.scss' ],
+  templateUrl: './feed.component.html'
+})
+export class FeedComponent {
+  @Input() syndicationItems: Syndication[]
+}
diff --git a/client/src/app/shared/shared-main/feeds/index.ts b/client/src/app/shared/shared-main/feeds/index.ts
new file mode 100644
index 000000000..6bc396699
--- /dev/null
+++ b/client/src/app/shared/shared-main/feeds/index.ts
@@ -0,0 +1,2 @@
+export * from './feed.component'
+export * from './syndication.model'
diff --git a/client/src/app/shared/shared-main/feeds/syndication.model.ts b/client/src/app/shared/shared-main/feeds/syndication.model.ts
new file mode 100644
index 000000000..2466ae7c6
--- /dev/null
+++ b/client/src/app/shared/shared-main/feeds/syndication.model.ts
@@ -0,0 +1,7 @@
+import { FeedFormat } from '@shared/models'
+
+export interface Syndication {
+  format: FeedFormat,
+  label: string,
+  url: string
+}
diff --git a/client/src/app/shared/shared-main/index.ts b/client/src/app/shared/shared-main/index.ts
new file mode 100644
index 000000000..a4d813c06
--- /dev/null
+++ b/client/src/app/shared/shared-main/index.ts
@@ -0,0 +1,12 @@
+export * from './account'
+export * from './angular'
+export * from './buttons'
+export * from './date'
+export * from './feeds'
+export * from './loaders'
+export * from './misc'
+export * from './users'
+export * from './video'
+export * from './video-caption'
+export * from './video-channel'
+export * from './shared-main.module'
diff --git a/client/src/app/shared/shared-main/loaders/index.ts b/client/src/app/shared/shared-main/loaders/index.ts
new file mode 100644
index 000000000..a061914d5
--- /dev/null
+++ b/client/src/app/shared/shared-main/loaders/index.ts
@@ -0,0 +1,2 @@
+export * from './loader.component'
+export * from './small-loader.component'
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.html b/client/src/app/shared/shared-main/loaders/loader.component.html
new file mode 100644
index 000000000..ca8ed063e
--- /dev/null
+++ b/client/src/app/shared/shared-main/loaders/loader.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="loading">
+  <div class="loader">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.scss b/client/src/app/shared/shared-main/loaders/loader.component.scss
new file mode 100644
index 000000000..ffac9c707
--- /dev/null
+++ b/client/src/app/shared/shared-main/loaders/loader.component.scss
@@ -0,0 +1,45 @@
+@import '_variables';
+@import '_mixins';
+
+// Thanks to https://loading.io/css/ (CC0 License)
+
+.loader {
+  display: inline-block;
+  position: relative;
+  width: 50px;
+  height: 50px;
+}
+
+.loader div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 44px;
+  height: 44px;
+  margin: 6px;
+  border: 4px solid;
+  border-radius: 50%;
+  animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #999999 transparent transparent transparent;
+}
+
+.loader div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.loader div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.loader div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
new file mode 100644
index 000000000..e3b1eea3a
--- /dev/null
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-loader',
+  styleUrls: [ './loader.component.scss' ],
+  templateUrl: './loader.component.html'
+})
+export class LoaderComponent {
+  @Input() loading: boolean
+}
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.html b/client/src/app/shared/shared-main/loaders/small-loader.component.html
new file mode 100644
index 000000000..7886f8918
--- /dev/null
+++ b/client/src/app/shared/shared-main/loaders/small-loader.component.html
@@ -0,0 +1,3 @@
+<div class="root" *ngIf="loading">
+  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.ts b/client/src/app/shared/shared-main/loaders/small-loader.component.ts
new file mode 100644
index 000000000..191877f14
--- /dev/null
+++ b/client/src/app/shared/shared-main/loaders/small-loader.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-small-loader',
+  styleUrls: [ ],
+  templateUrl: './small-loader.component.html'
+})
+
+export class SmallLoaderComponent {
+  @Input() loading: boolean
+}
diff --git a/client/src/app/shared/shared-main/misc/help.component.html b/client/src/app/shared/shared-main/misc/help.component.html
new file mode 100644
index 000000000..9a6d3e48e
--- /dev/null
+++ b/client/src/app/shared/shared-main/misc/help.component.html
@@ -0,0 +1,40 @@
+<ng-template #tooltipTemplate>
+  <p *ngIf="preHtmlTemplate">
+    <ng-template *ngTemplateOutlet="preHtmlTemplate"></ng-template>
+  </p>
+
+  <ng-container *ngIf="preHtmlTemplate && (customHtmlTemplate || mainHtml || postHtmlTemplate)">
+    <br /><br />
+  </ng-container>
+
+  <p *ngIf="customHtmlTemplate">
+    <ng-template *ngTemplateOutlet="customHtmlTemplate"></ng-template>
+  </p>
+
+  <p *ngIf="mainHtml" [innerHTML]="mainHtml"></p>
+
+  <ng-container *ngIf="(customHtmlTemplate || mainHtml) && postHtmlTemplate">
+    <br /><br />
+  </ng-container>
+
+  <p *ngIf="postHtmlTemplate">
+    <ng-template *ngTemplateOutlet="postHtmlTemplate"></ng-template>
+  </p>
+</ng-template>
+
+<span
+  role="button"
+  class="help-tooltip-button"
+  container="body"
+  title="Get help"
+  i18n-title
+  popoverClass="help-popover"
+  [attr.aria-pressed]="isPopoverOpened"
+  [ngbPopover]="tooltipTemplate"
+  [placement]="tooltipPlacement"
+  autoClose="outside"
+  (onHidden)="onPopoverHidden()"
+  (onShown)="onPopoverShown()"
+>
+  <my-global-icon iconName="help"></my-global-icon>
+</span>
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
new file mode 100644
index 000000000..43f33a53a
--- /dev/null
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -0,0 +1,42 @@
+@import '_variables';
+@import '_mixins';
+
+.help-tooltip-button {
+  cursor: pointer;
+  border: none;
+
+  my-global-icon {
+    width: 17px;
+    position: relative;
+    top: -2px;
+    margin: 5px;
+
+    @include apply-svg-color(pvar(--mainForegroundColor))
+  }
+}
+
+::ng-deep {
+  .help-popover {
+    z-index: z(help-popover) !important;
+    max-width: 300px;
+
+    .popover-body {
+      font-family: $main-fonts;
+      text-align: left;
+      padding: 10px;
+      font-size: 13px;
+      background-color: pvar(--mainBackgroundColor);
+      color: pvar(--mainForegroundColor);
+      border-radius: 3px;
+
+      p {
+        margin-bottom: 0;
+      }
+
+      ul {
+        padding-left: 20px;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-main/misc/help.component.ts b/client/src/app/shared/shared-main/misc/help.component.ts
new file mode 100644
index 000000000..0825b96de
--- /dev/null
+++ b/client/src/app/shared/shared-main/misc/help.component.ts
@@ -0,0 +1,94 @@
+import { AfterContentInit, Component, ContentChildren, Input, OnChanges, OnInit, QueryList, TemplateRef } from '@angular/core'
+import { MarkdownService } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { PeerTubeTemplateDirective } from '../angular'
+
+@Component({
+  selector: 'my-help',
+  styleUrls: [ './help.component.scss' ],
+  templateUrl: './help.component.html'
+})
+
+export class HelpComponent implements OnInit, OnChanges, AfterContentInit {
+  @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
+  @Input() tooltipPlacement = 'right auto'
+
+  @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'preHtml' | 'customHtml' | 'postHtml'>>
+
+  isPopoverOpened = false
+  mainHtml = ''
+
+  preHtmlTemplate: TemplateRef<any>
+  customHtmlTemplate: TemplateRef<any>
+  postHtmlTemplate: TemplateRef<any>
+
+  constructor (private i18n: I18n) { }
+
+  ngOnInit () {
+    this.init()
+  }
+
+  ngAfterContentInit () {
+    {
+      const t = this.templates.find(t => t.name === 'preHtml')
+      if (t) this.preHtmlTemplate = t.template
+    }
+
+    {
+      const t = this.templates.find(t => t.name === 'customHtml')
+      if (t) this.customHtmlTemplate = t.template
+    }
+
+    {
+      const t = this.templates.find(t => t.name === 'postHtml')
+      if (t) this.postHtmlTemplate = t.template
+    }
+  }
+
+  ngOnChanges () {
+    this.init()
+  }
+
+  onPopoverHidden () {
+    this.isPopoverOpened = false
+  }
+
+  onPopoverShown () {
+    this.isPopoverOpened = true
+  }
+
+  private init () {
+    if (this.helpType === 'markdownText') {
+      this.mainHtml = this.formatMarkdownSupport(MarkdownService.TEXT_RULES)
+      return
+    }
+
+    if (this.helpType === 'markdownEnhanced') {
+      this.mainHtml = this.formatMarkdownSupport(MarkdownService.ENHANCED_RULES)
+      return
+    }
+  }
+
+  private formatMarkdownSupport (rules: string[]) {
+    // tslint:disable:max-line-length
+    return this.i18n('<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> compatible that supports:') +
+      this.createMarkdownList(rules)
+  }
+
+  private createMarkdownList (rules: string[]) {
+    const rulesToText = {
+      'emphasis': this.i18n('Emphasis'),
+      'link': this.i18n('Links'),
+      'newline': this.i18n('New lines'),
+      'list': this.i18n('Lists'),
+      'image': this.i18n('Images')
+    }
+
+    const bullets = rules.map(r => rulesToText[r])
+      .filter(text => text)
+      .map(text => '<li>' + text + '</li>')
+      .join('')
+
+    return '<ul>' + bullets + '</ul>'
+  }
+}
diff --git a/client/src/app/shared/shared-main/misc/index.ts b/client/src/app/shared/shared-main/misc/index.ts
new file mode 100644
index 000000000..d3e7e4be7
--- /dev/null
+++ b/client/src/app/shared/shared-main/misc/index.ts
@@ -0,0 +1,2 @@
+export * from './help.component'
+export * from './list-overflow.component'
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.html b/client/src/app/shared/shared-main/misc/list-overflow.component.html
new file mode 100644
index 000000000..986572801
--- /dev/null
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.html
@@ -0,0 +1,35 @@
+<div #itemsParent class="d-flex align-items-center text-nowrap w-100 list-overflow-parent">
+  <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
+    <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
+  </span>
+  
+  <ng-container *ngIf="isMenuDisplayed()">
+    <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
+      <span class="glyphicon glyphicon-chevron-down"></span>
+    </button>
+  
+    <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
+      <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ routeActive: active }"
+        ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
+      >
+        <span class="glyphicon glyphicon-chevron-down"></span>
+      </button>
+  
+      <div ngbDropdownMenu>
+        <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
+          [routerLink]="item.routerLink" routerLinkActive="active" class="dropdown-item">
+          {{ item.label }}
+        </a>
+      </div>
+    </div>
+  </ng-container>
+</div >
+
+<ng-template #modal let-close="close" let-dismiss="dismiss">
+  <div class="modal-body">
+    <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
+       [routerLink]="item.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
+       {{ item.label }}
+    </a>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.scss b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
new file mode 100644
index 000000000..1ec044489
--- /dev/null
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
@@ -0,0 +1,61 @@
+@import '_mixins';
+
+:host {
+  width: 100%;
+}
+
+.list-overflow-parent {
+  overflow: hidden;
+}
+
+.list-overflow-menu {
+  position: absolute;
+  right: 25px;
+}
+
+button {
+  width: 30px;
+  border: none;
+
+  &::after {
+    display: none;
+  }
+
+  &.routeActive {
+    &::after {
+      display: inherit;
+      border: 2px solid pvar(--mainColor);
+      position: relative;
+      right: 95%;
+      top: 50%;
+    }
+  }
+}
+
+::ng-deep .dropdown-menu {
+  margin-top: 0 !important;
+  position: static;
+  right: auto;
+  bottom: auto
+}
+
+.modal-body {
+  a {
+    @include disable-default-a-behaviour;
+
+    color: currentColor;
+    box-sizing: border-box;
+    display: block;
+    font-size: 1.2rem;
+    padding: 9px 12px;
+    text-align: initial;
+    text-transform: unset;
+    width: 100%;
+
+    &.active {
+      color: pvar(--mainBackgroundColor) !important;
+      background-color: pvar(--mainHoverColor);
+      opacity: .9;
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.ts b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
new file mode 100644
index 000000000..144e0f156
--- /dev/null
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
@@ -0,0 +1,120 @@
+import { lowerFirst, uniqueId } from 'lodash-es'
+import { take } from 'rxjs/operators'
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+  ViewChildren
+} from '@angular/core'
+import { ScreenService } from '@app/core'
+import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+
+export interface ListOverflowItem {
+  label: string
+  routerLink: string | any[]
+}
+
+@Component({
+  selector: 'list-overflow',
+  templateUrl: './list-overflow.component.html',
+  styleUrls: [ './list-overflow.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ListOverflowComponent<T extends ListOverflowItem> implements AfterViewInit {
+  @Input() items: T[]
+  @Input() itemTemplate: TemplateRef<{item: T}>
+
+  @ViewChild('modal', { static: true }) modal: ElementRef
+  @ViewChild('itemsParent', { static: true }) parent: ElementRef<HTMLDivElement>
+  @ViewChildren('itemsRendered') itemsRendered: QueryList<ElementRef>
+
+  showItemsUntilIndexExcluded: number
+  active = false
+  isInTouchScreen = false
+  isInMobileView = false
+
+  private openedOnHover = false
+
+  constructor (
+    private cdr: ChangeDetectorRef,
+    private modalService: NgbModal,
+    private screenService: ScreenService
+  ) {}
+
+  ngAfterViewInit () {
+    setTimeout(() => this.onWindowResize(), 0)
+  }
+
+  isMenuDisplayed () {
+    return !!this.showItemsUntilIndexExcluded
+  }
+
+  @HostListener('window:resize')
+  onWindowResize () {
+    this.isInTouchScreen = !!this.screenService.isInTouchScreen()
+    this.isInMobileView = !!this.screenService.isInMobileView()
+
+    const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
+    let showItemsUntilIndexExcluded: number
+    let accWidth = 0
+
+    for (const [index, el] of this.itemsRendered.toArray().entries()) {
+      accWidth += el.nativeElement.getBoundingClientRect().width
+      if (showItemsUntilIndexExcluded === undefined) {
+        showItemsUntilIndexExcluded = (parentWidth < accWidth) ? index : undefined
+      }
+
+      const e = document.getElementById(this.getId(index))
+      const shouldBeVisible = showItemsUntilIndexExcluded ? index < showItemsUntilIndexExcluded : true
+      e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
+    }
+
+    this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
+    this.cdr.markForCheck()
+  }
+
+  openDropdownOnHover (dropdown: NgbDropdown) {
+    this.openedOnHover = true
+    dropdown.open()
+
+    // Menu was closed
+    dropdown.openChange
+            .pipe(take(1))
+            .subscribe(() => this.openedOnHover = false)
+  }
+
+  dropdownAnchorClicked (dropdown: NgbDropdown) {
+    if (this.openedOnHover) {
+      this.openedOnHover = false
+      return
+    }
+
+    return dropdown.toggle()
+  }
+
+  closeDropdownIfHovered (dropdown: NgbDropdown) {
+    if (this.openedOnHover === false) return
+
+    dropdown.close()
+    this.openedOnHover = false
+  }
+
+  toggleModal () {
+    this.modalService.open(this.modal, { centered: true })
+  }
+
+  dismissOtherModals () {
+    this.modalService.dismissAll()
+  }
+
+  getId (id: number | string = uniqueId()): string {
+    return lowerFirst(this.constructor.name) + '_' + id
+  }
+}
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
new file mode 100644
index 000000000..fd96a42a0
--- /dev/null
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -0,0 +1,164 @@
+import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
+import { SharedModule as PrimeSharedModule } from 'primeng/api'
+import { InputMaskModule } from 'primeng/inputmask'
+import { InputSwitchModule } from 'primeng/inputswitch'
+import { MultiSelectModule } from 'primeng/multiselect'
+import { ClipboardModule } from '@angular/cdk/clipboard'
+import { CommonModule, DatePipe } 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 {
+  NgbCollapseModule,
+  NgbDropdownModule,
+  NgbModalModule,
+  NgbNavModule,
+  NgbPopoverModule,
+  NgbTooltipModule
+} from '@ng-bootstrap/ng-bootstrap'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { AccountService, ActorAvatarInfoComponent, AvatarComponent } from './account'
+import { FromNowPipe, InfiniteScrollerDirective, NumberFormatterPipe, PeerTubeTemplateDirective } from './angular'
+import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditButtonComponent } from './buttons'
+import { DateToggleComponent } from './date'
+import { FeedComponent } from './feeds'
+import { LoaderComponent, SmallLoaderComponent } from './loaders'
+import { HelpComponent, ListOverflowComponent } from './misc'
+import { UserHistoryService, UserNotificationsComponent, UserNotificationService } from './users'
+import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
+import { VideoCaptionService } from './video-caption'
+import { VideoChannelService } from './video-channel'
+import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    HttpClientModule,
+
+    NgbDropdownModule,
+    NgbModalModule,
+    NgbPopoverModule,
+    NgbNavModule,
+    NgbTooltipModule,
+    NgbCollapseModule,
+
+    ClipboardModule,
+
+    PrimeSharedModule,
+    InputMaskModule,
+    NgPipesModule,
+    MultiSelectModule,
+    InputSwitchModule,
+
+    SharedGlobalIconModule
+  ],
+
+  declarations: [
+    AvatarComponent,
+    ActorAvatarInfoComponent,
+
+    FromNowPipe,
+    InfiniteScrollerDirective,
+    NumberFormatterPipe,
+    PeerTubeTemplateDirective,
+
+    ActionDropdownComponent,
+    ButtonComponent,
+    DeleteButtonComponent,
+    EditButtonComponent,
+
+    DateToggleComponent,
+
+    FeedComponent,
+
+    LoaderComponent,
+    SmallLoaderComponent,
+
+    HelpComponent,
+    ListOverflowComponent,
+
+    UserNotificationsComponent,
+
+    FeedComponent
+  ],
+
+  exports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    HttpClientModule,
+
+    NgbDropdownModule,
+    NgbModalModule,
+    NgbPopoverModule,
+    NgbNavModule,
+    NgbTooltipModule,
+    NgbCollapseModule,
+
+    ClipboardModule,
+
+    PrimeSharedModule,
+    InputMaskModule,
+    BytesPipe,
+    KeysPipe,
+    MultiSelectModule,
+
+    AvatarComponent,
+    ActorAvatarInfoComponent,
+
+    FromNowPipe,
+    InfiniteScrollerDirective,
+    NumberFormatterPipe,
+    PeerTubeTemplateDirective,
+
+    ActionDropdownComponent,
+    ButtonComponent,
+    DeleteButtonComponent,
+    EditButtonComponent,
+
+    DateToggleComponent,
+
+    FeedComponent,
+
+    LoaderComponent,
+    SmallLoaderComponent,
+
+    HelpComponent,
+    ListOverflowComponent,
+
+    UserNotificationsComponent,
+
+    FeedComponent
+  ],
+
+  providers: [
+    I18n,
+
+    DatePipe,
+
+    FromNowPipe,
+
+    AUTH_INTERCEPTOR_PROVIDER,
+
+    AccountService,
+
+    UserHistoryService,
+    UserNotificationService,
+
+    RedundancyService,
+    VideoImportService,
+    VideoOwnershipService,
+    VideoService,
+
+    VideoCaptionService,
+
+    VideoChannelService
+  ]
+})
+export class SharedMainModule { }
diff --git a/client/src/app/shared/shared-main/users/index.ts b/client/src/app/shared/shared-main/users/index.ts
new file mode 100644
index 000000000..83401ab52
--- /dev/null
+++ b/client/src/app/shared/shared-main/users/index.ts
@@ -0,0 +1,4 @@
+export * from './user-history.service'
+export * from './user-notification.model'
+export * from './user-notification.service'
+export * from './user-notifications.component'
diff --git a/client/src/app/shared/shared-main/users/user-history.service.ts b/client/src/app/shared/shared-main/users/user-history.service.ts
new file mode 100644
index 000000000..43970dc5b
--- /dev/null
+++ b/client/src/app/shared/shared-main/users/user-history.service.ts
@@ -0,0 +1,43 @@
+import { catchError, map, switchMap } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { ComponentPaginationLight, RestExtractor, RestService } from '@app/core'
+import { ResultList } from '@shared/models'
+import { environment } from '../../../../environments/environment'
+import { Video } from '../video/video.model'
+import { VideoService } from '../video/video.service'
+
+@Injectable()
+export class UserHistoryService {
+  static BASE_USER_VIDEOS_HISTORY_URL = environment.apiUrl + '/api/v1/users/me/history/videos'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService,
+    private videoService: VideoService
+  ) {}
+
+  getUserVideosHistory (historyPagination: ComponentPaginationLight) {
+    const pagination = this.restService.componentPaginationToRestPagination(historyPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination)
+
+    return this.authHttp
+               .get<ResultList<Video>>(UserHistoryService.BASE_USER_VIDEOS_HISTORY_URL, { params })
+               .pipe(
+                 switchMap(res => this.videoService.extractVideos(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  deleteUserVideosHistory () {
+    return this.authHttp
+               .post(UserHistoryService.BASE_USER_VIDEOS_HISTORY_URL + '/remove', {})
+               .pipe(
+                 map(() => this.restExtractor.extractDataBool()),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+}
diff --git a/client/src/app/shared/shared-main/users/user-notification.model.ts b/client/src/app/shared/shared-main/users/user-notification.model.ts
new file mode 100644
index 000000000..de25d3ab9
--- /dev/null
+++ b/client/src/app/shared/shared-main/users/user-notification.model.ts
@@ -0,0 +1,184 @@
+import { Actor } from '../account/actor.model'
+import { ActorInfo, Avatar, FollowState, UserNotification as UserNotificationServer, UserNotificationType, VideoInfo } from '@shared/models'
+
+export class UserNotification implements UserNotificationServer {
+  id: number
+  type: UserNotificationType
+  read: boolean
+
+  video?: VideoInfo & {
+    channel: ActorInfo & { avatarUrl?: string }
+  }
+
+  videoImport?: {
+    id: number
+    video?: VideoInfo
+    torrentName?: string
+    magnetUri?: string
+    targetUrl?: string
+  }
+
+  comment?: {
+    id: number
+    threadId: number
+    account: ActorInfo & { avatarUrl?: string }
+    video: VideoInfo
+  }
+
+  videoAbuse?: {
+    id: number
+    video: VideoInfo
+  }
+
+  videoBlacklist?: {
+    id: number
+    video: VideoInfo
+  }
+
+  account?: ActorInfo & { avatarUrl?: string }
+
+  actorFollow?: {
+    id: number
+    state: FollowState
+    follower: ActorInfo & { avatarUrl?: string }
+    following: {
+      type: 'account' | 'channel' | 'instance'
+      name: string
+      displayName: string
+      host: string
+    }
+  }
+
+  createdAt: string
+  updatedAt: string
+
+  // Additional fields
+  videoUrl?: string
+  commentUrl?: any[]
+  videoAbuseUrl?: string
+  videoAutoBlacklistUrl?: string
+  accountUrl?: string
+  videoImportIdentifier?: string
+  videoImportUrl?: string
+  instanceFollowUrl?: string
+
+  constructor (hash: UserNotificationServer) {
+    this.id = hash.id
+    this.type = hash.type
+    this.read = hash.read
+
+    // We assume that some fields exist
+    // To prevent a notification popup crash in case of bug, wrap it inside a try/catch
+    try {
+      this.video = hash.video
+      if (this.video) this.setAvatarUrl(this.video.channel)
+
+      this.videoImport = hash.videoImport
+
+      this.comment = hash.comment
+      if (this.comment) this.setAvatarUrl(this.comment.account)
+
+      this.videoAbuse = hash.videoAbuse
+
+      this.videoBlacklist = hash.videoBlacklist
+
+      this.account = hash.account
+      if (this.account) this.setAvatarUrl(this.account)
+
+      this.actorFollow = hash.actorFollow
+      if (this.actorFollow) this.setAvatarUrl(this.actorFollow.follower)
+
+      this.createdAt = hash.createdAt
+      this.updatedAt = hash.updatedAt
+
+      switch (this.type) {
+        case UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION:
+          this.videoUrl = this.buildVideoUrl(this.video)
+          break
+
+        case UserNotificationType.UNBLACKLIST_ON_MY_VIDEO:
+          this.videoUrl = this.buildVideoUrl(this.video)
+          break
+
+        case UserNotificationType.NEW_COMMENT_ON_MY_VIDEO:
+        case UserNotificationType.COMMENT_MENTION:
+          if (!this.comment) break
+          this.accountUrl = this.buildAccountUrl(this.comment.account)
+          this.commentUrl = [ this.buildVideoUrl(this.comment.video), { threadId: this.comment.threadId } ]
+          break
+
+        case UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS:
+          this.videoAbuseUrl = '/admin/moderation/video-abuses/list'
+          this.videoUrl = this.buildVideoUrl(this.videoAbuse.video)
+          break
+
+        case UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS:
+          this.videoAutoBlacklistUrl = '/admin/moderation/video-auto-blacklist/list'
+          // Backward compatibility where we did not assign videoBlacklist to this type of notification before
+          if (!this.videoBlacklist) this.videoBlacklist = { id: null, video: this.video }
+
+          this.videoUrl = this.buildVideoUrl(this.videoBlacklist.video)
+          break
+
+        case UserNotificationType.BLACKLIST_ON_MY_VIDEO:
+          this.videoUrl = this.buildVideoUrl(this.videoBlacklist.video)
+          break
+
+        case UserNotificationType.MY_VIDEO_PUBLISHED:
+          this.videoUrl = this.buildVideoUrl(this.video)
+          break
+
+        case UserNotificationType.MY_VIDEO_IMPORT_SUCCESS:
+          this.videoImportUrl = this.buildVideoImportUrl()
+          this.videoImportIdentifier = this.buildVideoImportIdentifier(this.videoImport)
+
+          if (this.videoImport.video) this.videoUrl = this.buildVideoUrl(this.videoImport.video)
+          break
+
+        case UserNotificationType.MY_VIDEO_IMPORT_ERROR:
+          this.videoImportUrl = this.buildVideoImportUrl()
+          this.videoImportIdentifier = this.buildVideoImportIdentifier(this.videoImport)
+          break
+
+        case UserNotificationType.NEW_USER_REGISTRATION:
+          this.accountUrl = this.buildAccountUrl(this.account)
+          break
+
+        case UserNotificationType.NEW_FOLLOW:
+          this.accountUrl = this.buildAccountUrl(this.actorFollow.follower)
+          break
+
+        case UserNotificationType.NEW_INSTANCE_FOLLOWER:
+          this.instanceFollowUrl = '/admin/follows/followers-list'
+          break
+
+        case UserNotificationType.AUTO_INSTANCE_FOLLOWING:
+          this.instanceFollowUrl = '/admin/follows/following-list'
+          break
+      }
+    } catch (err) {
+      this.type = null
+      console.error(err)
+    }
+  }
+
+  private buildVideoUrl (video: { uuid: string }) {
+    return '/videos/watch/' + video.uuid
+  }
+
+  private buildAccountUrl (account: { name: string, host: string }) {
+    return '/accounts/' + Actor.CREATE_BY_STRING(account.name, account.host)
+  }
+
+  private buildVideoImportUrl () {
+    return '/my-account/video-imports'
+  }
+
+  private buildVideoImportIdentifier (videoImport: { targetUrl?: string, magnetUri?: string, torrentName?: string }) {
+    return videoImport.targetUrl || videoImport.magnetUri || videoImport.torrentName
+  }
+
+  private setAvatarUrl (actor: { avatarUrl?: string, avatar?: Avatar }) {
+    actor.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(actor)
+  }
+}
diff --git a/client/src/app/shared/shared-main/users/user-notification.service.ts b/client/src/app/shared/shared-main/users/user-notification.service.ts
new file mode 100644
index 000000000..8dd9472fe
--- /dev/null
+++ b/client/src/app/shared/shared-main/users/user-notification.service.ts
@@ -0,0 +1,81 @@
+import { catchError, map, tap } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { ComponentPaginationLight, RestExtractor, RestService, User, UserNotificationSocket } from '@app/core'
+import { ResultList, UserNotification as UserNotificationServer, UserNotificationSetting } from '@shared/models'
+import { environment } from '../../../../environments/environment'
+import { UserNotification } from './user-notification.model'
+
+@Injectable()
+export class UserNotificationService {
+  static BASE_NOTIFICATIONS_URL = environment.apiUrl + '/api/v1/users/me/notifications'
+  static BASE_NOTIFICATION_SETTINGS = environment.apiUrl + '/api/v1/users/me/notification-settings'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService,
+    private userNotificationSocket: UserNotificationSocket
+  ) {}
+
+  listMyNotifications (pagination: ComponentPaginationLight, unread?: boolean, ignoreLoadingBar = false) {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, this.restService.componentPaginationToRestPagination(pagination))
+
+    if (unread) params = params.append('unread', `${unread}`)
+
+    const headers = ignoreLoadingBar ? { ignoreLoadingBar: '' } : undefined
+
+    return this.authHttp.get<ResultList<UserNotification>>(UserNotificationService.BASE_NOTIFICATIONS_URL, { params, headers })
+               .pipe(
+                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
+                 map(res => this.restExtractor.applyToResultListData(res, this.formatNotification.bind(this))),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  countUnreadNotifications () {
+    return this.listMyNotifications({ currentPage: 1, itemsPerPage: 0 }, true)
+      .pipe(map(n => n.total))
+  }
+
+  markAsRead (notification: UserNotification) {
+    const url = UserNotificationService.BASE_NOTIFICATIONS_URL + '/read'
+
+    const body = { ids: [ notification.id ] }
+    const headers = { ignoreLoadingBar: '' }
+
+    return this.authHttp.post(url, body, { headers })
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 tap(() => this.userNotificationSocket.dispatch('read')),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  markAllAsRead () {
+    const url = UserNotificationService.BASE_NOTIFICATIONS_URL + '/read-all'
+    const headers = { ignoreLoadingBar: '' }
+
+    return this.authHttp.post(url, {}, { headers })
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 tap(() => this.userNotificationSocket.dispatch('read-all')),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  updateNotificationSettings (user: User, settings: UserNotificationSetting) {
+    const url = UserNotificationService.BASE_NOTIFICATION_SETTINGS
+
+    return this.authHttp.put(url, settings)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  private formatNotification (notification: UserNotificationServer) {
+    return new UserNotification(notification)
+  }
+}
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.html b/client/src/app/shared/shared-main/users/user-notifications.component.html
new file mode 100644
index 000000000..08771110d
--- /dev/null
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.html
@@ -0,0 +1,166 @@
+<div *ngIf="componentPagination.totalItems === 0" class="no-notification" i18n>You don't have notifications.</div>
+
+<div class="notifications" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+  <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
+
+    <ng-container [ngSwitch]="notification.type">
+      <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
+        <ng-container *ngIf="notification.video; then hasVideo; else noVideo"></ng-container>
+
+        <ng-template #hasVideo>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
+            <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.video.channel.avatarUrl" />
+          </a>
+
+          <div class="message" i18n>
+            {{ notification.video.channel.displayName }} published a new video: <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a>
+          </div>
+        </ng-template>
+
+        <ng-template #noVideo>
+          <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
+  
+          <div class="message" i18n>
+            The notification concerns a video now unavailable
+          </div>
+        </ng-template>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
+        <my-global-icon iconName="undo" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblocked
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
+        <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blocked
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS">
+        <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS">
+        <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          The recently added video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been <a (click)="markAsRead(notification)" [routerLink]="notification.videoAutoBlacklistUrl">automatically blocked</a>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
+        <ng-container *ngIf="notification.comment; then hasComment; else noComment"></ng-container>
+
+        <ng-template #hasComment>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
+            <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+          </a>
+  
+          <div class="message" i18n>
+            <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
+          </div>
+        </ng-template>
+
+        <ng-template #noComment>
+          <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
+  
+          <div class="message" i18n>
+            The notification concerns a comment now unavailable
+          </div>
+        </ng-template>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
+        <my-global-icon iconName="sparkle" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been published
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_SUCCESS">
+        <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl || notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_ERROR">
+        <my-global-icon iconName="cloud-error" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} failed
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
+        <my-global-icon iconName="user-add" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }}</a> registered on your instance
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
+        <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
+          <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
+        </a>
+
+        <div class="message" i18n>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
+
+          <ng-container *ngIf="notification.actorFollow.following.type === 'channel'">your channel {{ notification.actorFollow.following.displayName }}</ng-container>
+          <ng-container *ngIf="notification.actorFollow.following.type === 'account'">your account</ng-container>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
+        <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
+          <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+        </a>
+
+        <div class="message" i18n>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.NEW_INSTANCE_FOLLOWER">
+        <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          Your instance has <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">a new follower</a> ({{ notification.actorFollow?.follower.host }})
+          <ng-container *ngIf="notification.actorFollow?.state === 'pending'"> awaiting your approval</ng-container>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="UserNotificationType.AUTO_INSTANCE_FOLLOWING">
+        <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          Your instance automatically followed <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">{{ notification.actorFollow.following.host }}</a>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchDefault>
+        <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          The notification points to a content now unavailable
+        </div>
+      </ng-container>
+    </ng-container>
+
+    <div [title]="notification.createdAt" class="from-date">{{ notification.createdAt | myFromNow }}</div>
+  </div>
+</div>
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.scss b/client/src/app/shared/shared-main/users/user-notifications.component.scss
new file mode 100644
index 000000000..5166bd559
--- /dev/null
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.scss
@@ -0,0 +1,53 @@
+@import '_variables';
+@import '_mixins';
+
+.no-notification {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0;
+}
+
+.notification {
+  display: flex;
+  align-items: center;
+  font-size: inherit;
+  padding: 15px 5px 15px 10px;
+  border-bottom: 1px solid $separator-border-color;
+  word-break: break-word;
+
+  &.unread {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  my-global-icon {
+    width: 24px;
+    margin-right: 11px;
+    margin-left: 3px;
+
+    @include apply-svg-color(#333);
+  }
+
+  .avatar {
+    @include avatar(30px);
+
+    margin-right: 10px;
+  }
+
+  .message {
+    flex-grow: 1;
+
+    a {
+      font-weight: $font-semibold;
+    }
+  }
+
+  .from-date {
+    font-size: 0.85em;
+    color: pvar(--greyForegroundColor);
+    padding-left: 5px;
+    min-width: 70px;
+    text-align: right;
+    margin-left: auto;
+  }
+}
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.ts b/client/src/app/shared/shared-main/users/user-notifications.component.ts
new file mode 100644
index 000000000..6abd8b7d8
--- /dev/null
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.ts
@@ -0,0 +1,100 @@
+import { Subject } from 'rxjs'
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { ComponentPagination, hasMoreItems, Notifier } from '@app/core'
+import { UserNotificationType } from '@shared/models'
+import { UserNotification } from './user-notification.model'
+import { UserNotificationService } from './user-notification.service'
+
+@Component({
+  selector: 'my-user-notifications',
+  templateUrl: 'user-notifications.component.html',
+  styleUrls: [ 'user-notifications.component.scss' ]
+})
+export class UserNotificationsComponent implements OnInit {
+  @Input() ignoreLoadingBar = false
+  @Input() infiniteScroll = true
+  @Input() itemsPerPage = 20
+  @Input() markAllAsReadSubject: Subject<boolean>
+
+  @Output() notificationsLoaded = new EventEmitter()
+
+  notifications: UserNotification[] = []
+
+  // So we can access it in the template
+  UserNotificationType = UserNotificationType
+
+  componentPagination: ComponentPagination
+
+  onDataSubject = new Subject<any[]>()
+
+  constructor (
+    private userNotificationService: UserNotificationService,
+    private notifier: Notifier
+  ) { }
+
+  ngOnInit () {
+    this.componentPagination = {
+      currentPage: 1,
+      itemsPerPage: this.itemsPerPage, // Reset items per page, because of the @Input() variable
+      totalItems: null
+    }
+
+    this.loadMoreNotifications()
+
+    if (this.markAllAsReadSubject) {
+      this.markAllAsReadSubject.subscribe(() => this.markAllAsRead())
+    }
+  }
+
+  loadMoreNotifications () {
+    this.userNotificationService.listMyNotifications(this.componentPagination, undefined, this.ignoreLoadingBar)
+        .subscribe(
+          result => {
+            this.notifications = this.notifications.concat(result.data)
+            this.componentPagination.totalItems = result.total
+
+            this.notificationsLoaded.emit()
+
+            this.onDataSubject.next(result.data)
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  onNearOfBottom () {
+    if (this.infiniteScroll === false) return
+
+    this.componentPagination.currentPage++
+
+    if (hasMoreItems(this.componentPagination)) {
+      this.loadMoreNotifications()
+    }
+  }
+
+  markAsRead (notification: UserNotification) {
+    if (notification.read) return
+
+    this.userNotificationService.markAsRead(notification)
+        .subscribe(
+          () => {
+            notification.read = true
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  markAllAsRead () {
+    this.userNotificationService.markAllAsRead()
+        .subscribe(
+          () => {
+            for (const notification of this.notifications) {
+              notification.read = true
+            }
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+}
diff --git a/client/src/app/shared/shared-main/video-caption/index.ts b/client/src/app/shared/shared-main/video-caption/index.ts
new file mode 100644
index 000000000..308200f27
--- /dev/null
+++ b/client/src/app/shared/shared-main/video-caption/index.ts
@@ -0,0 +1,2 @@
+export * from './video-caption-edit.model'
+export * from './video-caption.service'
diff --git a/client/src/app/shared/shared-main/video-caption/video-caption-edit.model.ts b/client/src/app/shared/shared-main/video-caption/video-caption-edit.model.ts
new file mode 100644
index 000000000..732f20158
--- /dev/null
+++ b/client/src/app/shared/shared-main/video-caption/video-caption-edit.model.ts
@@ -0,0 +1,9 @@
+export interface VideoCaptionEdit {
+  language: {
+    id: string
+    label?: string
+  }
+
+  action?: 'CREATE' | 'REMOVE'
+  captionfile?: any
+}
diff --git a/client/src/app/shared/shared-main/video-caption/video-caption.service.ts b/client/src/app/shared/shared-main/video-caption/video-caption.service.ts
new file mode 100644
index 000000000..d45fb837a
--- /dev/null
+++ b/client/src/app/shared/shared-main/video-caption/video-caption.service.ts
@@ -0,0 +1,74 @@
+import { Observable, of } from 'rxjs'
+import { catchError, map, switchMap } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor, ServerService } from '@app/core'
+import { objectToFormData, sortBy } from '@app/helpers'
+import { VideoService } from '@app/shared/shared-main/video'
+import { peertubeTranslate, ResultList, VideoCaption } from '@shared/models'
+import { VideoCaptionEdit } from './video-caption-edit.model'
+
+@Injectable()
+export class VideoCaptionService {
+  constructor (
+    private authHttp: HttpClient,
+    private serverService: ServerService,
+    private restExtractor: RestExtractor
+  ) {}
+
+  listCaptions (videoId: number | string): Observable<ResultList<VideoCaption>> {
+    return this.authHttp.get<ResultList<VideoCaption>>(VideoService.BASE_VIDEO_URL + videoId + '/captions')
+               .pipe(
+                 switchMap(captionsResult => {
+                   return this.serverService.getServerLocale()
+                     .pipe(map(translations => ({ captionsResult, translations })))
+                 }),
+                 map(({ captionsResult, translations }) => {
+                   for (const c of captionsResult.data) {
+                     c.language.label = peertubeTranslate(c.language.label, translations)
+                   }
+
+                   return captionsResult
+                 }),
+                 map(captionsResult => {
+                   sortBy(captionsResult.data, 'language', 'label')
+
+                   return captionsResult
+                 })
+               )
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  removeCaption (videoId: number | string, language: string) {
+    return this.authHttp.delete(VideoService.BASE_VIDEO_URL + videoId + '/captions/' + language)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  addCaption (videoId: number | string, language: string, captionfile: File) {
+    const body = { captionfile }
+    const data = objectToFormData(body)
+
+    return this.authHttp.put(VideoService.BASE_VIDEO_URL + videoId + '/captions/' + language, data)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  updateCaptions (videoId: number | string, videoCaptions: VideoCaptionEdit[]) {
+    let obs = of(true)
+
+    for (const videoCaption of videoCaptions) {
+      if (videoCaption.action === 'CREATE') {
+        obs = obs.pipe(switchMap(() => this.addCaption(videoId, videoCaption.language.id, videoCaption.captionfile)))
+      } else if (videoCaption.action === 'REMOVE') {
+        obs = obs.pipe(switchMap(() => this.removeCaption(videoId, videoCaption.language.id)))
+      }
+    }
+
+    return obs
+  }
+}
diff --git a/client/src/app/shared/shared-main/video-channel/index.ts b/client/src/app/shared/shared-main/video-channel/index.ts
new file mode 100644
index 000000000..1fcf6d3be
--- /dev/null
+++ b/client/src/app/shared/shared-main/video-channel/index.ts
@@ -0,0 +1,2 @@
+export * from './video-channel.model'
+export * from './video-channel.service'
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
new file mode 100644
index 000000000..123389afb
--- /dev/null
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -0,0 +1,42 @@
+import { VideoChannel as ServerVideoChannel, ViewsPerDate, Account } from '@shared/models'
+import { Actor } from '../account/actor.model'
+
+export class VideoChannel extends Actor implements ServerVideoChannel {
+  displayName: string
+  description: string
+  support: string
+  isLocal: boolean
+  nameWithHost: string
+  nameWithHostForced: string
+
+  ownerAccount?: Account
+  ownerBy?: string
+  ownerAvatarUrl?: string
+
+  videosCount?: number
+
+  viewsPerDay?: ViewsPerDate[]
+
+  constructor (hash: ServerVideoChannel) {
+    super(hash)
+
+    this.displayName = hash.displayName
+    this.description = hash.description
+    this.support = hash.support
+    this.isLocal = hash.isLocal
+    this.nameWithHost = Actor.CREATE_BY_STRING(this.name, this.host)
+    this.nameWithHostForced = Actor.CREATE_BY_STRING(this.name, this.host, true)
+
+    this.videosCount = hash.videosCount
+
+    if (hash.viewsPerDay) {
+      this.viewsPerDay = hash.viewsPerDay.map(v => ({ ...v, date: new Date(v.date) }))
+    }
+
+    if (hash.ownerAccount) {
+      this.ownerAccount = hash.ownerAccount
+      this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
+      this.ownerAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.ownerAccount)
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
new file mode 100644
index 000000000..5483e305f
--- /dev/null
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
@@ -0,0 +1,94 @@
+import { Observable, ReplaySubject } from 'rxjs'
+import { catchError, map, tap } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { ComponentPaginationLight, RestExtractor, RestService } from '@app/core'
+import { Avatar, ResultList, VideoChannel as VideoChannelServer, VideoChannelCreate, VideoChannelUpdate } from '@shared/models'
+import { environment } from '../../../../environments/environment'
+import { Account } from '../account'
+import { AccountService } from '../account/account.service'
+import { VideoChannel } from './video-channel.model'
+
+@Injectable()
+export class VideoChannelService {
+  static BASE_VIDEO_CHANNEL_URL = environment.apiUrl + '/api/v1/video-channels/'
+
+  videoChannelLoaded = new ReplaySubject<VideoChannel>(1)
+
+  static extractVideoChannels (result: ResultList<VideoChannelServer>) {
+    const videoChannels: VideoChannel[] = []
+
+    for (const videoChannelJSON of result.data) {
+      videoChannels.push(new VideoChannel(videoChannelJSON))
+    }
+
+    return { data: videoChannels, total: result.total }
+  }
+
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) { }
+
+  getVideoChannel (videoChannelName: string) {
+    return this.authHttp.get<VideoChannel>(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName)
+               .pipe(
+                 map(videoChannelHash => new VideoChannel(videoChannelHash)),
+                 tap(videoChannel => this.videoChannelLoaded.next(videoChannel)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  listAccountVideoChannels (
+    account: Account,
+    componentPagination?: ComponentPaginationLight,
+    withStats = false
+  ): Observable<ResultList<VideoChannel>> {
+    const pagination = componentPagination
+      ? this.restService.componentPaginationToRestPagination(componentPagination)
+      : { start: 0, count: 20 }
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination)
+    params = params.set('withStats', withStats + '')
+
+    const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-channels'
+    return this.authHttp.get<ResultList<VideoChannelServer>>(url, { params })
+               .pipe(
+                 map(res => VideoChannelService.extractVideoChannels(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  createVideoChannel (videoChannel: VideoChannelCreate) {
+    return this.authHttp.post(VideoChannelService.BASE_VIDEO_CHANNEL_URL, videoChannel)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  updateVideoChannel (videoChannelName: string, videoChannel: VideoChannelUpdate) {
+    return this.authHttp.put(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName, videoChannel)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  changeVideoChannelAvatar (videoChannelName: string, avatarForm: FormData) {
+    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/avatar/pick'
+
+    return this.authHttp.post<{ avatar: Avatar }>(url, avatarForm)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  removeVideoChannel (videoChannel: VideoChannel) {
+    return this.authHttp.delete(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+}
diff --git a/client/src/app/shared/shared-main/video/index.ts b/client/src/app/shared/shared-main/video/index.ts
new file mode 100644
index 000000000..3053df4ef
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/index.ts
@@ -0,0 +1,7 @@
+export * from './redundancy.service'
+export * from './video-details.model'
+export * from './video-edit.model'
+export * from './video-import.service'
+export * from './video-ownership.service'
+export * from './video.model'
+export * from './video.service'
diff --git a/client/src/app/shared/shared-main/video/redundancy.service.ts b/client/src/app/shared/shared-main/video/redundancy.service.ts
new file mode 100644
index 000000000..6e839e655
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/redundancy.service.ts
@@ -0,0 +1,73 @@
+import { SortMeta } from 'primeng/api'
+import { concat, Observable } from 'rxjs'
+import { catchError, map, toArray } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor, RestPagination, RestService } from '@app/core'
+import { ResultList, Video, VideoRedundanciesTarget, VideoRedundancy } from '@shared/models'
+import { environment } from '../../../../environments/environment'
+
+@Injectable()
+export class RedundancyService {
+  static BASE_REDUNDANCY_URL = environment.apiUrl + '/api/v1/server/redundancy'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) { }
+
+  updateRedundancy (host: string, redundancyAllowed: boolean) {
+    const url = RedundancyService.BASE_REDUNDANCY_URL + '/' + host
+
+    const body = { redundancyAllowed }
+
+    return this.authHttp.put(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  listVideoRedundancies (options: {
+    pagination: RestPagination,
+    sort: SortMeta,
+    target?: VideoRedundanciesTarget
+  }): Observable<ResultList<VideoRedundancy>> {
+    const { pagination, sort, target } = options
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    if (target) params = params.append('target', target)
+
+    return this.authHttp.get<ResultList<VideoRedundancy>>(RedundancyService.BASE_REDUNDANCY_URL + '/videos', { params })
+               .pipe(
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  addVideoRedundancy (video: Video) {
+    return this.authHttp.post(RedundancyService.BASE_REDUNDANCY_URL + '/videos', { videoId: video.id })
+      .pipe(
+        catchError(res => this.restExtractor.handleError(res))
+      )
+  }
+
+  removeVideoRedundancies (redundancy: VideoRedundancy) {
+    const observables = redundancy.redundancies.streamingPlaylists.map(r => r.id)
+      .concat(redundancy.redundancies.files.map(r => r.id))
+      .map(id => this.removeRedundancy(id))
+
+    return concat(...observables)
+      .pipe(toArray())
+  }
+
+  private removeRedundancy (redundancyId: number) {
+    return this.authHttp.delete(RedundancyService.BASE_REDUNDANCY_URL + '/videos/' + redundancyId)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+}
diff --git a/client/src/app/shared/shared-main/video/video-details.model.ts b/client/src/app/shared/shared-main/video/video-details.model.ts
new file mode 100644
index 000000000..a1cb051e9
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/video-details.model.ts
@@ -0,0 +1,69 @@
+import { Account } from '@app/shared/shared-main/account/account.model'
+import { VideoChannel } from '@app/shared/shared-main/video-channel/video-channel.model'
+import {
+  VideoConstant,
+  VideoDetails as VideoDetailsServerModel,
+  VideoFile,
+  VideoState,
+  VideoStreamingPlaylist,
+  VideoStreamingPlaylistType
+} from '@shared/models'
+import { Video } from './video.model'
+
+export class VideoDetails extends Video implements VideoDetailsServerModel {
+  descriptionPath: string
+  support: string
+  channel: VideoChannel
+  tags: string[]
+  files: VideoFile[]
+  account: Account
+  commentsEnabled: boolean
+  downloadEnabled: boolean
+
+  waitTranscoding: boolean
+  state: VideoConstant<VideoState>
+
+  likesPercent: number
+  dislikesPercent: number
+
+  trackerUrls: string[]
+
+  streamingPlaylists: VideoStreamingPlaylist[]
+
+  constructor (hash: VideoDetailsServerModel, translations = {}) {
+    super(hash, translations)
+
+    this.descriptionPath = hash.descriptionPath
+    this.files = hash.files
+    this.channel = new VideoChannel(hash.channel)
+    this.account = new Account(hash.account)
+    this.tags = hash.tags
+    this.support = hash.support
+    this.commentsEnabled = hash.commentsEnabled
+    this.downloadEnabled = hash.downloadEnabled
+
+    this.trackerUrls = hash.trackerUrls
+    this.streamingPlaylists = hash.streamingPlaylists
+
+    this.buildLikeAndDislikePercents()
+  }
+
+  buildLikeAndDislikePercents () {
+    this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
+    this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
+  }
+
+  getHlsPlaylist () {
+    return this.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
+  }
+
+  hasHlsPlaylist () {
+    return !!this.getHlsPlaylist()
+  }
+
+  getFiles () {
+    if (this.files.length === 0) return this.getHlsPlaylist().files
+
+    return this.files
+  }
+}
diff --git a/client/src/app/shared/shared-main/video/video-edit.model.ts b/client/src/app/shared/shared-main/video/video-edit.model.ts
new file mode 100644
index 000000000..6a529e052
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/video-edit.model.ts
@@ -0,0 +1,120 @@
+import { Video, VideoPrivacy, VideoScheduleUpdate, VideoUpdate } from '@shared/models'
+
+export class VideoEdit implements VideoUpdate {
+  static readonly SPECIAL_SCHEDULED_PRIVACY = -1
+
+  category: number
+  licence: number
+  language: string
+  description: string
+  name: string
+  tags: string[]
+  nsfw: boolean
+  commentsEnabled: boolean
+  downloadEnabled: boolean
+  waitTranscoding: boolean
+  channelId: number
+  privacy: VideoPrivacy
+  support: string
+  thumbnailfile?: any
+  previewfile?: any
+  thumbnailUrl: string
+  previewUrl: string
+  uuid?: string
+  id?: number
+  scheduleUpdate?: VideoScheduleUpdate
+  originallyPublishedAt?: Date | string
+
+  constructor (
+    video?: Video & {
+      tags: string[],
+      commentsEnabled: boolean,
+      downloadEnabled: boolean,
+      support: string,
+      thumbnailUrl: string,
+      previewUrl: string
+    }) {
+    if (video) {
+      this.id = video.id
+      this.uuid = video.uuid
+      this.category = video.category.id
+      this.licence = video.licence.id
+      this.language = video.language.id
+      this.description = video.description
+      this.name = video.name
+      this.tags = video.tags
+      this.nsfw = video.nsfw
+      this.commentsEnabled = video.commentsEnabled
+      this.downloadEnabled = video.downloadEnabled
+      this.waitTranscoding = video.waitTranscoding
+      this.channelId = video.channel.id
+      this.privacy = video.privacy.id
+      this.support = video.support
+      this.thumbnailUrl = video.thumbnailUrl
+      this.previewUrl = video.previewUrl
+
+      this.scheduleUpdate = video.scheduledUpdate
+      this.originallyPublishedAt = video.originallyPublishedAt ? new Date(video.originallyPublishedAt) : null
+    }
+  }
+
+  patch (values: { [ id: string ]: string }) {
+    Object.keys(values).forEach((key) => {
+      this[ key ] = values[ key ]
+    })
+
+    // If schedule publication, the video is private and will be changed to public privacy
+    if (parseInt(values['privacy'], 10) === VideoEdit.SPECIAL_SCHEDULED_PRIVACY) {
+      const updateAt = new Date(values['schedulePublicationAt'])
+      updateAt.setSeconds(0)
+
+      this.privacy = VideoPrivacy.PRIVATE
+      this.scheduleUpdate = {
+        updateAt: updateAt.toISOString(),
+        privacy: VideoPrivacy.PUBLIC
+      }
+    } else {
+      this.scheduleUpdate = null
+    }
+
+    // Convert originallyPublishedAt to string so that function objectToFormData() works correctly
+    if (this.originallyPublishedAt) {
+      const originallyPublishedAt = new Date(values['originallyPublishedAt'])
+      this.originallyPublishedAt = originallyPublishedAt.toISOString()
+    }
+
+    // Use the same file than the preview for the thumbnail
+    if (this.previewfile) {
+      this.thumbnailfile = this.previewfile
+    }
+  }
+
+  toFormPatch () {
+    const json = {
+      category: this.category,
+      licence: this.licence,
+      language: this.language,
+      description: this.description,
+      support: this.support,
+      name: this.name,
+      tags: this.tags,
+      nsfw: this.nsfw,
+      commentsEnabled: this.commentsEnabled,
+      downloadEnabled: this.downloadEnabled,
+      waitTranscoding: this.waitTranscoding,
+      channelId: this.channelId,
+      privacy: this.privacy,
+      originallyPublishedAt: this.originallyPublishedAt
+    }
+
+    // Special case if we scheduled an update
+    if (this.scheduleUpdate) {
+      Object.assign(json, {
+        privacy: VideoEdit.SPECIAL_SCHEDULED_PRIVACY,
+        schedulePublicationAt: new Date(this.scheduleUpdate.updateAt.toString())
+      })
+    }
+
+    return json
+  }
+}
diff --git a/client/src/app/shared/shared-main/video/video-import.service.ts b/client/src/app/shared/shared-main/video/video-import.service.ts
new file mode 100644
index 000000000..a700abacb
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/video-import.service.ts
@@ -0,0 +1,100 @@
+import { SortMeta } from 'primeng/api'
+import { Observable } from 'rxjs'
+import { catchError, map, switchMap } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor, RestPagination, RestService, ServerService, UserService } from '@app/core'
+import { objectToFormData } from '@app/helpers'
+import { peertubeTranslate, ResultList, VideoImport, VideoImportCreate, VideoUpdate } from '@shared/models'
+import { environment } from '../../../../environments/environment'
+
+@Injectable()
+export class VideoImportService {
+  private static BASE_VIDEO_IMPORT_URL = environment.apiUrl + '/api/v1/videos/imports/'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor,
+    private serverService: ServerService
+  ) {}
+
+  importVideoUrl (targetUrl: string, video: VideoUpdate): Observable<VideoImport> {
+    const url = VideoImportService.BASE_VIDEO_IMPORT_URL
+
+    const body = this.buildImportVideoObject(video)
+    body.targetUrl = targetUrl
+
+    const data = objectToFormData(body)
+    return this.authHttp.post<VideoImport>(url, data)
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  importVideoTorrent (target: string | Blob, video: VideoUpdate): Observable<VideoImport> {
+    const url = VideoImportService.BASE_VIDEO_IMPORT_URL
+    const body: VideoImportCreate = this.buildImportVideoObject(video)
+
+    if (typeof target === 'string') body.magnetUri = target
+    else body.torrentfile = target
+
+    const data = objectToFormData(body)
+    return this.authHttp.post<VideoImport>(url, data)
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  getMyVideoImports (pagination: RestPagination, sort: SortMeta): Observable<ResultList<VideoImport>> {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp
+               .get<ResultList<VideoImport>>(UserService.BASE_USERS_URL + '/me/videos/imports', { params })
+               .pipe(
+                 switchMap(res => this.extractVideoImports(res)),
+                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  private buildImportVideoObject (video: VideoUpdate): VideoImportCreate {
+    const language = video.language || null
+    const licence = video.licence || null
+    const category = video.category || null
+    const description = video.description || null
+    const support = video.support || null
+    const scheduleUpdate = video.scheduleUpdate || null
+    const originallyPublishedAt = video.originallyPublishedAt || null
+
+    return {
+      name: video.name,
+      category,
+      licence,
+      language,
+      support,
+      description,
+      channelId: video.channelId,
+      privacy: video.privacy,
+      tags: video.tags,
+      nsfw: video.nsfw,
+      waitTranscoding: video.waitTranscoding,
+      commentsEnabled: video.commentsEnabled,
+      downloadEnabled: video.downloadEnabled,
+      thumbnailfile: video.thumbnailfile,
+      previewfile: video.previewfile,
+      scheduleUpdate,
+      originallyPublishedAt
+    }
+  }
+
+  private extractVideoImports (result: ResultList<VideoImport>): Observable<ResultList<VideoImport>> {
+    return this.serverService.getServerLocale()
+               .pipe(
+                 map(translations => {
+                   result.data.forEach(d =>
+                     d.state.label = peertubeTranslate(d.state.label, translations)
+                   )
+
+                   return result
+                 })
+               )
+  }
+}
diff --git a/client/src/app/shared/shared-main/video/video-ownership.service.ts b/client/src/app/shared/shared-main/video/video-ownership.service.ts
new file mode 100644
index 000000000..273930a6c
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/video-ownership.service.ts
@@ -0,0 +1,64 @@
+import { SortMeta } from 'primeng/api'
+import { Observable } from 'rxjs'
+import { catchError, map } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor, RestPagination, RestService } from '@app/core'
+import { ResultList, VideoChangeOwnership, VideoChangeOwnershipAccept, VideoChangeOwnershipCreate } from '@shared/models'
+import { environment } from '../../../../environments/environment'
+
+@Injectable()
+export class VideoOwnershipService {
+  private static BASE_VIDEO_CHANGE_OWNERSHIP_URL = environment.apiUrl + '/api/v1/videos/'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) {
+  }
+
+  changeOwnership (id: number, username: string) {
+    const url = VideoOwnershipService.BASE_VIDEO_CHANGE_OWNERSHIP_URL + id + '/give-ownership'
+    const body: VideoChangeOwnershipCreate = {
+      username
+    }
+
+    return this.authHttp.post(url, body)
+      .pipe(
+        map(this.restExtractor.extractDataBool),
+        catchError(res => this.restExtractor.handleError(res))
+      )
+  }
+
+  getOwnershipChanges (pagination: RestPagination, sort: SortMeta): Observable<ResultList<VideoChangeOwnership>> {
+    const url = VideoOwnershipService.BASE_VIDEO_CHANGE_OWNERSHIP_URL + 'ownership'
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp.get<ResultList<VideoChangeOwnership>>(url, { params })
+      .pipe(
+        map(res => this.restExtractor.convertResultListDateToHuman(res)),
+        catchError(res => this.restExtractor.handleError(res))
+      )
+  }
+
+  acceptOwnership (id: number, input: VideoChangeOwnershipAccept) {
+    const url = VideoOwnershipService.BASE_VIDEO_CHANGE_OWNERSHIP_URL + 'ownership/' + id + '/accept'
+    return this.authHttp.post(url, input)
+      .pipe(
+        map(this.restExtractor.extractDataBool),
+        catchError(this.restExtractor.handleError)
+      )
+  }
+
+  refuseOwnership (id: number) {
+    const url = VideoOwnershipService.BASE_VIDEO_CHANGE_OWNERSHIP_URL + 'ownership/' + id + '/refuse'
+    return this.authHttp.post(url, {})
+      .pipe(
+        map(this.restExtractor.extractDataBool),
+        catchError(this.restExtractor.handleError)
+      )
+  }
+}
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
new file mode 100644
index 000000000..3e6d6a38d
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -0,0 +1,188 @@
+import { AuthUser } from '@app/core'
+import { User } from '@app/core/users/user.model'
+import { durationToString, getAbsoluteAPIUrl } from '@app/helpers'
+import {
+  Avatar,
+  peertubeTranslate,
+  ServerConfig,
+  UserRight,
+  Video as VideoServerModel,
+  VideoConstant,
+  VideoPrivacy,
+  VideoScheduleUpdate,
+  VideoState
+} from '@shared/models'
+import { environment } from '../../../../environments/environment'
+import { Actor } from '../account/actor.model'
+
+export class Video implements VideoServerModel {
+  byVideoChannel: string
+  byAccount: string
+
+  accountAvatarUrl: string
+  videoChannelAvatarUrl: string
+
+  createdAt: Date
+  updatedAt: Date
+  publishedAt: Date
+  originallyPublishedAt: Date | string
+  category: VideoConstant<number>
+  licence: VideoConstant<number>
+  language: VideoConstant<string>
+  privacy: VideoConstant<VideoPrivacy>
+  description: string
+  duration: number
+  durationLabel: string
+  id: number
+  uuid: string
+  isLocal: boolean
+  name: string
+  serverHost: string
+  thumbnailPath: string
+  thumbnailUrl: string
+
+  previewPath: string
+  previewUrl: string
+
+  embedPath: string
+  embedUrl: string
+
+  url?: string
+
+  views: number
+  likes: number
+  dislikes: number
+  nsfw: boolean
+
+  originInstanceUrl: string
+  originInstanceHost: string
+
+  waitTranscoding?: boolean
+  state?: VideoConstant<VideoState>
+  scheduledUpdate?: VideoScheduleUpdate
+  blacklisted?: boolean
+  blockedReason?: string
+
+  account: {
+    id: number
+    name: string
+    displayName: string
+    url: string
+    host: string
+    avatar?: Avatar
+  }
+
+  channel: {
+    id: number
+    name: string
+    displayName: string
+    url: string
+    host: string
+    avatar?: Avatar
+  }
+
+  userHistory?: {
+    currentTime: number
+  }
+
+  static buildClientUrl (videoUUID: string) {
+    return '/videos/watch/' + videoUUID
+  }
+
+  constructor (hash: VideoServerModel, translations = {}) {
+    const absoluteAPIUrl = getAbsoluteAPIUrl()
+
+    this.createdAt = new Date(hash.createdAt.toString())
+    this.publishedAt = new Date(hash.publishedAt.toString())
+    this.category = hash.category
+    this.licence = hash.licence
+    this.language = hash.language
+    this.privacy = hash.privacy
+    this.waitTranscoding = hash.waitTranscoding
+    this.state = hash.state
+    this.description = hash.description
+
+    this.duration = hash.duration
+    this.durationLabel = durationToString(hash.duration)
+
+    this.id = hash.id
+    this.uuid = hash.uuid
+
+    this.isLocal = hash.isLocal
+    this.name = hash.name
+
+    this.thumbnailPath = hash.thumbnailPath
+    this.thumbnailUrl = hash.thumbnailUrl || (absoluteAPIUrl + hash.thumbnailPath)
+
+    this.previewPath = hash.previewPath
+    this.previewUrl = hash.previewUrl || (absoluteAPIUrl + hash.previewPath)
+
+    this.embedPath = hash.embedPath
+    this.embedUrl = hash.embedUrl || (environment.embedUrl + hash.embedPath)
+
+    this.url = hash.url
+
+    this.views = hash.views
+    this.likes = hash.likes
+    this.dislikes = hash.dislikes
+
+    this.nsfw = hash.nsfw
+
+    this.account = hash.account
+    this.channel = hash.channel
+
+    this.byAccount = Actor.CREATE_BY_STRING(hash.account.name, hash.account.host)
+    this.byVideoChannel = Actor.CREATE_BY_STRING(hash.channel.name, hash.channel.host)
+    this.accountAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.account)
+    this.videoChannelAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.channel)
+
+    this.category.label = peertubeTranslate(this.category.label, translations)
+    this.licence.label = peertubeTranslate(this.licence.label, translations)
+    this.language.label = peertubeTranslate(this.language.label, translations)
+    this.privacy.label = peertubeTranslate(this.privacy.label, translations)
+
+    this.scheduledUpdate = hash.scheduledUpdate
+    this.originallyPublishedAt = hash.originallyPublishedAt ? new Date(hash.originallyPublishedAt.toString()) : null
+
+    if (this.state) this.state.label = peertubeTranslate(this.state.label, translations)
+
+    this.blacklisted = hash.blacklisted
+    this.blockedReason = hash.blacklistedReason
+
+    this.userHistory = hash.userHistory
+
+    this.originInstanceHost = this.account.host
+    this.originInstanceUrl = 'https://' + this.originInstanceHost
+  }
+
+  isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {
+    // Video is not NSFW, skip
+    if (this.nsfw === false) return false
+
+    // Return user setting if logged in
+    if (user) return user.nsfwPolicy !== 'display'
+
+    // Return default instance config
+    return serverConfig.instance.defaultNSFWPolicy !== 'display'
+  }
+
+  isRemovableBy (user: AuthUser) {
+    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.REMOVE_ANY_VIDEO))
+  }
+
+  isBlockableBy (user: AuthUser) {
+    return this.blacklisted !== true && user && user.hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) === true
+  }
+
+  isUnblockableBy (user: AuthUser) {
+    return this.blacklisted === true && user && user.hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) === true
+  }
+
+  isUpdatableBy (user: AuthUser) {
+    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.UPDATE_ANY_VIDEO))
+  }
+
+  canBeDuplicatedBy (user: AuthUser) {
+    return user && this.isLocal === false && user.hasRight(UserRight.MANAGE_VIDEOS_REDUNDANCIES)
+  }
+}
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
new file mode 100644
index 000000000..20d13fa10
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -0,0 +1,380 @@
+import { FfprobeData } from 'fluent-ffmpeg'
+import { Observable } from 'rxjs'
+import { catchError, map, switchMap } from 'rxjs/operators'
+import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { ComponentPaginationLight, RestExtractor, RestService, ServerService, UserService } from '@app/core'
+import { objectToFormData } from '@app/helpers'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import {
+  FeedFormat,
+  NSFWPolicyType,
+  ResultList,
+  UserVideoRate,
+  UserVideoRateType,
+  UserVideoRateUpdate,
+  Video as VideoServerModel,
+  VideoConstant,
+  VideoDetails as VideoDetailsServerModel,
+  VideoFilter,
+  VideoPrivacy,
+  VideoSortField,
+  VideoUpdate
+} from '@shared/models'
+import { environment } from '../../../../environments/environment'
+import { Account, AccountService } from '../account'
+import { VideoChannel, VideoChannelService } from '../video-channel'
+import { VideoDetails } from './video-details.model'
+import { VideoEdit } from './video-edit.model'
+import { Video } from './video.model'
+
+export interface VideosProvider {
+  getVideos (parameters: {
+    videoPagination: ComponentPaginationLight,
+    sort: VideoSortField,
+    filter?: VideoFilter,
+    categoryOneOf?: number[],
+    languageOneOf?: string[]
+    nsfwPolicy: NSFWPolicyType
+  }): Observable<ResultList<Video>>
+}
+
+@Injectable()
+export class VideoService implements VideosProvider {
+  static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
+  static BASE_FEEDS_URL = environment.apiUrl + '/feeds/videos.'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService,
+    private serverService: ServerService,
+    private i18n: I18n
+  ) {}
+
+  getVideoViewUrl (uuid: string) {
+    return VideoService.BASE_VIDEO_URL + uuid + '/views'
+  }
+
+  getUserWatchingVideoUrl (uuid: string) {
+    return VideoService.BASE_VIDEO_URL + uuid + '/watching'
+  }
+
+  getVideo (options: { videoId: string }): Observable<VideoDetails> {
+    return this.serverService.getServerLocale()
+               .pipe(
+                 switchMap(translations => {
+                   return this.authHttp.get<VideoDetailsServerModel>(VideoService.BASE_VIDEO_URL + options.videoId)
+                              .pipe(map(videoHash => ({ videoHash, translations })))
+                 }),
+                 map(({ videoHash, translations }) => new VideoDetails(videoHash, translations)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  updateVideo (video: VideoEdit) {
+    const language = video.language || null
+    const licence = video.licence || null
+    const category = video.category || null
+    const description = video.description || null
+    const support = video.support || null
+    const scheduleUpdate = video.scheduleUpdate || null
+    const originallyPublishedAt = video.originallyPublishedAt || null
+
+    const body: VideoUpdate = {
+      name: video.name,
+      category,
+      licence,
+      language,
+      support,
+      description,
+      channelId: video.channelId,
+      privacy: video.privacy,
+      tags: video.tags,
+      nsfw: video.nsfw,
+      waitTranscoding: video.waitTranscoding,
+      commentsEnabled: video.commentsEnabled,
+      downloadEnabled: video.downloadEnabled,
+      thumbnailfile: video.thumbnailfile,
+      previewfile: video.previewfile,
+      scheduleUpdate,
+      originallyPublishedAt
+    }
+
+    const data = objectToFormData(body)
+
+    return this.authHttp.put(VideoService.BASE_VIDEO_URL + video.id, data)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  uploadVideo (video: FormData) {
+    const req = new HttpRequest('POST', VideoService.BASE_VIDEO_URL + 'upload', video, { reportProgress: true })
+
+    return this.authHttp
+               .request<{ video: { id: number, uuid: string } }>(req)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  getMyVideos (videoPagination: ComponentPaginationLight, sort: VideoSortField, search?: string): Observable<ResultList<Video>> {
+    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+    params = this.restService.addObjectParams(params, { search })
+
+    return this.authHttp
+               .get<ResultList<Video>>(UserService.BASE_USERS_URL + 'me/videos', { params })
+               .pipe(
+                 switchMap(res => this.extractVideos(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  getAccountVideos (
+    account: Account,
+    videoPagination: ComponentPaginationLight,
+    sort: VideoSortField
+  ): Observable<ResultList<Video>> {
+    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp
+               .get<ResultList<Video>>(AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/videos', { params })
+               .pipe(
+                 switchMap(res => this.extractVideos(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  getVideoChannelVideos (
+    videoChannel: VideoChannel,
+    videoPagination: ComponentPaginationLight,
+    sort: VideoSortField,
+    nsfwPolicy?: NSFWPolicyType
+  ): Observable<ResultList<Video>> {
+    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    if (nsfwPolicy) {
+      params = params.set('nsfw', this.nsfwPolicyToParam(nsfwPolicy))
+    }
+
+    return this.authHttp
+               .get<ResultList<Video>>(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost + '/videos', { params })
+               .pipe(
+                 switchMap(res => this.extractVideos(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  getVideos (parameters: {
+    videoPagination: ComponentPaginationLight,
+    sort: VideoSortField,
+    filter?: VideoFilter,
+    categoryOneOf?: number[],
+    languageOneOf?: string[],
+    skipCount?: boolean,
+    nsfwPolicy?: NSFWPolicyType
+  }): Observable<ResultList<Video>> {
+    const { videoPagination, sort, filter, categoryOneOf, languageOneOf, skipCount, nsfwPolicy } = parameters
+
+    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    if (filter) params = params.set('filter', filter)
+    if (skipCount) params = params.set('skipCount', skipCount + '')
+
+    if (nsfwPolicy) {
+      params = params.set('nsfw', this.nsfwPolicyToParam(nsfwPolicy))
+    }
+
+    if (languageOneOf) {
+      for (const l of languageOneOf) {
+        params = params.append('languageOneOf[]', l)
+      }
+    }
+
+    if (categoryOneOf) {
+      for (const c of categoryOneOf) {
+        params = params.append('categoryOneOf[]', c + '')
+      }
+    }
+
+    return this.authHttp
+               .get<ResultList<Video>>(VideoService.BASE_VIDEO_URL, { params })
+               .pipe(
+                 switchMap(res => this.extractVideos(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  buildBaseFeedUrls (params: HttpParams) {
+    const feeds = [
+      {
+        format: FeedFormat.RSS,
+        label: 'rss 2.0',
+        url: VideoService.BASE_FEEDS_URL + FeedFormat.RSS.toLowerCase()
+      },
+      {
+        format: FeedFormat.ATOM,
+        label: 'atom 1.0',
+        url: VideoService.BASE_FEEDS_URL + FeedFormat.ATOM.toLowerCase()
+      },
+      {
+        format: FeedFormat.JSON,
+        label: 'json 1.0',
+        url: VideoService.BASE_FEEDS_URL + FeedFormat.JSON.toLowerCase()
+      }
+    ]
+
+    if (params && params.keys().length !== 0) {
+      for (const feed of feeds) {
+        feed.url += '?' + params.toString()
+      }
+    }
+
+    return feeds
+  }
+
+  getVideoFeedUrls (sort: VideoSortField, filter?: VideoFilter, categoryOneOf?: number[]) {
+    let params = this.restService.addRestGetParams(new HttpParams(), undefined, sort)
+
+    if (filter) params = params.set('filter', filter)
+
+    if (categoryOneOf) {
+      for (const c of categoryOneOf) {
+        params = params.append('categoryOneOf[]', c + '')
+      }
+    }
+
+    return this.buildBaseFeedUrls(params)
+  }
+
+  getAccountFeedUrls (accountId: number) {
+    let params = this.restService.addRestGetParams(new HttpParams())
+    params = params.set('accountId', accountId.toString())
+
+    return this.buildBaseFeedUrls(params)
+  }
+
+  getVideoChannelFeedUrls (videoChannelId: number) {
+    let params = this.restService.addRestGetParams(new HttpParams())
+    params = params.set('videoChannelId', videoChannelId.toString())
+
+    return this.buildBaseFeedUrls(params)
+  }
+
+  getVideoFileMetadata (metadataUrl: string) {
+    return this.authHttp
+               .get<FfprobeData>(metadataUrl)
+               .pipe(
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  removeVideo (id: number) {
+    return this.authHttp
+               .delete(VideoService.BASE_VIDEO_URL + id)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  loadCompleteDescription (descriptionPath: string) {
+    return this.authHttp
+               .get<{ description: string }>(environment.apiUrl + descriptionPath)
+               .pipe(
+                 map(res => res.description),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  setVideoLike (id: number) {
+    return this.setVideoRate(id, 'like')
+  }
+
+  setVideoDislike (id: number) {
+    return this.setVideoRate(id, 'dislike')
+  }
+
+  unsetVideoLike (id: number) {
+    return this.setVideoRate(id, 'none')
+  }
+
+  getUserVideoRating (id: number) {
+    const url = UserService.BASE_USERS_URL + 'me/videos/' + id + '/rating'
+
+    return this.authHttp.get<UserVideoRate>(url)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  extractVideos (result: ResultList<VideoServerModel>) {
+    return this.serverService.getServerLocale()
+               .pipe(
+                 map(translations => {
+                   const videosJson = result.data
+                   const totalVideos = result.total
+                   const videos: Video[] = []
+
+                   for (const videoJson of videosJson) {
+                     videos.push(new Video(videoJson, translations))
+                   }
+
+                   return { total: totalVideos, data: videos }
+                 })
+               )
+  }
+
+  explainedPrivacyLabels (privacies: VideoConstant<VideoPrivacy>[]) {
+    const base = [
+      {
+        id: VideoPrivacy.PRIVATE,
+        label: this.i18n('Only I can see this video')
+      },
+      {
+        id: VideoPrivacy.UNLISTED,
+        label: this.i18n('Only people with the private link can see this video')
+      },
+      {
+        id: VideoPrivacy.PUBLIC,
+        label: this.i18n('Anyone can see this video')
+      },
+      {
+        id: VideoPrivacy.INTERNAL,
+        label: this.i18n('Only users of this instance can see this video')
+      }
+    ]
+
+    return base.filter(o => !!privacies.find(p => p.id === o.id))
+  }
+
+  nsfwPolicyToParam (nsfwPolicy: NSFWPolicyType) {
+    return nsfwPolicy === 'do_not_list'
+      ? 'false'
+      : 'both'
+  }
+
+  private setVideoRate (id: number, rateType: UserVideoRateType) {
+    const url = VideoService.BASE_VIDEO_URL + id + '/rate'
+    const body: UserVideoRateUpdate = {
+      rating: rateType
+    }
+
+    return this.authHttp
+               .put(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+}