21 files changed, 456 insertions, 66 deletions

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)"
-        ></my-peertube-checkbox>
+          i18n-labelText labelText="Unfederate the video"
+        >
+          <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()">
-          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="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
-      <span *ngIf="!videoCaptions" i18n>video</span>
+    <h4 class="modal-title">
+      <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()">
-      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="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 }}.
-      <ng-container *ngIf="isRemoteVideo()"> It will be forwarded to origin instance {{ originHost }} too.</ng-container>
+      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>.
     </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()">
-          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="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 { BlocklistService } from '@app/shared/blocklist'
+import { AuthService, ConfirmService, Notifier } from '@app/core'
 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('playlistAdd', { static: false }) playlistAdd: VideoAddToPlaylistComponent
+  @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
+  @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
 
-  @ViewChild('videoDownloadModal', { static: false }) videoDownloadModal: VideoDownloadComponent
-  @ViewChild('videoReportModal', { static: false }) videoReportModal: VideoReportComponent
-  @ViewChild('videoBlacklistModal', { static: false }) videoBlacklistModal: VideoBlacklistComponent
+  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
+  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
+  @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 {
-        margin-top: 0;
+      .video-miniature-information {
+        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()