Merge branch 'develop' into pr/1217

90 files changed, 2131 insertions, 342 deletions

diff --git a/client/src/app/shared/account/account.model.ts b/client/src/app/shared/account/account.model.ts
index 42f2cfeaf..c5cd2051c 100644
--- a/client/src/app/shared/account/account.model.ts
+++ b/client/src/app/shared/account/account.model.ts
@@ -5,6 +5,10 @@ export class Account extends Actor implements ServerAccount {
   displayName: string
   description: string
   nameWithHost: string
+  mutedByUser: boolean
+  mutedByInstance: boolean
+  mutedServerByUser: boolean
+  mutedServerByInstance: boolean
 
   userId?: number
 
@@ -15,5 +19,10 @@ export class Account extends Actor implements ServerAccount {
     this.description = hash.description
     this.userId = hash.userId
     this.nameWithHost = Actor.CREATE_BY_STRING(this.name, this.host)
+
+    this.mutedByUser = false
+    this.mutedByInstance = false
+    this.mutedServerByUser = false
+    this.mutedServerByInstance = false
   }
 }
diff --git a/client/src/app/shared/actor/actor.model.ts b/client/src/app/shared/actor/actor.model.ts
index 811afb449..adecec1fc 100644
--- a/client/src/app/shared/actor/actor.model.ts
+++ b/client/src/app/shared/actor/actor.model.ts
@@ -16,7 +16,7 @@ export abstract class Actor implements ActorServer {
 
   avatarUrl: string
 
-  static GET_ACTOR_AVATAR_URL (actor: { avatar: Avatar }) {
+  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { path: string } }) {
     const absoluteAPIUrl = getAbsoluteAPIUrl()
 
     if (actor && actor.avatar) return absoluteAPIUrl + actor.avatar.path
diff --git a/client/src/app/shared/blocklist/account-block.model.ts b/client/src/app/shared/blocklist/account-block.model.ts
new file mode 100644
index 000000000..e7b433d88
--- /dev/null
+++ b/client/src/app/shared/blocklist/account-block.model.ts
@@ -0,0 +1,14 @@
+import { AccountBlock as AccountBlockServer } from '../../../../../shared'
+import { Account } from '../account/account.model'
+
+export class AccountBlock implements AccountBlockServer {
+  byAccount: Account
+  blockedAccount: Account
+  createdAt: Date | string
+
+  constructor (block: AccountBlockServer) {
+    this.byAccount = new Account(block.byAccount)
+    this.blockedAccount = new Account(block.blockedAccount)
+    this.createdAt = block.createdAt
+  }
+}
diff --git a/client/src/app/shared/blocklist/blocklist.service.ts b/client/src/app/shared/blocklist/blocklist.service.ts
new file mode 100644
index 000000000..c1f7312f0
--- /dev/null
+++ b/client/src/app/shared/blocklist/blocklist.service.ts
@@ -0,0 +1,135 @@
+import { Injectable } from '@angular/core'
+import { environment } from '../../../environments/environment'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { RestExtractor, RestPagination, RestService } from '../rest'
+import { SortMeta } from 'primeng/api'
+import { catchError, map } from 'rxjs/operators'
+import { AccountBlock as AccountBlockServer, ResultList, ServerBlock } from '../../../../../shared'
+import { Account } from '@app/shared/account/account.model'
+import { AccountBlock } from '@app/shared/blocklist/account-block.model'
+
+@Injectable()
+export class BlocklistService {
+  static BASE_USER_BLOCKLIST_URL = environment.apiUrl + '/api/v1/users/me/blocklist'
+  static BASE_SERVER_BLOCKLIST_URL = environment.apiUrl + '/api/v1/server/blocklist'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService
+  ) { }
+
+  /*********************** User -> Account blocklist ***********************/
+
+  getUserAccountBlocklist (pagination: RestPagination, sort: SortMeta) {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp.get<ResultList<AccountBlock>>(BlocklistService.BASE_USER_BLOCKLIST_URL + '/accounts', { params })
+               .pipe(
+                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
+                 map(res => this.restExtractor.applyToResultListData(res, this.formatAccountBlock.bind(this))),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  blockAccountByUser (account: Account) {
+    const body = { accountName: account.nameWithHost }
+
+    return this.authHttp.post(BlocklistService.BASE_USER_BLOCKLIST_URL + '/accounts', body)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  unblockAccountByUser (account: Account) {
+    const path = BlocklistService.BASE_USER_BLOCKLIST_URL + '/accounts/' + account.nameWithHost
+
+    return this.authHttp.delete(path)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  /*********************** User -> Server blocklist ***********************/
+
+  getUserServerBlocklist (pagination: RestPagination, sort: SortMeta) {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp.get<ResultList<ServerBlock>>(BlocklistService.BASE_USER_BLOCKLIST_URL + '/servers', { params })
+               .pipe(
+                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  blockServerByUser (host: string) {
+    const body = { host }
+
+    return this.authHttp.post(BlocklistService.BASE_USER_BLOCKLIST_URL + '/servers', body)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  unblockServerByUser (host: string) {
+    const path = BlocklistService.BASE_USER_BLOCKLIST_URL + '/servers/' + host
+
+    return this.authHttp.delete(path)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  /*********************** Instance -> Account blocklist ***********************/
+
+  getInstanceAccountBlocklist (pagination: RestPagination, sort: SortMeta) {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp.get<ResultList<AccountBlock>>(BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/accounts', { params })
+               .pipe(
+                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
+                 map(res => this.restExtractor.applyToResultListData(res, this.formatAccountBlock.bind(this))),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  blockAccountByInstance (account: Account) {
+    const body = { accountName: account.nameWithHost }
+
+    return this.authHttp.post(BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/accounts', body)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  unblockAccountByInstance (account: Account) {
+    const path = BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/accounts/' + account.nameWithHost
+
+    return this.authHttp.delete(path)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  /*********************** Instance -> Server blocklist ***********************/
+
+  getInstanceServerBlocklist (pagination: RestPagination, sort: SortMeta) {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp.get<ResultList<ServerBlock>>(BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/servers', { params })
+               .pipe(
+                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  blockServerByInstance (host: string) {
+    const body = { host }
+
+    return this.authHttp.post(BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/servers', body)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  unblockServerByInstance (host: string) {
+    const path = BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/servers/' + host
+
+    return this.authHttp.delete(path)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  private formatAccountBlock (accountBlock: AccountBlockServer) {
+    return new AccountBlock(accountBlock)
+  }
+}
diff --git a/client/src/app/shared/blocklist/index.ts b/client/src/app/shared/blocklist/index.ts
new file mode 100644
index 000000000..5886ca07e
--- /dev/null
+++ b/client/src/app/shared/blocklist/index.ts
@@ -0,0 +1,2 @@
+export * from './blocklist.service'
+export * from './account-block.model'
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 8110e2515..114b1d71f 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,17 +1,27 @@
 <div class="dropdown-root" ngbDropdown [placement]="placement">
-  <div class="action-button" [ngClass]="{ small: buttonSize === 'small' }" ngbDropdownToggle role="button">
-    <span class="icon icon-action"></span>
+  <div
+    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }"
+    ngbDropdownToggle role="button"
+  >
+    <my-global-icon *ngIf="!label" class="more-icon" iconName="more"></my-global-icon>
+    <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
   </div>
 
   <div ngbDropdownMenu class="dropdown-menu">
-    <ng-container *ngFor="let action of actions">
-      <div class="dropdown-item" *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
-        <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a>
+    <ng-container *ngFor="let actions of getActions()">
+
+      <ng-container *ngFor="let action of actions">
+        <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
+          <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a>
+
+          <span *ngIf="!action.linkBuilder" class="custom-action dropdown-item" (click)="action.handler(entry)" role="button">
+            {{ action.label }}
+          </span>
+        </ng-container>
+      </ng-container>
+
+      <div class="dropdown-divider"></div>
 
-        <span *ngIf="!action.linkBuilder" class="custom-action" class="dropdown-item" (click)="action.handler(entry)" role="button">
-          {{ action.label }}
-        </span>
-      </div>
     </ng-container>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 00f120fb8..985b2ca88 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -1,9 +1,20 @@
 @import '_variables';
 @import '_mixins';
 
+.dropdown-divider:last-child {
+  display: none;
+}
+
 .action-button {
   @include peertube-button;
-  @include grey-button;
+
+  &.grey {
+    @include grey-button;
+  }
+
+  &.orange {
+    @include orange-button;
+  }
 
   display: inline-block;
   padding: 0 10px;
@@ -13,14 +24,11 @@
   }
 
   &:hover, &:active, &:focus {
-    background-color: $grey-color;
+    background-color: $grey-background-color;
   }
 
-  .icon-action {
-    @include icon(21px);
-
-    background-image: url('../../../assets/images/video/more.svg');
-    top: -1px;
+  .more-icon {
+    width: 21px;
   }
 
   &.small {
@@ -30,9 +38,19 @@
   }
 }
 
+.dropdown-toggle::after {
+  position: relative;
+  top: 1px;
+}
+
 .dropdown-menu {
   .dropdown-item {
     cursor: pointer;
     color: #000 !important;
+
+    a, span {
+      display: block;
+      width: 100%;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 1838ff697..275e2b51e 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -2,9 +2,9 @@ import { Component, Input } from '@angular/core'
 
 export type DropdownAction<T> = {
   label?: string
-  handler?: (T) => any
-  linkBuilder?: (T) => (string | number)[]
-  isDisplayed?: (T) => boolean
+  handler?: (a: T) => any
+  linkBuilder?: (a: T) => (string | number)[]
+  isDisplayed?: (a: T) => boolean
 }
 
 @Component({
@@ -14,8 +14,16 @@ export type DropdownAction<T> = {
 })
 
 export class ActionDropdownComponent<T> {
-  @Input() actions: DropdownAction<T>[] = []
+  @Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = []
   @Input() entry: T
-  @Input() placement = 'left'
+  @Input() placement = 'bottom-left'
   @Input() buttonSize: 'normal' | 'small' = 'normal'
+  @Input() label: string
+  @Input() theme: 'orange' | 'grey' = 'grey'
+
+  getActions () {
+    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions
+
+    return [ this.actions ]
+  }
 }
diff --git a/client/src/app/shared/buttons/button.component.html b/client/src/app/shared/buttons/button.component.html
index 87a8daccf..b6df67102 100644
--- a/client/src/app/shared/buttons/button.component.html
+++ b/client/src/app/shared/buttons/button.component.html
@@ -1,4 +1,4 @@
 <span class="action-button" [ngClass]="className" [title]="getTitle()">
-  <span class="icon" [ngClass]="icon"></span>
+  <my-global-icon [iconName]="icon"></my-global-icon>
   <span class="button-label">{{ label }}</span>
 </span>
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 168102f09..04199a2a9 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -3,41 +3,18 @@
 
 .action-button {
   @include peertube-button-link;
+  @include button-with-icon(21px, 0, -2px);
 
-  font-size: 15px;
   font-weight: $font-semibold;
-  color: #585858;
-  background-color: #E5E5E5;
+  color: $grey-foreground-color;
+  background-color: $grey-background-color;
 
   &:hover {
-    background-color: #EFEFEF;
+    background-color: $grey-background-hover-color;
   }
 
-  .icon {
-    @include icon(21px);
-
-    position: relative;
-    top: -2px;
-
-    &.icon-edit {
-      background-image: url('../../../assets/images/global/edit-grey.svg');
-    }
-
-    &.icon-delete-grey {
-      background-image: url('../../../assets/images/global/delete-grey.svg');
-    }
-
-    &.icon-im-with-her {
-      background-image: url('../../../assets/images/global/im-with-her.svg');
-    }
-
-    &.icon-tick {
-      background-image: url('../../../assets/images/global/tick.svg');
-    }
-
-    &.icon-cross {
-      background-image: url('../../../assets/images/global/cross.svg');
-    }
+  my-global-icon {
+    @include apply-svg-color($grey-foreground-color);
   }
 }
 
diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts
index 967cb1409..a91e9c7eb 100644
--- a/client/src/app/shared/buttons/button.component.ts
+++ b/client/src/app/shared/buttons/button.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core'
+import { GlobalIconName } from '@app/shared/icons/global-icon.component'
 
 @Component({
   selector: 'my-button',
@@ -8,9 +9,9 @@ import { Component, Input } from '@angular/core'
 
 export class ButtonComponent {
   @Input() label = ''
-  @Input() className = undefined
-  @Input() icon = undefined
-  @Input() title = undefined
+  @Input() className: string = undefined
+  @Input() icon: GlobalIconName = undefined
+  @Input() title: string = undefined
 
   getTitle () {
     return this.title || this.label
diff --git a/client/src/app/shared/buttons/delete-button.component.html b/client/src/app/shared/buttons/delete-button.component.html
index 6c55d8104..4d12a84c0 100644
--- a/client/src/app/shared/buttons/delete-button.component.html
+++ b/client/src/app/shared/buttons/delete-button.component.html
@@ -1,5 +1,5 @@
 <span class="action-button action-button-delete" [title]="getTitle()" role="button">
-  <span class="icon icon-delete-grey"></span>
+  <my-global-icon iconName="delete"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
   <span class="button-label" i18n *ngIf="!label">Delete</span>
diff --git a/client/src/app/shared/buttons/edit-button.component.html b/client/src/app/shared/buttons/edit-button.component.html
index cecb780f3..da3addbae 100644
--- a/client/src/app/shared/buttons/edit-button.component.html
+++ b/client/src/app/shared/buttons/edit-button.component.html
@@ -1,5 +1,5 @@
 <a class="action-button action-button-edit" [routerLink]="routerLink" i18n-title title="Edit">
-  <span class="icon icon-edit"></span>
+  <my-global-icon iconName="edit"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
   <span i18n class="button-label" *ngIf="!label">Edit</span>
diff --git a/client/src/app/shared/buttons/edit-button.component.ts b/client/src/app/shared/buttons/edit-button.component.ts
index 7abaacc26..1fe4f7b30 100644
--- a/client/src/app/shared/buttons/edit-button.component.ts
+++ b/client/src/app/shared/buttons/edit-button.component.ts
@@ -8,5 +8,5 @@ import { Component, Input } from '@angular/core'
 
 export class EditButtonComponent {
   @Input() label: string
-  @Input() routerLink = []
+  @Input() routerLink: string[] = []
 }
diff --git a/client/src/app/shared/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html
new file mode 100644
index 000000000..65df1cd4d
--- /dev/null
+++ b/client/src/app/shared/confirm/confirm.component.html
@@ -0,0 +1,26 @@
+<ng-template #confirmModal let-close="close" let-dismiss="dismiss">
+
+  <div class="modal-header">
+    <h4 class="modal-title">{{ title }}</h4>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
+  </div>
+
+  <div class="modal-body" >
+    <div [innerHtml]="message"></div>
+
+    <div *ngIf="inputLabel && expectedInputValue" class="form-group">
+      <label for="confirmInput">{{ inputLabel }}</label>
+      <input type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" />
+    </div>
+  </div>
+
+  <div class="modal-footer inputs">
+    <span i18n class="action-button action-button-cancel" (click)="dismiss()" role="button">Cancel</span>
+
+    <input
+      type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
+      (click)="close()"
+    >
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/confirm/confirm.component.scss b/client/src/app/shared/confirm/confirm.component.scss
new file mode 100644
index 000000000..93dd7926b
--- /dev/null
+++ b/client/src/app/shared/confirm/confirm.component.scss
@@ -0,0 +1,17 @@
+@import '_variables';
+@import '_mixins';
+
+.button {
+  padding: 0 13px;
+}
+
+input[type=text] {
+  @include peertube-input-text(100%);
+  display: block;
+}
+
+.form-group {
+  margin: 20px 0;
+}
+
+
diff --git a/client/src/app/shared/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts
new file mode 100644
index 000000000..63c163da6
--- /dev/null
+++ b/client/src/app/shared/confirm/confirm.component.ts
@@ -0,0 +1,68 @@
+import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'
+import { ConfirmService } from '@app/core/confirm/confirm.service'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+
+@Component({
+  selector: 'my-confirm',
+  templateUrl: './confirm.component.html',
+  styleUrls: [ './confirm.component.scss' ]
+})
+export class ConfirmComponent implements OnInit {
+  @ViewChild('confirmModal') confirmModal: ElementRef
+
+  title = ''
+  message = ''
+  expectedInputValue = ''
+  inputLabel = ''
+
+  inputValue = ''
+  confirmButtonText = ''
+
+  private openedModal: NgbModalRef
+
+  constructor (
+    private modalService: NgbModal,
+    private confirmService: ConfirmService,
+    private i18n: I18n
+  ) { }
+
+  ngOnInit () {
+    this.confirmService.showConfirm.subscribe(
+      ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => {
+        this.title = title
+        this.message = message
+
+        this.inputLabel = inputLabel
+        this.expectedInputValue = expectedInputValue
+
+        this.confirmButtonText = confirmButtonText || this.i18n('Confirm')
+
+        this.showModal()
+      }
+    )
+  }
+
+  @HostListener('document:keydown.enter')
+  confirm () {
+    if (this.openedModal) this.openedModal.close()
+  }
+
+  isConfirmationDisabled () {
+    // No input validation
+    if (!this.inputLabel || !this.expectedInputValue) return false
+
+    return this.expectedInputValue !== this.inputValue
+  }
+
+  showModal () {
+    this.inputValue = ''
+
+    this.openedModal = this.modalService.open(this.confirmModal)
+
+    this.openedModal.result
+        .then(() => this.confirmService.confirmResponse.next(true))
+        .catch(() => this.confirmService.confirmResponse.next(false))
+  }
+}
diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts
index 0bb7d25e6..b9873af2c 100644
--- a/client/src/app/shared/forms/form-reactive.ts
+++ b/client/src/app/shared/forms/form-reactive.ts
@@ -1,11 +1,9 @@
 import { FormGroup } from '@angular/forms'
 import { BuildFormArgument, BuildFormDefaultValues, FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 
-export type FormReactiveErrors = { [ id: string ]: string }
+export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors }
 export type FormReactiveValidationMessages = {
-  [ id: string ]: {
-    [ name: string ]: string
-  }
+  [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages
 }
 
 export abstract class FormReactive {
@@ -13,7 +11,7 @@ export abstract class FormReactive {
   protected formChanged = false
 
   form: FormGroup
-  formErrors: FormReactiveErrors
+  formErrors: any // To avoid casting in template because of string | FormReactiveErrors
   validationMessages: FormReactiveValidationMessages
 
   buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) {
@@ -23,29 +21,49 @@ export abstract class FormReactive {
     this.formErrors = formErrors
     this.validationMessages = validationMessages
 
-    this.form.valueChanges.subscribe(() => this.onValueChanged(false))
+    this.form.valueChanges.subscribe(() => this.onValueChanged(this.form, this.formErrors, this.validationMessages, false))
+  }
+
+  protected forceCheck () {
+    return this.onValueChanged(this.form, this.formErrors, this.validationMessages, true)
+  }
+
+  protected check () {
+    return this.onValueChanged(this.form, this.formErrors, this.validationMessages, false)
   }
 
-  protected onValueChanged (forceCheck = false) {
-    for (const field in this.formErrors) {
+  private onValueChanged (
+    form: FormGroup,
+    formErrors: FormReactiveErrors,
+    validationMessages: FormReactiveValidationMessages,
+    forceCheck = false
+  ) {
+    for (const field of Object.keys(formErrors)) {
+      if (formErrors[field] && typeof formErrors[field] === 'object') {
+        this.onValueChanged(
+          form.controls[field] as FormGroup,
+          formErrors[field] as FormReactiveErrors,
+          validationMessages[field] as FormReactiveValidationMessages,
+          forceCheck
+        )
+        continue
+      }
+
       // clear previous error message (if any)
-      this.formErrors[ field ] = ''
-      const control = this.form.get(field)
+      formErrors[ field ] = ''
+      const control = form.get(field)
 
       if (control.dirty) this.formChanged = true
 
       // Don't care if dirty on force check
       const isDirty = control.dirty || forceCheck === true
       if (control && isDirty && !control.valid) {
-        const messages = this.validationMessages[ field ]
+        const messages = validationMessages[ field ]
         for (const key in control.errors) {
-          this.formErrors[ field ] += messages[ key ] + ' '
+          formErrors[ field ] += messages[ key ] + ' '
         }
       }
     }
   }
 
-  protected forceCheck () {
-    return this.onValueChanged(true)
-  }
 }
diff --git a/client/src/app/shared/forms/form-validators/form-validator.service.ts b/client/src/app/shared/forms/form-validators/form-validator.service.ts
index 19a8bef25..249fdf119 100644
--- a/client/src/app/shared/forms/form-validators/form-validator.service.ts
+++ b/client/src/app/shared/forms/form-validators/form-validator.service.ts
@@ -7,10 +7,10 @@ export type BuildFormValidator = {
   MESSAGES: { [ name: string ]: string }
 }
 export type BuildFormArgument = {
-  [ id: string ]: BuildFormValidator
+  [ id: string ]: BuildFormValidator | BuildFormArgument
 }
 export type BuildFormDefaultValues = {
-  [ name: string ]: string | string[]
+  [ name: string ]: string | string[] | BuildFormDefaultValues
 }
 
 @Injectable()
@@ -29,7 +29,16 @@ export class FormValidatorService {
       formErrors[name] = ''
 
       const field = obj[name]
-      if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES
+      if (this.isRecursiveField(field)) {
+        const result = this.buildForm(field as BuildFormArgument, defaultValues[name] as BuildFormDefaultValues)
+        group[name] = result.form
+        formErrors[name] = result.formErrors
+        validationMessages[name] = result.validationMessages
+
+        continue
+      }
+
+      if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string }
 
       const defaultValue = defaultValues[name] || ''
 
@@ -52,13 +61,27 @@ export class FormValidatorService {
       formErrors[name] = ''
 
       const field = obj[name]
-      if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES
+      if (this.isRecursiveField(field)) {
+        this.updateForm(
+          form[name],
+          formErrors[name] as FormReactiveErrors,
+          validationMessages[name] as FormReactiveValidationMessages,
+          obj[name] as BuildFormArgument,
+          defaultValues[name] as BuildFormDefaultValues
+        )
+        continue
+      }
+
+      if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string }
 
       const defaultValue = defaultValues[name] || ''
 
-      if (field && field.VALIDATORS) form.addControl(name, new FormControl(defaultValue, field.VALIDATORS))
+      if (field && field.VALIDATORS) form.addControl(name, new FormControl(defaultValue, field.VALIDATORS as ValidatorFn[]))
       else form.addControl(name, new FormControl(defaultValue))
     }
   }
 
+  private isRecursiveField (field: any) {
+    return field && typeof field === 'object' && !field.MESSAGES && !field.VALIDATORS
+  }
 }
diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts
index 74e385b3d..fdcbedb71 100644
--- a/client/src/app/shared/forms/form-validators/index.ts
+++ b/client/src/app/shared/forms/form-validators/index.ts
@@ -1,6 +1,7 @@
 export * from './custom-config-validators.service'
 export * from './form-validator.service'
 export * from './host'
+export * from './instance-validators.service'
 export * from './login-validators.service'
 export * from './reset-password-validators.service'
 export * from './user-validators.service'
diff --git a/client/src/app/shared/forms/form-validators/instance-validators.service.ts b/client/src/app/shared/forms/form-validators/instance-validators.service.ts
new file mode 100644
index 000000000..5bb852858
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/instance-validators.service.ts
@@ -0,0 +1,48 @@
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from '@app/shared'
+import { Injectable } from '@angular/core'
+
+@Injectable()
+export class InstanceValidatorsService {
+  readonly FROM_EMAIL: BuildFormValidator
+  readonly FROM_NAME: BuildFormValidator
+  readonly BODY: BuildFormValidator
+
+  constructor (private i18n: I18n) {
+
+    this.FROM_EMAIL = {
+      VALIDATORS: [ Validators.required, Validators.email ],
+      MESSAGES: {
+        'required': this.i18n('Email is required.'),
+        'email': this.i18n('Email must be valid.')
+      }
+    }
+
+    this.FROM_NAME = {
+      VALIDATORS: [
+        Validators.required,
+        Validators.minLength(1),
+        Validators.maxLength(120)
+      ],
+      MESSAGES: {
+        'required': this.i18n('Your name is required.'),
+        'minlength': this.i18n('Your name must be at least 1 character long.'),
+        'maxlength': this.i18n('Your name cannot be more than 120 characters long.')
+      }
+    }
+
+    this.BODY = {
+      VALIDATORS: [
+        Validators.required,
+        Validators.minLength(3),
+        Validators.maxLength(5000)
+      ],
+      MESSAGES: {
+        'required': this.i18n('A message is required.'),
+        'minlength': this.i18n('The message must be at least 3 characters long.'),
+        'maxlength': this.i18n('The message cannot be more than 5000 characters long.')
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/forms/form-validators/user-validators.service.ts b/client/src/app/shared/forms/form-validators/user-validators.service.ts
index 1fd1cdf68..6589b2580 100644
--- a/client/src/app/shared/forms/form-validators/user-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/user-validators.service.ts
@@ -23,15 +23,15 @@ export class UserValidatorsService {
     this.USER_USERNAME = {
       VALIDATORS: [
         Validators.required,
-        Validators.minLength(3),
-        Validators.maxLength(20),
-        Validators.pattern(/^[a-z0-9._]+$/)
+        Validators.minLength(1),
+        Validators.maxLength(50),
+        Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
       ],
       MESSAGES: {
         'required': this.i18n('Username is required.'),
-        'minlength': this.i18n('Username must be at least 3 characters long.'),
-        'maxlength': this.i18n('Username cannot be more than 20 characters long.'),
-        'pattern': this.i18n('Username should be only lowercase alphanumeric characters.')
+        'minlength': this.i18n('Username must be at least 1 character long.'),
+        'maxlength': this.i18n('Username cannot be more than 50 characters long.'),
+        'pattern': this.i18n('Username should be lowercase alphanumeric; dots and underscores are allowed.')
       }
     }
 
@@ -88,24 +88,24 @@ export class UserValidatorsService {
     this.USER_DISPLAY_NAME = {
       VALIDATORS: [
         Validators.required,
-        Validators.minLength(3),
-        Validators.maxLength(120)
+        Validators.minLength(1),
+        Validators.maxLength(50)
       ],
       MESSAGES: {
         'required': this.i18n('Display name is required.'),
-        'minlength': this.i18n('Display name must be at least 3 characters long.'),
-        'maxlength': this.i18n('Display name cannot be more than 120 characters long.')
+        'minlength': this.i18n('Display name must be at least 1 character long.'),
+        'maxlength': this.i18n('Display name cannot be more than 50 characters long.')
       }
     }
 
     this.USER_DESCRIPTION = {
       VALIDATORS: [
         Validators.minLength(3),
-        Validators.maxLength(250)
+        Validators.maxLength(1000)
       ],
       MESSAGES: {
         'minlength': this.i18n('Description must be at least 3 characters long.'),
-        'maxlength': this.i18n('Description cannot be more than 250 characters long.')
+        'maxlength': this.i18n('Description cannot be more than 1000 characters long.')
       }
     }
 
diff --git a/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts b/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts
index 6e9806611..fcc966b84 100644
--- a/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts
@@ -10,20 +10,20 @@ export class VideoAbuseValidatorsService {
 
   constructor (private i18n: I18n) {
     this.VIDEO_ABUSE_REASON = {
-      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
+      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
       MESSAGES: {
         'required': this.i18n('Report reason is required.'),
         'minlength': this.i18n('Report reason must be at least 2 characters long.'),
-        'maxlength': this.i18n('Report reason cannot be more than 300 characters long.')
+        'maxlength': this.i18n('Report reason cannot be more than 3000 characters long.')
       }
     }
 
     this.VIDEO_ABUSE_MODERATION_COMMENT = {
-      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
+      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
       MESSAGES: {
         'required': this.i18n('Moderation comment is required.'),
         'minlength': this.i18n('Moderation comment must be at least 2 characters long.'),
-        'maxlength': this.i18n('Moderation comment cannot be more than 300 characters long.')
+        'maxlength': this.i18n('Moderation comment cannot be more than 3000 characters long.')
       }
     }
   }
diff --git a/client/src/app/shared/forms/form-validators/video-change-ownership-validators.service.ts b/client/src/app/shared/forms/form-validators/video-change-ownership-validators.service.ts
index 087b80b44..c6fbb7538 100644
--- a/client/src/app/shared/forms/form-validators/video-change-ownership-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/video-change-ownership-validators.service.ts
@@ -1,5 +1,5 @@
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators } from '@angular/forms'
+import { AbstractControl, ValidationErrors, Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
 import { BuildFormValidator } from '@app/shared'
 
@@ -9,10 +9,19 @@ export class VideoChangeOwnershipValidatorsService {
 
   constructor (private i18n: I18n) {
     this.USERNAME = {
-      VALIDATORS: [ Validators.required ],
+      VALIDATORS: [ Validators.required, this.localAccountValidator ],
       MESSAGES: {
-        'required': this.i18n('The username is required.')
+        'required': this.i18n('The username is required.'),
+        'localAccountOnly': this.i18n('You can only transfer ownership to a local account')
       }
     }
   }
+
+  localAccountValidator (control: AbstractControl): ValidationErrors {
+    if (control.value.includes('@')) {
+      return { 'localAccountOnly': true }
+    }
+
+    return null
+  }
 }
diff --git a/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts b/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts
index 1ce3a0dca..1c519c10a 100644
--- a/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts
@@ -14,50 +14,50 @@ export class VideoChannelValidatorsService {
     this.VIDEO_CHANNEL_NAME = {
       VALIDATORS: [
         Validators.required,
-        Validators.minLength(3),
-        Validators.maxLength(20),
-        Validators.pattern(/^[a-z0-9._]+$/)
+        Validators.minLength(1),
+        Validators.maxLength(50),
+        Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
       ],
       MESSAGES: {
         'required': this.i18n('Name is required.'),
-        'minlength': this.i18n('Name must be at least 3 characters long.'),
-        'maxlength': this.i18n('Name cannot be more than 20 characters long.'),
-        'pattern': this.i18n('Name should be only lowercase alphanumeric characters.')
+        'minlength': this.i18n('Name must be at least 1 character long.'),
+        'maxlength': this.i18n('Name cannot be more than 50 characters long.'),
+        'pattern': this.i18n('Name should be lowercase alphanumeric; dots and underscores are allowed.')
       }
     }
 
     this.VIDEO_CHANNEL_DISPLAY_NAME = {
       VALIDATORS: [
         Validators.required,
-        Validators.minLength(3),
-        Validators.maxLength(120)
+        Validators.minLength(1),
+        Validators.maxLength(50)
       ],
       MESSAGES: {
         'required': i18n('Display name is required.'),
-        'minlength': i18n('Display name must be at least 3 characters long.'),
-        'maxlength': i18n('Display name cannot be more than 120 characters long.')
+        'minlength': i18n('Display name must be at least 1 character long.'),
+        'maxlength': i18n('Display name cannot be more than 50 characters long.')
       }
     }
 
     this.VIDEO_CHANNEL_DESCRIPTION = {
       VALIDATORS: [
         Validators.minLength(3),
-        Validators.maxLength(500)
+        Validators.maxLength(1000)
       ],
       MESSAGES: {
         'minlength': i18n('Description must be at least 3 characters long.'),
-        'maxlength': i18n('Description cannot be more than 500 characters long.')
+        'maxlength': i18n('Description cannot be more than 1000 characters long.')
       }
     }
 
     this.VIDEO_CHANNEL_SUPPORT = {
       VALIDATORS: [
         Validators.minLength(3),
-        Validators.maxLength(500)
+        Validators.maxLength(1000)
       ],
       MESSAGES: {
         'minlength': i18n('Support text must be at least 3 characters long.'),
-        'maxlength': i18n('Support text cannot be more than 500 characters long.')
+        'maxlength': i18n('Support text cannot be more than 1000 characters long.')
       }
     }
   }
diff --git a/client/src/app/shared/forms/form-validators/video-validators.service.ts b/client/src/app/shared/forms/form-validators/video-validators.service.ts
index 396be6f3b..81ed0666f 100644
--- a/client/src/app/shared/forms/form-validators/video-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/video-validators.service.ts
@@ -79,10 +79,10 @@ export class VideoValidatorsService {
     }
 
     this.VIDEO_SUPPORT = {
-      VALIDATORS: [ Validators.minLength(3), Validators.maxLength(500) ],
+      VALIDATORS: [ Validators.minLength(3), Validators.maxLength(1000) ],
       MESSAGES: {
         'minlength': this.i18n('Video support must be at least 3 characters long.'),
-        'maxlength': this.i18n('Video support cannot be more than 500 characters long.')
+        'maxlength': this.i18n('Video support cannot be more than 1000 characters long.')
       }
     }
 
diff --git a/client/src/app/shared/forms/index.ts b/client/src/app/shared/forms/index.ts
index 41c321c4c..8febbfee9 100644
--- a/client/src/app/shared/forms/index.ts
+++ b/client/src/app/shared/forms/index.ts
@@ -1,3 +1,4 @@
 export * from './form-validators'
 export * from './form-reactive'
 export * from './reactive-file.component'
+export * from './textarea-autoresize.directive'
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index b99169ed2..e87aca0d4 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -1,10 +1,10 @@
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { MarkdownService } from '@app/videos/shared'
 import { Subject } from 'rxjs'
 import truncate from 'lodash-es/truncate'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-markdown-textarea',
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.html b/client/src/app/shared/forms/peertube-checkbox.component.html
index 38691f050..7b8bcf601 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/forms/peertube-checkbox.component.html
@@ -1,10 +1,10 @@
-<div class="form-group">
+<div class="root">
   <label class="form-group-checkbox">
-    <input type="checkbox" [(ngModel)]="checked" (ngModelChange)="onModelChange()" [id]="inputName" [disabled]="isDisabled" />
+    <input type="checkbox" [(ngModel)]="checked" (ngModelChange)="onModelChange()" [id]="inputName" [disabled]="disabled" />
     <span role="checkbox" [attr.aria-checked]="checked"></span>
     <span *ngIf="labelText">{{ labelText }}</span>
     <span *ngIf="labelHtml" [innerHTML]="labelHtml"></span>
   </label>
 
   <my-help *ngIf="helpHtml" tooltipPlacement="top" helpType="custom" i18n-customHtml [customHtml]="helpHtml"></my-help>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index ee133f190..6e4e20775 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -1,7 +1,7 @@
 @import '_variables';
 @import '_mixins';
 
-.form-group {
+.root {
   display: flex;
 
   .form-group-checkbox {
@@ -20,6 +20,10 @@
     }
   }
 
+  label {
+    margin-bottom: 0;
+  }
+
   my-help {
     position: relative;
     top: -2px;
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.ts b/client/src/app/shared/forms/peertube-checkbox.component.ts
index bbc9904df..c1a6915e8 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.ts
+++ b/client/src/app/shared/forms/peertube-checkbox.component.ts
@@ -19,8 +19,7 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor {
   @Input() labelText: string
   @Input() labelHtml: string
   @Input() helpHtml: string
-
-  isDisabled = false
+  @Input() disabled = false
 
   propagateChange = (_: any) => { /* empty */ }
 
@@ -41,6 +40,6 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor {
   }
 
   setDisabledState (isDisabled: boolean) {
-    this.isDisabled = isDisabled
+    this.disabled = isDisabled
   }
 }
diff --git a/client/src/app/shared/forms/reactive-file.component.ts b/client/src/app/shared/forms/reactive-file.component.ts
index 8d22aa56c..f60c38e8d 100644
--- a/client/src/app/shared/forms/reactive-file.component.ts
+++ b/client/src/app/shared/forms/reactive-file.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { NotificationsService } from 'angular2-notifications'
+import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
@@ -30,7 +30,7 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
   private file: File
 
   constructor (
-    private notificationsService: NotificationsService,
+    private notifier: Notifier,
     private i18n: I18n
   ) {}
 
@@ -49,7 +49,18 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
       const [ file ] = event.target.files
 
       if (file.size > this.maxFileSize) {
-        this.notificationsService.error(this.i18n('Error'), this.i18n('This file is too large.'))
+        this.notifier.error(this.i18n('This file is too large.'))
+        return
+      }
+
+      const extension = '.' + file.name.split('.').pop()
+      if (this.extensions.includes(extension) === false) {
+        const message = this.i18n(
+          'PeerTube cannot handle this kind of file. Accepted extensions are {{extensions}}.',
+          { extensions: this.allowedExtensionsMessage }
+        )
+        this.notifier.error(message)
+
         return
       }
 
diff --git a/client/src/app/shared/forms/textarea-autoresize.directive.ts b/client/src/app/shared/forms/textarea-autoresize.directive.ts
new file mode 100644
index 000000000..f8c855c16
--- /dev/null
+++ b/client/src/app/shared/forms/textarea-autoresize.directive.ts
@@ -0,0 +1,25 @@
+// Thanks: https://github.com/evseevdev/ngx-textarea-autosize
+import { AfterViewInit, Directive, ElementRef, HostBinding, HostListener } from '@angular/core'
+
+@Directive({
+  selector: 'textarea[myAutoResize]'
+})
+export class TextareaAutoResizeDirective implements AfterViewInit {
+  @HostBinding('attr.rows') rows = '1'
+  @HostBinding('style.overflow') overflow = 'hidden'
+
+  constructor (private elem: ElementRef) { }
+
+  public ngAfterViewInit () {
+    this.resize()
+  }
+
+  @HostListener('input')
+  resize () {
+    const textarea = this.elem.nativeElement as HTMLTextAreaElement
+    // Reset textarea height to auto that correctly calculate the new height
+    textarea.style.height = 'auto'
+    // Set new height
+    textarea.style.height = `${textarea.scrollHeight}px`
+  }
+}
diff --git a/client/src/app/shared/guards/can-deactivate-guard.service.ts b/client/src/app/shared/guards/can-deactivate-guard.service.ts
index e2a79e8c4..3a35fcfb3 100644
--- a/client/src/app/shared/guards/can-deactivate-guard.service.ts
+++ b/client/src/app/shared/guards/can-deactivate-guard.service.ts
@@ -4,8 +4,10 @@ import { Observable } from 'rxjs'
 import { ConfirmService } from '../../core/index'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 
+export type CanComponentDeactivateResult = { text?: string, canDeactivate: Observable<boolean> | boolean }
+
 export interface CanComponentDeactivate {
-  canDeactivate: () => { text?: string, canDeactivate: Observable<boolean> | boolean }
+  canDeactivate: () => CanComponentDeactivateResult
 }
 
 @Injectable()
diff --git a/client/src/app/shared/icons/global-icon.component.html b/client/src/app/shared/icons/global-icon.component.html
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/client/src/app/shared/icons/global-icon.component.html
diff --git a/client/src/app/shared/icons/global-icon.component.scss b/client/src/app/shared/icons/global-icon.component.scss
new file mode 100644
index 000000000..6805fb6f7
--- /dev/null
+++ b/client/src/app/shared/icons/global-icon.component.scss
@@ -0,0 +1,4 @@
+/deep/ svg {
+  width: inherit;
+  height: inherit;
+}
diff --git a/client/src/app/shared/icons/global-icon.component.ts b/client/src/app/shared/icons/global-icon.component.ts
new file mode 100644
index 000000000..e8ada0324
--- /dev/null
+++ b/client/src/app/shared/icons/global-icon.component.ts
@@ -0,0 +1,48 @@
+import { Component, ElementRef, Input, OnInit } from '@angular/core'
+
+const icons = {
+  'add': require('../../../assets/images/global/add.html'),
+  'syndication': require('../../../assets/images/global/syndication.html'),
+  'help': require('../../../assets/images/global/help.html'),
+  'sparkle': require('../../../assets/images/global/sparkle.html'),
+  'alert': require('../../../assets/images/global/alert.html'),
+  'cloud-error': require('../../../assets/images/global/cloud-error.html'),
+  'user-add': require('../../../assets/images/global/user-add.html'),
+  'no': require('../../../assets/images/global/no.html'),
+  'cloud-download': require('../../../assets/images/global/cloud-download.html'),
+  'undo': require('../../../assets/images/global/undo.html'),
+  'circle-tick': require('../../../assets/images/global/circle-tick.html'),
+  'cog': require('../../../assets/images/global/cog.html'),
+  'download': require('../../../assets/images/global/download.html'),
+  'edit': require('../../../assets/images/global/edit.html'),
+  'im-with-her': require('../../../assets/images/global/im-with-her.html'),
+  'delete': require('../../../assets/images/global/delete.html'),
+  'cross': require('../../../assets/images/global/cross.html'),
+  'validate': require('../../../assets/images/global/validate.html'),
+  'tick': require('../../../assets/images/global/tick.html'),
+  'dislike': require('../../../assets/images/video/dislike.html'),
+  'heart': require('../../../assets/images/video/heart.html'),
+  'like': require('../../../assets/images/video/like.html'),
+  'more': require('../../../assets/images/video/more.html'),
+  'share': require('../../../assets/images/video/share.html'),
+  'upload': require('../../../assets/images/video/upload.html')
+}
+
+export type GlobalIconName = keyof typeof icons
+
+@Component({
+  selector: 'my-global-icon',
+  template: '',
+  styleUrls: [ './global-icon.component.scss' ]
+})
+export class GlobalIconComponent implements OnInit {
+  @Input() iconName: GlobalIconName
+
+  constructor (private el: ElementRef) {}
+
+  ngOnInit () {
+    const nativeElement = this.el.nativeElement
+
+    nativeElement.innerHTML = icons[this.iconName]
+  }
+}
diff --git a/client/src/app/shared/instance/instance.service.ts b/client/src/app/shared/instance/instance.service.ts
new file mode 100644
index 000000000..61321ecce
--- /dev/null
+++ b/client/src/app/shared/instance/instance.service.ts
@@ -0,0 +1,36 @@
+import { catchError } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { environment } from '../../../environments/environment'
+import { RestExtractor, RestService } from '../rest'
+import { About } from '../../../../../shared/models/server'
+
+@Injectable()
+export class InstanceService {
+  private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config'
+  private static BASE_SERVER_URL = environment.apiUrl + '/api/v1/server'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) {
+  }
+
+  getAbout () {
+    return this.authHttp.get<About>(InstanceService.BASE_CONFIG_URL + '/about')
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  contactAdministrator (fromEmail: string, fromName: string, message: string) {
+    const body = {
+      fromEmail,
+      fromName,
+      body: message
+    }
+
+    return this.authHttp.post(InstanceService.BASE_SERVER_URL + '/contact', body)
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+
+  }
+}
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
new file mode 100644
index 000000000..d3c896019
--- /dev/null
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -0,0 +1,21 @@
+<div class="sub-menu">
+  <ng-container *ngFor="let menuEntry of menuEntries">
+
+    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a>
+
+    <div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
+      <span
+        (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
+        (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page"
+      >
+        <ng-container i18n>{{ menuEntry.label }}</ng-container>
+        <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
+      </span>
+
+      <div ngbDropdownMenu>
+        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [routerLink]="menuChild.routerLink">{{ menuChild.label }}</a>
+      </div>
+    </div>
+
+  </ng-container>
+</div>
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss
new file mode 100644
index 000000000..77159532f
--- /dev/null
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss
@@ -0,0 +1,18 @@
+.parent-entry {
+  span[role=button] {
+    cursor: pointer;
+  }
+
+  a {
+    display: block;
+  }
+}
+
+/deep/ .dropdown-toggle::after {
+  position: relative;
+  top: 2px;
+}
+
+/deep/ .dropdown-menu {
+  margin-top: 0 !important;
+}
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts
new file mode 100644
index 000000000..e859c30dd
--- /dev/null
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -0,0 +1,83 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { filter, take } from 'rxjs/operators'
+import { NavigationEnd, Router } from '@angular/router'
+import { Subscription } from 'rxjs'
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+
+export type TopMenuDropdownParam = {
+  label: string
+  routerLink?: string
+
+  children?: {
+    label: string
+    routerLink: string
+  }[]
+}
+
+@Component({
+  selector: 'my-top-menu-dropdown',
+  templateUrl: './top-menu-dropdown.component.html',
+  styleUrls: [ './top-menu-dropdown.component.scss' ]
+})
+export class TopMenuDropdownComponent implements OnInit, OnDestroy {
+  @Input() menuEntries: TopMenuDropdownParam[] = []
+
+  suffixLabels: { [ parentLabel: string ]: string }
+
+  private openedOnHover = false
+  private routeSub: Subscription
+
+  constructor (private router: Router) {}
+
+  ngOnInit () {
+    this.updateChildLabels(window.location.pathname)
+
+    this.routeSub = this.router.events
+                        .pipe(filter(event => event instanceof NavigationEnd))
+                        .subscribe(() => this.updateChildLabels(window.location.pathname))
+  }
+
+  ngOnDestroy () {
+    if (this.routeSub) this.routeSub.unsubscribe()
+  }
+
+  openDropdownOnHover (dropdown: NgbDropdown) {
+    this.openedOnHover = true
+    dropdown.open()
+
+    // Menu was closed
+    dropdown.openChange
+            .pipe(take(1))
+            .subscribe(e => 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
+  }
+
+  private updateChildLabels (path: string) {
+    this.suffixLabels = {}
+
+    for (const entry of this.menuEntries) {
+      if (!entry.children) continue
+
+      for (const child of entry.children) {
+        if (path.startsWith(child.routerLink)) {
+          this.suffixLabels[entry.label] = child.label
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/misc/from-now.pipe.ts b/client/src/app/shared/misc/from-now.pipe.ts
index 33e6d25fe..00b5be6c9 100644
--- a/client/src/app/shared/misc/from-now.pipe.ts
+++ b/client/src/app/shared/misc/from-now.pipe.ts
@@ -7,8 +7,9 @@ export class FromNowPipe implements PipeTransform {
 
   constructor (private i18n: I18n) { }
 
-  transform (value: number) {
-    const seconds = Math.floor((Date.now() - value) / 1000)
+  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) {
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index 28ccb1e26..444425c9f 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -18,10 +18,13 @@
   container="body"
   title="Get help"
   i18n-title
+  popoverClass="help-popover"
   [attr.aria-pressed]="isPopoverOpened"
   [ngbPopover]="tooltipTemplate"
   [placement]="tooltipPlacement"
   [autoClose]="true"
   (onHidden)="onPopoverHidden()"
   (onShown)="onPopoverShown()"
-></span>
+>
+  <my-global-icon iconName="help"></my-global-icon>
+</span>
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index 5c73a8031..3898f3cda 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -2,29 +2,40 @@
 @import '_mixins';
 
 .help-tooltip-button {
-  @include icon(17px);
-
-  position: relative;
-  top: -2px;
-  background-image: url('../../../assets/images/global/help.svg');
+  cursor: pointer;
   border: none;
-  margin: 5px;
+
+  my-global-icon {
+    width: 17px;
+    position: relative;
+    top: -2px;
+    margin: 5px;
+
+    @include apply-svg-color(var(--mainForegroundColor))
+  }
 }
 
 /deep/ {
-  .popover-body {
-    text-align: left;
-    padding: 10px;
+  .help-popover {
     max-width: 300px;
 
-    font-size: 13px;
-    font-family: $main-fonts;
-    background-color: #fff;
-    color: #000;
-    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+    .popover-body {
+      font-family: $main-fonts;
+      text-align: left;
+      padding: 10px;
+      font-size: 13px;
+      background-color: var(--mainBackgroundColor);
+      color: var(--mainForegroundColor);
+      box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+
+      p {
+        margin-bottom: 0;
+      }
 
-    ul {
-      padding-left: 20px;
+      ul {
+        padding-left: 20px;
+        margin-bottom: 0;
+      }
     }
   }
 }
diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts
index ba0452e77..f3426f70f 100644
--- a/client/src/app/shared/misc/help.component.ts
+++ b/client/src/app/shared/misc/help.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core'
-import { MarkdownService } from '@app/videos/shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-help',
diff --git a/client/src/app/shared/misc/peertube-local-storage.ts b/client/src/app/shared/misc/peertube-local-storage.ts
index 260f994b6..fb5c45acf 100644
--- a/client/src/app/shared/misc/peertube-local-storage.ts
+++ b/client/src/app/shared/misc/peertube-local-storage.ts
@@ -6,7 +6,7 @@ class MemoryStorage {
   [key: string]: any
   [index: number]: string
 
-  getItem (key) {
+  getItem (key: any) {
     const stringKey = String(key)
     if (valuesMap.has(key)) {
       return String(valuesMap.get(stringKey))
@@ -15,11 +15,11 @@ class MemoryStorage {
     return null
   }
 
-  setItem (key, val) {
+  setItem (key: any, val: any) {
     valuesMap.set(String(key), String(val))
   }
 
-  removeItem (key) {
+  removeItem (key: any) {
     valuesMap.delete(key)
   }
 
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index c8b7ebc67..7cc6055c2 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -102,12 +102,18 @@ function objectToFormData (obj: any, form?: FormData, namespace?: string) {
   return fd
 }
 
-function lineFeedToHtml (obj: object, keyToNormalize: string) {
+function objectLineFeedToHtml (obj: any, keyToNormalize: string) {
   return immutableAssign(obj, {
-    [keyToNormalize]: obj[keyToNormalize].replace(/\r?\n|\r/g, '<br />')
+    [keyToNormalize]: lineFeedToHtml(obj[keyToNormalize])
   })
 }
 
+function lineFeedToHtml (text: string) {
+  if (!text) return text
+
+  return text.replace(/\r?\n|\r/g, '<br />')
+}
+
 function removeElementFromArray <T> (arr: T[], elem: T) {
   const index = arr.indexOf(elem)
   if (index !== -1) arr.splice(index, 1)
@@ -124,9 +130,14 @@ function sortBy (obj: any[], key1: string, key2?: string) {
   })
 }
 
+function scrollToTop () {
+  window.scroll(0, 0)
+}
+
 export {
   sortBy,
   durationToString,
+  lineFeedToHtml,
   objectToUrlEncoded,
   getParameterByName,
   populateAsyncUserVideoChannels,
@@ -134,6 +145,7 @@ export {
   dateToHuman,
   immutableAssign,
   objectToFormData,
-  lineFeedToHtml,
-  removeElementFromArray
+  objectLineFeedToHtml,
+  removeElementFromArray,
+  scrollToTop
 }
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.html b/client/src/app/shared/moderation/user-ban-modal.component.html
index b2958caa4..f38ea543d 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/moderation/user-ban-modal.component.html
@@ -1,7 +1,8 @@
 <ng-template #modal>
   <div class="modal-header">
-    <h4 i18n class="modal-title">Ban {{ userToBan.username }}</h4>
-    <span class="close" aria-hidden="true" (click)="hideBanUserModal()"></span>
+    <h4 i18n class="modal-title">Ban</h4>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
@@ -19,7 +20,7 @@
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hideBanUserModal()">Cancel</span>
+        <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
 
         <input
           type="submit" i18n-value value="Ban this user" class="action-button-submit"
@@ -29,4 +30,4 @@
     </form>
   </div>
 
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.ts b/client/src/app/shared/moderation/user-ban-modal.component.ts
index 67ae38e48..942765301 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/moderation/user-ban-modal.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
-import { NotificationsService } from 'angular2-notifications'
+import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@@ -15,15 +15,15 @@ import { User } from '../../../../../shared'
 })
 export class UserBanModalComponent extends FormReactive implements OnInit {
   @ViewChild('modal') modal: NgbModal
-  @Output() userBanned = new EventEmitter<User>()
+  @Output() userBanned = new EventEmitter<User | User[]>()
 
-  private userToBan: User
+  private usersToBan: User | User[]
   private openedModal: NgbModalRef
 
   constructor (
     protected formValidatorService: FormValidatorService,
     private modalService: NgbModal,
-    private notificationsService: NotificationsService,
+    private notifier: Notifier,
     private userService: UserService,
     private userValidatorsService: UserValidatorsService,
     private i18n: I18n
@@ -37,32 +37,33 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
     })
   }
 
-  openModal (user: User) {
-    this.userToBan = user
+  openModal (user: User | User[]) {
+    this.usersToBan = user
     this.openedModal = this.modalService.open(this.modal)
   }
 
-  hideBanUserModal () {
-    this.userToBan = undefined
+  hide () {
+    this.usersToBan = undefined
     this.openedModal.close()
   }
 
   async banUser () {
     const reason = this.form.value['reason'] || undefined
 
-    this.userService.banUser(this.userToBan, reason)
+    this.userService.banUsers(this.usersToBan, reason)
       .subscribe(
         () => {
-          this.notificationsService.success(
-            this.i18n('Success'),
-            this.i18n('User {{username}} banned.', { username: this.userToBan.username })
-          )
+          const message = Array.isArray(this.usersToBan)
+            ? this.i18n('{{num}} users banned.', { num: this.usersToBan.length })
+            : this.i18n('User {{username}} banned.', { username: this.usersToBan.username })
 
-          this.userBanned.emit(this.userToBan)
-          this.hideBanUserModal()
+          this.notifier.success(message)
+
+          this.userBanned.emit(this.usersToBan)
+          this.hide()
         },
 
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
       )
   }
 
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.html b/client/src/app/shared/moderation/user-moderation-dropdown.component.html
index ed1a4c863..7367a7e59 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.html
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.html
@@ -1,5 +1,8 @@
-<ng-container *ngIf="user && userActions.length !== 0">
+<ng-container *ngIf="userActions.length !== 0">
   <my-user-ban-modal #userBanModal (userBanned)="onUserBanned()"></my-user-ban-modal>
 
-  <my-action-dropdown i18n-label label="Actions" [actions]="userActions" [entry]="user" [buttonSize]="buttonSize"></my-action-dropdown>
+  <my-action-dropdown
+    [actions]="userActions" [entry]="{ user: user, account: account }"
+    [buttonSize]="buttonSize" [placement]="placement"
+  ></my-action-dropdown>
 </ng-container>
\ No newline at end of file
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
index 4f88456de..9a2461ebf 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -1,50 +1,53 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { NotificationsService } from 'angular2-notifications'
+import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
-import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { UserBanModalComponent } from '@app/shared/moderation/user-ban-modal.component'
 import { UserService } from '@app/shared/users'
-import { AuthService, ConfirmService } from '@app/core'
+import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
 import { User, UserRight } from '../../../../../shared/models/users'
+import { Account } from '@app/shared/account/account.model'
+import { BlocklistService } from '@app/shared/blocklist'
 
 @Component({
   selector: 'my-user-moderation-dropdown',
   templateUrl: './user-moderation-dropdown.component.html',
   styleUrls: [ './user-moderation-dropdown.component.scss' ]
 })
-export class UserModerationDropdownComponent implements OnInit {
+export class UserModerationDropdownComponent implements OnChanges {
   @ViewChild('userBanModal') userBanModal: UserBanModalComponent
 
   @Input() user: User
+  @Input() account: Account
+
   @Input() buttonSize: 'normal' | 'small' = 'normal'
+  @Input() placement = 'left'
 
   @Output() userChanged = new EventEmitter()
   @Output() userDeleted = new EventEmitter()
 
-  userActions: DropdownAction<User>[] = []
-
-  private openedModal: NgbModalRef
+  userActions: DropdownAction<{ user: User, account: Account }>[][] = []
 
   constructor (
     private authService: AuthService,
-    private notificationsService: NotificationsService,
+    private notifier: Notifier,
     private confirmService: ConfirmService,
+    private serverService: ServerService,
     private userService: UserService,
+    private blocklistService: BlocklistService,
     private i18n: I18n
   ) { }
 
-  ngOnInit () {
-    this.buildActions()
+  get requiresEmailVerification () {
+    return this.serverService.getConfig().signup.requiresEmailVerification
   }
 
-  hideBanUserModal () {
-    this.openedModal.close()
+  ngOnChanges () {
+    this.buildActions()
   }
 
   openBanUserModal (user: User) {
     if (user.username === 'root') {
-      this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot ban root.'))
+      this.notifier.error(this.i18n('You cannot ban root.'))
       return
     }
 
@@ -60,24 +63,21 @@ export class UserModerationDropdownComponent implements OnInit {
     const res = await this.confirmService.confirm(message, this.i18n('Unban'))
     if (res === false) return
 
-    this.userService.unbanUser(user)
+    this.userService.unbanUsers(user)
         .subscribe(
           () => {
-            this.notificationsService.success(
-              this.i18n('Success'),
-              this.i18n('User {{username}} unbanned.', { username: user.username })
-            )
+            this.notifier.success(this.i18n('User {{username}} unbanned.', { username: user.username }))
 
             this.userChanged.emit()
           },
 
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
         )
   }
 
   async removeUser (user: User) {
     if (user.username === 'root') {
-      this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot delete root.'))
+      this.notifier.error(this.i18n('You cannot delete root.'))
       return
     }
 
@@ -87,17 +87,138 @@ export class UserModerationDropdownComponent implements OnInit {
 
     this.userService.removeUser(user).subscribe(
       () => {
-        this.notificationsService.success(
-          this.i18n('Success'),
-          this.i18n('User {{username}} deleted.', { username: user.username })
-        )
+        this.notifier.success(this.i18n('User {{username}} deleted.', { username: user.username }))
         this.userDeleted.emit()
       },
 
-      err => this.notificationsService.error(this.i18n('Error'), err.message)
+      err => this.notifier.error(err.message)
     )
   }
 
+  setEmailAsVerified (user: User) {
+    this.userService.updateUser(user.id, { emailVerified: true }).subscribe(
+      () => {
+        this.notifier.success(this.i18n('User {{username}} email set as verified', { username: user.username }))
+
+        this.userChanged.emit()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  blockAccountByUser (account: Account) {
+    this.blocklistService.blockAccountByUser(account)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Account {{nameWithHost}} muted.', { nameWithHost: account.nameWithHost }))
+
+            this.account.mutedByUser = true
+            this.userChanged.emit()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  unblockAccountByUser (account: Account) {
+    this.blocklistService.unblockAccountByUser(account)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Account {{nameWithHost}} unmuted.', { nameWithHost: account.nameWithHost }))
+
+            this.account.mutedByUser = false
+            this.userChanged.emit()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  blockServerByUser (host: string) {
+    this.blocklistService.blockServerByUser(host)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Instance {{host}} muted.', { host }))
+
+            this.account.mutedServerByUser = true
+            this.userChanged.emit()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  unblockServerByUser (host: string) {
+    this.blocklistService.unblockServerByUser(host)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Instance {{host}} unmuted.', { host }))
+
+            this.account.mutedServerByUser = false
+            this.userChanged.emit()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  blockAccountByInstance (account: Account) {
+    this.blocklistService.blockAccountByInstance(account)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost }))
+
+            this.account.mutedByInstance = true
+            this.userChanged.emit()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  unblockAccountByInstance (account: Account) {
+    this.blocklistService.unblockAccountByInstance(account)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Account {{nameWithHost}} unmuted by the instance.', { nameWithHost: account.nameWithHost }))
+
+            this.account.mutedByInstance = false
+            this.userChanged.emit()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  blockServerByInstance (host: string) {
+    this.blocklistService.blockServerByInstance(host)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Instance {{host}} muted by the instance.', { host }))
+
+            this.account.mutedServerByInstance = true
+            this.userChanged.emit()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  unblockServerByInstance (host: string) {
+    this.blocklistService.unblockServerByInstance(host)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Instance {{host}} unmuted by the instance.', { host }))
+
+            this.account.mutedServerByInstance = false
+            this.userChanged.emit()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
   getRouterUserEditLink (user: User) {
     return [ '/admin', 'users', 'update', user.id ]
   }
@@ -108,28 +229,100 @@ export class UserModerationDropdownComponent implements OnInit {
     if (this.authService.isLoggedIn()) {
       const authUser = this.authService.getUser()
 
-      if (authUser.hasRight(UserRight.MANAGE_USERS)) {
-        this.userActions = this.userActions.concat([
+      if (this.user && authUser.id === this.user.id) return
+
+      if (this.user && authUser.hasRight(UserRight.MANAGE_USERS)) {
+        this.userActions.push([
           {
             label: this.i18n('Edit'),
-            linkBuilder: this.getRouterUserEditLink
+            linkBuilder: ({ user }) => this.getRouterUserEditLink(user)
           },
           {
             label: this.i18n('Delete'),
-            handler: user => this.removeUser(user)
+            handler: ({ user }) => this.removeUser(user)
           },
           {
             label: this.i18n('Ban'),
-            handler: user => this.openBanUserModal(user),
-            isDisplayed: user => !user.blocked
+            handler: ({ user }) => this.openBanUserModal(user),
+            isDisplayed: ({ user }) => !user.blocked
           },
           {
             label: this.i18n('Unban'),
-            handler: user => this.unbanUser(user),
-            isDisplayed: user => user.blocked
+            handler: ({ user }) => this.unbanUser(user),
+            isDisplayed: ({ user }) => user.blocked
+          },
+          {
+            label: this.i18n('Set Email as Verified'),
+            handler: ({ user }) => this.setEmailAsVerified(user),
+            isDisplayed: ({ user }) => this.requiresEmailVerification && !user.blocked && user.emailVerified === false
           }
         ])
       }
+
+      // Actions on accounts/servers
+      if (this.account) {
+        // User actions
+        this.userActions.push([
+          {
+            label: this.i18n('Mute this account'),
+            isDisplayed: ({ account }) => account.mutedByUser === false,
+            handler: ({ account }) => this.blockAccountByUser(account)
+          },
+          {
+            label: this.i18n('Unmute this account'),
+            isDisplayed: ({ account }) => account.mutedByUser === true,
+            handler: ({ account }) => this.unblockAccountByUser(account)
+          },
+          {
+            label: this.i18n('Mute the instance'),
+            isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === false,
+            handler: ({ account }) => this.blockServerByUser(account.host)
+          },
+          {
+            label: this.i18n('Unmute the instance'),
+            isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === true,
+            handler: ({ account }) => this.unblockServerByUser(account.host)
+          }
+        ])
+
+        let instanceActions: DropdownAction<{ user: User, account: Account }>[] = []
+
+        // Instance actions
+        if (authUser.hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)) {
+          instanceActions = instanceActions.concat([
+            {
+              label: this.i18n('Mute this account by your instance'),
+              isDisplayed: ({ account }) => account.mutedByInstance === false,
+              handler: ({ account }) => this.blockAccountByInstance(account)
+            },
+            {
+              label: this.i18n('Unmute this account by your instance'),
+              isDisplayed: ({ account }) => account.mutedByInstance === true,
+              handler: ({ account }) => this.unblockAccountByInstance(account)
+            }
+          ])
+        }
+
+        // Instance actions
+        if (authUser.hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)) {
+          instanceActions = instanceActions.concat([
+            {
+              label: this.i18n('Mute the instance by your instance'),
+              isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === false,
+              handler: ({ account }) => this.blockServerByInstance(account.host)
+            },
+            {
+              label: this.i18n('Unmute the instance by your instance'),
+              isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === true,
+              handler: ({ account }) => this.unblockServerByInstance(account.host)
+            }
+          ])
+        }
+
+        if (instanceActions.length !== 0) {
+          this.userActions.push(instanceActions)
+        }
+      }
     }
   }
 }
diff --git a/client/src/app/shared/overview/videos-overview.model.ts b/client/src/app/shared/overview/videos-overview.model.ts
index cf02bdb3d..c8eafc8e8 100644
--- a/client/src/app/shared/overview/videos-overview.model.ts
+++ b/client/src/app/shared/overview/videos-overview.model.ts
@@ -16,4 +16,5 @@ export class VideosOverview implements VideosOverviewServer {
     tag: string
     videos: Video[]
   }[]
+  [key: string]: any
 }
diff --git a/client/src/app/shared/renderer/html-renderer.service.ts b/client/src/app/shared/renderer/html-renderer.service.ts
new file mode 100644
index 000000000..d49df9b6d
--- /dev/null
+++ b/client/src/app/shared/renderer/html-renderer.service.ts
@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core'
+import { LinkifierService } from '@app/shared/renderer/linkifier.service'
+import * as sanitizeHtml from 'sanitize-html'
+
+@Injectable()
+export class HtmlRendererService {
+
+  constructor (private linkifier: LinkifierService) {
+
+  }
+
+  toSafeHtml (text: string) {
+    // Convert possible markdown to html
+    const html = this.linkifier.linkify(text)
+
+    return sanitizeHtml(html, {
+      allowedTags: [ 'a', 'p', 'span', 'br' ],
+      allowedSchemes: [ 'http', 'https' ],
+      allowedAttributes: {
+        'a': [ 'href', 'class', 'target' ]
+      },
+      transformTags: {
+        a: (tagName, attribs) => {
+          return {
+            tagName,
+            attribs: Object.assign(attribs, {
+              target: '_blank',
+              rel: 'noopener noreferrer'
+            })
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/client/src/app/shared/renderer/index.ts b/client/src/app/shared/renderer/index.ts
new file mode 100644
index 000000000..39202b385
--- /dev/null
+++ b/client/src/app/shared/renderer/index.ts
@@ -0,0 +1,3 @@
+export * from './html-renderer.service'
+export * from './linkifier.service'
+export * from './markdown.service'
diff --git a/client/src/app/shared/renderer/linkifier.service.ts b/client/src/app/shared/renderer/linkifier.service.ts
new file mode 100644
index 000000000..2529c9eaf
--- /dev/null
+++ b/client/src/app/shared/renderer/linkifier.service.ts
@@ -0,0 +1,115 @@
+import { Injectable } from '@angular/core'
+import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
+// FIXME: use @types/linkify when https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29682/files is merged?
+const linkify = require('linkifyjs')
+const linkifyHtml = require('linkifyjs/html')
+
+@Injectable()
+export class LinkifierService {
+
+  static CLASSNAME = 'linkified'
+
+  private linkifyOptions = {
+    className: {
+      mention: LinkifierService.CLASSNAME + '-mention',
+      url: LinkifierService.CLASSNAME + '-url'
+    }
+  }
+
+  constructor () {
+    // Apply plugin
+    this.mentionWithDomainPlugin(linkify)
+  }
+
+  linkify (text: string) {
+    return linkifyHtml(text, this.linkifyOptions)
+  }
+
+  private mentionWithDomainPlugin (linkify: any) {
+    const TT = linkify.scanner.TOKENS // Text tokens
+    const { TOKENS: MT, State } = linkify.parser // Multi tokens, state
+    const MultiToken = MT.Base
+    const S_START = linkify.parser.start
+
+    const TT_AT = TT.AT
+    const TT_DOMAIN = TT.DOMAIN
+    const TT_LOCALHOST = TT.LOCALHOST
+    const TT_NUM = TT.NUM
+    const TT_COLON = TT.COLON
+    const TT_SLASH = TT.SLASH
+    const TT_TLD = TT.TLD
+    const TT_UNDERSCORE = TT.UNDERSCORE
+    const TT_DOT = TT.DOT
+
+    function MENTION (this: any, value: any) {
+      this.v = value
+    }
+
+    linkify.inherits(MultiToken, MENTION, {
+      type: 'mentionWithDomain',
+      isLink: true,
+      toHref () {
+        return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + this.toString().substr(1)
+      }
+    })
+
+    const S_AT = S_START.jump(TT_AT) // @
+    const S_AT_SYMS = new State()
+    const S_MENTION = new State(MENTION)
+    const S_MENTION_DIVIDER = new State()
+    const S_MENTION_DIVIDER_SYMS = new State()
+
+    // @_,
+    S_AT.on(TT_UNDERSCORE, S_AT_SYMS)
+
+    //  @_*
+    S_AT_SYMS
+      .on(TT_UNDERSCORE, S_AT_SYMS)
+      .on(TT_DOT, S_AT_SYMS)
+
+    // Valid mention (not made up entirely of symbols)
+    S_AT
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+
+    S_AT_SYMS
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+
+    // More valid mentions
+    S_MENTION
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_COLON, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+      .on(TT_UNDERSCORE, S_MENTION)
+
+    // Mention with a divider
+    S_MENTION
+      .on(TT_AT, S_MENTION_DIVIDER)
+      .on(TT_SLASH, S_MENTION_DIVIDER)
+      .on(TT_DOT, S_MENTION_DIVIDER)
+
+    // Mention _ trailing stash plus syms
+    S_MENTION_DIVIDER.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS)
+    S_MENTION_DIVIDER_SYMS.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS)
+
+    // Once we get a word token, mentions can start up again
+    S_MENTION_DIVIDER
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+
+    S_MENTION_DIVIDER_SYMS
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+  }
+}
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
new file mode 100644
index 000000000..07017eca5
--- /dev/null
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -0,0 +1,79 @@
+import { Injectable } from '@angular/core'
+
+import * as MarkdownIt from 'markdown-it'
+
+@Injectable()
+export class MarkdownService {
+  static TEXT_RULES = [
+    'linkify',
+    'autolink',
+    'emphasis',
+    'link',
+    'newline',
+    'list'
+  ]
+  static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ])
+
+  private textMarkdownIt: MarkdownIt.MarkdownIt
+  private enhancedMarkdownIt: MarkdownIt.MarkdownIt
+
+  constructor () {
+    this.textMarkdownIt = this.createMarkdownIt(MarkdownService.TEXT_RULES)
+    this.enhancedMarkdownIt = this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
+  }
+
+  textMarkdownToHTML (markdown: string) {
+    if (!markdown) return ''
+
+    const html = this.textMarkdownIt.render(markdown)
+    return this.avoidTruncatedTags(html)
+  }
+
+  enhancedMarkdownToHTML (markdown: string) {
+    if (!markdown) return ''
+
+    const html = this.enhancedMarkdownIt.render(markdown)
+    return this.avoidTruncatedTags(html)
+  }
+
+  private createMarkdownIt (rules: string[]) {
+    const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true })
+
+    for (let rule of rules) {
+      markdownIt.enable(rule)
+    }
+
+    this.setTargetToLinks(markdownIt)
+
+    return markdownIt
+  }
+
+  private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) {
+    // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
+    const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
+      return self.renderToken(tokens, idx, options)
+    }
+
+    markdownIt.renderer.rules.link_open = function (tokens, index, options, env, self) {
+      const token = tokens[index]
+
+      const targetIndex = token.attrIndex('target')
+      if (targetIndex < 0) token.attrPush([ 'target', '_blank' ])
+      else token.attrs[targetIndex][1] = '_blank'
+
+      const relIndex = token.attrIndex('rel')
+      if (relIndex < 0) token.attrPush([ 'rel', 'noopener noreferrer' ])
+      else token.attrs[relIndex][1] = 'noopener noreferrer'
+
+      // pass token to default renderer.
+      return defaultRender(tokens, index, options, env, self)
+    }
+  }
+
+  private avoidTruncatedTags (html: string) {
+    return html.replace(/\*\*?([^*]+)$/, '$1')
+      .replace(/<a[^>]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...')
+      .replace(/\[[^\]]+\]?\(?([^\)]+)$/, '$1')
+
+  }
+}
diff --git a/client/src/app/shared/rest/component-pagination.model.ts b/client/src/app/shared/rest/component-pagination.model.ts
index 0b8ecc318..85160d445 100644
--- a/client/src/app/shared/rest/component-pagination.model.ts
+++ b/client/src/app/shared/rest/component-pagination.model.ts
@@ -3,3 +3,14 @@ export interface ComponentPagination {
   itemsPerPage: number
   totalItems?: number
 }
+
+export function hasMoreItems (componentPagination: ComponentPagination) {
+  // No results
+  if (componentPagination.totalItems === 0) return false
+
+  // Not loaded yet
+  if (!componentPagination.totalItems) return true
+
+  const maxPage = componentPagination.totalItems / componentPagination.itemsPerPage
+  return maxPage > componentPagination.currentPage
+}
diff --git a/client/src/app/shared/rest/rest-extractor.service.ts b/client/src/app/shared/rest/rest-extractor.service.ts
index 6492aa66d..e6518dd1d 100644
--- a/client/src/app/shared/rest/rest-extractor.service.ts
+++ b/client/src/app/shared/rest/rest-extractor.service.ts
@@ -33,7 +33,7 @@ export class RestExtractor {
     return this.applyToResultListData(result, this.convertDateToHuman, [ fieldsToConvert ])
   }
 
-  convertDateToHuman (target: object, fieldsToConvert: string[]) {
+  convertDateToHuman (target: { [ id: string ]: string }, fieldsToConvert: string[]) {
     fieldsToConvert.forEach(field => target[field] = dateToHuman(target[field]))
 
     return target
@@ -80,10 +80,11 @@ export class RestExtractor {
       errorMessage = errorMessage ? errorMessage : 'Unknown error.'
       console.error(`Backend returned code ${err.status}, errorMessage is: ${errorMessage}`)
     } else {
+      console.error(err)
       errorMessage = err
     }
 
-    const errorObj = {
+    const errorObj: { message: string, status: string, body: string } = {
       message: errorMessage,
       status: undefined,
       body: undefined
diff --git a/client/src/app/shared/rest/rest-table.ts b/client/src/app/shared/rest/rest-table.ts
index fe1a91d2d..884588207 100644
--- a/client/src/app/shared/rest/rest-table.ts
+++ b/client/src/app/shared/rest/rest-table.ts
@@ -1,8 +1,9 @@
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
 import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent'
 import { SortMeta } from 'primeng/components/common/sortmeta'
-
 import { RestPagination } from './rest-pagination'
+import { Subject } from 'rxjs'
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 
 export abstract class RestTable {
 
@@ -11,9 +12,14 @@ export abstract class RestTable {
   abstract sort: SortMeta
   abstract pagination: RestPagination
 
+  protected search: string
+  private searchStream: Subject<string>
   private sortLocalStorageKey = 'rest-table-sort-' + this.constructor.name
 
-  protected abstract loadData (): void
+  initialize () {
+    this.loadSort()
+    this.initSearch()
+  }
 
   loadSort () {
     const result = peertubeLocalStorage.getItem(this.sortLocalStorageKey)
@@ -46,4 +52,23 @@ export abstract class RestTable {
     peertubeLocalStorage.setItem(this.sortLocalStorageKey, JSON.stringify(this.sort))
   }
 
+  initSearch () {
+    this.searchStream = new Subject()
+
+    this.searchStream
+      .pipe(
+        debounceTime(400),
+        distinctUntilChanged()
+      )
+      .subscribe(search => {
+        this.search = search
+        this.loadData()
+      })
+  }
+
+  onSearch (search: string) {
+    this.searchStream.next(search)
+  }
+
+  protected abstract loadData (): void
 }
diff --git a/client/src/app/shared/rest/rest.service.ts b/client/src/app/shared/rest/rest.service.ts
index 4560c2024..e6d4e6e5e 100644
--- a/client/src/app/shared/rest/rest.service.ts
+++ b/client/src/app/shared/rest/rest.service.ts
@@ -32,7 +32,7 @@ export class RestService {
     return newParams
   }
 
-  addObjectParams (params: HttpParams, object: object) {
+  addObjectParams (params: HttpParams, object: { [ name: string ]: any }) {
     for (const name of Object.keys(object)) {
       const value = object[name]
       if (!value) continue
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 9647a7966..6f8625c7e 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -6,7 +6,6 @@ import { RouterModule } from '@angular/router'
 import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
 import { HelpComponent } from '@app/shared/misc/help.component'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
-import { MarkdownService } from '@app/videos/shared'
 
 import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
@@ -25,7 +24,7 @@ import { VideoAbuseService } from './video-abuse'
 import { VideoBlacklistService } from './video-blacklist'
 import { VideoOwnershipService } from './video-ownership'
 import { VideoMiniatureComponent } from './video/video-miniature.component'
-import { VideoFeedComponent } from './video/video-feed.component'
+import { FeedComponent } from './video/feed.component'
 import { VideoThumbnailComponent } from './video/video-thumbnail.component'
 import { VideoService } from './video/video.service'
 import { AccountService } from '@app/shared/account/account.service'
@@ -34,16 +33,19 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import {
   CustomConfigValidatorsService,
+  InstanceValidatorsService,
   LoginValidatorsService,
   ReactiveFileComponent,
   ResetPasswordValidatorsService,
+  TextareaAutoResizeDirective,
   UserValidatorsService,
   VideoAbuseValidatorsService,
+  VideoAcceptOwnershipValidatorsService,
   VideoBlacklistValidatorsService,
+  VideoChangeOwnershipValidatorsService,
   VideoChannelValidatorsService,
   VideoCommentValidatorsService,
-  VideoValidatorsService,
-  VideoChangeOwnershipValidatorsService, VideoAcceptOwnershipValidatorsService
+  VideoValidatorsService
 } from '@app/shared/forms'
 import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar'
 import { ScreenService } from '@app/shared/misc/screen.service'
@@ -53,11 +55,20 @@ import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.c
 import { VideoImportService } from '@app/shared/video-import/video-import.service'
 import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component'
 import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
-import { SubscribeButtonComponent, RemoteSubscribeComponent, UserSubscriptionService } from '@app/shared/user-subscription'
+import { RemoteSubscribeComponent, SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription'
 import { InstanceFeaturesTableComponent } from '@app/shared/instance/instance-features-table.component'
 import { OverviewService } from '@app/shared/overview'
 import { UserBanModalComponent } from '@app/shared/moderation'
 import { UserModerationDropdownComponent } from '@app/shared/moderation/user-moderation-dropdown.component'
+import { BlocklistService } from '@app/shared/blocklist'
+import { TopMenuDropdownComponent } from '@app/shared/menu/top-menu-dropdown.component'
+import { UserHistoryService } from '@app/shared/users/user-history.service'
+import { UserNotificationService } from '@app/shared/users/user-notification.service'
+import { UserNotificationsComponent } from '@app/shared/users/user-notifications.component'
+import { InstanceService } from '@app/shared/instance/instance.service'
+import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer'
+import { ConfirmComponent } from '@app/shared/confirm/confirm.component'
+import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
 
 @NgModule({
   imports: [
@@ -81,7 +92,7 @@ import { UserModerationDropdownComponent } from '@app/shared/moderation/user-mod
     LoaderComponent,
     VideoThumbnailComponent,
     VideoMiniatureComponent,
-    VideoFeedComponent,
+    FeedComponent,
     ButtonComponent,
     DeleteButtonComponent,
     EditButtonComponent,
@@ -91,6 +102,7 @@ import { UserModerationDropdownComponent } from '@app/shared/moderation/user-mod
     FromNowPipe,
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
+    TextareaAutoResizeDirective,
     HelpComponent,
     ReactiveFileComponent,
     PeertubeCheckboxComponent,
@@ -98,7 +110,11 @@ import { UserModerationDropdownComponent } from '@app/shared/moderation/user-mod
     RemoteSubscribeComponent,
     InstanceFeaturesTableComponent,
     UserBanModalComponent,
-    UserModerationDropdownComponent
+    UserModerationDropdownComponent,
+    TopMenuDropdownComponent,
+    UserNotificationsComponent,
+    ConfirmComponent,
+    GlobalIconComponent
   ],
 
   exports: [
@@ -121,13 +137,14 @@ import { UserModerationDropdownComponent } from '@app/shared/moderation/user-mod
     LoaderComponent,
     VideoThumbnailComponent,
     VideoMiniatureComponent,
-    VideoFeedComponent,
+    FeedComponent,
     ButtonComponent,
     DeleteButtonComponent,
     EditButtonComponent,
     ActionDropdownComponent,
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
+    TextareaAutoResizeDirective,
     HelpComponent,
     ReactiveFileComponent,
     PeertubeCheckboxComponent,
@@ -136,6 +153,10 @@ import { UserModerationDropdownComponent } from '@app/shared/moderation/user-mod
     InstanceFeaturesTableComponent,
     UserBanModalComponent,
     UserModerationDropdownComponent,
+    TopMenuDropdownComponent,
+    UserNotificationsComponent,
+    ConfirmComponent,
+    GlobalIconComponent,
 
     NumberFormatterPipe,
     ObjectLengthPipe,
@@ -152,7 +173,6 @@ import { UserModerationDropdownComponent } from '@app/shared/moderation/user-mod
     UserService,
     VideoService,
     AccountService,
-    MarkdownService,
     VideoChannelService,
     VideoCaptionService,
     VideoImportService,
@@ -172,10 +192,20 @@ import { UserModerationDropdownComponent } from '@app/shared/moderation/user-mod
     OverviewService,
     VideoChangeOwnershipValidatorsService,
     VideoAcceptOwnershipValidatorsService,
+    InstanceValidatorsService,
+    BlocklistService,
+    UserHistoryService,
+    InstanceService,
+
+    MarkdownService,
+    LinkifierService,
+    HtmlRendererService,
 
     I18nPrimengCalendarService,
     ScreenService,
 
+    UserNotificationService,
+
     I18n
   ]
 })
diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.ts b/client/src/app/shared/user-subscription/remote-subscribe.component.ts
index 7a81108cd..ba2a45df1 100644
--- a/client/src/app/shared/user-subscription/remote-subscribe.component.ts
+++ b/client/src/app/shared/user-subscription/remote-subscribe.component.ts
@@ -29,7 +29,7 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit {
   }
 
   onValidKey () {
-    this.onValueChanged()
+    this.check()
     if (!this.form.valid) return
 
     this.formValidated()
@@ -37,7 +37,24 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit {
 
   formValidated () {
     const address = this.form.value['text']
-    const [ , hostname ] = address.split('@')
-    window.open(`https://${hostname}/authorize_interaction?acct=${this.account}`)
+    const [ username, hostname ] = address.split('@')
+
+    fetch(`https://${hostname}/.well-known/webfinger?resource=acct:${username}@${hostname}`)
+      .then(response => response.json())
+      .then(data => new Promise((resolve, reject) => {
+        if (data && Array.isArray(data.links)) {
+          const link: {
+            template: string
+          } = data.links.find((link: any) =>
+            link && typeof link.template === 'string' && link.rel === 'http://ostatus.org/schema/1.0/subscribe')
+
+          if (link && link.template.includes('{uri}')) {
+            resolve(link.template.replace('{uri}', `acct:${this.account}`))
+          }
+        }
+        reject()
+      }))
+      .then(window.open)
+      .catch(() => window.open(`https://${hostname}/authorize_interaction?acct=${this.account}`))
   }
 }
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts
index 315ea5037..8f1754c7f 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -1,9 +1,8 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService } from '@app/core'
+import { AuthService, Notifier } from '@app/core'
 import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
-import { NotificationsService } from 'angular2-notifications'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoService } from '@app/shared/video/video.service'
 import { FeedFormat } from '../../../../../shared/models/feeds'
@@ -23,7 +22,7 @@ export class SubscribeButtonComponent implements OnInit {
   constructor (
     private authService: AuthService,
     private router: Router,
-    private notificationsService: NotificationsService,
+    private notifier: Notifier,
     private userSubscriptionService: UserSubscriptionService,
     private i18n: I18n,
     private videoService: VideoService
@@ -43,18 +42,17 @@ export class SubscribeButtonComponent implements OnInit {
         .subscribe(
           res => this.subscribed = res[this.uri],
 
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
         )
     }
   }
 
   subscribe () {
     if (this.isUserLoggedIn()) {
-      this.localSubscribe()
-    } else {
-      this.authService.redirectUrl = this.router.url
-      this.gotoLogin()
+      return this.localSubscribe()
     }
+
+    return this.gotoLogin()
   }
 
   localSubscribe () {
@@ -63,13 +61,13 @@ export class SubscribeButtonComponent implements OnInit {
         () => {
           this.subscribed = true
 
-          this.notificationsService.success(
-            this.i18n('Subscribed'),
-            this.i18n('Subscribed to {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName })
+          this.notifier.success(
+            this.i18n('Subscribed to {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName }),
+            this.i18n('Subscribed')
           )
         },
 
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
       )
   }
 
@@ -85,13 +83,13 @@ export class SubscribeButtonComponent implements OnInit {
           () => {
             this.subscribed = false
 
-            this.notificationsService.success(
-              this.i18n('Unsubscribed'),
-              this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName })
+            this.notifier.success(
+              this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName }),
+              this.i18n('Unsubscribed')
             )
           },
 
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
         )
   }
 
diff --git a/client/src/app/shared/users/index.ts b/client/src/app/shared/users/index.ts
index 7b5a67bc7..ebd715fb1 100644
--- a/client/src/app/shared/users/index.ts
+++ b/client/src/app/shared/users/index.ts
@@ -1,2 +1,3 @@
 export * from './user.model'
 export * from './user.service'
+export * from './user-notifications.component'
diff --git a/client/src/app/shared/users/user-history.service.ts b/client/src/app/shared/users/user-history.service.ts
new file mode 100644
index 000000000..9ed25bfc7
--- /dev/null
+++ b/client/src/app/shared/users/user-history.service.ts
@@ -0,0 +1,45 @@
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { environment } from '../../../environments/environment'
+import { RestExtractor } from '../rest/rest-extractor.service'
+import { RestService } from '../rest/rest.service'
+import { Video } from '../video/video.model'
+import { catchError, map, switchMap } from 'rxjs/operators'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { VideoService } from '@app/shared/video/video.service'
+import { ResultList } from '../../../../../shared'
+
+@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: ComponentPagination) {
+    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/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts
new file mode 100644
index 000000000..125d2120c
--- /dev/null
+++ b/client/src/app/shared/users/user-notification.model.ts
@@ -0,0 +1,155 @@
+import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo, ActorInfo } from '../../../../../shared'
+import { Actor } from '@app/shared/actor/actor.model'
+
+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
+    follower: ActorInfo & { avatarUrl?: string }
+    following: {
+      type: 'account' | 'channel'
+      name: string
+      displayName: string
+    }
+  }
+
+  createdAt: string
+  updatedAt: string
+
+  // Additional fields
+  videoUrl?: string
+  commentUrl?: any[]
+  videoAbuseUrl?: string
+  accountUrl?: string
+  videoImportIdentifier?: string
+  videoImportUrl?: string
+
+  constructor (hash: UserNotificationServer) {
+    this.id = hash.id
+    this.type = hash.type
+    this.read = hash.read
+
+    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:
+        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.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)
+        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
+    }
+  }
+
+  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?: { path: string } }) {
+    actor.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(actor)
+  }
+}
diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts
new file mode 100644
index 000000000..f8a30955d
--- /dev/null
+++ b/client/src/app/shared/users/user-notification.service.ts
@@ -0,0 +1,86 @@
+import { Injectable } from '@angular/core'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { RestExtractor, RestService } from '../rest'
+import { catchError, map, tap } from 'rxjs/operators'
+import { environment } from '../../../environments/environment'
+import { ResultList, UserNotification as UserNotificationServer, UserNotificationSetting } from '../../../../../shared'
+import { UserNotification } from './user-notification.model'
+import { AuthService } from '../../core'
+import { ComponentPagination } from '../rest/component-pagination.model'
+import { User } from '..'
+import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
+
+@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 auth: AuthService,
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService,
+    private userNotificationSocket: UserNotificationSocket
+  ) {}
+
+  listMyNotifications (pagination: ComponentPagination, 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/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
new file mode 100644
index 000000000..0d69e0feb
--- /dev/null
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -0,0 +1,101 @@
+<div *ngIf="componentPagination.totalItems === 0" class="no-notification" i18n>You don't have notifications.</div>
+
+<div class="notifications" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
+  <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
+
+    <ng-container [ngSwitch]="notification.type">
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.video.channel.avatarUrl" />
+
+        <div class="message">
+          {{ notification.video.channel.displayName }} published a <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">new video</a>
+        </div>
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
+        <my-global-icon iconName="undo"></my-global-icon>
+
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblacklisted
+        </div>
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
+        <my-global-icon iconName="no"></my-global-icon>
+
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blacklisted
+        </div>
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS">
+        <my-global-icon iconName="alert"></my-global-icon>
+
+        <div class="message">
+          <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 i18n *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+
+        <div class="message">
+          <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-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
+        <my-global-icon iconName="sparkle"></my-global-icon>
+
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been published
+        </div>
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_SUCCESS">
+        <my-global-icon iconName="cloud-download"></my-global-icon>
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
+        </div>
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_ERROR">
+        <my-global-icon iconName="cloud-error"></my-global-icon>
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} failed
+        </div>
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
+        <my-global-icon iconName="user-add"></my-global-icon>
+
+        <div class="message">
+          User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance
+        </div>
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
+
+        <div class="message">
+          <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 i18n *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+
+        <div class="message">
+          <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>
+
+    <div class="from-date">{{ notification.createdAt | myFromNow }}</div>
+  </div>
+</div>
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
new file mode 100644
index 000000000..315d504c9
--- /dev/null
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -0,0 +1,51 @@
+@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 rgba(0, 0, 0, 0.10);
+
+  &.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: $grey-foreground-color;
+    padding-left: 5px;
+    min-width: 70px;
+    text-align: right;
+  }
+}
diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts
new file mode 100644
index 000000000..b5f9fd399
--- /dev/null
+++ b/client/src/app/shared/users/user-notifications.component.ts
@@ -0,0 +1,87 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { UserNotificationService } from '@app/shared/users/user-notification.service'
+import { UserNotificationType } from '../../../../../shared'
+import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
+import { Notifier } from '@app/core'
+import { UserNotification } from '@app/shared/users/user-notification.model'
+
+@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
+
+  notifications: UserNotification[] = []
+
+  // So we can access it in the template
+  UserNotificationType = UserNotificationType
+
+  componentPagination: ComponentPagination
+
+  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()
+  }
+
+  loadMoreNotifications () {
+    this.userNotificationService.listMyNotifications(this.componentPagination, undefined, this.ignoreLoadingBar)
+        .subscribe(
+          result => {
+            this.notifications = this.notifications.concat(result.data)
+            this.componentPagination.totalItems = result.total
+          },
+
+          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/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 877f1bf3a..c15f1de8c 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -1,38 +1,20 @@
-import {
-  Account as AccountServerModel,
-  hasUserRight,
-  User as UserServerModel,
-  UserRight,
-  UserRole,
-  VideoChannel
-} from '../../../../../shared'
+import { hasUserRight, User as UserServerModel, UserNotificationSetting, UserRight, UserRole, VideoChannel } from '../../../../../shared'
 import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type'
 import { Account } from '@app/shared/account/account.model'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 
-export type UserConstructorHash = {
-  id: number,
-  username: string,
-  email: string,
-  role: UserRole,
-  videoQuota?: number,
-  videoQuotaDaily?: number,
-  nsfwPolicy?: NSFWPolicyType,
-  autoPlayVideo?: boolean,
-  createdAt?: Date,
-  account?: AccountServerModel,
-  videoChannels?: VideoChannel[]
-
-  blocked?: boolean
-  blockedReason?: string
-}
 export class User implements UserServerModel {
   id: number
   username: string
   email: string
+  emailVerified: boolean
   role: UserRole
   nsfwPolicy: NSFWPolicyType
+
+  webTorrentEnabled: boolean
   autoPlayVideo: boolean
+  videosHistoryEnabled: boolean
+
   videoQuota: number
   videoQuotaDaily: number
   account: Account
@@ -42,7 +24,9 @@ export class User implements UserServerModel {
   blocked: boolean
   blockedReason?: string
 
-  constructor (hash: UserConstructorHash) {
+  notificationSettings?: UserNotificationSetting
+
+  constructor (hash: Partial<UserServerModel>) {
     this.id = hash.id
     this.username = hash.username
     this.email = hash.email
@@ -52,11 +36,15 @@ export class User implements UserServerModel {
     this.videoQuota = hash.videoQuota
     this.videoQuotaDaily = hash.videoQuotaDaily
     this.nsfwPolicy = hash.nsfwPolicy
+    this.webTorrentEnabled = hash.webTorrentEnabled
+    this.videosHistoryEnabled = hash.videosHistoryEnabled
     this.autoPlayVideo = hash.autoPlayVideo
     this.createdAt = hash.createdAt
     this.blocked = hash.blocked
     this.blockedReason = hash.blockedReason
 
+    this.notificationSettings = hash.notificationSettings
+
     if (hash.account !== undefined) {
       this.account = new Account(hash.account)
     }
diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index d9b81c181..cc5c051f1 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -1,5 +1,5 @@
-import { Observable } from 'rxjs'
-import { catchError, map } from 'rxjs/operators'
+import { from, Observable } from 'rxjs'
+import { catchError, concatMap, map, toArray } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { ResultList, User, UserCreate, UserRole, UserUpdate, UserUpdateMe, UserVideoQuota } from '../../../../../shared'
@@ -153,15 +153,26 @@ export class UserService {
                )
   }
 
+  updateUsers (users: User[], userUpdate: UserUpdate) {
+    return from(users)
+      .pipe(
+        concatMap(u => this.authHttp.put(UserService.BASE_USERS_URL + u.id, userUpdate)),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
+  }
+
   getUser (userId: number) {
     return this.authHttp.get<User>(UserService.BASE_USERS_URL + userId)
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 
-  getUsers (pagination: RestPagination, sort: SortMeta): Observable<ResultList<User>> {
+  getUsers (pagination: RestPagination, sort: SortMeta, search?: string): Observable<ResultList<User>> {
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
+    if (search) params = params.append('search', search)
+
     return this.authHttp.get<ResultList<User>>(UserService.BASE_USERS_URL, { params })
                .pipe(
                  map(res => this.restExtractor.convertResultListDateToHuman(res)),
@@ -170,21 +181,38 @@ export class UserService {
                )
   }
 
-  removeUser (user: { id: number }) {
-    return this.authHttp.delete(UserService.BASE_USERS_URL + user.id)
-               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  removeUser (usersArg: User | User[]) {
+    const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
+
+    return from(users)
+      .pipe(
+        concatMap(u => this.authHttp.delete(UserService.BASE_USERS_URL + u.id)),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
   }
 
-  banUser (user: { id: number }, reason?: string) {
+  banUsers (usersArg: User | User[], reason?: string) {
     const body = reason ? { reason } : {}
+    const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
 
-    return this.authHttp.post(UserService.BASE_USERS_URL + user.id + '/block', body)
-               .pipe(catchError(err => this.restExtractor.handleError(err)))
+    return from(users)
+      .pipe(
+        concatMap(u => this.authHttp.post(UserService.BASE_USERS_URL + u.id + '/block', body)),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
   }
 
-  unbanUser (user: { id: number }) {
-    return this.authHttp.post(UserService.BASE_USERS_URL + user.id + '/unblock', {})
-               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  unbanUsers (usersArg: User | User[]) {
+    const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
+
+    return from(users)
+      .pipe(
+        concatMap(u => this.authHttp.post(UserService.BASE_USERS_URL + u.id + '/unblock', {})),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
   }
 
   private formatUser (user: User) {
diff --git a/client/src/app/shared/video-abuse/video-abuse.service.ts b/client/src/app/shared/video-abuse/video-abuse.service.ts
index 61b7e1b98..b0b59ea0c 100644
--- a/client/src/app/shared/video-abuse/video-abuse.service.ts
+++ b/client/src/app/shared/video-abuse/video-abuse.service.ts
@@ -32,9 +32,7 @@ export class VideoAbuseService {
 
   reportVideo (id: number, reason: string) {
     const url = VideoAbuseService.BASE_VIDEO_ABUSE_URL + id + '/abuse'
-    const body = {
-      reason
-    }
+    const body = { reason }
 
     return this.authHttp.post(url, body)
                .pipe(
diff --git a/client/src/app/shared/video-blacklist/video-blacklist.service.ts b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
index 7d39fd4f2..94e46d7c2 100644
--- a/client/src/app/shared/video-blacklist/video-blacklist.service.ts
+++ b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
@@ -36,8 +36,11 @@ export class VideoBlacklistService {
                )
   }
 
-  blacklistVideo (videoId: number, reason?: string) {
-    const body = reason ? { reason } : {}
+  blacklistVideo (videoId: number, reason: string, unfederate: boolean) {
+    const body = {
+      unfederate,
+      reason
+    }
 
     return this.authHttp.post(VideoBlacklistService.BASE_VIDEOS_URL + videoId + '/blacklist', body)
                .pipe(
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index d543ab7c1..1f97bc389 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -1,8 +1,21 @@
 <div [ngClass]="{ 'margin-content': marginContent }">
-  <div *ngIf="titlePage" class="title-page title-page-single">
-    {{ titlePage }}
+  <div class="videos-header">
+    <div *ngIf="titlePage" class="title-page title-page-single">
+      <div placement="bottom" [ngbTooltip]="titleTooltip" container="body">
+        {{ titlePage }}
+      </div>
+    </div>
+
+    <my-feed [syndicationItems]="syndicationItems"></my-feed>
+
+    <div class="moderation-block" *ngIf="displayModerationBlock">
+      <my-peertube-checkbox
+        (change)="toggleModerationDisplay()"
+        inputName="display-unlisted-private"  i18n-labelText labelText="Display unlisted and private videos"
+      >
+      </my-peertube-checkbox>
+    </div>
   </div>
-  <my-video-feed [syndicationItems]="syndicationItems"></my-video-feed>
 
   <div class="no-results" i18n *ngIf="pagination.totalItems === 0">No results.</div>
   <div
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 3f9c73a29..292ede698 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -8,12 +8,27 @@
   }
 }
 
-.title-page.title-page-single {
-  margin-right: 5px;
-}
+.videos-header {
+  display: flex;
+  height: 80px;
+  align-items: center;
+
+  .title-page.title-page-single {
+    margin: 0 5px 0 0;
+  }
 
-my-video-feed {
-  display: inline-block;
+  my-feed {
+    display: inline-block;
+    top: 1px;
+    min-width: 60px;
+  }
+
+  .moderation-block {
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-end;
+    align-items: center;
+  }
 }
 
 @media screen and (max-width: 500px) {
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 763791165..b0633be4a 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -3,7 +3,6 @@ import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Location } from '@angular/common'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
-import { NotificationsService } from 'angular2-notifications'
 import { fromEvent, Observable, Subscription } from 'rxjs'
 import { AuthService } from '../../core/auth'
 import { ComponentPagination } from '../rest/component-pagination.model'
@@ -12,6 +11,8 @@ import { Video } from './video.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { OwnerDisplayType } from '@app/shared/video/video-miniature.component'
+import { Syndication } from '@app/shared/video/syndication.model'
+import { Notifier } from '@app/core'
 
 export abstract class AbstractVideoList implements OnInit, OnDestroy {
   private static LINES_PER_PAGE = 4
@@ -27,7 +28,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   sort: VideoSortField = '-publishedAt'
   categoryOneOf?: number
   defaultSort: VideoSortField = '-publishedAt'
-  syndicationItems = []
+  syndicationItems: Syndication[] = []
 
   loadOnInit = true
   marginContent = true
@@ -37,11 +38,13 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   videoPages: Video[][] = []
   ownerDisplayType: OwnerDisplayType = 'account'
   firstLoadedPage: number
+  displayModerationBlock = false
+  titleTooltip: string
 
   protected baseVideoWidth = 215
   protected baseVideoHeight = 205
 
-  protected abstract notificationsService: NotificationsService
+  protected abstract notifier: Notifier
   protected abstract authService: AuthService
   protected abstract router: Router
   protected abstract route: ActivatedRoute
@@ -58,7 +61,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   private resizeSubscription: Subscription
 
   abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}>
-  abstract generateSyndicationList ()
+  abstract generateSyndicationList (): void
 
   get user () {
     return this.authService.getUser()
@@ -155,11 +158,15 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
       },
       error => {
         this.loadingPage[page] = false
-        this.notificationsService.error(this.i18n('Error'), error.message)
+        this.notifier.error(error.message)
       }
     )
   }
 
+  toggleModerationDisplay () {
+    throw new Error('toggleModerationDisplay is not implemented')
+  }
+
   protected hasMoreVideos () {
     // No results
     if (this.pagination.totalItems === 0) return false
@@ -206,7 +213,9 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   protected setNewRouteParams () {
     const paramsObject = this.buildRouteParams()
 
-    const queryParams = Object.keys(paramsObject).map(p => p + '=' + paramsObject[p]).join('&')
+    const queryParams = Object.keys(paramsObject)
+                              .map(p => p + '=' + paramsObject[p])
+                              .join('&')
     this.location.replaceState(this.currentRoute, queryParams)
   }
 
diff --git a/client/src/app/shared/video/video-feed.component.html b/client/src/app/shared/video/feed.component.html
index 16116ba88..f7624ec01 100644
--- a/client/src/app/shared/video/video-feed.component.html
+++ b/client/src/app/shared/video/feed.component.html
@@ -1,10 +1,11 @@
 <div class="video-feed">
-  <span
+  <my-global-icon
     *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom"
-    class="icon icon-syndication" role="button"
-  ></span>
+    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>
\ No newline at end of file
+</div>
diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss
new file mode 100644
index 000000000..ed1dc17d3
--- /dev/null
+++ b/client/src/app/shared/video/feed.component.scss
@@ -0,0 +1,18 @@
+@import '_variables';
+@import '_mixins';
+
+.video-feed {
+  a {
+    color: black;
+    display: block;
+  }
+
+  my-global-icon {
+    cursor: pointer;
+    width: 12px;
+    position: relative;
+    top: -2px;
+
+    @include apply-svg-color(var(--mainForegroundColor))
+  }
+}
diff --git a/client/src/app/shared/video/feed.component.ts b/client/src/app/shared/video/feed.component.ts
new file mode 100644
index 000000000..12507458f
--- /dev/null
+++ b/client/src/app/shared/video/feed.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+import { Syndication } from '@app/shared/video/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/video/syndication.model.ts b/client/src/app/shared/video/syndication.model.ts
new file mode 100644
index 000000000..c59ab01e8
--- /dev/null
+++ b/client/src/app/shared/video/syndication.model.ts
@@ -0,0 +1,7 @@
+import { FeedFormat } from '../../../../../shared/models/feeds/feed-format.enum'
+
+export interface Syndication {
+  format: FeedFormat,
+  label: string,
+  url: string
+}
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index 5ff3926c4..388357343 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -3,6 +3,8 @@ import { AuthUser } from '../../core'
 import { Video } from '../../shared/video/video.model'
 import { Account } from '@app/shared/account/account.model'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { VideoStreamingPlaylist } from '../../../../../shared/models/videos/video-streaming-playlist.model'
+import { VideoStreamingPlaylistType } from '../../../../../shared/models/videos/video-streaming-playlist.type'
 
 export class VideoDetails extends Video implements VideoDetailsServerModel {
   descriptionPath: string
@@ -20,6 +22,10 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   likesPercent: number
   dislikesPercent: number
 
+  trackerUrls: string[]
+
+  streamingPlaylists: VideoStreamingPlaylist[]
+
   constructor (hash: VideoDetailsServerModel, translations = {}) {
     super(hash, translations)
 
@@ -32,6 +38,9 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
     this.commentsEnabled = hash.commentsEnabled
     this.downloadEnabled = hash.downloadEnabled
 
+    this.trackerUrls = hash.trackerUrls
+    this.streamingPlaylists = hash.streamingPlaylists
+
     this.buildLikeAndDislikePercents()
   }
 
@@ -55,4 +64,8 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
     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)
+  }
 }
diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts
index 5bb0510f9..18c62a1f9 100644
--- a/client/src/app/shared/video/video-edit.model.ts
+++ b/client/src/app/shared/video/video-edit.model.ts
@@ -59,14 +59,14 @@ export class VideoEdit implements VideoUpdate {
     }
   }
 
-  patch (values: Object) {
+  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 = (values['schedulePublicationAt'] as Date)
+      const updateAt = new Date(values['schedulePublicationAt'])
       updateAt.setSeconds(0)
 
       this.privacy = VideoPrivacy.PRIVATE
diff --git a/client/src/app/shared/video/video-feed.component.scss b/client/src/app/shared/video/video-feed.component.scss
deleted file mode 100644
index 385764be0..000000000
--- a/client/src/app/shared/video/video-feed.component.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import '_mixins';
-
-.video-feed {
-  a {
-    color: black;
-    display: block;
-  }
-
-  .icon {
-    @include icon(12px);
-
-    &.icon-syndication {
-      position: relative;
-      top: -2px;
-      background-color: var(--mainForegroundColor);
-      mask-image: url('../../../assets/images/global/syndication.svg');
-    }
-  }
-}
\ No newline at end of file
diff --git a/client/src/app/shared/video/video-feed.component.ts b/client/src/app/shared/video/video-feed.component.ts
deleted file mode 100644
index 6922153c0..000000000
--- a/client/src/app/shared/video/video-feed.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component, Input } from '@angular/core'
-
-@Component({
-  selector: 'my-video-feed',
-  styleUrls: [ './video-feed.component.scss' ],
-  templateUrl: './video-feed.component.html'
-})
-export class VideoFeedComponent {
-  @Input() syndicationItems
-}
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index cfc483018..2c635fa2f 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -7,6 +7,9 @@
       class="video-miniature-name"
       [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
     >
+      <span *ngIf="isUnlistedVideo()" class="badge badge-warning" i18n>Unlisted</span>
+      <span *ngIf="isPrivateVideo()" class="badge badge-danger" i18n>Private</span>
+
       {{ video.name }}
     </a>
 
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 895879adc..f44bdf9a9 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -50,10 +50,10 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 13px;
-      color: #585858;
+      color: $grey-foreground-color;
 
       &:hover {
-        color: #303030;
+        color: $grey-foreground-hover-color;
       }
     }
   }
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 7e8692b0b..2f951a1f1 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 import { User } from '../users'
 import { Video } from './video.model'
 import { ServerService } from '@app/core'
+import { VideoPrivacy } from '../../../../../shared'
 
 export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
 
@@ -49,4 +50,12 @@ export class VideoMiniatureComponent implements OnInit {
   displayOwnerVideoChannel () {
     return this.ownerDisplayTypeChosen === 'videoChannel'
   }
+
+  isUnlistedVideo () {
+    return this.video.privacy.id === VideoPrivacy.UNLISTED
+  }
+
+  isPrivateVideo () {
+    return this.video.privacy.id === VideoPrivacy.PRIVATE
+  }
 }
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index b92c96450..6ea83d13b 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -53,7 +53,7 @@ export class Video implements VideoServerModel {
     displayName: string
     url: string
     host: string
-    avatar: Avatar
+    avatar?: Avatar
   }
 
   channel: {
@@ -63,7 +63,7 @@ export class Video implements VideoServerModel {
     displayName: string
     url: string
     host: string
-    avatar: Avatar
+    avatar?: Avatar
   }
 
   userHistory?: {
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index c9d6da7a4..565aad93b 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -6,11 +6,11 @@ import { Video as VideoServerModel, VideoDetails as VideoDetailsServerModel } fr
 import { ResultList } from '../../../../../shared/models/result-list.model'
 import {
   UserVideoRate,
+  UserVideoRateType,
   UserVideoRateUpdate,
   VideoConstant,
   VideoFilter,
   VideoPrivacy,
-  VideoRateType,
   VideoUpdate
 } from '../../../../../shared/models/videos'
 import { FeedFormat } from '../../../../../shared/models/feeds/feed-format.enum'
@@ -275,9 +275,9 @@ export class VideoService implements VideosProvider {
 
   loadCompleteDescription (descriptionPath: string) {
     return this.authHttp
-               .get(environment.apiUrl + descriptionPath)
+               .get<{ description: string }>(environment.apiUrl + descriptionPath)
                .pipe(
-                 map(res => res[ 'description' ]),
+                 map(res => res.description),
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
@@ -333,7 +333,7 @@ export class VideoService implements VideosProvider {
     return privacies
   }
 
-  private setVideoRate (id: number, rateType: VideoRateType) {
+  private setVideoRate (id: number, rateType: UserVideoRateType) {
     const url = VideoService.BASE_VIDEO_URL + id + '/rate'
     const body: UserVideoRateUpdate = {
       rating: rateType