80 files changed, 1748 insertions, 330 deletions
diff --git a/client/src/app/shared/angular/from-now.pipe.ts b/client/src/app/shared/angular/from-now.pipe.ts
index 3a9a76411..9851468ee 100644
--- a/client/src/app/shared/angular/from-now.pipe.ts
+++ b/client/src/app/shared/angular/from-now.pipe.ts
@@ -12,9 +12,8 @@ export class FromNowPipe implements PipeTransform {
    const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000)
    let interval = Math.floor(seconds / 31536000)
-    if (interval > 1) {
+    if (interval > 1) return this.i18n('{{interval}} years ago', { interval })
-      return this.i18n('{{interval}} years ago', { interval })
+    if (interval === 1) return this.i18n('{{interval}} year ago', { interval })
-    }
    interval = Math.floor(seconds / 2592000)
    if (interval > 1) return this.i18n('{{interval}} months ago', { interval })
@@ -35,6 +34,6 @@ export class FromNowPipe implements PipeTransform {
    interval = Math.floor(seconds / 60)
    if (interval >= 1) return this.i18n('{{interval}} min ago', { interval })
-    return this.i18n('{{interval}} sec ago', { interval: Math.max(0, seconds) })
+    return this.i18n('just now')
  }
 }
diff --git a/client/src/app/shared/angular/highlight.pipe.ts b/client/src/app/shared/angular/highlight.pipe.ts
new file mode 100644
index 000000000..fb6042280
--- /dev/null
+++ b/client/src/app/shared/angular/highlight.pipe.ts
@@ -0,0 +1,54 @@
+import { PipeTransform, Pipe } from '@angular/core'
+import { SafeHtml } from '@angular/platform-browser'
+// Thanks https://gist.github.com/adamrecsko/0f28f474eca63e0279455476cc11eca7#gistcomment-2917369
+@Pipe({ name: 'highlight' })
+export class HighlightPipe implements PipeTransform {
+  /* use this for single match search */
+  static SINGLE_MATCH = 'Single-Match'
+  /* use this for single match search with a restriction that target should start with search string */
+  static SINGLE_AND_STARTS_WITH_MATCH = 'Single-And-StartsWith-Match'
+  /* use this for global search */
+  static MULTI_MATCH = 'Multi-Match'
+  // tslint:disable-next-line:no-empty
+  constructor () {}
+  transform (
+      contentString: string = null,
+      stringToHighlight: string = null,
+      option = 'Single-And-StartsWith-Match',
+      caseSensitive = false,
+      highlightStyleName = 'search-highlight'
+  ): SafeHtml {
+    if (stringToHighlight && contentString && option) {
+      let regex: any = ''
+      const caseFlag: string = !caseSensitive ? 'i' : ''
+      switch (option) {
+        case 'Single-Match': {
+          regex = new RegExp(stringToHighlight, caseFlag)
+          break
+        }
+        case 'Single-And-StartsWith-Match': {
+          regex = new RegExp('^' + stringToHighlight, caseFlag)
+          break
+        }
+        case 'Multi-Match': {
+          regex = new RegExp(stringToHighlight, 'g' + caseFlag)
+          break
+        }
+        default: {
+          // default will be a global case-insensitive match
+          regex = new RegExp(stringToHighlight, 'gi')
+        }
+      }
+      const replaced = contentString.replace(
+          regex,
+          (match) => `<span class="${highlightStyleName}">${match}</span>`
+      )
+      return replaced
+    } else {
+      return contentString
+    }
+  }
+}
diff --git a/client/src/app/shared/angular/timestamp-route-transformer.directive.ts b/client/src/app/shared/angular/timestamp-route-transformer.directive.ts
index f4d9aeb1f..45e023695 100644
--- a/client/src/app/shared/angular/timestamp-route-transformer.directive.ts
+++ b/client/src/app/shared/angular/timestamp-route-transformer.directive.ts
@@ -10,31 +10,30 @@ export class TimestampRouteTransformerDirective {
  public onClick ($event: Event) {
    const target = $event.target as HTMLLinkElement
-    if (target.hasAttribute('href')) {
+    if (target.hasAttribute('href') !== true) return
-      const ngxLink = document.createElement('a')
-      ngxLink.href = target.getAttribute('href')
+    const ngxLink = document.createElement('a')
+    ngxLink.href = target.getAttribute('href')
-      // we only care about reflective links
-      if (ngxLink.host !== window.location.host) return
+    // we only care about reflective links
+    if (ngxLink.host !== window.location.host) return
-      const ngxLinkParams = new URLSearchParams(ngxLink.search)
-      if (ngxLinkParams.has('start')) {
+    const ngxLinkParams = new URLSearchParams(ngxLink.search)
-        const separators = ['h', 'm', 's']
+    if (ngxLinkParams.has('start') !== true) return
-        const start = ngxLinkParams
-          .get('start')
+    const separators = ['h', 'm', 's']
-          .match(new RegExp('(\\d{1,9}[' + separators.join('') + '])','g')) // match digits before any given separator
+    const start = ngxLinkParams
-          .map(t => {
+      .get('start')
-            if (t.includes('h')) return parseInt(t, 10) * 3600
+      .match(new RegExp('(\\d{1,9}[' + separators.join('') + '])','g')) // match digits before any given separator
-            if (t.includes('m')) return parseInt(t, 10) * 60
+      .map(t => {
-            return parseInt(t, 10)
+        if (t.includes('h')) return parseInt(t, 10) * 3600
-          })
+        if (t.includes('m')) return parseInt(t, 10) * 60
-          .reduce((acc, t) => acc + t)
+        return parseInt(t, 10)
-        this.timestampClicked.emit(start)
+      })
-      }
+      .reduce((acc, t) => acc + t)
-      $event.preventDefault()
+    this.timestampClicked.emit(start)
-    }
+    $event.preventDefault()
-    return
  }
 }
diff --git a/client/src/app/shared/angular/video-duration-formatter.pipe.ts b/client/src/app/shared/angular/video-duration-formatter.pipe.ts
index c92631a75..4b6767415 100644
--- a/client/src/app/shared/angular/video-duration-formatter.pipe.ts
+++ b/client/src/app/shared/angular/video-duration-formatter.pipe.ts
@@ -1,19 +1,28 @@
 import { Pipe, PipeTransform } from '@angular/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
-// Thanks: https://stackoverflow.com/a/46055604
 @Pipe({
  name: 'myVideoDurationFormatter'
 })
 export class VideoDurationPipe implements PipeTransform {
+  constructor (private i18n: I18n) {
+  }
  transform (value: number): string {
-    const minutes = Math.floor(value / 60)
+    const hours = Math.floor(value / 3600)
-    const hours = Math.floor(minutes / 60)
+    const minutes = Math.floor((value % 3600) / 60)
+    const seconds = value % 60
    if (hours > 0) {
-      return hours + ' h ' + (minutes - hours * 60) + ' min ' + (value - (minutes - hours * 60) * 60) + ' sec'
+      return this.i18n('{{hours}} h {{minutes}} min {{seconds}} sec', { hours, minutes, seconds })
+    }
+    if (minutes > 0) {
+      return this.i18n('{{minutes}} min {{seconds}} sec', { minutes, seconds })
    }
-    return minutes + ' min ' + (value - minutes * 60) + ' sec'
+    return this.i18n('{{seconds}} sec', { seconds })
  }
 }
diff --git a/client/src/app/shared/blocklist/blocklist.service.ts b/client/src/app/shared/blocklist/blocklist.service.ts
index c1f7312f0..5cf265bc1 100644
--- a/client/src/app/shared/blocklist/blocklist.service.ts
+++ b/client/src/app/shared/blocklist/blocklist.service.ts
@@ -76,10 +76,14 @@ export class BlocklistService {
  /*********************** Instance -> Account blocklist ***********************/
-  getInstanceAccountBlocklist (pagination: RestPagination, sort: SortMeta) {
+  getInstanceAccountBlocklist (options: { pagination: RestPagination, sort: SortMeta, search: string }) {
+    const { pagination, sort, search } = options
    let params = new HttpParams()
    params = this.restService.addRestGetParams(params, pagination, sort)
+    if (search) params = params.append('search', search)
    return this.authHttp.get<ResultList<AccountBlock>>(BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/accounts', { params })
               .pipe(
                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
@@ -104,10 +108,14 @@ export class BlocklistService {
  /*********************** Instance -> Server blocklist ***********************/
-  getInstanceServerBlocklist (pagination: RestPagination, sort: SortMeta) {
+  getInstanceServerBlocklist (options: { pagination: RestPagination, sort: SortMeta, search: string }) {
+    const { pagination, sort, search } = options
    let params = new HttpParams()
    params = this.restService.addRestGetParams(params, pagination, sort)
+    if (search) params = params.append('search', search)
    return this.authHttp.get<ResultList<ServerBlock>>(BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/servers', { params })
               .pipe(
                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index cd993db9f..952b3b6f8 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,4 +1,4 @@
-<div class="dropdown-root" ngbDropdown [placement]="placement" *ngIf="areActionsDisplayed(actions, entry)">
+<div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
  <div
    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
    ngbDropdownToggle role="button"
@@ -24,17 +24,27 @@
            </div>
          </ng-template>
-          <a *ngIf="action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" class="dropdown-item" [routerLink]="action.linkBuilder(entry)" [title]="action.title || ''">
+          <a
+            *ngIf="action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="dropdown-item"  [routerLink]="action.linkBuilder(entry)" [title]="action.title || ''"
+          >
            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
          </a>
          <span
-            *ngIf="!action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" (click)="action.handler(entry)"
+            *ngIf="!action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
-            class="custom-action dropdown-item" role="button" [title]="action.title || ''"
+            class="custom-action dropdown-item" role="button" [title]="action.title || ''" (click)="action.handler(entry)"
          >
            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
          </span>
+          <h6
+            *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="dropdown-header" role="button" [title]="action.title || ''" (click)="action.handler(entry)"
+          >
+            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+          </h6>
        </ng-container>
      </ng-container>
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 442c90984..7a030f32c 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -51,6 +51,10 @@
 }
 .dropdown-menu {
+  .dropdown-header {
+    padding: 0.2rem 1rem;
+  }
  .dropdown-item {
    display: flex;
    cursor: pointer;
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index a8b3ab16c..15f9556dc 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -9,6 +9,7 @@ export type DropdownAction<T> = {
  handler?: (a: T) => any
  linkBuilder?: (a: T) => (string | number)[]
  isDisplayed?: (a: T) => boolean
+  isHeader?: boolean
 }
 export type DropdownButtonSize = 'normal' | 'small'
@@ -26,6 +27,7 @@ export class ActionDropdownComponent<T> {
  @Input() entry: T
  @Input() placement = 'bottom-left auto'
+  @Input() container: null | 'body'
  @Input() buttonSize: DropdownButtonSize = 'normal'
  @Input() buttonDirection: DropdownDirection = 'horizontal'
@@ -34,10 +36,10 @@ export class ActionDropdownComponent<T> {
  @Input() label: string
  @Input() theme: DropdownTheme = 'grey'
-  getActions () {
+  getActions (): DropdownAction<T>[][] {
-    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions
+    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions as DropdownAction<T>[][]
-    return [ this.actions ]
+    return [ this.actions as DropdownAction<T>[] ]
  }
  areActionsDisplayed (actions: Array<DropdownAction<T> | DropdownAction<T>[]>, entry: T): boolean {
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 2a8cfc748..3ccfefd7e 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -10,11 +10,26 @@ my-small-loader ::ng-deep .root {
 .action-button {
  @include peertube-button-link;
  @include button-with-icon(21px, 0, -2px);
+}
-  // FIXME: Firefox does not apply global .orange-button icon color
+.orange-button {
-  &.orange-button {
+  @include peertube-button;
-    @include apply-svg-color(#fff)
+  @include orange-button;
-  }
+}
+.orange-button-link {
+  @include peertube-button-link;
+  @include orange-button;
+}
+.grey-button {
+  @include peertube-button;
+  @include grey-button;
+}
+.grey-button-link {
+  @include peertube-button-link;
+  @include grey-button;
 }
 // In a table, try to minimize the space taken by this button
diff --git a/client/src/app/shared/buttons/edit-button.component.ts b/client/src/app/shared/buttons/edit-button.component.ts
index 1fe4f7b30..9cfe1a3bb 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: string[] = []
+  @Input() routerLink: string[] | string = []
 }
diff --git a/client/src/app/shared/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html
index 65df1cd4d..dbc8c23e3 100644
--- a/client/src/app/shared/confirm/confirm.component.html
+++ b/client/src/app/shared/confirm/confirm.component.html
@@ -16,11 +16,15 @@
  </div>
  <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="dismiss()" role="button">Cancel</span>
+    <input
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      (click)="dismiss()" (key.enter)="dismiss()"
+    >
    <input
+      ngbAutofocus
      type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
-      (click)="close()"
+      (click)="close()" (key.enter)="confirm()"
    >
  </div>
 </ng-template>
diff --git a/client/src/app/shared/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts
index 763454c4f..c6e40fe72 100644
--- a/client/src/app/shared/confirm/confirm.component.ts
+++ b/client/src/app/shared/confirm/confirm.component.ts
@@ -45,7 +45,6 @@ export class ConfirmComponent implements OnInit {
    )
  }
-  @HostListener('document:keydown.enter')
  confirm () {
    if (this.openedModal) this.openedModal.close()
  }
@@ -60,7 +59,7 @@ export class ConfirmComponent implements OnInit {
  showModal () {
    this.inputValue = ''
-    this.openedModal = this.modalService.open(this.confirmModal)
+    this.openedModal = this.modalService.open(this.confirmModal, { centered: true })
    this.openedModal.result
        .then(() => this.confirmService.confirmResponse.next(true))
diff --git a/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts b/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
index 767e3f026..d20754d11 100644
--- a/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
@@ -56,7 +56,7 @@ export class CustomConfigValidatorsService {
    }
    this.SIGNUP_LIMIT = {
-      VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
+      VALIDATORS: [ Validators.required, Validators.min(-1), Validators.pattern('-?[0-9]+') ],
      MESSAGES: {
        'required': this.i18n('Signup limit is required.'),
        'min': this.i18n('Signup limit must be greater than 1.'),
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 4dff3e422..13b9228d4 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
@@ -8,6 +8,7 @@ export class UserValidatorsService {
  readonly USER_USERNAME: BuildFormValidator
  readonly USER_EMAIL: BuildFormValidator
  readonly USER_PASSWORD: BuildFormValidator
+  readonly USER_PASSWORD_OPTIONAL: BuildFormValidator
  readonly USER_CONFIRM_PASSWORD: BuildFormValidator
  readonly USER_VIDEO_QUOTA: BuildFormValidator
  readonly USER_VIDEO_QUOTA_DAILY: BuildFormValidator
@@ -56,6 +57,17 @@ export class UserValidatorsService {
      }
    }
+    this.USER_PASSWORD_OPTIONAL = {
+      VALIDATORS: [
+        Validators.minLength(6),
+        Validators.maxLength(255)
+      ],
+      MESSAGES: {
+        'minlength': this.i18n('Password must be at least 6 characters long.'),
+        'maxlength': this.i18n('Password cannot be more than 255 characters long.')
+      }
+    }
    this.USER_CONFIRM_PASSWORD = {
      VALIDATORS: [],
      MESSAGES: {
diff --git a/client/src/app/shared/forms/input-readonly-copy.component.html b/client/src/app/shared/forms/input-readonly-copy.component.html
index 27571b63f..9566e9741 100644
--- a/client/src/app/shared/forms/input-readonly-copy.component.html
+++ b/client/src/app/shared/forms/input-readonly-copy.component.html
@@ -1,8 +1,8 @@
-<div class="input-group">
+<div class="input-group input-group-sm">
  <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="value" />
  <div class="input-group-append">
-    <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+    <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
      <span class="glyphicon glyphicon-copy"></span>
    </button>
  </div>
diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
index 0925b9ad5..a519f3e0a 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.html
+++ b/client/src/app/shared/forms/markdown-textarea.component.html
@@ -1,17 +1,36 @@
-<div class="root" [ngStyle]="{ 'flex-direction': flexDirection }">
+<div class="root" [ngClass]="{ 'maximized': isMaximized }" [ngStyle]="{ 'max-width': textareaMaxWidth }">
-  <textarea
+  <textarea #textarea
    [(ngModel)]="content" (ngModelChange)="onModelChange()"
-    [ngClass]="classes" [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
+    class="form-control" [ngClass]="classes"
+    [ngStyle]="{ height: textareaHeight }"
    [id]="name" [name]="name">
  </textarea>
-  <ngb-tabset *ngIf="arePreviewsDisplayed()" class="previews" type="pills">
+  <div ngbNav #nav="ngbNav" class="nav-pills nav-preview">
-    <ngb-tab *ngIf="truncate !== undefined" i18n-title title="Truncated preview">
+    <ng-container ngbNavItem *ngIf="truncate !== undefined">
-      <ng-template ngbTabContent><div [innerHTML]="truncatedPreviewHTML"></div></ng-template>
+      <a ngbNavLink i18n>Truncated preview</a>
-    </ngb-tab>
-    <ngb-tab i18n-title title="Complete preview">
+      <ng-template ngbNavContent>
-      <ng-template ngbTabContent><div [innerHTML]="previewHTML"></div></ng-template>
+        <div [innerHTML]="truncatedPreviewHTML"></div>
-    </ngb-tab>
+      </ng-template>
-  </ngb-tabset>
+    </ng-container>
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Complete preview</a>
+      <ng-template ngbNavContent>
+        <div [innerHTML]="previewHTML"></div>
+      </ng-template>
+    </ng-container>
+    <my-button
+      *ngIf="!isMaximized" icon="fullscreen" (click)="onMaximizeClick()"
+    ></my-button>
+    <my-button
+      *ngIf="isMaximized" icon="exit-fullscreen" (click)="onMaximizeClick()"
+    ></my-button>
+  </div>
+  <div [ngbNavOutlet]="nav"></div>
 </div>
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index eacaf36a2..8e5739e45 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -1,34 +1,250 @@
 @import '_variables';
 @import '_mixins';
-.root {
+$nav-preview-tab-height: 30px;
-  display: flex;
+$base-padding: 15px;
+$input-border-color: #C6C6C6;
+$input-border-radius: 3px;
+@mixin in-small-view {
+  .root {
+    display: flex;
+    flex-direction: column;
+    textarea {
+      @include peertube-textarea(100%, 150px);
+      background-color: var(--textareaBackgroundColor);
+      font-family: monospace;
+      font-size: 13px;
+      border-bottom: none;
+      border-bottom-left-radius: unset;
+      border-bottom-right-radius: unset;
+    }
-  textarea {
+    .nav-preview {
-    @include peertube-textarea(100%, 150px);
+      display: block;
+      text-align: right;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      border-top: 1px dashed $input-border-color;
+      border-left: 1px solid $input-border-color;
+      border-right: 1px solid $input-border-color;
+      border-bottom: 1px solid $input-border-color;
+      border-bottom-right-radius: $input-border-radius;
-    margin-bottom: 15px;
+      border-bottom-left-radius: $input-border-radius;
+      ::ng-deep {
+        .nav-link {
+          display: none !important;
+        }
+        .grey-button {
+          padding: 0 12px 0 12px;
+        }
+      }
+    }
+    ::ng-deep {
+      .tab-content {
+        display: none;
+      }
+    }
  }
+}
+@mixin nav-preview-medium {
+  display: flex;
+  flex-grow: 1;
+  border-bottom-left-radius: unset;
+  border-bottom-right-radius: unset;
+  border-bottom: 2px solid var(--mainColor);
-  .previews {
+  :first-child {
-    max-height: 150px;
+    margin-left: auto;
-    overflow-y: auto;
-    flex-grow: 1;
  }
  ::ng-deep {
    .nav-link {
      display: flex !important;
      align-items: center;
-      height: 30px !important;
+      height: $nav-preview-tab-height !important;
      padding: 0 15px !important;
+      font-size: 85% !important;
+      opacity: .7;
+    }
+    .grey-button {
+      margin-left: 5px;
+    }
+  }
+}
+@mixin content-preview-base {
+  display: block;
+  min-height: 75px;
+  padding: $base-padding;
+  overflow-y: auto;
+  font-size: 15px;
+  word-wrap: break-word;
+}
+@mixin maximized-base {
+  flex-direction: row;
+  z-index: #{z(header) - 1};
+  position: fixed;
+  top: $header-height;
+  left: $menu-width;
+  max-height: none !important;
+  max-width: none !important;
+  width: calc(100% - #{$menu-width});
+  height: calc(100vh - #{$header-height}) !important;
+  $nav-preview-vertical-padding: 40px;
+  .nav-preview {
+    @include nav-preview-medium();
+    padding-top: #{$nav-preview-vertical-padding / 2};
+    padding-bottom: #{$nav-preview-vertical-padding / 2};
+    padding-left: 0px;
+    padding-right: 0px;
+    position: absolute;
+    background-color: var(--mainBackgroundColor);
+    width: 100% !important;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    :last-child {
+      margin-right: $not-expanded-horizontal-margins;
    }
+  }
+  ::ng-deep .tab-content {
+    @include content-preview-base();
+    background-color: var(--mainBackgroundColor);
+    scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor);
+  }
-    .tab-content {
+  textarea,
-      min-height: 75px;
+  ::ng-deep .tab-content {
-      padding: 15px;
+    max-height: none !important;
-      font-size: 15px;
+    max-width: none !important;
-      word-wrap: break-word;
+    margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
+    height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
+    width: 50% !important;
+    border: none !important;
+    border-radius: unset !important;
+  }
+  :host-context(.expanded) {
+    .root.maximized {
+      left: 0;
+      width: 100%;
+    }
+  }
+}
+@mixin maximized-in-small-view {
+  .root.maximized {
+    @include maximized-base();
+    textarea {
+      display: none;
    }
+    ::ng-deep .tab-content {
+      width: 100% !important;
+    }
+  }
+}
+@mixin maximized-tabs-in-mobile-view {
+  // Ellipsis on tabs for mobile view
+  .root.maximized {
+    .nav-preview {
+      ::ng-deep .nav-link {
+        @include ellipsis();
+        display: block !important;
+        max-width: 45% !important;
+        padding: 5px 0 !important;
+        margin-right: 10px !important;
+        text-align: center;
+        &:not(.active) {
+          max-width: 15% !important;
+        }
+        &.active {
+          padding: 5px 15px !important;
+        }
+      }
+    }
+  }
+}
+@mixin in-medium-view {
+  .root {
+    .nav-preview {
+      @include nav-preview-medium();
+    }
+    ::ng-deep .tab-content {
+      @include content-preview-base();
+      max-height: 210px;
+      border-bottom: 1px solid $input-border-color;
+      border-left: 1px solid $input-border-color;
+      border-right: 1px solid $input-border-color;
+      border-bottom-left-radius: $input-border-radius;
+      border-bottom-right-radius: $input-border-radius;
+    }
+  }
+}
+@mixin maximized-in-medium-view {
+  .root.maximized {
+    @include maximized-base();
+    textarea {
+      display: block;
+      padding: $base-padding;
+      border-right: 1px dashed $input-border-color !important;
+      resize: none;
+      scrollbar-color: var(--actionButtonColor) var(--textareaBackgroundColor);
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+}
+@include in-small-view();
+@include maximized-in-small-view();
+@media only screen and (max-width: $mobile-view) {
+  @include maximized-tabs-in-mobile-view();
+}
+@media only screen and (max-width: #{$mobile-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include maximized-tabs-in-mobile-view();
+  }
+}
+@media only screen and (min-width: $small-view) {
+  :host-context(.expanded) {
+    @include in-medium-view();
+  }
+  @include maximized-in-medium-view();
+}
+@media only screen and (min-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include in-medium-view();
  }
 }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index 19cd37573..dde7b4d98 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -1,5 +1,5 @@
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
-import { Component, forwardRef, Input, OnInit } from '@angular/core'
+import { Component, forwardRef, Input, OnInit, ViewChild, ElementRef } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Subject } from 'rxjs'
 import truncate from 'lodash-es/truncate'
@@ -21,19 +21,19 @@ import { MarkdownService } from '@app/shared/renderer'
 export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
  @Input() content = ''
-  @Input() classes: string[] = []
+  @Input() classes: string[] | { [klass: string]: any[] | any } = []
-  @Input() textareaWidth = '100%'
+  @Input() textareaMaxWidth = '100%'
  @Input() textareaHeight = '150px'
-  @Input() previewColumn = false
  @Input() truncate: number
  @Input() markdownType: 'text' | 'enhanced' = 'text'
  @Input() markdownVideo = false
  @Input() name = 'description'
-  textareaMarginRight = '0'
+  @ViewChild('textarea') textareaElement: ElementRef
-  flexDirection = 'column'
  truncatedPreviewHTML = ''
  previewHTML = ''
+  isMaximized = false
  private contentChanged = new Subject<string>()
@@ -51,11 +51,6 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
        .subscribe(() => this.updatePreviews())
    this.contentChanged.next(this.content)
-    if (this.previewColumn) {
-      this.flexDirection = 'row'
-      this.textareaMarginRight = '15px'
-    }
  }
  propagateChange = (_: any) => { /* empty */ }
@@ -80,8 +75,26 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
    this.contentChanged.next(this.content)
  }
-  arePreviewsDisplayed () {
+  onMaximizeClick () {
-    return this.screenService.isInSmallView() === false
+    this.isMaximized = !this.isMaximized
+    // Make sure textarea have the focus
+    this.textareaElement.nativeElement.focus()
+    // Make sure the window has no scrollbars
+    if (!this.isMaximized) {
+      this.unlockBodyScroll()
+    } else {
+      this.lockBodyScroll()
+    }
+  }
+  private lockBodyScroll () {
+    document.getElementById('content').classList.add('lock-scroll')
+  }
+  private unlockBodyScroll () {
+    document.getElementById('content').classList.remove('lock-scroll')
  }
  private async updatePreviews () {
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.html b/client/src/app/shared/forms/peertube-checkbox.component.html
index c740d852c..704f3e696 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/forms/peertube-checkbox.component.html
@@ -29,6 +29,8 @@
        <ng-template *ngTemplateOutlet="helpTemplate"></ng-template>
      </ng-template>
    </my-help>
+    <div *ngIf="recommended" class="recommended" i18n>Recommended</div>
  </div>
  <div class="ml-4 d-flex flex-column">
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index 3120509b3..c1233e8a5 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -34,4 +34,19 @@
  .wrapper:empty {
    display: none;
  }
+  .recommended {
+    margin-left: .5rem;
+    align-self: baseline;
+    display: inline-block;
+    padding: 4px 6px;
+    cursor: default;
+    border-radius: 3px;
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 500;
+    color: var(--inputPlaceholderColor);
+    background-color: rgba(217,225,232,.1);
+    border: 1px solid rgba(217,225,232,.5);
+  }
 }
 \ No newline at end of file
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.ts b/client/src/app/shared/forms/peertube-checkbox.component.ts
index cb7ec8eda..89e79fecd 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.ts
+++ b/client/src/app/shared/forms/peertube-checkbox.component.ts
@@ -21,6 +21,7 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor, AfterCon
  @Input() labelInnerHTML: string
  @Input() helpPlacement = 'top auto'
  @Input() disabled = false
+  @Input() recommended = false
  @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'label' | 'help'>>
diff --git a/client/src/app/shared/forms/timestamp-input.component.scss b/client/src/app/shared/forms/timestamp-input.component.scss
index e7dbcd997..9671cc65f 100644
--- a/client/src/app/shared/forms/timestamp-input.component.scss
+++ b/client/src/app/shared/forms/timestamp-input.component.scss
@@ -1,8 +1,15 @@
+@import 'variables';
 p-inputmask {
  ::ng-deep input {
    width: 80px;
    font-size: 15px;
    border: none;
+    &:focus-within,
+    &:focus {
+      box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+    }
  }
 }
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 806aca347..d2700f6c3 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -1,57 +1,62 @@
 import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 const icons = {
-  'add': require('!!raw-loader?!../../../assets/images/global/add.svg'),
+  'add': require('!!raw-loader?!../../../assets/images/global/add.svg').default,
-  'user': require('!!raw-loader?!../../../assets/images/global/user.svg'),
+  'user': require('!!raw-loader?!../../../assets/images/global/user.svg').default,
-  'sign-out': require('!!raw-loader?!../../../assets/images/global/sign-out.svg'),
+  'sign-out': require('!!raw-loader?!../../../assets/images/global/sign-out.svg').default,
-  'syndication': require('!!raw-loader?!../../../assets/images/global/syndication.svg'),
+  'syndication': require('!!raw-loader?!../../../assets/images/global/syndication.svg').default,
-  'help': require('!!raw-loader?!../../../assets/images/global/help.svg'),
+  'help': require('!!raw-loader?!../../../assets/images/global/help.svg').default,
-  'sparkle': require('!!raw-loader?!../../../assets/images/global/sparkle.svg'),
+  'sparkle': require('!!raw-loader?!../../../assets/images/global/sparkle.svg').default,
-  'alert': require('!!raw-loader?!../../../assets/images/global/alert.svg'),
+  'alert': require('!!raw-loader?!../../../assets/images/global/alert.svg').default,
-  'cloud-error': require('!!raw-loader?!../../../assets/images/global/cloud-error.svg'),
+  'cloud-error': require('!!raw-loader?!../../../assets/images/global/cloud-error.svg').default,
-  'clock': require('!!raw-loader?!../../../assets/images/global/clock.svg'),
+  'clock': require('!!raw-loader?!../../../assets/images/global/clock.svg').default,
-  'user-add': require('!!raw-loader?!../../../assets/images/global/user-add.svg'),
+  'user-add': require('!!raw-loader?!../../../assets/images/global/user-add.svg').default,
-  'no': require('!!raw-loader?!../../../assets/images/global/no.svg'),
+  'no': require('!!raw-loader?!../../../assets/images/global/no.svg').default,
-  'cloud-download': require('!!raw-loader?!../../../assets/images/global/cloud-download.svg'),
+  'cloud-download': require('!!raw-loader?!../../../assets/images/global/cloud-download.svg').default,
-  'undo': require('!!raw-loader?!../../../assets/images/global/undo.svg'),
+  'undo': require('!!raw-loader?!../../../assets/images/global/undo.svg').default,
-  'history': require('!!raw-loader?!../../../assets/images/global/history.svg'),
+  'history': require('!!raw-loader?!../../../assets/images/global/history.svg').default,
-  'circle-tick': require('!!raw-loader?!../../../assets/images/global/circle-tick.svg'),
+  'circle-tick': require('!!raw-loader?!../../../assets/images/global/circle-tick.svg').default,
-  'cog': require('!!raw-loader?!../../../assets/images/global/cog.svg'),
+  'cog': require('!!raw-loader?!../../../assets/images/global/cog.svg').default,
-  'download': require('!!raw-loader?!../../../assets/images/global/download.svg'),
+  'download': require('!!raw-loader?!../../../assets/images/global/download.svg').default,
-  'go': require('!!raw-loader?!../../../assets/images/menu/go.svg'),
+  'go': require('!!raw-loader?!../../../assets/images/menu/go.svg').default,
-  'edit': require('!!raw-loader?!../../../assets/images/global/edit.svg'),
+  'edit': require('!!raw-loader?!../../../assets/images/global/edit.svg').default,
-  'im-with-her': require('!!raw-loader?!../../../assets/images/global/im-with-her.svg'),
+  'im-with-her': require('!!raw-loader?!../../../assets/images/global/im-with-her.svg').default,
-  'delete': require('!!raw-loader?!../../../assets/images/global/delete.svg'),
+  'delete': require('!!raw-loader?!../../../assets/images/global/delete.svg').default,
-  'server': require('!!raw-loader?!../../../assets/images/global/server.svg'),
+  'server': require('!!raw-loader?!../../../assets/images/global/server.svg').default,
-  'cross': require('!!raw-loader?!../../../assets/images/global/cross.svg'),
+  'cross': require('!!raw-loader?!../../../assets/images/global/cross.svg').default,
-  'validate': require('!!raw-loader?!../../../assets/images/global/validate.svg'),
+  'validate': require('!!raw-loader?!../../../assets/images/global/validate.svg').default,
-  'tick': require('!!raw-loader?!../../../assets/images/global/tick.svg'),
+  'tick': require('!!raw-loader?!../../../assets/images/global/tick.svg').default,
-  'repeat': require('!!raw-loader?!../../../assets/images/global/repeat.svg'),
+  'repeat': require('!!raw-loader?!../../../assets/images/global/repeat.svg').default,
-  'inbox-full': require('!!raw-loader?!../../../assets/images/global/inbox-full.svg'),
+  'inbox-full': require('!!raw-loader?!../../../assets/images/global/inbox-full.svg').default,
-  'dislike': require('!!raw-loader?!../../../assets/images/video/dislike.svg'),
+  'dislike': require('!!raw-loader?!../../../assets/images/video/dislike.svg').default,
-  'support': require('!!raw-loader?!../../../assets/images/video/support.svg'),
+  'support': require('!!raw-loader?!../../../assets/images/video/support.svg').default,
-  'like': require('!!raw-loader?!../../../assets/images/video/like.svg'),
+  'like': require('!!raw-loader?!../../../assets/images/video/like.svg').default,
-  'more-horizontal': require('!!raw-loader?!../../../assets/images/global/more-horizontal.svg'),
+  'more-horizontal': require('!!raw-loader?!../../../assets/images/global/more-horizontal.svg').default,
-  'more-vertical': require('!!raw-loader?!../../../assets/images/global/more-vertical.svg'),
+  'more-vertical': require('!!raw-loader?!../../../assets/images/global/more-vertical.svg').default,
-  'share': require('!!raw-loader?!../../../assets/images/video/share.svg'),
+  'share': require('!!raw-loader?!../../../assets/images/video/share.svg').default,
-  'upload': require('!!raw-loader?!../../../assets/images/video/upload.svg'),
+  'upload': require('!!raw-loader?!../../../assets/images/video/upload.svg').default,
-  'playlist-add': require('!!raw-loader?!../../../assets/images/video/playlist-add.svg'),
+  'playlist-add': require('!!raw-loader?!../../../assets/images/video/playlist-add.svg').default,
-  'play': require('!!raw-loader?!../../../assets/images/global/play.svg'),
+  'play': require('!!raw-loader?!../../../assets/images/global/play.svg').default,
-  'playlists': require('!!raw-loader?!../../../assets/images/global/playlists.svg'),
+  'playlists': require('!!raw-loader?!../../../assets/images/global/playlists.svg').default,
-  'about': require('!!raw-loader?!../../../assets/images/menu/about.svg'),
+  'globe': require('!!raw-loader?!../../../assets/images/menu/globe.svg').default,
-  'globe': require('!!raw-loader?!../../../assets/images/menu/globe.svg'),
+  'home': require('!!raw-loader?!../../../assets/images/menu/home.svg').default,
-  'home': require('!!raw-loader?!../../../assets/images/menu/home.svg'),
+  'recently-added': require('!!raw-loader?!../../../assets/images/menu/recently-added.svg').default,
-  'recently-added': require('!!raw-loader?!../../../assets/images/menu/recently-added.svg'),
+  'trending': require('!!raw-loader?!../../../assets/images/menu/trending.svg').default,
-  'trending': require('!!raw-loader?!../../../assets/images/menu/trending.svg'),
+  'video-lang': require('!!raw-loader?!../../../assets/images/global/video-lang.svg').default,
-  'videos': require('!!raw-loader?!../../../assets/images/global/videos.svg'),
+  'videos': require('!!raw-loader?!../../../assets/images/global/videos.svg').default,
-  'folder': require('!!raw-loader?!../../../assets/images/global/folder.svg'),
+  'folder': require('!!raw-loader?!../../../assets/images/global/folder.svg').default,
-  'administration': require('!!raw-loader?!../../../assets/images/menu/administration.svg'),
+  'subscriptions': require('!!raw-loader?!../../../assets/images/menu/subscriptions.svg').default,
-  'subscriptions': require('!!raw-loader?!../../../assets/images/menu/subscriptions.svg'),
+  'language': require('!!raw-loader?!../../../assets/images/menu/language.svg').default,
-  'users': require('!!raw-loader?!../../../assets/images/global/users.svg'),
+  'unsensitive': require('!!raw-loader?!../../../assets/images/menu/eye.svg').default,
-  'search': require('!!raw-loader?!../../../assets/images/global/search.svg'),
+  'sensitive': require('!!raw-loader?!../../../assets/images/menu/eye-closed.svg').default,
-  'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg')
+  'p2p': require('!!raw-loader?!../../../assets/images/menu/p2p.svg').default,
+  'users': require('!!raw-loader?!../../../assets/images/global/users.svg').default,
+  'search': require('!!raw-loader?!../../../assets/images/global/search.svg').default,
+  'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg').default,
+  'npm': require('!!raw-loader?!../../../assets/images/global/npm.svg').default,
+  'fullscreen': require('!!raw-loader?!../../../assets/images/global/fullscreen.svg').default,
+  'exit-fullscreen': require('!!raw-loader?!../../../assets/images/global/exit-fullscreen.svg').default
 }
 export type GlobalIconName = keyof typeof icons
diff --git a/client/src/app/shared/images/preview-upload.component.html b/client/src/app/shared/images/preview-upload.component.html
index 5e1d5211b..7c3a2b588 100644
--- a/client/src/app/shared/images/preview-upload.component.html
+++ b/client/src/app/shared/images/preview-upload.component.html
@@ -1,13 +1,11 @@
 <div class="root">
  <div class="preview-container">
    <my-reactive-file
-      [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize"
+      [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize" placement="right"
-      icon="edit" (fileChanged)="onFileChanged($event)"
+      icon="edit" (fileChanged)="onFileChanged($event)" [ngbTooltip]="'(extensions: '+ videoImageExtensions +', '+ maxSizeText +': '+ maxVideoImageSizeInBytes +')'"
    ></my-reactive-file>
    <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" />
    <div *ngIf="!imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" class="preview no-image"></div>
  </div>
-  <div i18n class="file-constraints">(extensions: {{ allowedExtensionsMessage }}, max size: {{ maxVideoImageSize | bytes }})</div>
 </div>
diff --git a/client/src/app/shared/images/preview-upload.component.scss b/client/src/app/shared/images/preview-upload.component.scss
index 257060239..8f3522115 100644
--- a/client/src/app/shared/images/preview-upload.component.scss
+++ b/client/src/app/shared/images/preview-upload.component.scss
@@ -16,11 +16,13 @@
    }
    .preview {
-      border: 2px solid grey;
+      object-fit: cover;
      border-radius: 4px;
+      max-width: 100%;
      &.no-image {
-        background-color: #ececec;
+        border: 2px solid grey;
+        background-color: var(--mainBackgroundColor);
      }
    }
  }
diff --git a/client/src/app/shared/images/preview-upload.component.ts b/client/src/app/shared/images/preview-upload.component.ts
index f56f5b1f8..7519734ba 100644
--- a/client/src/app/shared/images/preview-upload.component.ts
+++ b/client/src/app/shared/images/preview-upload.component.ts
@@ -3,6 +3,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { ServerService } from '@app/core'
 import { ServerConfig } from '@shared/models'
+import { BytesPipe } from 'ngx-pipes'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 @Component({
  selector: 'my-preview-upload',
@@ -24,14 +26,20 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
  imageSrc: SafeResourceUrl
  allowedExtensionsMessage = ''
+  maxSizeText: string
  private serverConfig: ServerConfig
-  private file: File
+  private bytesPipe: BytesPipe
+  private file: Blob
  constructor (
    private sanitizer: DomSanitizer,
-    private serverService: ServerService
+    private serverService: ServerService,
-  ) {}
+    private i18n: I18n
+  ) {
+    this.bytesPipe = new BytesPipe()
+    this.maxSizeText = this.i18n('max size')
+  }
  get videoImageExtensions () {
    return this.serverConfig.video.image.extensions
@@ -41,6 +49,10 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
    return this.serverConfig.video.image.size.max
  }
+  get maxVideoImageSizeInBytes () {
+    return this.bytesPipe.transform(this.maxVideoImageSize)
+  }
  ngOnInit () {
    this.serverConfig = this.serverService.getTmpConfig()
    this.serverService.getConfig()
@@ -49,7 +61,7 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
    this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
  }
-  onFileChanged (file: File) {
+  onFileChanged (file: Blob) {
    this.file = file
    this.propagateChange(this.file)
diff --git a/client/src/app/shared/instance/instance-features-table.component.html b/client/src/app/shared/instance/instance-features-table.component.html
index fd8b3354f..99b854d13 100644
--- a/client/src/app/shared/instance/instance-features-table.component.html
+++ b/client/src/app/shared/instance/instance-features-table.component.html
@@ -37,8 +37,8 @@
    <tr>
      <td i18n class="sub-label">Video uploads</td>
      <td>
-        <span *ngIf="serverConfig.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
+        <span i18n *ngIf="serverConfig.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
-        <span *ngIf="!serverConfig.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
+        <span i18n *ngIf="!serverConfig.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
      </td>
    </tr>
@@ -91,5 +91,16 @@
        <my-feature-boolean [value]="serverConfig.tracker.enabled"></my-feature-boolean>
      </td>
    </tr>
+    <tr>
+      <td i18n class="label" colspan="2">Search</td>
+    </tr>
+    <tr>
+      <td i18n class="sub-label">Users can resolve distant content</td>
+      <td>
+        <my-feature-boolean [value]="serverConfig.search.remoteUri.users"></my-feature-boolean>
+      </td>
+    </tr>
  </table>
 </div>
diff --git a/client/src/app/shared/instance/instance-statistics.component.ts b/client/src/app/shared/instance/instance-statistics.component.ts
index 8ec728f05..40aa8a4c0 100644
--- a/client/src/app/shared/instance/instance-statistics.component.ts
+++ b/client/src/app/shared/instance/instance-statistics.component.ts
@@ -1,9 +1,6 @@
-import { map } from 'rxjs/operators'
-import { HttpClient } from '@angular/common/http'
 import { Component, OnInit } from '@angular/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerStats } from '@shared/models/server'
-import { environment } from '../../../environments/environment'
+import { ServerService } from '@app/core'
 @Component({
  selector: 'my-instance-statistics',
@@ -11,27 +8,15 @@ import { environment } from '../../../environments/environment'
  styleUrls: [ './instance-statistics.component.scss' ]
 })
 export class InstanceStatisticsComponent implements OnInit {
-  private static BASE_STATS_URL = environment.apiUrl + '/api/v1/server/stats'
  serverStats: ServerStats = null
  constructor (
-    private http: HttpClient,
+    private serverService: ServerService
-    private i18n: I18n
  ) {
  }
  ngOnInit () {
-    this.getStats()
+    this.serverService.getServerStats()
-      .subscribe(
+        .subscribe(res => this.serverStats = res)
-        res => {
-          this.serverStats = res
-        }
-      )
-  }
-  getStats () {
-    return this.http
-      .get<ServerStats>(InstanceStatisticsComponent.BASE_STATS_URL)
  }
 }
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
index 35511ee62..d577f757d 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.html
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -1,12 +1,22 @@
-<div class="sub-menu">
+<div class="sub-menu" [ngClass]="{ 'no-scroll': isModalOpened }">
-  <ng-container *ngFor="let menuEntry of menuEntries">
+  <ng-container *ngFor="let menuEntry of menuEntries; index as id">
-    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a>
+    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
-    <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
+    <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry"
+      #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
      <span
+        *ngIf="isInSmallView"
+        [ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
+        (click)="openModal(id)" role="button" class="title-page title-page-settings">
+        <ng-container i18n>{{ menuEntry.label }}</ng-container>
+        <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
+      </span>
+      <span
+        *ngIf="!isInSmallView"
        (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
-        (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page"
+        (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page title-page-settings"
      >
        <ng-container i18n>{{ menuEntry.label }}</ng-container>
        <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
@@ -20,6 +30,21 @@
        </a>
      </div>
    </div>
  </ng-container>
 </div>
+<ng-template #modal let-close="close" let-dismiss="dismiss">
+  <div class="modal-body">
+    <ng-container *ngFor="let menuEntry of menuEntries; index as id">
+      <div [ngClass]="{ hidden: id !== currentMenuEntryIndex }">
+        <a *ngFor="let menuChild of menuEntry.children"
+          [ngClass]="{ icon: hasIcons }"
+          [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
+          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName"></my-global-icon>
+          {{ menuChild.label }}
+        </a>
+      </div>
+    </ng-container>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss
index 1be699a88..5f90dcf80 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss
@@ -25,3 +25,32 @@
  top: -1px;
 }
+.sub-menu.no-scroll {
+  overflow-x: hidden;
+}
+.modal-body {
+  .hidden {
+    display: none;
+  }
+  a {
+    @include disable-default-a-behaviour;
+    color: currentColor;
+    box-sizing: border-box;
+    display: block;
+    font-size: 1.2rem;
+    padding: 9px 12px;
+    text-align: initial;
+    text-transform: unset;
+    width: 100%;
+    &.active {
+      color: var(--mainBackgroundColor) !important;
+      background-color: var(--mainHoverColor);
+      opacity: .9;
+    }
+  }
+}
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts
index 5ccdafb54..f98240804 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -1,8 +1,14 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import {
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} 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'
+import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { GlobalIconName } from '@app/shared/images/global-icon.component'
 import { ScreenService } from '@app/shared/misc/screen.service'
@@ -26,32 +32,40 @@ export type TopMenuDropdownParam = {
 export class TopMenuDropdownComponent implements OnInit, OnDestroy {
  @Input() menuEntries: TopMenuDropdownParam[] = []
+  @ViewChild('modal', { static: true }) modal: NgbModal
  suffixLabels: { [ parentLabel: string ]: string }
  hasIcons = false
  container: undefined | 'body' = undefined
+  isModalOpened = false
+  currentMenuEntryIndex: number
  private openedOnHover = false
  private routeSub: Subscription
  constructor (
    private router: Router,
+    private modalService: NgbModal,
    private screen: ScreenService
-  ) {}
+  ) { }
+  get isInSmallView () {
+    return this.screen.isInSmallView()
+  }
  ngOnInit () {
    this.updateChildLabels(window.location.pathname)
    this.routeSub = this.router.events
-                        .pipe(filter(event => event instanceof NavigationEnd))
+      .pipe(filter(event => event instanceof NavigationEnd))
-                        .subscribe(() => this.updateChildLabels(window.location.pathname))
+      .subscribe(() => this.updateChildLabels(window.location.pathname))
    this.hasIcons = this.menuEntries.some(
      e => e.children && e.children.some(c => !!c.iconName)
    )
-    // FIXME: We have to set body for the container to avoid because of scroll overflow on mobile view
+    // We have to set body for the container to avoid scroll overflow on mobile and small views
-    // But this break our hovering system
+    if (this.isInSmallView) {
-    if (this.screen.isInMobileView()) {
      this.container = 'body'
    }
  }
@@ -86,6 +100,27 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
    this.openedOnHover = false
  }
+  openModal (index: number) {
+    this.currentMenuEntryIndex = index
+    this.isModalOpened = true
+    this.modalService.open(this.modal, {
+      centered: true,
+      beforeDismiss: async () => {
+        this.onModalDismiss()
+        return true
+      }
+    })
+  }
+  onModalDismiss () {
+    this.isModalOpened = false
+  }
+  dismissOtherModals () {
+    this.modalService.dismissAll()
+  }
  private updateChildLabels (path: string) {
    this.suffixLabels = {}
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index f55a516e4..3c8b66cd5 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -17,6 +17,7 @@
 ::ng-deep {
  .help-popover {
+    z-index: z(help-popover) !important;
    max-width: 300px;
    .popover-body {
@@ -26,7 +27,7 @@
      font-size: 13px;
      background-color: var(--mainBackgroundColor);
      color: var(--mainForegroundColor);
-      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
      p {
        margin-bottom: 0;
diff --git a/client/src/app/shared/misc/list-overflow.component.html b/client/src/app/shared/misc/list-overflow.component.html
new file mode 100644
index 000000000..986572801
--- /dev/null
+++ b/client/src/app/shared/misc/list-overflow.component.html
@@ -0,0 +1,35 @@
+<div #itemsParent class="d-flex align-items-center text-nowrap w-100 list-overflow-parent">
+  <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
+    <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
+  </span>
+  
+  <ng-container *ngIf="isMenuDisplayed()">
+    <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
+      <span class="glyphicon glyphicon-chevron-down"></span>
+    </button>
+  
+    <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
+      <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ routeActive: active }"
+        ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
+      >
+        <span class="glyphicon glyphicon-chevron-down"></span>
+      </button>
+  
+      <div ngbDropdownMenu>
+        <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
+          [routerLink]="item.routerLink" routerLinkActive="active" class="dropdown-item">
+          {{ item.label }}
+        </a>
+      </div>
+    </div>
+  </ng-container>
+</div >
+<ng-template #modal let-close="close" let-dismiss="dismiss">
+  <div class="modal-body">
+    <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
+       [routerLink]="item.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
+       {{ item.label }}
+    </a>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/misc/list-overflow.component.scss b/client/src/app/shared/misc/list-overflow.component.scss
new file mode 100644
index 000000000..1e5fe4c10
--- /dev/null
+++ b/client/src/app/shared/misc/list-overflow.component.scss
@@ -0,0 +1,61 @@
+@import '_mixins';
+:host {
+  width: 100%;
+}
+.list-overflow-parent {
+  overflow: hidden;
+}
+.list-overflow-menu {
+  position: absolute;
+  right: 25px;
+}
+button {
+  width: 30px;
+  border: none;
+  &::after {
+    display: none;
+  }
+  &.routeActive {
+    &::after {
+      display: inherit;
+      border: 2px solid var(--mainColor);
+      position: relative;
+      right: 95%;
+      top: 50%;
+    }
+  }
+}
+::ng-deep .dropdown-menu {
+  margin-top: 0 !important;
+  position: static;
+  right: auto;
+  bottom: auto
+}
+.modal-body {
+  a {
+    @include disable-default-a-behaviour;
+    color: currentColor;
+    box-sizing: border-box;
+    display: block;
+    font-size: 1.2rem;
+    padding: 9px 12px;
+    text-align: initial;
+    text-transform: unset;
+    width: 100%;
+    &.active {
+      color: var(--mainBackgroundColor) !important;
+      background-color: var(--mainHoverColor);
+      opacity: .9;
+    }
+  }
+}
diff --git a/client/src/app/shared/misc/list-overflow.component.ts b/client/src/app/shared/misc/list-overflow.component.ts
new file mode 100644
index 000000000..30f43ba43
--- /dev/null
+++ b/client/src/app/shared/misc/list-overflow.component.ts
@@ -0,0 +1,120 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+  ViewChildren
+} from '@angular/core'
+import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { lowerFirst, uniqueId } from 'lodash-es'
+import { ScreenService } from './screen.service'
+import { take } from 'rxjs/operators'
+export interface ListOverflowItem {
+  label: string
+  routerLink: string | any[]
+}
+@Component({
+  selector: 'list-overflow',
+  templateUrl: './list-overflow.component.html',
+  styleUrls: [ './list-overflow.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ListOverflowComponent<T extends ListOverflowItem> implements AfterViewInit {
+  @Input() items: T[]
+  @Input() itemTemplate: TemplateRef<{item: T}>
+  @ViewChild('modal', { static: true }) modal: ElementRef
+  @ViewChild('itemsParent', { static: true }) parent: ElementRef<HTMLDivElement>
+  @ViewChildren('itemsRendered') itemsRendered: QueryList<ElementRef>
+  showItemsUntilIndexExcluded: number
+  active = false
+  isInTouchScreen = false
+  isInMobileView = false
+  private openedOnHover = false
+  constructor (
+    private cdr: ChangeDetectorRef,
+    private modalService: NgbModal,
+    private screenService: ScreenService
+  ) {}
+  ngAfterViewInit () {
+    setTimeout(() => this.onWindowResize(), 0)
+  }
+  isMenuDisplayed () {
+    return !!this.showItemsUntilIndexExcluded
+  }
+  @HostListener('window:resize')
+  onWindowResize () {
+    this.isInTouchScreen = !!this.screenService.isInTouchScreen()
+    this.isInMobileView = !!this.screenService.isInMobileView()
+    const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
+    let showItemsUntilIndexExcluded: number
+    let accWidth = 0
+    for (const [index, el] of this.itemsRendered.toArray().entries()) {
+      accWidth += el.nativeElement.getBoundingClientRect().width
+      if (showItemsUntilIndexExcluded === undefined) {
+        showItemsUntilIndexExcluded = (parentWidth < accWidth) ? index : undefined
+      }
+      const e = document.getElementById(this.getId(index))
+      const shouldBeVisible = showItemsUntilIndexExcluded ? index < showItemsUntilIndexExcluded : true
+      e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
+    }
+    this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
+    this.cdr.markForCheck()
+  }
+  openDropdownOnHover (dropdown: NgbDropdown) {
+    this.openedOnHover = true
+    dropdown.open()
+    // Menu was closed
+    dropdown.openChange
+            .pipe(take(1))
+            .subscribe(() => this.openedOnHover = false)
+  }
+  dropdownAnchorClicked (dropdown: NgbDropdown) {
+    if (this.openedOnHover) {
+      this.openedOnHover = false
+      return
+    }
+    return dropdown.toggle()
+  }
+  closeDropdownIfHovered (dropdown: NgbDropdown) {
+    if (this.openedOnHover === false) return
+    dropdown.close()
+    this.openedOnHover = false
+  }
+  toggleModal () {
+    this.modalService.open(this.modal, { centered: true })
+  }
+  dismissOtherModals () {
+    this.modalService.dismissAll()
+  }
+  getId (id: number | string = uniqueId()): string {
+    return lowerFirst(this.constructor.name) + '_' + id
+  }
+}
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index 220d41d59..9c71a8c83 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -14,6 +14,10 @@ export class ScreenService {
    return this.getWindowInnerWidth() < 800
  }
+  isInMediumView () {
+    return this.getWindowInnerWidth() < 1100
+  }
  isInMobileView () {
    return this.getWindowInnerWidth() < 500
  }
diff --git a/client/src/app/shared/misc/storage.service.ts b/client/src/app/shared/misc/storage.service.ts
new file mode 100644
index 000000000..0d4a8ab53
--- /dev/null
+++ b/client/src/app/shared/misc/storage.service.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core'
+import { Observable, Subject } from 'rxjs'
+import {
+  peertubeLocalStorage,
+  peertubeSessionStorage
+} from './peertube-web-storage'
+import { filter } from 'rxjs/operators'
+abstract class StorageService {
+  protected instance: Storage
+  static storageSub = new Subject<string>()
+  watch (keys?: string[]): Observable<string> {
+    return StorageService.storageSub.asObservable().pipe(filter(val => keys ? keys.includes(val) : true))
+  }
+  getItem (key: string) {
+    return this.instance.getItem(key)
+  }
+  setItem (key: string, data: any, notifyOfUpdate = true) {
+    this.instance.setItem(key, data)
+    if (notifyOfUpdate) StorageService.storageSub.next(key)
+  }
+  removeItem (key: string, notifyOfUpdate = true) {
+    this.instance.removeItem(key)
+    if (notifyOfUpdate) StorageService.storageSub.next(key)
+  }
+}
+@Injectable()
+export class LocalStorageService extends StorageService {
+  protected instance: Storage = peertubeLocalStorage
+}
+@Injectable()
+export class SessionStorageService extends StorageService {
+  protected instance: Storage = peertubeSessionStorage
+}
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 f38ea543d..365eb1938 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/moderation/user-ban-modal.component.html
@@ -8,8 +8,10 @@
  <div class="modal-body">
    <form novalidate [formGroup]="form" (ngSubmit)="banUser()">
      <div class="form-group">
-        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
+        <textarea
-        </textarea>
+          i18n-placeholder placeholder="Reason..." formControlName="reason"
+          class="form-control" [ngClass]="{ 'input-error': formErrors['reason'] }"
+        ></textarea>
        <div *ngIf="formErrors.reason" class="form-error">
          {{ formErrors.reason }}
        </div>
@@ -20,7 +22,10 @@
      </div>
      <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
+        <input
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          (click)="hide()" (key.enter)="hide()"
+        >
        <input
          type="submit" i18n-value value="Ban this user" class="action-button-submit"
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 cf0e1577a..1647e3691 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/moderation/user-ban-modal.component.ts
@@ -39,7 +39,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
  openModal (user: User | User[]) {
    this.usersToBan = user
-    this.openedModal = this.modalService.open(this.modal)
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
  }
  hide () {
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 11d8588f4..c8ccaa800 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -14,13 +14,13 @@ import { ServerConfig } from '@shared/models'
  templateUrl: './user-moderation-dropdown.component.html'
 })
 export class UserModerationDropdownComponent implements OnInit, OnChanges {
-  @ViewChild('userBanModal', { static: false }) userBanModal: UserBanModalComponent
+  @ViewChild('userBanModal') userBanModal: UserBanModalComponent
  @Input() user: User
  @Input() account: Account
  @Input() buttonSize: 'normal' | 'small' = 'normal'
-  @Input() placement = 'left'
+  @Input() placement = 'left-top left-bottom auto'
  @Input() label: string
  @Output() userChanged = new EventEmitter()
diff --git a/client/src/app/shared/overview/overview.service.ts b/client/src/app/shared/overview/overview.service.ts
index 79cb781f7..6d8af8052 100644
--- a/client/src/app/shared/overview/overview.service.ts
+++ b/client/src/app/shared/overview/overview.service.ts
@@ -1,5 +1,5 @@
 import { catchError, map, switchMap, tap } from 'rxjs/operators'
-import { HttpClient } from '@angular/common/http'
+import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { forkJoin, Observable, of } from 'rxjs'
 import { VideosOverview as VideosOverviewServer, peertubeTranslate } from '../../../../../shared/models'
@@ -21,9 +21,12 @@ export class OverviewService {
    private serverService: ServerService
  ) {}
-  getVideosOverview (): Observable<VideosOverview> {
+  getVideosOverview (page: number): Observable<VideosOverview> {
+    let params = new HttpParams()
+    params = params.append('page', page + '')
    return this.authHttp
-               .get<VideosOverviewServer>(OverviewService.BASE_OVERVIEW_URL + 'videos')
+               .get<VideosOverviewServer>(OverviewService.BASE_OVERVIEW_URL + 'videos', { params })
               .pipe(
                 switchMap(serverVideosOverview => this.updateVideosOverview(serverVideosOverview)),
                 catchError(err => this.restExtractor.handleError(err))
diff --git a/client/src/app/shared/renderer/html-renderer.service.ts b/client/src/app/shared/renderer/html-renderer.service.ts
index 94a8aa4c6..1ddd8fe2f 100644
--- a/client/src/app/shared/renderer/html-renderer.service.ts
+++ b/client/src/app/shared/renderer/html-renderer.service.ts
@@ -19,15 +19,18 @@ export class HtmlRendererService {
      allowedTags: [ 'a', 'p', 'span', 'br', 'strong', 'em', 'ul', 'ol', 'li' ],
      allowedSchemes: [ 'http', 'https' ],
      allowedAttributes: {
-        'a': [ 'href', 'class', 'target' ]
+        'a': [ 'href', 'class', 'target', 'rel' ]
      },
      transformTags: {
        a: (tagName, attribs) => {
+          let rel = 'noopener noreferrer'
+          if (attribs.rel === 'me') rel += ' me'
          return {
            tagName,
            attribs: Object.assign(attribs, {
              target: '_blank',
-              rel: 'noopener noreferrer'
+              rel
            })
          }
        }
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
index 0d3fde537..f0c87326f 100644
--- a/client/src/app/shared/renderer/markdown.service.ts
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
-import { MarkdownIt } from 'markdown-it'
 import { buildVideoLink } from '../../../assets/player/utils'
 import { HtmlRendererService } from '@app/shared/renderer/html-renderer.service'
+import * as MarkdownIt from 'markdown-it'
 type MarkdownParsers = {
  textMarkdownIt: MarkdownIt
@@ -100,7 +100,7 @@ export class MarkdownService {
  }
  private async createMarkdownIt (config: MarkdownConfig) {
-    // FIXME: import('...') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    // FIXME: import('...') returns a struct module, containing a "default" field
    const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
    const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true, html: config.html })
diff --git a/client/src/app/shared/rest/rest-table.ts b/client/src/app/shared/rest/rest-table.ts
index c180346af..d4e6cf5f2 100644
--- a/client/src/app/shared/rest/rest-table.ts
+++ b/client/src/app/shared/rest/rest-table.ts
@@ -1,6 +1,5 @@
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
-import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent'
+import { LazyLoadEvent, SortMeta } from 'primeng/api'
-import { SortMeta } from 'primeng/components/common/sortmeta'
 import { RestPagination } from './rest-pagination'
 import { Subject } from 'rxjs'
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,13 +7,17 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 export abstract class RestTable {
  abstract totalRecords: number
-  abstract rowsPerPage: number
  abstract sort: SortMeta
  abstract pagination: RestPagination
-  protected search: string
+  search: string
+  rowsPerPageOptions = [ 10, 20, 50, 100 ]
+  rowsPerPage = this.rowsPerPageOptions[0]
+  expandedRows = {}
  private searchStream: Subject<string>
-  private sortLocalStorageKey = 'rest-table-sort-' + this.constructor.name
+  abstract getIdentifier (): string
  initialize () {
    this.loadSort()
@@ -22,13 +25,13 @@ export abstract class RestTable {
  }
  loadSort () {
-    const result = peertubeLocalStorage.getItem(this.sortLocalStorageKey)
+    const result = peertubeLocalStorage.getItem(this.getSortLocalStorageKey())
    if (result) {
      try {
        this.sort = JSON.parse(result)
      } catch (err) {
-        console.error('Cannot load sort of local storage key ' + this.sortLocalStorageKey, err)
+        console.error('Cannot load sort of local storage key ' + this.getSortLocalStorageKey(), err)
      }
    }
  }
@@ -49,7 +52,7 @@ export abstract class RestTable {
  }
  saveSort () {
-    peertubeLocalStorage.setItem(this.sortLocalStorageKey, JSON.stringify(this.sort))
+    peertubeLocalStorage.setItem(this.getSortLocalStorageKey(), JSON.stringify(this.sort))
  }
  initSearch () {
@@ -66,9 +69,37 @@ export abstract class RestTable {
      })
  }
-  onSearch (search: string) {
+  onSearch (event: Event) {
-    this.searchStream.next(search)
+    const target = event.target as HTMLInputElement
+    this.searchStream.next(target.value)
+  }
+  onPage (event: { first: number, rows: number }) {
+    if (this.rowsPerPage !== event.rows) {
+      this.rowsPerPage = event.rows
+      this.pagination = {
+        start: event.first,
+        count: this.rowsPerPage
+      }
+      this.loadData()
+    }
+    this.expandedRows = {}
+  }
+  setTableFilter (filter: string) {
+    // FIXME: cannot use ViewChild, so create a component for the filter input
+    const filterInput = document.getElementById('table-filter') as HTMLInputElement
+    if (filterInput) filterInput.value = filter
+  }
+  resetSearch () {
+    this.searchStream.next('')
+    this.setTableFilter('')
  }
  protected abstract loadData (): void
+  private getSortLocalStorageKey () {
+    return 'rest-table-sort-' + this.getIdentifier()
+  }
 }
diff --git a/client/src/app/shared/rest/rest.service.ts b/client/src/app/shared/rest/rest.service.ts
index 16bb6d82c..cd6db1f3c 100644
--- a/client/src/app/shared/rest/rest.service.ts
+++ b/client/src/app/shared/rest/rest.service.ts
@@ -1,10 +1,21 @@
-import { Injectable } from '@angular/core'
+import { SortMeta } from 'primeng/api'
 import { HttpParams } from '@angular/common/http'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { Injectable } from '@angular/core'
-import { ComponentPagination, ComponentPaginationLight } from './component-pagination.model'
+import { ComponentPaginationLight } from './component-pagination.model'
 import { RestPagination } from './rest-pagination'
+interface QueryStringFilterPrefixes {
+  [key: string]: {
+    prefix: string
+    handler?: (v: string) => string | number
+    multiple?: boolean
+  }
+}
+type ParseQueryStringFilterResult = {
+  [key: string]: string | number | (string | number)[]
+}
 @Injectable()
 export class RestService {
@@ -53,4 +64,48 @@ export class RestService {
    return { start, count }
  }
+  parseQueryStringFilter (q: string, prefixes: QueryStringFilterPrefixes): ParseQueryStringFilterResult {
+    if (!q) return {}
+    // Tokenize the strings using spaces
+    const tokens = q.split(' ').filter(token => !!token)
+    // Build prefix array
+    const prefixeStrings = Object.values(prefixes)
+                           .map(p => p.prefix)
+    // Search is the querystring minus defined filters
+    const searchTokens = tokens.filter(t => {
+      return prefixeStrings.every(prefixString => t.startsWith(prefixString) === false)
+    })
+    const additionalFilters: ParseQueryStringFilterResult = {}
+    for (const prefixKey of Object.keys(prefixes)) {
+      const prefixObj = prefixes[prefixKey]
+      const prefix = prefixObj.prefix
+      const matchedTokens = tokens.filter(t => t.startsWith(prefix))
+                                  .map(t => t.slice(prefix.length)) // Keep the value filter
+                                  .map(t => {
+                                    if (prefixObj.handler) return prefixObj.handler(t)
+                                    return t
+                                  })
+                                  .filter(t => !!t)
+      if (matchedTokens.length === 0) continue
+      additionalFilters[prefixKey] = prefixObj.multiple === true
+        ? matchedTokens
+        : matchedTokens[0]
+    }
+    return {
+      search: searchTokens.join(' '),
+      ...additionalFilters
+    }
+  }
 }
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index b2eb13f73..01735c187 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -5,9 +5,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
 import { HelpComponent } from '@app/shared/misc/help.component'
+import { ListOverflowComponent } from '@app/shared/misc/list-overflow.component'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
 import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
-import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
+import { SharedModule as PrimeSharedModule } from 'primeng/api'
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
 import { ButtonComponent } from './buttons/button.component'
 import { DeleteButtonComponent } from './buttons/delete-button.component'
@@ -46,6 +47,7 @@ import {
 import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar'
 import { InputMaskModule } from 'primeng/inputmask'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { LocalStorageService, SessionStorageService } from '@app/shared/misc/storage.service'
 import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validators/video-captions-validators.service'
 import { VideoCaptionService } from '@app/shared/video-caption'
 import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.component'
@@ -56,7 +58,7 @@ import {
  NgbDropdownModule,
  NgbModalModule,
  NgbPopoverModule,
-  NgbTabsetModule,
+  NgbNavModule,
  NgbTooltipModule
 } from '@ng-bootstrap/ng-bootstrap'
 import { RemoteSubscribeComponent, SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription'
@@ -88,16 +90,24 @@ import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe'
 import { VideoDurationPipe } from '@app/shared/angular/video-duration-formatter.pipe'
 import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe'
 import { FromNowPipe } from '@app/shared/angular/from-now.pipe'
+import { HighlightPipe } from '@app/shared/angular/highlight.pipe'
 import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
 import { VideoActionsDropdownComponent } from '@app/shared/video/video-actions-dropdown.component'
 import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklist.component'
 import { VideoDownloadComponent } from '@app/shared/video/modals/video-download.component'
 import { VideoReportComponent } from '@app/shared/video/modals/video-report.component'
-import { ClipboardModule } from 'ngx-clipboard'
 import { FollowService } from '@app/shared/instance/follow.service'
 import { MultiSelectModule } from 'primeng/multiselect'
 import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.component'
 import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-copy.component'
+import { RedundancyService } from '@app/shared/video/redundancy.service'
+import { ClipboardModule } from '@angular/cdk/clipboard'
+import { InputSwitchModule } from 'primeng/inputswitch'
+import { MyAccountVideoSettingsComponent } from '@app/+my-account/my-account-settings/my-account-video-settings'
+import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account-settings/my-account-interface'
+import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-info.component'
+import { BatchDomainsValidatorsService } from '@app/+admin/config/shared/batch-domains-validators.service'
 @NgModule({
  imports: [
@@ -110,7 +120,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    NgbDropdownModule,
    NgbModalModule,
    NgbPopoverModule,
-    NgbTabsetModule,
+    NgbNavModule,
    NgbTooltipModule,
    NgbCollapseModule,
@@ -119,7 +129,8 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    PrimeSharedModule,
    InputMaskModule,
    NgPipesModule,
-    MultiSelectModule
+    MultiSelectModule,
+    InputSwitchModule
  ],
  declarations: [
@@ -147,6 +158,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    NumberFormatterPipe,
    ObjectLengthPipe,
    FromNowPipe,
+    HighlightPipe,
    PeerTubeTemplateDirective,
    VideoDurationPipe,
@@ -155,6 +167,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    InfiniteScrollerDirective,
    TextareaAutoResizeDirective,
    HelpComponent,
+    ListOverflowComponent,
    ReactiveFileComponent,
    PeertubeCheckboxComponent,
@@ -175,7 +188,11 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    DateToggleComponent,
    GlobalIconComponent,
-    PreviewUploadComponent
+    PreviewUploadComponent,
+    MyAccountVideoSettingsComponent,
+    MyAccountInterfaceSettingsComponent,
+    ActorAvatarInfoComponent
  ],
  exports: [
@@ -188,7 +205,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    NgbDropdownModule,
    NgbModalModule,
    NgbPopoverModule,
-    NgbTabsetModule,
+    NgbNavModule,
    NgbTooltipModule,
    NgbCollapseModule,
@@ -226,6 +243,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    InfiniteScrollerDirective,
    TextareaAutoResizeDirective,
    HelpComponent,
+    ListOverflowComponent,
    InputReadonlyCopyComponent,
    ReactiveFileComponent,
@@ -250,8 +268,13 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    NumberFormatterPipe,
    ObjectLengthPipe,
    FromNowPipe,
+    HighlightPipe,
    PeerTubeTemplateDirective,
-    VideoDurationPipe
+    VideoDurationPipe,
+    MyAccountVideoSettingsComponent,
+    MyAccountInterfaceSettingsComponent,
+    ActorAvatarInfoComponent
  ],
  providers: [
@@ -275,6 +298,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    LoginValidatorsService,
    ResetPasswordValidatorsService,
    UserValidatorsService,
+    BatchDomainsValidatorsService,
    VideoPlaylistValidatorsService,
    VideoAbuseValidatorsService,
    VideoChannelValidatorsService,
@@ -296,10 +320,12 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    I18nPrimengCalendarService,
    ScreenService,
+    LocalStorageService, SessionStorageService,
    UserNotificationService,
    FollowService,
+    RedundancyService,
    I18n
  ]
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.html b/client/src/app/shared/user-subscription/subscribe-button.component.html
index f08c88f3c..85b3d1fdb 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -55,7 +55,7 @@
      </button>
      <button class="dropdown-item dropdown-item-neutral" i18n>Subscribe with a Mastodon account:</button>
-      <my-remote-subscribe showHelp="true" [uri]="uri"></my-remote-subscribe>
+      <my-remote-subscribe [showHelp]="true" [uri]="uri"></my-remote-subscribe>
      <div class="dropdown-divider"></div>
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss
index 114a12f06..b739c5ae2 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@@ -13,9 +13,17 @@
    font-size: 15px;
  }
+  &:not(.big) {
+    white-space: nowrap;
+  }
  &.big {
    height: 35px;
+    & > button:first-child {
+      width: 175px;
+    }
    button .extra-text {
      span:first-child {
        line-height: 80%;
@@ -80,10 +88,6 @@
    }
  }
-  .dropdown-header {
-    padding-left: 1rem;
-  }
  ::ng-deep form {
    padding: 0.25rem 1rem;
  }
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 7707d7dda..3348fe75f 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -1,10 +1,32 @@
-import { hasUserRight, User as UserServerModel, UserNotificationSetting, UserRight, UserRole, VideoChannel } from '../../../../../shared'
+import {
+  hasUserRight,
+  User as UserServerModel,
+  UserNotificationSetting,
+  UserRight,
+  UserRole
+} from '../../../../../shared/models/users'
+import { VideoChannel } from '../../../../../shared/models/videos'
 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'
 import { UserAdminFlag } from '@shared/models/users/user-flag.model'
 export class User implements UserServerModel {
+  static KEYS = {
+    ID: 'id',
+    ROLE: 'role',
+    EMAIL: 'email',
+    VIDEOS_HISTORY_ENABLED: 'videos-history-enabled',
+    USERNAME: 'username',
+    NSFW_POLICY: 'nsfw_policy',
+    WEBTORRENT_ENABLED: 'peertube-videojs-' + 'webtorrent_enabled',
+    AUTO_PLAY_VIDEO: 'auto_play_video',
+    SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO: 'auto_play_next_video',
+    AUTO_PLAY_VIDEO_PLAYLIST: 'auto_play_video_playlist',
+    THEME: 'last_active_theme',
+    VIDEO_LANGUAGES: 'video_languages'
+  }
  id: number
  username: string
  email: string
@@ -29,6 +51,11 @@ export class User implements UserServerModel {
  videoQuotaDaily: number
  videoQuotaUsed?: number
  videoQuotaUsedDaily?: number
+  videosCount?: number
+  videoAbusesCount?: number
+  videoAbusesAcceptedCount?: number
+  videoAbusesCreatedCount?: number
+  videoCommentsCount?: number
  theme: string
@@ -42,6 +69,10 @@ export class User implements UserServerModel {
  noInstanceConfigWarningModal: boolean
  noWelcomeModal: boolean
+  pluginAuth: string | null
+  lastLoginDate: Date | null
  createdAt: Date
  constructor (hash: Partial<UserServerModel>) {
@@ -57,11 +88,19 @@ export class User implements UserServerModel {
    this.videoQuotaDaily = hash.videoQuotaDaily
    this.videoQuotaUsed = hash.videoQuotaUsed
    this.videoQuotaUsedDaily = hash.videoQuotaUsedDaily
+    this.videosCount = hash.videosCount
+    this.videoAbusesCount = hash.videoAbusesCount
+    this.videoAbusesAcceptedCount = hash.videoAbusesAcceptedCount
+    this.videoAbusesCreatedCount = hash.videoAbusesCreatedCount
+    this.videoCommentsCount = hash.videoCommentsCount
    this.nsfwPolicy = hash.nsfwPolicy
    this.webTorrentEnabled = hash.webTorrentEnabled
-    this.videosHistoryEnabled = hash.videosHistoryEnabled
    this.autoPlayVideo = hash.autoPlayVideo
+    this.autoPlayNextVideo = hash.autoPlayNextVideo
+    this.autoPlayNextVideoPlaylist = hash.autoPlayNextVideoPlaylist
+    this.videosHistoryEnabled = hash.videosHistoryEnabled
+    this.videoLanguages = hash.videoLanguages
    this.theme = hash.theme
@@ -77,6 +116,9 @@ export class User implements UserServerModel {
    this.createdAt = hash.createdAt
+    this.pluginAuth = hash.pluginAuth
+    this.lastLoginDate = hash.lastLoginDate
    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 e24d91df3..abb4088b5 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -1,8 +1,8 @@
-import { from, Observable, of } from 'rxjs'
+import { from, Observable } from 'rxjs'
-import { catchError, concatMap, map, share, shareReplay, tap, toArray } from 'rxjs/operators'
+import { catchError, concatMap, map, shareReplay, 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'
+import { ResultList, User as UserServerModel, UserCreate, UserRole, UserUpdate, UserUpdateMe, UserVideoQuota } from '../../../../../shared'
 import { environment } from '../../../environments/environment'
 import { RestExtractor, RestPagination, RestService } from '../rest'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
@@ -10,6 +10,10 @@ import { SortMeta } from 'primeng/api'
 import { BytesPipe } from 'ngx-pipes'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserRegister } from '@shared/models/users/user-register.model'
+import { User } from './user.model'
+import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
+import { has } from 'lodash-es'
+import { LocalStorageService, SessionStorageService } from '../misc/storage.service'
 @Injectable()
 export class UserService {
@@ -17,12 +21,14 @@ export class UserService {
  private bytesPipe = new BytesPipe()
-  private userCache: { [ id: number ]: Observable<User> } = {}
+  private userCache: { [ id: number ]: Observable<UserServerModel> } = {}
  constructor (
    private authHttp: HttpClient,
    private restExtractor: RestExtractor,
    private restService: RestService,
+    private localStorageService: LocalStorageService,
+    private sessionStorageService: SessionStorageService,
    private i18n: I18n
  ) { }
@@ -64,6 +70,30 @@ export class UserService {
               )
  }
+  updateMyAnonymousProfile (profile: UserUpdateMe) {
+    const supportedKeys = {
+      // local storage keys
+      nsfwPolicy: (val: NSFWPolicyType) => this.localStorageService.setItem(User.KEYS.NSFW_POLICY, val),
+      webTorrentEnabled: (val: boolean) => this.localStorageService.setItem(User.KEYS.WEBTORRENT_ENABLED, String(val)),
+      autoPlayVideo: (val: boolean) => this.localStorageService.setItem(User.KEYS.AUTO_PLAY_VIDEO, String(val)),
+      autoPlayNextVideoPlaylist: (val: boolean) => this.localStorageService.setItem(User.KEYS.AUTO_PLAY_VIDEO_PLAYLIST, String(val)),
+      theme: (val: string) => this.localStorageService.setItem(User.KEYS.THEME, val),
+      videoLanguages: (val: string[]) => this.localStorageService.setItem(User.KEYS.VIDEO_LANGUAGES, JSON.stringify(val)),
+      // session storage keys
+      autoPlayNextVideo: (val: boolean) =>
+        this.sessionStorageService.setItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, String(val))
+    }
+    for (const key of Object.keys(profile)) {
+      try {
+        if (has(supportedKeys, key)) supportedKeys[key](profile[key])
+      } catch (err) {
+        console.error(`Cannot set item ${key} in localStorage. Likely due to a value impossible to stringify.`, err)
+      }
+    }
+  }
  deleteMe () {
    const url = UserService.BASE_USERS_URL + 'me'
@@ -187,7 +217,7 @@ export class UserService {
               )
  }
-  updateUsers (users: User[], userUpdate: UserUpdate) {
+  updateUsers (users: UserServerModel[], userUpdate: UserUpdate) {
    return from(users)
      .pipe(
        concatMap(u => this.authHttp.put(UserService.BASE_USERS_URL + u.id, userUpdate)),
@@ -204,18 +234,44 @@ export class UserService {
    return this.userCache[userId]
  }
-  getUser (userId: number) {
+  getUser (userId: number, withStats = false) {
-    return this.authHttp.get<User>(UserService.BASE_USERS_URL + userId)
+    const params = new HttpParams().append('withStats', withStats + '')
+    return this.authHttp.get<UserServerModel>(UserService.BASE_USERS_URL + userId, { params })
               .pipe(catchError(err => this.restExtractor.handleError(err)))
  }
-  getUsers (pagination: RestPagination, sort: SortMeta, search?: string): Observable<ResultList<User>> {
+  getAnonymousUser () {
+    let videoLanguages
+    try {
+      videoLanguages = JSON.parse(this.localStorageService.getItem(User.KEYS.VIDEO_LANGUAGES))
+    } catch (err) {
+      videoLanguages = null
+      console.error('Cannot parse desired video languages from localStorage.', err)
+    }
+    return new User({
+      // local storage keys
+      nsfwPolicy: this.localStorageService.getItem(User.KEYS.NSFW_POLICY) as NSFWPolicyType,
+      webTorrentEnabled: this.localStorageService.getItem(User.KEYS.WEBTORRENT_ENABLED) !== 'false',
+      theme: this.localStorageService.getItem(User.KEYS.THEME) || 'default',
+      videoLanguages,
+      autoPlayNextVideoPlaylist: this.localStorageService.getItem(User.KEYS.AUTO_PLAY_VIDEO_PLAYLIST) !== 'false',
+      autoPlayVideo: this.localStorageService.getItem(User.KEYS.AUTO_PLAY_VIDEO) === 'true',
+      // session storage keys
+      autoPlayNextVideo: this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
+    })
+  }
+  getUsers (pagination: RestPagination, sort: SortMeta, search?: string): Observable<ResultList<UserServerModel>> {
    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 })
+    return this.authHttp.get<ResultList<UserServerModel>>(UserService.BASE_USERS_URL, { params })
               .pipe(
                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
                 map(res => this.restExtractor.applyToResultListData(res, this.formatUser.bind(this))),
@@ -223,7 +279,7 @@ export class UserService {
               )
  }
-  removeUser (usersArg: User | User[]) {
+  removeUser (usersArg: UserServerModel | UserServerModel[]) {
    const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
    return from(users)
@@ -234,7 +290,7 @@ export class UserService {
      )
  }
-  banUsers (usersArg: User | User[], reason?: string) {
+  banUsers (usersArg: UserServerModel | UserServerModel[], reason?: string) {
    const body = reason ? { reason } : {}
    const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
@@ -246,7 +302,7 @@ export class UserService {
      )
  }
-  unbanUsers (usersArg: User | User[]) {
+  unbanUsers (usersArg: UserServerModel | UserServerModel[]) {
    const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
    return from(users)
@@ -257,7 +313,7 @@ export class UserService {
      )
  }
-  private formatUser (user: User) {
+  private formatUser (user: UserServerModel) {
    let videoQuota
    if (user.videoQuota === -1) {
      videoQuota = this.i18n('Unlimited')
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 b0b59ea0c..700a30239 100644
--- a/client/src/app/shared/video-abuse/video-abuse.service.ts
+++ b/client/src/app/shared/video-abuse/video-abuse.service.ts
@@ -1,9 +1,9 @@
 import { catchError, map } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { Observable } from 'rxjs'
-import { ResultList, VideoAbuse, VideoAbuseUpdate } from '../../../../../shared'
+import { ResultList, VideoAbuse, VideoAbuseUpdate, VideoAbuseState } from '../../../../../shared'
 import { environment } from '../../../environments/environment'
 import { RestExtractor, RestPagination, RestService } from '../rest'
@@ -17,15 +17,48 @@ export class VideoAbuseService {
    private restExtractor: RestExtractor
  ) {}
-  getVideoAbuses (pagination: RestPagination, sort: SortMeta): Observable<ResultList<VideoAbuse>> {
+  getVideoAbuses (options: {
+    pagination: RestPagination,
+    sort: SortMeta,
+    search?: string
+  }): Observable<ResultList<VideoAbuse>> {
+    const { pagination, sort, search } = options
    const url = VideoAbuseService.BASE_VIDEO_ABUSE_URL + 'abuse'
    let params = new HttpParams()
    params = this.restService.addRestGetParams(params, pagination, sort)
+    if (search) {
+      const filters = this.restService.parseQueryStringFilter(search, {
+        id: { prefix: '#' },
+        state: {
+          prefix: 'state:',
+          handler: v => {
+            if (v === 'accepted') return VideoAbuseState.ACCEPTED
+            if (v === 'pending') return VideoAbuseState.PENDING
+            if (v === 'rejected') return VideoAbuseState.REJECTED
+            return undefined
+          }
+        },
+        videoIs: {
+          prefix: 'videoIs:',
+          handler: v => {
+            if (v === 'deleted') return v
+            if (v === 'blacklisted') return v
+            return undefined
+          }
+        },
+        searchReporter: { prefix: 'reporter:' },
+        searchReportee: { prefix: 'reportee:' }
+      })
+      params = this.restService.addObjectParams(params, filters)
+    }
    return this.authHttp.get<ResultList<VideoAbuse>>(url, { params })
               .pipe(
-                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
                 catchError(res => this.restExtractor.handleError(res))
               )
  }
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 491fa698b..c0e13a651 100644
--- a/client/src/app/shared/video-blacklist/video-blacklist.service.ts
+++ b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
@@ -1,7 +1,7 @@
 import { catchError, map, concatMap, toArray } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { from as observableFrom, Observable } from 'rxjs'
 import { VideoBlacklist, VideoBlacklistType, ResultList } from '../../../../../shared'
 import { Video } from '../video/video.model'
@@ -19,13 +19,19 @@ export class VideoBlacklistService {
    private restExtractor: RestExtractor
  ) {}
-  listBlacklist (pagination: RestPagination, sort: SortMeta, type?: VideoBlacklistType): Observable<ResultList<VideoBlacklist>> {
+  listBlacklist (options: {
+    pagination: RestPagination,
+    sort: SortMeta,
+    search?: string
+    type?: VideoBlacklistType
+  }): Observable<ResultList<VideoBlacklist>> {
+    const { pagination, sort, search, type } = options
    let params = new HttpParams()
    params = this.restService.addRestGetParams(params, pagination, sort)
-    if (type) {
+    if (search) params = params.append('search', search)
-      params = params.set('type', type.toString())
+    if (type) params = params.append('type', type.toString())
-    }
    return this.authHttp.get<ResultList<VideoBlacklist>>(VideoBlacklistService.BASE_VIDEOS_URL + 'blacklist', { params })
               .pipe(
diff --git a/client/src/app/shared/video-channel/video-channel.model.ts b/client/src/app/shared/video-channel/video-channel.model.ts
index 309b614ae..617d6d44d 100644
--- a/client/src/app/shared/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/video-channel/video-channel.model.ts
@@ -1,4 +1,4 @@
-import { VideoChannel as ServerVideoChannel } from '../../../../../shared/models/videos'
+import { VideoChannel as ServerVideoChannel, ViewsPerDate } from '../../../../../shared/models/videos'
 import { Actor } from '../actor/actor.model'
 import { Account } from '../../../../../shared/models/actors'
@@ -8,9 +8,11 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
  support: string
  isLocal: boolean
  nameWithHost: string
+  nameWithHostForced: string
  ownerAccount?: Account
  ownerBy?: string
  ownerAvatarUrl?: string
+  viewsPerDay?: ViewsPerDate[]
  constructor (hash: ServerVideoChannel) {
    super(hash)
@@ -20,6 +22,11 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
    this.support = hash.support
    this.isLocal = hash.isLocal
    this.nameWithHost = Actor.CREATE_BY_STRING(this.name, this.host)
+    this.nameWithHostForced = Actor.CREATE_BY_STRING(this.name, this.host, true)
+    if (hash.viewsPerDay) {
+      this.viewsPerDay = hash.viewsPerDay.map(v => ({ ...v, date: new Date(v.date) }))
+    }
    if (hash.ownerAccount) {
      this.ownerAccount = hash.ownerAccount
diff --git a/client/src/app/shared/video-channel/video-channel.service.ts b/client/src/app/shared/video-channel/video-channel.service.ts
index adb4f4819..0e036bda7 100644
--- a/client/src/app/shared/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/video-channel/video-channel.service.ts
@@ -44,13 +44,18 @@ export class VideoChannelService {
               )
  }
-  listAccountVideoChannels (account: Account, componentPagination?: ComponentPaginationLight): Observable<ResultList<VideoChannel>> {
+  listAccountVideoChannels (
+    account: Account,
+    componentPagination?: ComponentPaginationLight,
+    withStats = false
+  ): Observable<ResultList<VideoChannel>> {
    const pagination = componentPagination
      ? this.restService.componentPaginationToRestPagination(componentPagination)
      : { start: 0, count: 20 }
    let params = new HttpParams()
    params = this.restService.addRestGetParams(params, pagination)
+    params = params.set('withStats', withStats + '')
    const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-channels'
    return this.authHttp.get<ResultList<VideoChannelServer>>(url, { params })
diff --git a/client/src/app/shared/video-import/video-import.service.ts b/client/src/app/shared/video-import/video-import.service.ts
index 3e3fb7dfb..afd9e3fb5 100644
--- a/client/src/app/shared/video-import/video-import.service.ts
+++ b/client/src/app/shared/video-import/video-import.service.ts
@@ -9,7 +9,7 @@ import { VideoImportCreate, VideoUpdate } from '../../../../../shared/models/vid
 import { objectToFormData } from '@app/shared/misc/utils'
 import { ResultList } from '../../../../../shared/models/result-list.model'
 import { UserService } from '@app/shared/users/user.service'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { RestPagination } from '@app/shared/rest'
 import { ServerService } from '@app/core'
diff --git a/client/src/app/shared/video-ownership/video-ownership.service.ts b/client/src/app/shared/video-ownership/video-ownership.service.ts
index aa9e4839a..b95d5b792 100644
--- a/client/src/app/shared/video-ownership/video-ownership.service.ts
+++ b/client/src/app/shared/video-ownership/video-ownership.service.ts
@@ -5,7 +5,7 @@ import { environment } from '../../../environments/environment'
 import { RestExtractor, RestService } from '../rest'
 import { VideoChangeOwnershipCreate } from '../../../../../shared/models/videos'
 import { Observable } from 'rxjs/index'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { ResultList, VideoChangeOwnership } from '../../../../../shared'
 import { RestPagination } from '@app/shared/rest'
 import { VideoChangeOwnershipAccept } from '../../../../../shared/models/videos/video-change-ownership-accept.model'
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
index 6e0989227..58108584b 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -62,7 +62,7 @@
  <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
    <my-global-icon iconName="add"></my-global-icon>
-    Create a private playlist
+    <span i18n>Create a private playlist</span>
  </div>
  <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index f1b6cd601..1724449e8 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -4,7 +4,7 @@
 .header,
 .dropdown-item,
 .input-container {
-  padding: 6px 24px 10px 24px;
+  padding: 8px 24px;
 }
 .header {
@@ -54,11 +54,12 @@
 }
 .playlist {
-  display: flex;
+  display: inline-flex;
  cursor: pointer;
  my-peertube-checkbox {
    margin-right: 10px;
+    align-self: center;
  }
  .display-name {
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
index 4864581b5..a2c0724cd 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -18,7 +18,7 @@ import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-
  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class VideoPlaylistElementMiniatureComponent implements OnInit {
-  @ViewChild('moreDropdown', { static: false }) moreDropdown: NgbDropdown
+  @ViewChild('moreDropdown') moreDropdown: NgbDropdown
  @Input() playlist: VideoPlaylist
  @Input() playlistElement: VideoPlaylistElement
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 3c7a4b1fc..44b629542 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -15,6 +15,11 @@
      top: 1px;
      margin-left: 5px;
      width: max-content;
+      opacity: 0;
+      transition: ease-in .2s opacity;
+    }
+    &:hover my-feed {
+      opacity: 1;
    }
  }
@@ -50,3 +55,15 @@
  @include adapt-margin-content-width;
 }
+@media screen and (max-width: $mobile-view) {
+  .videos-header {
+    flex-direction: column;
+    align-items: center;
+    height: auto;
+    .title-page {
+      margin-bottom: 10px;
+      margin-right: 0px;
+    }
+  }
+}
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index c2fe6f754..b146d7014 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -1,4 +1,4 @@
-import { debounceTime, first, tap } from 'rxjs/operators'
+import { debounceTime, first, tap, throttleTime } from 'rxjs/operators'
 import { OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { fromEvent, Observable, of, Subject, Subscription } from 'rxjs'
@@ -14,6 +14,9 @@ import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { isLastMonth, isLastWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date'
 import { ServerConfig } from '@shared/models'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
+import { UserService, User } from '../users'
+import { LocalStorageService } from '../misc/storage.service'
 enum GroupDate {
  UNKNOWN = 0,
@@ -61,7 +64,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
  actions: {
    routerLink: string
-    iconName: string
+    iconName: GlobalIconName
    label: string
  }[] = []
@@ -71,9 +74,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
  protected abstract notifier: Notifier
  protected abstract authService: AuthService
+  protected abstract userService: UserService
  protected abstract route: ActivatedRoute
  protected abstract serverService: ServerService
  protected abstract screenService: ScreenService
+  protected abstract storageService: LocalStorageService
  protected abstract router: Router
  protected abstract i18n: I18n
  abstract titlePage: string
@@ -123,6 +128,16 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
    if (this.loadOnInit === true) {
      loadUserObservable.subscribe(() => this.loadMoreVideos())
    }
+    this.storageService.watch([
+      User.KEYS.NSFW_POLICY,
+      User.KEYS.VIDEO_LANGUAGES
+    ]).pipe(throttleTime(200)).subscribe(
+      () => {
+        this.loadUserVideoLanguagesIfNeeded()
+        if (this.hasDoneFirstQuery) this.reloadVideos()
+      }
+    )
  }
  ngOnDestroy () {
@@ -278,7 +293,12 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
  }
  private loadUserVideoLanguagesIfNeeded () {
-    if (!this.authService.isLoggedIn() || !this.useUserVideoLanguagePreferences) {
+    if (!this.useUserVideoLanguagePreferences) {
+      return of(true)
+    }
+    if (!this.authService.isLoggedIn()) {
+      this.languageOneOf = this.userService.getAnonymousUser().videoLanguages
      return of(true)
    }
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts
index 9f613c5fa..f09c3d1fc 100644
--- a/client/src/app/shared/video/infinite-scroller.directive.ts
+++ b/client/src/app/shared/video/infinite-scroller.directive.ts
@@ -1,4 +1,4 @@
-import { distinctUntilChanged, filter, map, share, startWith, tap, throttleTime } from 'rxjs/operators'
+import { distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators'
 import { AfterContentChecked, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
 import { fromEvent, Observable, Subscription } from 'rxjs'
@@ -53,7 +53,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterConten
    const scrollableElement = this.onItself ? this.container : window
    const scrollObservable = fromEvent(scrollableElement, 'scroll')
      .pipe(
-        startWith(null as string), // FIXME: typings
+        startWith(true),
        throttleTime(200, undefined, throttleOptions),
        map(() => this.getScrollInfo()),
        distinctUntilChanged((o1, o2) => o1.current === o2.current),
diff --git a/client/src/app/shared/video/modals/video-blacklist.component.html b/client/src/app/shared/video/modals/video-blacklist.component.html
index 1a87bdcd4..8f06a6b02 100644
--- a/client/src/app/shared/video/modals/video-blacklist.component.html
+++ b/client/src/app/shared/video/modals/video-blacklist.component.html
@@ -8,8 +8,10 @@
    <form novalidate [formGroup]="form" (ngSubmit)="blacklist()">
      <div class="form-group">
-        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
+        <textarea
-        </textarea>
+          i18n-placeholder placeholder="Reason..." formControlName="reason"
+          [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+        ></textarea>
        <div *ngIf="formErrors.reason" class="form-error">
          {{ formErrors.reason }}
        </div>
@@ -18,14 +20,19 @@
      <div class="form-group" *ngIf="video.isLocal">
        <my-peertube-checkbox
          inputName="unfederate" formControlName="unfederate"
-          i18n-labelText labelText="Unfederate the video (ask for its deletion from the remote instances)"
+          i18n-labelText labelText="Unfederate the video"
-        ></my-peertube-checkbox>
+        >
+          <ng-container ngProjectAs="description">
+            <span i18n>This will ask remote instances to delete it</span>
+          </ng-container>
+        </my-peertube-checkbox>
      </div>
      <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">
+        <input
-          Cancel
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-        </span>
+          (click)="hide()" (key.enter)="hide()"
+        >
        <input
          type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/shared/video/modals/video-blacklist.component.ts b/client/src/app/shared/video/modals/video-blacklist.component.ts
index f0c70a365..6ef9c250b 100644
--- a/client/src/app/shared/video/modals/video-blacklist.component.ts
+++ b/client/src/app/shared/video/modals/video-blacklist.component.ts
@@ -1,12 +1,12 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier, RedirectService } from '@app/core'
 import { VideoBlacklistService } from '../../../shared/video-blacklist'
-import { VideoDetails } from '../../../shared/video/video-details.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { FormReactive, VideoBlacklistValidatorsService } from '@app/shared/forms'
+import { Video } from '@app/shared/video/video.model'
 @Component({
  selector: 'my-video-blacklist',
@@ -14,7 +14,7 @@ import { FormReactive, VideoBlacklistValidatorsService } from '@app/shared/forms
  styleUrls: [ './video-blacklist.component.scss' ]
 })
 export class VideoBlacklistComponent extends FormReactive implements OnInit {
-  @Input() video: VideoDetails = null
+  @Input() video: Video = null
  @ViewChild('modal', { static: true }) modal: NgbModal
@@ -46,7 +46,7 @@ export class VideoBlacklistComponent extends FormReactive implements OnInit {
  }
  show () {
-    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
  }
  hide () {
diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
index 8cca985b1..c65e371ee 100644
--- a/client/src/app/shared/video/modals/video-download.component.html
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal let-hide="close">
  <div class="modal-header">
-    <h4 class="modal-title">Download
+    <h4 class="modal-title">
-      <span *ngIf="!videoCaptions" i18n>video</span>
+      <ng-container i18n>Download</ng-container>
      <div *ngIf="videoCaptions" ngbDropdown class="d-inline-block">
        <span id="dropdownDownloadType" ngbDropdownToggle>
@@ -20,22 +20,67 @@
    <div class="form-group">
      <div class="input-group input-group-sm">
        <div class="input-group-prepend peertube-select-container">
-          <select *ngIf="type === 'video'" [(ngModel)]="resolutionId">
+          <select *ngIf="type === 'video'" [(ngModel)]="resolutionId" (ngModelChange)="onResolutionIdChange()">
            <option *ngFor="let file of getVideoFiles()" [value]="file.resolution.id">{{ file.resolution.label }}</option>
          </select>
          <select *ngIf="type === 'subtitles'" [(ngModel)]="subtitleLanguageId">
            <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
          </select>
        </div>
        <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
        <div class="input-group-append">
-          <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+          <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
            <span class="glyphicon glyphicon-copy"></span>
          </button>
        </div>
      </div>
    </div>
+    <ng-container *ngIf="type === 'video' && videoFile?.metadata">
+      <div ngbNav #nav="ngbNav" class="nav-tabs">
+        <ng-container ngbNavItem>
+          <a ngbNavLink i18n>Format</a>
+          <ng-template ngbNavContent>
+            <div class="file-metadata">
+              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | keyvalue">
+                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              </div>
+            </div>
+          </ng-template>
+        </ng-container>
+        <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
+          <a ngbNavLink i18n>Video stream</a>
+          <ng-template ngbNavContent>
+            <div class="file-metadata">
+              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
+                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              </div>
+            </div>
+          </ng-template>
+        </ng-container>
+        <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
+          <a ngbNavLink i18n>Audio stream</a>
+          <ng-template ngbNavContent>
+            <div class="file-metadata">
+              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue">
+                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              </div>
+            </div>
+          </ng-template>
+        </ng-container>
+      </div>
+      <div [ngbNavOutlet]="nav"></div>
+    </ng-container>
    <div class="download-type" *ngIf="type === 'video'">
      <div class="peertube-radio-container">
        <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
@@ -50,9 +95,10 @@
  </div>
  <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="hide()">
+    <input
-      Cancel
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-    </span>
+      (click)="hide()" (key.enter)="hide()"
+    >
    <input
      type="submit" i18n-value value="Download" class="action-button-submit"
diff --git a/client/src/app/shared/video/modals/video-download.component.scss b/client/src/app/shared/video/modals/video-download.component.scss
index 09dd91aa9..f28bc34ed 100644
--- a/client/src/app/shared/video/modals/video-download.component.scss
+++ b/client/src/app/shared/video/modals/video-download.component.scss
@@ -27,3 +27,38 @@
    margin-right: 30px;
  }
 }
+.file-metadata {
+  padding: 1rem;
+}
+.file-metadata .metadata-attribute {
+  font-size: 13px;
+  display: block;
+  margin-bottom: 12px;
+  .metadata-attribute-label {
+    min-width: 142px;
+    padding-right: 5px;
+    display: inline-block;
+    color: $grey-foreground-color;
+    font-weight: $font-bold;
+  }
+  a.metadata-attribute-value {
+    @include disable-default-a-behaviour;
+    color: var(--mainForegroundColor);
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+  &.metadata-attribute-tags {
+    .metadata-attribute-value:not(:nth-child(2)) {
+      &::before {
+        content: ', '
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/video/modals/video-download.component.ts b/client/src/app/shared/video/modals/video-download.component.ts
index c1ceca263..d77187821 100644
--- a/client/src/app/shared/video/modals/video-download.component.ts
+++ b/client/src/app/shared/video/modals/video-download.component.ts
@@ -3,9 +3,15 @@ import { VideoDetails } from '../../../shared/video/video-details.model'
 import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { AuthService, Notifier } from '@app/core'
-import { VideoPrivacy, VideoCaption } from '@shared/models'
+import { VideoPrivacy, VideoCaption, VideoFile } from '@shared/models'
+import { FfprobeFormat, FfprobeStream } from 'fluent-ffmpeg'
+import { mapValues, pick } from 'lodash-es'
+import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe'
+import { BytesPipe } from 'ngx-pipes'
+import { VideoService } from '../video.service'
 type DownloadType = 'video' | 'subtitles'
+type FileMetadata = { [key: string]: { label: string, value: string }}
 @Component({
  selector: 'my-video-download',
@@ -20,17 +26,28 @@ export class VideoDownloadComponent {
  subtitleLanguageId: string
  video: VideoDetails
+  videoFile: VideoFile
+  videoFileMetadataFormat: FileMetadata
+  videoFileMetadataVideoStream: FileMetadata | undefined
+  videoFileMetadataAudioStream: FileMetadata | undefined
  videoCaptions: VideoCaption[]
  activeModal: NgbActiveModal
  type: DownloadType = 'video'
+  private bytesPipe: BytesPipe
+  private numbersPipe: NumberFormatterPipe
  constructor (
    private notifier: Notifier,
    private modalService: NgbModal,
+    private videoService: VideoService,
    private auth: AuthService,
    private i18n: I18n
-  ) { }
+  ) {
+    this.bytesPipe = new BytesPipe()
+    this.numbersPipe = new NumberFormatterPipe()
+  }
  get typeText () {
    return this.type === 'video'
@@ -48,9 +65,10 @@ export class VideoDownloadComponent {
    this.video = video
    this.videoCaptions = videoCaptions && videoCaptions.length ? videoCaptions : undefined
-    this.activeModal = this.modalService.open(this.modal)
+    this.activeModal = this.modalService.open(this.modal, { centered: true })
    this.resolutionId = this.getVideoFiles()[0].resolution.id
+    this.onResolutionIdChange()
    if (this.videoCaptions) this.subtitleLanguageId = this.videoCaptions[0].language.id
  }
@@ -67,10 +85,27 @@ export class VideoDownloadComponent {
  getLink () {
    return this.type === 'subtitles' && this.videoCaptions
      ? this.getSubtitlesLink()
-      : this.getVideoLink()
+      : this.getVideoFileLink()
  }
-  getVideoLink () {
+  async onResolutionIdChange () {
+    this.videoFile = this.getVideoFile()
+    if (this.videoFile.metadata || !this.videoFile.metadataUrl) return
+    await this.hydrateMetadataFromMetadataUrl(this.videoFile)
+    this.videoFileMetadataFormat = this.videoFile
+      ? this.getMetadataFormat(this.videoFile.metadata.format)
+      : undefined
+    this.videoFileMetadataVideoStream = this.videoFile
+      ? this.getMetadataStream(this.videoFile.metadata.streams, 'video')
+      : undefined
+    this.videoFileMetadataAudioStream = this.videoFile
+      ? this.getMetadataStream(this.videoFile.metadata.streams, 'audio')
+      : undefined
+  }
+  getVideoFile () {
    // HTML select send us a string, so convert it to a number
    this.resolutionId = parseInt(this.resolutionId.toString(), 10)
@@ -79,6 +114,12 @@ export class VideoDownloadComponent {
      console.error('Could not find file with resolution %d.', this.resolutionId)
      return
    }
+    return file
+  }
+  getVideoFileLink () {
+    const file = this.videoFile
+    if (!file) return
    const suffix = this.video.privacy.id === VideoPrivacy.PRIVATE || this.video.privacy.id === VideoPrivacy.INTERNAL
      ? '?access_token=' + this.auth.getAccessToken()
@@ -104,4 +145,64 @@ export class VideoDownloadComponent {
  switchToType (type: DownloadType) {
    this.type = type
  }
+  getMetadataFormat (format: FfprobeFormat) {
+    const keyToTranslateFunction = {
+      'encoder': (value: string) => ({ label: this.i18n('Encoder'), value }),
+      'format_long_name': (value: string) => ({ label: this.i18n('Format name'), value }),
+      'size': (value: number) => ({ label: this.i18n('Size'), value: this.bytesPipe.transform(value, 2) }),
+      'bit_rate': (value: number) => ({
+        label: this.i18n('Bitrate'),
+        value: `${this.numbersPipe.transform(value)}bps`
+      })
+    }
+    // flattening format
+    const sanitizedFormat = Object.assign(format, format.tags)
+    delete sanitizedFormat.tags
+    return mapValues(
+      pick(sanitizedFormat, Object.keys(keyToTranslateFunction)),
+      (val, key) => keyToTranslateFunction[key](val)
+    )
+  }
+  getMetadataStream (streams: FfprobeStream[], type: 'video' | 'audio') {
+    const stream = streams.find(s => s.codec_type === type)
+    if (!stream) return undefined
+    let keyToTranslateFunction = {
+      'codec_long_name': (value: string) => ({ label: this.i18n('Codec'), value }),
+      'profile': (value: string) => ({ label: this.i18n('Profile'), value }),
+      'bit_rate': (value: number) => ({
+        label: this.i18n('Bitrate'),
+        value: `${this.numbersPipe.transform(value)}bps`
+      })
+    }
+    if (type === 'video') {
+      keyToTranslateFunction = Object.assign(keyToTranslateFunction, {
+        'width': (value: number) => ({ label: this.i18n('Resolution'), value: `${value}x${stream.height}` }),
+        'display_aspect_ratio': (value: string) => ({ label: this.i18n('Aspect ratio'), value }),
+        'avg_frame_rate': (value: string) => ({ label: this.i18n('Average frame rate'), value }),
+        'pix_fmt': (value: string) => ({ label: this.i18n('Pixel format'), value })
+      })
+    } else {
+      keyToTranslateFunction = Object.assign(keyToTranslateFunction, {
+        'sample_rate': (value: number) => ({ label: this.i18n('Sample rate'), value }),
+        'channel_layout': (value: number) => ({ label: this.i18n('Channel Layout'), value })
+      })
+    }
+    return mapValues(
+      pick(stream, Object.keys(keyToTranslateFunction)),
+      (val, key) => keyToTranslateFunction[key](val)
+    )
+  }
+  private hydrateMetadataFromMetadataUrl (file: VideoFile) {
+    const observable = this.videoService.getVideoFileMetadata(file.metadataUrl)
+    observable.subscribe(res => file.metadata = res)
+    return observable.toPromise()
+  }
 }
diff --git a/client/src/app/shared/video/modals/video-report.component.html b/client/src/app/shared/video/modals/video-report.component.html
index b9434da26..e336b6660 100644
--- a/client/src/app/shared/video/modals/video-report.component.html
+++ b/client/src/app/shared/video/modals/video-report.component.html
@@ -7,23 +7,25 @@
  <div class="modal-body">
    <div i18n class="information">
-      Your report will be sent to moderators of {{ currentHost }}.
+      Your report will be sent to moderators of {{ currentHost }}<ng-container *ngIf="isRemoteVideo()"> and will be forwarded to the video origin ({{ originHost }}) too</ng-container>.
-      <ng-container *ngIf="isRemoteVideo()"> It will be forwarded to origin instance {{ originHost }} too.</ng-container>
    </div>
    <form novalidate [formGroup]="form" (ngSubmit)="report()">
      <div class="form-group">
-        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
+        <textarea 
-        </textarea>
+          i18n-placeholder placeholder="Reason..." formControlName="reason"
+          [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+        ></textarea>
        <div *ngIf="formErrors.reason" class="form-error">
          {{ formErrors.reason }}
        </div>
      </div>
      <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">
+        <input
-          Cancel
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-        </span>
+          (click)="hide()" (key.enter)="hide()"
+        >
        <input
          type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/shared/video/modals/video-report.component.ts b/client/src/app/shared/video/modals/video-report.component.ts
index 1d368ff17..988fa03d4 100644
--- a/client/src/app/shared/video/modals/video-report.component.ts
+++ b/client/src/app/shared/video/modals/video-report.component.ts
@@ -1,13 +1,13 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
 import { FormReactive } from '../../../shared/forms'
-import { VideoDetails } from '../../../shared/video/video-details.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/video-abuse-validators.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { VideoAbuseService } from '@app/shared/video-abuse'
+import { Video } from '@app/shared/video/video.model'
 @Component({
  selector: 'my-video-report',
@@ -15,7 +15,7 @@ import { VideoAbuseService } from '@app/shared/video-abuse'
  styleUrls: [ './video-report.component.scss' ]
 })
 export class VideoReportComponent extends FormReactive implements OnInit {
-  @Input() video: VideoDetails = null
+  @Input() video: Video = null
  @ViewChild('modal', { static: true }) modal: NgbModal
@@ -53,7 +53,7 @@ export class VideoReportComponent extends FormReactive implements OnInit {
  }
  show () {
-    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
  }
  hide () {
diff --git a/client/src/app/shared/video/redundancy.service.ts b/client/src/app/shared/video/redundancy.service.ts
new file mode 100644
index 000000000..fb918d73b
--- /dev/null
+++ b/client/src/app/shared/video/redundancy.service.ts
@@ -0,0 +1,73 @@
+import { catchError, map, toArray } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor, RestPagination, RestService } from '@app/shared/rest'
+import { SortMeta } from 'primeng/api'
+import { ResultList, Video, VideoRedundanciesTarget, VideoRedundancy } from '@shared/models'
+import { concat, Observable } from 'rxjs'
+import { environment } from '../../../environments/environment'
+@Injectable()
+export class RedundancyService {
+  static BASE_REDUNDANCY_URL = environment.apiUrl + '/api/v1/server/redundancy'
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) { }
+  updateRedundancy (host: string, redundancyAllowed: boolean) {
+    const url = RedundancyService.BASE_REDUNDANCY_URL + '/' + host
+    const body = { redundancyAllowed }
+    return this.authHttp.put(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  listVideoRedundancies (options: {
+    pagination: RestPagination,
+    sort: SortMeta,
+    target?: VideoRedundanciesTarget
+  }): Observable<ResultList<VideoRedundancy>> {
+    const { pagination, sort, target } = options
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+    if (target) params = params.append('target', target)
+    return this.authHttp.get<ResultList<VideoRedundancy>>(RedundancyService.BASE_REDUNDANCY_URL + '/videos', { params })
+               .pipe(
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+  addVideoRedundancy (video: Video) {
+    return this.authHttp.post(RedundancyService.BASE_REDUNDANCY_URL + '/videos', { videoId: video.id })
+      .pipe(
+        catchError(res => this.restExtractor.handleError(res))
+      )
+  }
+  removeVideoRedundancies (redundancy: VideoRedundancy) {
+    const observables = redundancy.redundancies.streamingPlaylists.map(r => r.id)
+      .concat(redundancy.redundancies.files.map(r => r.id))
+      .map(id => this.removeRedundancy(id))
+    return concat(...observables)
+      .pipe(toArray())
+  }
+  private removeRedundancy (redundancyId: number) {
+    return this.authHttp.delete(RedundancyService.BASE_REDUNDANCY_URL + '/videos/' + redundancyId)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+}
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts
index afdeab18d..4e5fc6476 100644
--- a/client/src/app/shared/video/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -1,8 +1,7 @@
-import { AfterViewInit, Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
+import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { DropdownAction, DropdownButtonSize, DropdownDirection } from '@app/shared/buttons/action-dropdown.component'
-import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
+import { AuthService, ConfirmService, Notifier } from '@app/core'
-import { BlocklistService } from '@app/shared/blocklist'
 import { Video } from '@app/shared/video/video.model'
 import { VideoService } from '@app/shared/video/video.service'
 import { VideoDetails } from '@app/shared/video/video-details.model'
@@ -14,6 +13,7 @@ import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklis
 import { VideoBlacklistService } from '@app/shared/video-blacklist'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { VideoCaption } from '@shared/models'
+import { RedundancyService } from '@app/shared/video/redundancy.service'
 export type VideoActionsDisplayType = {
  playlist?: boolean
@@ -22,6 +22,7 @@ export type VideoActionsDisplayType = {
  blacklist?: boolean
  delete?: boolean
  report?: boolean
+  duplicate?: boolean
 }
 @Component({
@@ -30,12 +31,12 @@ export type VideoActionsDisplayType = {
  styleUrls: [ './video-actions-dropdown.component.scss' ]
 })
 export class VideoActionsDropdownComponent implements OnChanges {
-  @ViewChild('playlistDropdown', { static: false }) playlistDropdown: NgbDropdown
+  @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
-  @ViewChild('playlistAdd', { static: false }) playlistAdd: VideoAddToPlaylistComponent
+  @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
-  @ViewChild('videoDownloadModal', { static: false }) videoDownloadModal: VideoDownloadComponent
+  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
-  @ViewChild('videoReportModal', { static: false }) videoReportModal: VideoReportComponent
+  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
-  @ViewChild('videoBlacklistModal', { static: false }) videoBlacklistModal: VideoBlacklistComponent
+  @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
  @Input() video: Video | VideoDetails
  @Input() videoCaptions: VideoCaption[] = []
@@ -46,7 +47,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
    update: true,
    blacklist: true,
    delete: true,
-    report: true
+    report: true,
+    duplicate: true
  }
  @Input() placement = 'left'
@@ -70,10 +72,9 @@ export class VideoActionsDropdownComponent implements OnChanges {
    private notifier: Notifier,
    private confirmService: ConfirmService,
    private videoBlacklistService: VideoBlacklistService,
-    private serverService: ServerService,
    private screenService: ScreenService,
    private videoService: VideoService,
-    private blocklistService: BlocklistService,
+    private redundancyService: RedundancyService,
    private i18n: I18n
  ) { }
@@ -144,6 +145,10 @@ export class VideoActionsDropdownComponent implements OnChanges {
    return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled
  }
+  canVideoBeDuplicated () {
+    return this.video.canBeDuplicatedBy(this.user)
+  }
  /* Action handlers */
  async unblacklistVideo () {
@@ -186,6 +191,18 @@ export class VideoActionsDropdownComponent implements OnChanges {
        )
  }
+  duplicateVideo () {
+    this.redundancyService.addVideoRedundancy(this.video)
+      .subscribe(
+        () => {
+          const message = this.i18n('This video will be duplicated by your instance.')
+          this.notifier.success(message)
+        },
+        err => this.notifier.error(err.message)
+      )
+  }
  onVideoBlacklisted () {
    this.videoBlacklisted.emit()
  }
@@ -234,6 +251,12 @@ export class VideoActionsDropdownComponent implements OnChanges {
          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.blacklist && this.isVideoUnblacklistable()
        },
        {
+          label: this.i18n('Mirror'),
+          handler: () => this.duplicateVideo(),
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.duplicate && this.canVideoBeDuplicated(),
+          iconName: 'cloud-download'
+        },
+        {
          label: this.i18n('Delete'),
          handler: () => this.removeVideo(),
          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.delete && this.isVideoRemovable(),
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 46c49c15b..8e948ce42 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -2,7 +2,10 @@
  <my-video-thumbnail
    [video]="video" [nsfw]="isVideoBlur"
    [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
-  ></my-video-thumbnail>
+  >
+    <ng-container ngProjectAs="label-warning" *ngIf="displayOptions.privacyLabel && isUnlistedVideo()" i18n>Unlisted</ng-container>
+    <ng-container ngProjectAs="label-danger" *ngIf="displayOptions.privacyLabel && isPrivateVideo()" i18n>Private</ng-container>
+  </my-video-thumbnail>
  <div class="video-bottom">
    <div class="video-miniature-information">
@@ -19,11 +22,6 @@
          <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
          <ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container>
        </span>
-        <ng-container *ngIf="displayOptions.privacyLabel">
-          <span *ngIf="isUnlistedVideo()" class="badge badge-warning ml-1" i18n>Unlisted</span>
-          <span *ngIf="isPrivateVideo()" class="badge badge-danger ml-1" i18n>Private</span>
-        </ng-container>
      </span>
      <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
@@ -50,9 +48,9 @@
    </div>
    <div class="video-actions">
-      <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown -->
+      <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown: https://github.com/ng-bootstrap/ng-bootstrap/issues/3495 -->
      <my-video-actions-dropdown
-        *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left"
+        *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left auto"
        (videoRemoved)="onVideoRemoved()" (videoBlacklisted)="onVideoBlacklisted()" (videoUnblacklisted)="onVideoUnblacklisted()"
      ></my-video-actions-dropdown>
    </div>
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index b63fd2989..f27800a24 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -85,8 +85,12 @@ $more-margin-right: 15px;
    }
    @media screen and (max-width: $small-view) {
-      .video-miniature-information .video-miniature-name {
+      .video-miniature-information {
-        margin-top: 0;
+        margin: 0 10px;
+        .video-miniature-name {
+          margin-top: 0;
+        }
      }
      .video-actions {
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 598a7a983..72b652448 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -64,7 +64,8 @@ export class VideoMiniatureComponent implements OnInit {
    update: true,
    blacklist: true,
    delete: true,
-    report: true
+    report: true,
+    duplicate: true
  }
  showActions = false
  serverConfig: ServerConfig
@@ -199,7 +200,7 @@ export class VideoMiniatureComponent implements OnInit {
  }
  isWatchLaterPlaylistDisplayed () {
-    return this.inWatchLaterPlaylist !== undefined
+    return this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
  }
  private setUpBy () {
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index b63085b81..fe5510c56 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,5 +1,5 @@
 <a
-  [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [title]="video.name"
+  [routerLink]="getVideoRouterLink()" [queryParams]="queryParams"
  class="video-thumbnail"
 >
  <img alt="" [attr.aria-label]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
@@ -18,6 +18,9 @@
    </ng-container>
  </div>
+  <div class="video-thumbnail-label-overlay warning"><ng-content select="label-warning"></ng-content></div>
+  <div class="video-thumbnail-label-overlay danger"><ng-content select="label-danger"></ng-content></div>
  <div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div>
  <div class="play-overlay">
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 573a64987..5fca916f0 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -19,13 +19,24 @@
  }
  .video-thumbnail-watch-later-overlay,
+  .video-thumbnail-label-overlay,
  .video-thumbnail-duration-overlay {
    @include static-thumbnail-overlay;
    border-radius: 3px;
    font-size: 12px;
    font-weight: $font-bold;
-    z-index: 1;
+    z-index: z(miniature);
+  }
+  .video-thumbnail-label-overlay {
+    position: absolute;
+    padding: 0 5px;
+    left: 5px;
+    top: 5px;
+    &.warning { background-color: orange; }
+    &.danger { background-color: red; }
  }
  .video-thumbnail-duration-overlay {
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index 2420ec715..111b4c8bb 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -12,7 +12,7 @@ export class VideoThumbnailComponent {
  @Input() video: Video
  @Input() nsfw = false
  @Input() routerLink: any[]
-  @Input() queryParams: any[]
+  @Input() queryParams: { [ p: string ]: any }
  @Input() displayWatchLaterPlaylist: boolean
  @Input() inWatchLaterPlaylist: boolean
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index fb98d5382..546518cca 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -42,6 +42,9 @@ export class Video implements VideoServerModel {
  dislikes: number
  nsfw: boolean
+  originInstanceUrl: string
+  originInstanceHost: string
  waitTranscoding?: boolean
  state?: VideoConstant<VideoState>
  scheduledUpdate?: VideoScheduleUpdate
@@ -86,22 +89,31 @@ export class Video implements VideoServerModel {
    this.waitTranscoding = hash.waitTranscoding
    this.state = hash.state
    this.description = hash.description
    this.duration = hash.duration
    this.durationLabel = durationToString(hash.duration)
    this.id = hash.id
    this.uuid = hash.uuid
    this.isLocal = hash.isLocal
    this.name = hash.name
    this.thumbnailPath = hash.thumbnailPath
    this.thumbnailUrl = absoluteAPIUrl + hash.thumbnailPath
    this.previewPath = hash.previewPath
    this.previewUrl = absoluteAPIUrl + hash.previewPath
    this.embedPath = hash.embedPath
    this.embedUrl = absoluteAPIUrl + hash.embedPath
    this.views = hash.views
    this.likes = hash.likes
    this.dislikes = hash.dislikes
    this.nsfw = hash.nsfw
    this.account = hash.account
    this.channel = hash.channel
@@ -124,6 +136,9 @@ export class Video implements VideoServerModel {
    this.blacklistedReason = hash.blacklistedReason
    this.userHistory = hash.userHistory
+    this.originInstanceHost = this.account.host
+    this.originInstanceUrl = 'https://' + this.originInstanceHost
  }
  isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {
@@ -152,4 +167,8 @@ export class Video implements VideoServerModel {
  isUpdatableBy (user: AuthUser) {
    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.UPDATE_ANY_VIDEO))
  }
+  canBeDuplicatedBy (user: AuthUser) {
+    return user && this.isLocal === false && user.hasRight(UserRight.MANAGE_VIDEOS_REDUNDANCIES)
+  }
 }
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 996202154..3aaf14990 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -27,10 +27,12 @@ import { objectToFormData } from '@app/shared/misc/utils'
 import { Account } from '@app/shared/account/account.model'
 import { AccountService } from '@app/shared/account/account.service'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
-import { ServerService } from '@app/core'
+import { ServerService, AuthService } from '@app/core'
 import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
+import { FfprobeData } from 'fluent-ffmpeg'
 export interface VideosProvider {
  getVideos (parameters: {
@@ -49,6 +51,8 @@ export class VideoService implements VideosProvider {
  constructor (
    private authHttp: HttpClient,
+    private authService: AuthService,
+    private userService: UserService,
    private restExtractor: RestExtractor,
    private restService: RestService,
    private serverService: ServerService,
@@ -199,9 +203,10 @@ export class VideoService implements VideosProvider {
    filter?: VideoFilter,
    categoryOneOf?: number,
    languageOneOf?: string[],
-    skipCount?: boolean
+    skipCount?: boolean,
+    nsfw?: boolean
  }): Observable<ResultList<Video>> {
-    const { videoPagination, sort, filter, categoryOneOf, languageOneOf, skipCount } = parameters
+    const { videoPagination, sort, filter, categoryOneOf, languageOneOf, skipCount, nsfw } = parameters
    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
@@ -212,6 +217,15 @@ export class VideoService implements VideosProvider {
    if (categoryOneOf) params = params.set('categoryOneOf', categoryOneOf + '')
    if (skipCount) params = params.set('skipCount', skipCount + '')
+    if (nsfw) {
+      params = params.set('nsfw', nsfw + '')
+    } else {
+      const nsfwPolicy = this.authService.isLoggedIn()
+        ? this.authService.getUser().nsfwPolicy
+        : this.userService.getAnonymousUser().nsfwPolicy
+      if (this.nsfwPolicyToFilter(nsfwPolicy)) params.set('nsfw', 'false')
+    }
    if (languageOneOf) {
      for (const l of languageOneOf) {
        params = params.append('languageOneOf[]', l)
@@ -278,6 +292,14 @@ export class VideoService implements VideosProvider {
    return this.buildBaseFeedUrls(params)
  }
+  getVideoFileMetadata (metadataUrl: string) {
+    return this.authHttp
+               .get<FfprobeData>(metadataUrl)
+               .pipe(
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
  removeVideo (id: number) {
    return this.authHttp
               .delete(VideoService.BASE_VIDEO_URL + id)
@@ -368,4 +390,8 @@ export class VideoService implements VideosProvider {
                 catchError(err => this.restExtractor.handleError(err))
               )
  }
+  private nsfwPolicyToFilter (policy: NSFWPolicyType) {
+    return policy === 'do_not_list'
+  }
 }
diff --git a/client/src/app/shared/video/videos-selection.component.ts b/client/src/app/shared/video/videos-selection.component.ts
index 064420056..17e5beb24 100644
--- a/client/src/app/shared/video/videos-selection.component.ts
+++ b/client/src/app/shared/video/videos-selection.component.ts
@@ -22,6 +22,8 @@ import { VideoSortField } from '@app/shared/video/sort-field.type'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ResultList } from '@shared/models'
+import { UserService } from '../users'
+import { LocalStorageService } from '../misc/storage.service'
 export type SelectionType = { [ id: number ]: boolean }
@@ -51,7 +53,9 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
    protected route: ActivatedRoute,
    protected notifier: Notifier,
    protected authService: AuthService,
+    protected userService: UserService,
    protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
    protected serverService: ServerService
  ) {
    super()