94 files changed, 3245 insertions, 488 deletions
diff --git a/client/src/app/shared/misc/from-now.pipe.ts b/client/src/app/shared/angular/from-now.pipe.ts
index 00b5be6c9..3a9a76411 100644
--- a/client/src/app/shared/misc/from-now.pipe.ts
+++ b/client/src/app/shared/angular/from-now.pipe.ts
@@ -35,6 +35,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.floor(seconds) })
+    return this.i18n('{{interval}} sec ago', { interval: Math.max(0, seconds) })
  }
 }
diff --git a/client/src/app/shared/misc/number-formatter.pipe.ts b/client/src/app/shared/angular/number-formatter.pipe.ts
index 8a0756a36..8a0756a36 100644
--- a/client/src/app/shared/misc/number-formatter.pipe.ts
+++ b/client/src/app/shared/angular/number-formatter.pipe.ts
diff --git a/client/src/app/shared/misc/object-length.pipe.ts b/client/src/app/shared/angular/object-length.pipe.ts
index 84d182052..84d182052 100644
--- a/client/src/app/shared/misc/object-length.pipe.ts
+++ b/client/src/app/shared/angular/object-length.pipe.ts
diff --git a/client/src/app/shared/angular/peertube-template.directive.ts b/client/src/app/shared/angular/peertube-template.directive.ts
new file mode 100644
index 000000000..a514b6057
--- /dev/null
+++ b/client/src/app/shared/angular/peertube-template.directive.ts
@@ -0,0 +1,12 @@
+import { Directive, Input, TemplateRef } from '@angular/core'
+@Directive({
+  selector: '[ptTemplate]'
+})
+export class PeerTubeTemplateDirective {
+  @Input('ptTemplate') name: string
+  constructor (public template: TemplateRef<any>) {
+    // empty
+  }
+}
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 114b1d71f..cc244dc76 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,9 +1,11 @@
 <div class="dropdown-root" ngbDropdown [placement]="placement">
  <div
-    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }"
+    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
    ngbDropdownToggle role="button"
  >
-    <my-global-icon *ngIf="!label" class="more-icon" iconName="more"></my-global-icon>
+    <my-global-icon *ngIf="!label && buttonDirection === 'horizontal'" class="more-icon" iconName="more-horizontal"></my-global-icon>
+    <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon>
    <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
  </div>
@@ -12,15 +14,24 @@
      <ng-container *ngFor="let action of actions">
        <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
-          <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a>
-          <span *ngIf="!action.linkBuilder" class="custom-action dropdown-item" (click)="action.handler(entry)" role="button">
+          <a *ngIf="action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">
+            <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon>
+            {{ action.label }}
+          </a>
+          <span
+            *ngIf="!action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" (click)="action.handler(entry)"
+            class="custom-action dropdown-item" role="button"
+          >
+            <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon>
            {{ action.label }}
          </span>
        </ng-container>
      </ng-container>
-      <div class="dropdown-divider"></div>
+      <div *ngIf="areActionsDisplayed(actions, entry)" class="dropdown-divider"></div>
    </ng-container>
  </div>
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 985b2ca88..5073190b0 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -8,12 +8,19 @@
 .action-button {
  @include peertube-button;
-  &.grey {
+  &.button-styled {
-    @include grey-button;
-  }
+    &.grey {
+      @include grey-button;
+    }
+    &.orange {
+      @include orange-button;
+    }
-  &.orange {
+    &:hover, &:active, &:focus {
-    @include orange-button;
+      background-color: $grey-background-color;
+    }
  }
  display: inline-block;
@@ -23,10 +30,6 @@
    display: none;
  }
-  &:hover, &:active, &:focus {
-    background-color: $grey-background-color;
-  }
  .more-icon {
    width: 21px;
  }
@@ -48,6 +51,10 @@
    cursor: pointer;
    color: #000 !important;
+    &.with-icon {
+      @include dropdown-with-icon-item;
+    }
    a, span {
      display: block;
      width: 100%;
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 275e2b51e..f5345831b 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -1,12 +1,18 @@
 import { Component, Input } from '@angular/core'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
 export type DropdownAction<T> = {
  label?: string
+  iconName?: GlobalIconName
  handler?: (a: T) => any
  linkBuilder?: (a: T) => (string | number)[]
  isDisplayed?: (a: T) => boolean
 }
+export type DropdownButtonSize = 'normal' | 'small'
+export type DropdownTheme = 'orange' | 'grey'
+export type DropdownDirection = 'horizontal' | 'vertical'
 @Component({
  selector: 'my-action-dropdown',
  styleUrls: [ './action-dropdown.component.scss' ],
@@ -16,14 +22,29 @@ export type DropdownAction<T> = {
 export class ActionDropdownComponent<T> {
  @Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = []
  @Input() entry: T
  @Input() placement = 'bottom-left'
-  @Input() buttonSize: 'normal' | 'small' = 'normal'
+  @Input() buttonSize: DropdownButtonSize = 'normal'
+  @Input() buttonDirection: DropdownDirection = 'horizontal'
+  @Input() buttonStyled = true
  @Input() label: string
-  @Input() theme: 'orange' | 'grey' = 'grey'
+  @Input() theme: DropdownTheme = 'grey'
  getActions () {
    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions
    return [ this.actions ]
  }
+  areActionsDisplayed (actions: DropdownAction<T>[], entry: T) {
+    return actions.some(a => a.isDisplayed === undefined || a.isDisplayed(entry))
+  }
+  handleClick (event: Event, action: DropdownAction<T>) {
+    event.preventDefault()
+    // action.handler(entry)
+  }
 }
diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts
index a91e9c7eb..c2b69d31a 100644
--- a/client/src/app/shared/buttons/button.component.ts
+++ b/client/src/app/shared/buttons/button.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core'
-import { GlobalIconName } from '@app/shared/icons/global-icon.component'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
 @Component({
  selector: 'my-button',
diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts
index b9873af2c..0d40b6f4a 100644
--- a/client/src/app/shared/forms/form-reactive.ts
+++ b/client/src/app/shared/forms/form-reactive.ts
@@ -59,7 +59,7 @@ export abstract class FormReactive {
      const isDirty = control.dirty || forceCheck === true
      if (control && isDirty && !control.valid) {
        const messages = validationMessages[ field ]
-        for (const key in control.errors) {
+        for (const key of Object.keys(control.errors)) {
          formErrors[ field ] += messages[ key ] + ' '
        }
      }
diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts
index fdcbedb71..e3de3ae13 100644
--- a/client/src/app/shared/forms/form-validators/index.ts
+++ b/client/src/app/shared/forms/form-validators/index.ts
@@ -10,6 +10,7 @@ export * from './video-blacklist-validators.service'
 export * from './video-channel-validators.service'
 export * from './video-comment-validators.service'
 export * from './video-validators.service'
+export * from './video-playlist-validators.service'
 export * from './video-captions-validators.service'
 export * from './video-change-ownership-validators.service'
 export * from './video-accept-ownership-validators.service'
diff --git a/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts b/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts
new file mode 100644
index 000000000..a2c9a5368
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts
@@ -0,0 +1,66 @@
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { AbstractControl, FormControl, Validators } from '@angular/forms'
+import { Injectable } from '@angular/core'
+import { BuildFormValidator } from '@app/shared'
+import { VideoPlaylistPrivacy } from '@shared/models'
+@Injectable()
+export class VideoPlaylistValidatorsService {
+  readonly VIDEO_PLAYLIST_DISPLAY_NAME: BuildFormValidator
+  readonly VIDEO_PLAYLIST_PRIVACY: BuildFormValidator
+  readonly VIDEO_PLAYLIST_DESCRIPTION: BuildFormValidator
+  readonly VIDEO_PLAYLIST_CHANNEL_ID: BuildFormValidator
+  constructor (private i18n: I18n) {
+    this.VIDEO_PLAYLIST_DISPLAY_NAME = {
+      VALIDATORS: [
+        Validators.required,
+        Validators.minLength(1),
+        Validators.maxLength(120)
+      ],
+      MESSAGES: {
+        'required': this.i18n('Display name is required.'),
+        'minlength': this.i18n('Display name must be at least 1 character long.'),
+        'maxlength': this.i18n('Display name cannot be more than 120 characters long.')
+      }
+    }
+    this.VIDEO_PLAYLIST_PRIVACY = {
+      VALIDATORS: [
+        Validators.required
+      ],
+      MESSAGES: {
+        'required': this.i18n('Privacy is required.')
+      }
+    }
+    this.VIDEO_PLAYLIST_DESCRIPTION = {
+      VALIDATORS: [
+        Validators.minLength(3),
+        Validators.maxLength(1000)
+      ],
+      MESSAGES: {
+        'minlength': i18n('Description must be at least 3 characters long.'),
+        'maxlength': i18n('Description cannot be more than 1000 characters long.')
+      }
+    }
+    this.VIDEO_PLAYLIST_CHANNEL_ID = {
+      VALIDATORS: [ ],
+      MESSAGES: {
+        'required': this.i18n('The channel is required when the playlist is public.')
+      }
+    }
+  }
+  setChannelValidator (channelControl: AbstractControl, privacy: VideoPlaylistPrivacy) {
+    if (privacy.toString() === VideoPlaylistPrivacy.PUBLIC.toString()) {
+      channelControl.setValidators([ Validators.required ])
+    } else {
+      channelControl.setValidators(null)
+    }
+    channelControl.markAsDirty()
+    channelControl.updateValueAndValidity()
+  }
+}
diff --git a/client/src/app/shared/forms/form-validators/video-validators.service.ts b/client/src/app/shared/forms/form-validators/video-validators.service.ts
index 81ed0666f..e3f7a0969 100644
--- a/client/src/app/shared/forms/form-validators/video-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/video-validators.service.ts
@@ -16,6 +16,7 @@ export class VideoValidatorsService {
  readonly VIDEO_TAGS: BuildFormValidator
  readonly VIDEO_SUPPORT: BuildFormValidator
  readonly VIDEO_SCHEDULE_PUBLICATION_AT: BuildFormValidator
+  readonly VIDEO_ORIGINALLY_PUBLISHED_AT: BuildFormValidator
  constructor (private i18n: I18n) {
@@ -92,5 +93,10 @@ export class VideoValidatorsService {
        'required': this.i18n('A date is required to schedule video update.')
      }
    }
+    this.VIDEO_ORIGINALLY_PUBLISHED_AT = {
+      VALIDATORS: [ ],
+      MESSAGES: {}
+    }
  }
 }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index e87aca0d4..49a57f29d 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -82,11 +82,11 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
    return this.screenService.isInSmallView() === false
  }
-  private updatePreviews () {
+  private async updatePreviews () {
    if (this.content === null || this.content === undefined) return
-    this.truncatedPreviewHTML = this.markdownRender(truncate(this.content, { length: this.truncate }))
+    this.truncatedPreviewHTML = await this.markdownRender(truncate(this.content, { length: this.truncate }))
-    this.previewHTML = this.markdownRender(this.content)
+    this.previewHTML = await this.markdownRender(this.content)
  }
  private markdownRender (text: string) {
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index 6e4e20775..ea321ee65 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -28,4 +28,4 @@
    position: relative;
    top: -2px;
  }
-}
-\ 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 c1a6915e8..9578f5618 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.ts
+++ b/client/src/app/shared/forms/peertube-checkbox.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { ChangeDetectorRef, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 @Component({
@@ -21,10 +21,19 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor {
  @Input() helpHtml: string
  @Input() disabled = false
+  // FIXME: https://github.com/angular/angular/issues/10816#issuecomment-307567836
+  @Input() onPushWorkaround = false
+  constructor (private cdr: ChangeDetectorRef) { }
  propagateChange = (_: any) => { /* empty */ }
  writeValue (checked: boolean) {
    this.checked = checked
+    if (this.onPushWorkaround) {
+      this.cdr.markForCheck()
+    }
  }
  registerOnChange (fn: (_: any) => void) {
diff --git a/client/src/app/shared/forms/timestamp-input.component.html b/client/src/app/shared/forms/timestamp-input.component.html
new file mode 100644
index 000000000..c57a4b32c
--- /dev/null
+++ b/client/src/app/shared/forms/timestamp-input.component.html
@@ -0,0 +1,4 @@
+<p-inputMask
+  [disabled]="disabled" [(ngModel)]="timestampString" (onBlur)="onBlur()"
+  mask="9:99:99" slotChar="0" (ngModelChange)="onModelChange()"
+></p-inputMask>
diff --git a/client/src/app/shared/forms/timestamp-input.component.scss b/client/src/app/shared/forms/timestamp-input.component.scss
new file mode 100644
index 000000000..7115777fd
--- /dev/null
+++ b/client/src/app/shared/forms/timestamp-input.component.scss
@@ -0,0 +1,8 @@
+p-inputmask {
+  /deep/ input {
+    width: 80px;
+    font-size: 15px;
+    border: none;
+  }
+}
diff --git a/client/src/app/shared/forms/timestamp-input.component.ts b/client/src/app/shared/forms/timestamp-input.component.ts
new file mode 100644
index 000000000..8d67a96ac
--- /dev/null
+++ b/client/src/app/shared/forms/timestamp-input.component.ts
@@ -0,0 +1,61 @@
+import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { secondsToTime, timeToInt } from '../../../assets/player/utils'
+@Component({
+  selector: 'my-timestamp-input',
+  styleUrls: [ './timestamp-input.component.scss' ],
+  templateUrl: './timestamp-input.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TimestampInputComponent),
+      multi: true
+    }
+  ]
+})
+export class TimestampInputComponent implements ControlValueAccessor, OnInit {
+  @Input() maxTimestamp: number
+  @Input() timestamp: number
+  @Input() disabled = false
+  timestampString: string
+  constructor (private changeDetector: ChangeDetectorRef) {}
+  ngOnInit () {
+    this.writeValue(this.timestamp || 0)
+  }
+  propagateChange = (_: any) => { /* empty */ }
+  writeValue (timestamp: number) {
+    this.timestamp = timestamp
+    this.timestampString = secondsToTime(this.timestamp, true, ':')
+  }
+  registerOnChange (fn: (_: any) => void) {
+    this.propagateChange = fn
+  }
+  registerOnTouched () {
+    // Unused
+  }
+  onModelChange () {
+    this.timestamp = timeToInt(this.timestampString)
+    this.propagateChange(this.timestamp)
+  }
+  onBlur () {
+    if (this.maxTimestamp && this.timestamp > this.maxTimestamp) {
+      this.writeValue(this.maxTimestamp)
+      this.changeDetector.detectChanges()
+      this.propagateChange(this.timestamp)
+    }
+  }
+}
diff --git a/client/src/app/shared/icons/global-icon.component.html b/client/src/app/shared/icons/global-icon.component.html
deleted file mode 100644
index e69de29bb..000000000
--- a/client/src/app/shared/icons/global-icon.component.html
+++ /dev/null
diff --git a/client/src/app/shared/icons/global-icon.component.scss b/client/src/app/shared/images/global-icon.component.scss
index 6805fb6f7..6805fb6f7 100644
--- a/client/src/app/shared/icons/global-icon.component.scss
+++ b/client/src/app/shared/images/global-icon.component.scss
diff --git a/client/src/app/shared/icons/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index e8ada0324..5a3db4531 100644
--- a/client/src/app/shared/icons/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -1,7 +1,9 @@
-import { Component, ElementRef, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core'
 const icons = {
  'add': require('../../../assets/images/global/add.html'),
+  'user': require('../../../assets/images/global/user.html'),
+  'sign-out': require('../../../assets/images/global/sign-out.html'),
  'syndication': require('../../../assets/images/global/syndication.html'),
  'help': require('../../../assets/images/global/help.html'),
  'sparkle': require('../../../assets/images/global/sparkle.html'),
@@ -11,21 +13,39 @@ const icons = {
  'no': require('../../../assets/images/global/no.html'),
  'cloud-download': require('../../../assets/images/global/cloud-download.html'),
  'undo': require('../../../assets/images/global/undo.html'),
+  'history': require('../../../assets/images/global/history.html'),
  'circle-tick': require('../../../assets/images/global/circle-tick.html'),
  'cog': require('../../../assets/images/global/cog.html'),
  'download': require('../../../assets/images/global/download.html'),
+  'go': require('../../../assets/images/menu/go.html'),
  'edit': require('../../../assets/images/global/edit.html'),
  'im-with-her': require('../../../assets/images/global/im-with-her.html'),
  'delete': require('../../../assets/images/global/delete.html'),
+  'server': require('../../../assets/images/global/server.html'),
  'cross': require('../../../assets/images/global/cross.html'),
  'validate': require('../../../assets/images/global/validate.html'),
  'tick': require('../../../assets/images/global/tick.html'),
  'dislike': require('../../../assets/images/video/dislike.html'),
  'heart': require('../../../assets/images/video/heart.html'),
  'like': require('../../../assets/images/video/like.html'),
-  'more': require('../../../assets/images/video/more.html'),
+  'more-horizontal': require('../../../assets/images/global/more-horizontal.html'),
+  'more-vertical': require('../../../assets/images/global/more-vertical.html'),
  'share': require('../../../assets/images/video/share.html'),
-  'upload': require('../../../assets/images/video/upload.html')
+  'upload': require('../../../assets/images/video/upload.html'),
+  'playlist-add': require('../../../assets/images/video/playlist-add.html'),
+  'play': require('../../../assets/images/global/play.html'),
+  'playlists': require('../../../assets/images/global/playlists.html'),
+  'about': require('../../../assets/images/menu/about.html'),
+  'globe': require('../../../assets/images/menu/globe.html'),
+  'home': require('../../../assets/images/menu/home.html'),
+  'recently-added': require('../../../assets/images/menu/recently-added.html'),
+  'trending': require('../../../assets/images/menu/trending.html'),
+  'videos': require('../../../assets/images/global/videos.html'),
+  'folder': require('../../../assets/images/global/folder.html'),
+  'administration': require('../../../assets/images/menu/administration.html'),
+  'subscriptions': require('../../../assets/images/menu/subscriptions.html'),
+  'users': require('../../../assets/images/global/users.html'),
+  'refresh': require('../../../assets/images/global/refresh.html')
 }
 export type GlobalIconName = keyof typeof icons
@@ -33,7 +53,8 @@ export type GlobalIconName = keyof typeof icons
 @Component({
  selector: 'my-global-icon',
  template: '',
-  styleUrls: [ './global-icon.component.scss' ]
+  styleUrls: [ './global-icon.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GlobalIconComponent implements OnInit {
  @Input() iconName: GlobalIconName
diff --git a/client/src/app/shared/images/image-upload.component.html b/client/src/app/shared/images/image-upload.component.html
new file mode 100644
index 000000000..c09c862c4
--- /dev/null
+++ b/client/src/app/shared/images/image-upload.component.html
@@ -0,0 +1,9 @@
+<div class="root">
+  <my-reactive-file
+    [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize"
+    (fileChanged)="onFileChanged($event)"
+  ></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>
diff --git a/client/src/app/shared/images/image-upload.component.scss b/client/src/app/shared/images/image-upload.component.scss
new file mode 100644
index 000000000..b63963bca
--- /dev/null
+++ b/client/src/app/shared/images/image-upload.component.scss
@@ -0,0 +1,18 @@
+@import '_variables';
+@import '_mixins';
+.root {
+  height: auto;
+  display: flex;
+  align-items: center;
+  .preview {
+    border: 2px solid grey;
+    border-radius: 4px;
+    margin-left: 50px;
+    &.no-image {
+      background-color: #ececec;
+    }
+  }
+}
diff --git a/client/src/app/shared/images/image-upload.component.ts b/client/src/app/shared/images/image-upload.component.ts
new file mode 100644
index 000000000..2da1592ff
--- /dev/null
+++ b/client/src/app/shared/images/image-upload.component.ts
@@ -0,0 +1,69 @@
+import { Component, forwardRef, Input } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
+import { ServerService } from '@app/core'
+@Component({
+  selector: 'my-image-upload',
+  styleUrls: [ './image-upload.component.scss' ],
+  templateUrl: './image-upload.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ImageUploadComponent),
+      multi: true
+    }
+  ]
+})
+export class ImageUploadComponent implements ControlValueAccessor {
+  @Input() inputLabel: string
+  @Input() inputName: string
+  @Input() previewWidth: string
+  @Input() previewHeight: string
+  imageSrc: SafeResourceUrl
+  private file: File
+  constructor (
+    private sanitizer: DomSanitizer,
+    private serverService: ServerService
+  ) {}
+  get videoImageExtensions () {
+    return this.serverService.getConfig().video.image.extensions
+  }
+  get maxVideoImageSize () {
+    return this.serverService.getConfig().video.image.size.max
+  }
+  onFileChanged (file: File) {
+    this.file = file
+    this.propagateChange(this.file)
+    this.updatePreview()
+  }
+  propagateChange = (_: any) => { /* empty */ }
+  writeValue (file: any) {
+    this.file = file
+    this.updatePreview()
+  }
+  registerOnChange (fn: (_: any) => void) {
+    this.propagateChange = fn
+  }
+  registerOnTouched () {
+    // Unused
+  }
+  private updatePreview () {
+    if (this.file) {
+      const url = URL.createObjectURL(this.file)
+      this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url)
+    }
+  }
+}
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 dc8db8cc1..2885f97e3 100644
--- a/client/src/app/shared/instance/instance-features-table.component.html
+++ b/client/src/app/shared/instance/instance-features-table.component.html
@@ -2,6 +2,20 @@
  <table class="table">
    <tr>
+      <td i18n class="label">Default NSFW/sensitive videos policy (can be redefined by the users)</td>
+      <td class="value">{{ buildNSFWLabel() }}</td>
+    </tr>
+    <tr *ngFor="let feature of features">
+      <td class="label">{{ feature.label }}</td>
+      <td>
+        <span *ngIf="feature.value === true" class="glyphicon glyphicon-ok"></span>
+        <span *ngIf="feature.value === false" class="glyphicon glyphicon-remove"></span>
+      </td>
+    </tr>
+    <tr>
      <td i18n class="label">Video quota</td>
      <td class="value">
@@ -16,13 +30,5 @@
        </ng-container>
      </td>
    </tr>
-    <tr *ngFor="let feature of features">
-      <td class="label">{{ feature.label }}</td>
-      <td>
-        <span *ngIf="feature.value === true" class="glyphicon glyphicon-ok"></span>
-        <span *ngIf="feature.value === false" class="glyphicon glyphicon-remove"></span>
-      </td>
-    </tr>
  </table>
-</div>
-\ No newline at end of file
+</div>
diff --git a/client/src/app/shared/instance/instance-features-table.component.ts b/client/src/app/shared/instance/instance-features-table.component.ts
index da8da0702..72e7c2730 100644
--- a/client/src/app/shared/instance/instance-features-table.component.ts
+++ b/client/src/app/shared/instance/instance-features-table.component.ts
@@ -33,11 +33,27 @@ export class InstanceFeaturesTableComponent implements OnInit {
        })
  }
+  buildNSFWLabel () {
+    const policy = this.serverService.getConfig().instance.defaultNSFWPolicy
+    if (policy === 'do_not_list') return this.i18n('Hidden')
+    if (policy === 'blur') return this.i18n('Blurred with confirmation request')
+    if (policy === 'display') return this.i18n('Displayed')
+  }
  private buildFeatures () {
    const config = this.serverService.getConfig()
    this.features = [
      {
+        label: this.i18n('User registration allowed'),
+        value: config.signup.allowed
+      },
+      {
+        label: this.i18n('Video uploads require manual validation by moderators'),
+        value: config.autoBlacklist.videos.ofUsers.enabled
+      },
+      {
        label: this.i18n('Transcode your videos in multiple resolutions'),
        value: config.transcoding.enabledResolutions.length !== 0
      },
@@ -48,9 +64,12 @@ export class InstanceFeaturesTableComponent implements OnInit {
      {
        label: this.i18n('Torrent import'),
        value: config.import.videos.torrent.enabled
+      },
+      {
+        label: this.i18n('P2P enabled'),
+        value: config.tracker.enabled
      }
    ]
  }
  private getApproximateTime (seconds: number) {
@@ -84,5 +103,4 @@ export class InstanceFeaturesTableComponent implements OnInit {
    this.quotaHelpIndication = lines.join('<br />')
  }
 }
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 d3c896019..35511ee62 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.html
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -3,7 +3,7 @@
    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a>
-    <div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
+    <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
      <span
        (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
        (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page"
@@ -13,7 +13,11 @@
      </span>
      <div ngbDropdownMenu>
-        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [routerLink]="menuChild.routerLink">{{ menuChild.label }}</a>
+        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink">
+          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName"></my-global-icon>
+          {{ menuChild.label }}
+        </a>
      </div>
    </div>
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss
index 77159532f..d7c7de957 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
 .parent-entry {
  span[role=button] {
    cursor: pointer;
@@ -16,3 +19,9 @@
 /deep/ .dropdown-menu {
  margin-top: 0 !important;
 }
+.icon {
+  @include dropdown-with-icon-item;
+  top: -1px;
+}
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 e859c30dd..5ccdafb54 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -3,6 +3,8 @@ import { filter, take } from 'rxjs/operators'
 import { NavigationEnd, Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
+import { ScreenService } from '@app/shared/misc/screen.service'
 export type TopMenuDropdownParam = {
  label: string
@@ -11,6 +13,8 @@ export type TopMenuDropdownParam = {
  children?: {
    label: string
    routerLink: string
+    iconName?: GlobalIconName
  }[]
 }
@@ -23,11 +27,16 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
  @Input() menuEntries: TopMenuDropdownParam[] = []
  suffixLabels: { [ parentLabel: string ]: string }
+  hasIcons = false
+  container: undefined | 'body' = undefined
  private openedOnHover = false
  private routeSub: Subscription
-  constructor (private router: Router) {}
+  constructor (
+    private router: Router,
+    private screen: ScreenService
+  ) {}
  ngOnInit () {
    this.updateChildLabels(window.location.pathname)
@@ -35,6 +44,16 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
    this.routeSub = this.router.events
                        .pipe(filter(event => event instanceof NavigationEnd))
                        .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
+    // But this break our hovering system
+    if (this.screen.isInMobileView()) {
+      this.container = 'body'
+    }
  }
  ngOnDestroy () {
@@ -48,7 +67,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
    // Menu was closed
    dropdown.openChange
            .pipe(take(1))
-            .subscribe(e => this.openedOnHover = false)
+            .subscribe(() => this.openedOnHover = false)
  }
  dropdownAnchorClicked (dropdown: NgbDropdown) {
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index 444425c9f..e31eef06a 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -22,7 +22,7 @@
  [attr.aria-pressed]="isPopoverOpened"
  [ngbPopover]="tooltipTemplate"
  [placement]="tooltipPlacement"
-  [autoClose]="true"
+  autoClose="outside"
  (onHidden)="onPopoverHidden()"
  (onShown)="onPopoverShown()"
 >
diff --git a/client/src/app/shared/misc/loader.component.html b/client/src/app/shared/misc/loader.component.html
index 38d06950e..b8b7ad343 100644
--- a/client/src/app/shared/misc/loader.component.html
+++ b/client/src/app/shared/misc/loader.component.html
@@ -1,3 +1,8 @@
-<div id="video-loading" *ngIf="loading">
+<div *ngIf="loading">
-  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+  <div class="lds-ring">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
 </div>
diff --git a/client/src/app/shared/misc/loader.component.scss b/client/src/app/shared/misc/loader.component.scss
new file mode 100644
index 000000000..ddb64f07a
--- /dev/null
+++ b/client/src/app/shared/misc/loader.component.scss
@@ -0,0 +1,45 @@
+@import '_variables';
+@import '_mixins';
+// Thanks to https://loading.io/css/ (CC0 License)
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 50px;
+  height: 50px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 44px;
+  height: 44px;
+  margin: 6px;
+  border: 4px solid;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #999999 transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/client/src/app/shared/misc/loader.component.ts b/client/src/app/shared/misc/loader.component.ts
index f37d70c85..e3b1eea3a 100644
--- a/client/src/app/shared/misc/loader.component.ts
+++ b/client/src/app/shared/misc/loader.component.ts
@@ -2,10 +2,9 @@ import { Component, Input } from '@angular/core'
 @Component({
  selector: 'my-loader',
-  styleUrls: [ ],
+  styleUrls: [ './loader.component.scss' ],
  templateUrl: './loader.component.html'
 })
 export class LoaderComponent {
  @Input() loading: boolean
 }
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index 1cbc96b14..af75569d9 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -18,6 +18,10 @@ export class ScreenService {
    return this.getWindowInnerWidth() < 500
  }
+  isInTouchScreen () {
+    return 'ontouchstart' in window || navigator.msMaxTouchPoints
+  }
  // Cache window inner width, because it's an expensive call
  private getWindowInnerWidth () {
    if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
@@ -32,6 +36,8 @@ export class ScreenService {
  }
  private cacheWindowInnerWidthExpired () {
+    if (!this.lastFunctionCallTime) return true
    return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs)
  }
 }
diff --git a/client/src/app/shared/misc/small-loader.component.html b/client/src/app/shared/misc/small-loader.component.html
new file mode 100644
index 000000000..5a7cea738
--- /dev/null
+++ b/client/src/app/shared/misc/small-loader.component.html
@@ -0,0 +1,3 @@
+<div *ngIf="loading">
+  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
diff --git a/client/src/app/shared/misc/small-loader.component.ts b/client/src/app/shared/misc/small-loader.component.ts
new file mode 100644
index 000000000..191877f14
--- /dev/null
+++ b/client/src/app/shared/misc/small-loader.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+@Component({
+  selector: 'my-small-loader',
+  styleUrls: [ ],
+  templateUrl: './small-loader.component.html'
+})
+export class SmallLoaderComponent {
+  @Input() loading: boolean
+}
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 7cc6055c2..85fc1c3a0 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -17,7 +17,7 @@ function getParameterByName (name: string, url: string) {
  return decodeURIComponent(results[2].replace(/\+/g, ' '))
 }
-function populateAsyncUserVideoChannels (authService: AuthService, channel: { id: number, label: string, support: string }[]) {
+function populateAsyncUserVideoChannels (authService: AuthService, channel: { id: number, label: string, support?: string }[]) {
  return new Promise(res => {
    authService.userInformationLoaded
      .subscribe(
@@ -78,10 +78,10 @@ function objectToUrlEncoded (obj: any) {
 // Thanks: https://gist.github.com/ghinda/8442a57f22099bdb2e34
 function objectToFormData (obj: any, form?: FormData, namespace?: string) {
-  let fd = form || new FormData()
+  const fd = form || new FormData()
  let formKey
-  for (let key of Object.keys(obj)) {
+  for (const key of Object.keys(obj)) {
    if (namespace) formKey = `${namespace}[${key}]`
    else formKey = key
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.scss b/client/src/app/shared/moderation/user-moderation-dropdown.component.scss
deleted file mode 100644
index e69de29bb..000000000
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.scss
+++ /dev/null
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 9a2461ebf..9dd16812b 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -10,8 +10,7 @@ import { BlocklistService } from '@app/shared/blocklist'
 @Component({
  selector: 'my-user-moderation-dropdown',
-  templateUrl: './user-moderation-dropdown.component.html',
+  templateUrl: './user-moderation-dropdown.component.html'
-  styleUrls: [ './user-moderation-dropdown.component.scss' ]
 })
 export class UserModerationDropdownComponent implements OnChanges {
  @ViewChild('userBanModal') userBanModal: UserBanModalComponent
diff --git a/client/src/app/shared/overview/videos-overview.model.ts b/client/src/app/shared/overview/videos-overview.model.ts
index c8eafc8e8..21abe1697 100644
--- a/client/src/app/shared/overview/videos-overview.model.ts
+++ b/client/src/app/shared/overview/videos-overview.model.ts
@@ -1,9 +1,9 @@
-import { VideoChannelAttribute, VideoConstant, VideosOverview as VideosOverviewServer } from '../../../../../shared/models'
+import { VideoChannelSummary, VideoConstant, VideosOverview as VideosOverviewServer } from '../../../../../shared/models'
 import { Video } from '@app/shared/video/video.model'
 export class VideosOverview implements VideosOverviewServer {
  channels: {
-    channel: VideoChannelAttribute
+    channel: VideoChannelSummary
    videos: Video[]
  }[]
diff --git a/client/src/app/shared/renderer/html-renderer.service.ts b/client/src/app/shared/renderer/html-renderer.service.ts
index d49df9b6d..28ef51e72 100644
--- a/client/src/app/shared/renderer/html-renderer.service.ts
+++ b/client/src/app/shared/renderer/html-renderer.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core'
 import { LinkifierService } from '@app/shared/renderer/linkifier.service'
-import * as sanitizeHtml from 'sanitize-html'
 @Injectable()
 export class HtmlRendererService {
@@ -9,7 +8,10 @@ export class HtmlRendererService {
  }
-  toSafeHtml (text: string) {
+  async toSafeHtml (text: string) {
+    // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    const sanitizeHtml: typeof import ('sanitize-html') = (await import('sanitize-html') as any).default
    // Convert possible markdown to html
    const html = this.linkifier.linkify(text)
diff --git a/client/src/app/shared/renderer/linkifier.service.ts b/client/src/app/shared/renderer/linkifier.service.ts
index 2529c9eaf..95d5f17cc 100644
--- a/client/src/app/shared/renderer/linkifier.service.ts
+++ b/client/src/app/shared/renderer/linkifier.service.ts
@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core'
 import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
-// FIXME: use @types/linkify when https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29682/files is merged?
+import * as linkify from 'linkifyjs'
-const linkify = require('linkifyjs')
+import linkifyHtml from 'linkifyjs/html'
-const linkifyHtml = require('linkifyjs/html')
 @Injectable()
 export class LinkifierService {
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
index 07017eca5..9a9066351 100644
--- a/client/src/app/shared/renderer/markdown.service.ts
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core'
-import * as MarkdownIt from 'markdown-it'
+import { MarkdownIt } from 'markdown-it'
 @Injectable()
 export class MarkdownService {
@@ -14,32 +14,38 @@ export class MarkdownService {
  ]
  static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ])
-  private textMarkdownIt: MarkdownIt.MarkdownIt
+  private textMarkdownIt: MarkdownIt
-  private enhancedMarkdownIt: MarkdownIt.MarkdownIt
+  private enhancedMarkdownIt: MarkdownIt
-  constructor () {
+  async textMarkdownToHTML (markdown: string) {
-    this.textMarkdownIt = this.createMarkdownIt(MarkdownService.TEXT_RULES)
-    this.enhancedMarkdownIt = this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
-  }
-  textMarkdownToHTML (markdown: string) {
    if (!markdown) return ''
+    if (!this.textMarkdownIt) {
+      this.textMarkdownIt = await this.createMarkdownIt(MarkdownService.TEXT_RULES)
+    }
    const html = this.textMarkdownIt.render(markdown)
    return this.avoidTruncatedTags(html)
  }
-  enhancedMarkdownToHTML (markdown: string) {
+  async enhancedMarkdownToHTML (markdown: string) {
    if (!markdown) return ''
+    if (!this.enhancedMarkdownIt) {
+      this.enhancedMarkdownIt = await this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
+    }
    const html = this.enhancedMarkdownIt.render(markdown)
    return this.avoidTruncatedTags(html)
  }
-  private createMarkdownIt (rules: string[]) {
+  private async createMarkdownIt (rules: string[]) {
-    const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true })
+    // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
+    const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true })
-    for (let rule of rules) {
+    for (const rule of rules) {
      markdownIt.enable(rule)
    }
@@ -48,7 +54,7 @@ export class MarkdownService {
    return markdownIt
  }
-  private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) {
+  private setTargetToLinks (markdownIt: MarkdownIt) {
    // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
    const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
      return self.renderToken(tokens, idx, options)
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 6f8625c7e..ded65653f 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -14,10 +14,7 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
 import { ButtonComponent } from './buttons/button.component'
 import { DeleteButtonComponent } from './buttons/delete-button.component'
 import { EditButtonComponent } from './buttons/edit-button.component'
-import { FromNowPipe } from './misc/from-now.pipe'
 import { LoaderComponent } from './misc/loader.component'
-import { NumberFormatterPipe } from './misc/number-formatter.pipe'
-import { ObjectLengthPipe } from './misc/object-length.pipe'
 import { RestExtractor, RestService } from './rest'
 import { UserService } from './users'
 import { VideoAbuseService } from './video-abuse'
@@ -45,9 +42,11 @@ import {
  VideoChangeOwnershipValidatorsService,
  VideoChannelValidatorsService,
  VideoCommentValidatorsService,
+  VideoPlaylistValidatorsService,
  VideoValidatorsService
 } from '@app/shared/forms'
 import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar'
+import { InputMaskModule } from 'primeng/inputmask'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validators/video-captions-validators.service'
 import { VideoCaptionService } from '@app/shared/video-caption'
@@ -68,7 +67,24 @@ import { UserNotificationsComponent } from '@app/shared/users/user-notifications
 import { InstanceService } from '@app/shared/instance/instance.service'
 import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer'
 import { ConfirmComponent } from '@app/shared/confirm/confirm.component'
-import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
+import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { ImageUploadComponent } from '@app/shared/images/image-upload.component'
+import { GlobalIconComponent } from '@app/shared/images/global-icon.component'
+import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/video-playlist-miniature.component'
+import { VideoAddToPlaylistComponent } from '@app/shared/video-playlist/video-add-to-playlist.component'
+import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.component'
+import { VideoPlaylistElementMiniatureComponent } from '@app/shared/video-playlist/video-playlist-element-miniature.component'
+import { VideosSelectionComponent } from '@app/shared/video/videos-selection.component'
+import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe'
+import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe'
+import { FromNowPipe } from '@app/shared/angular/from-now.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'
 @NgModule({
  imports: [
@@ -84,28 +100,50 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
    NgbTabsetModule,
    NgbTooltipModule,
+    ClipboardModule,
    PrimeSharedModule,
+    InputMaskModule,
    NgPipesModule
  ],
  declarations: [
    LoaderComponent,
+    SmallLoaderComponent,
    VideoThumbnailComponent,
    VideoMiniatureComponent,
+    VideoPlaylistMiniatureComponent,
+    VideoAddToPlaylistComponent,
+    VideoPlaylistElementMiniatureComponent,
+    VideosSelectionComponent,
+    VideoActionsDropdownComponent,
+    VideoDownloadComponent,
+    VideoReportComponent,
+    VideoBlacklistComponent,
    FeedComponent,
    ButtonComponent,
    DeleteButtonComponent,
    EditButtonComponent,
-    ActionDropdownComponent,
    NumberFormatterPipe,
    ObjectLengthPipe,
    FromNowPipe,
+    PeerTubeTemplateDirective,
+    ActionDropdownComponent,
    MarkdownTextareaComponent,
    InfiniteScrollerDirective,
    TextareaAutoResizeDirective,
    HelpComponent,
    ReactiveFileComponent,
    PeertubeCheckboxComponent,
+    TimestampInputComponent,
    SubscribeButtonComponent,
    RemoteSubscribeComponent,
    InstanceFeaturesTableComponent,
@@ -114,7 +152,9 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
    TopMenuDropdownComponent,
    UserNotificationsComponent,
    ConfirmComponent,
-    GlobalIconComponent
+    GlobalIconComponent,
+    ImageUploadComponent
  ],
  exports: [
@@ -130,24 +170,44 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
    NgbTabsetModule,
    NgbTooltipModule,
+    ClipboardModule,
    PrimeSharedModule,
+    InputMaskModule,
    BytesPipe,
    KeysPipe,
    LoaderComponent,
+    SmallLoaderComponent,
    VideoThumbnailComponent,
    VideoMiniatureComponent,
+    VideoPlaylistMiniatureComponent,
+    VideoAddToPlaylistComponent,
+    VideoPlaylistElementMiniatureComponent,
+    VideosSelectionComponent,
+    VideoActionsDropdownComponent,
+    VideoDownloadComponent,
+    VideoReportComponent,
+    VideoBlacklistComponent,
    FeedComponent,
    ButtonComponent,
    DeleteButtonComponent,
    EditButtonComponent,
    ActionDropdownComponent,
    MarkdownTextareaComponent,
    InfiniteScrollerDirective,
    TextareaAutoResizeDirective,
    HelpComponent,
    ReactiveFileComponent,
    PeertubeCheckboxComponent,
+    TimestampInputComponent,
    SubscribeButtonComponent,
    RemoteSubscribeComponent,
    InstanceFeaturesTableComponent,
@@ -156,11 +216,14 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
    TopMenuDropdownComponent,
    UserNotificationsComponent,
    ConfirmComponent,
    GlobalIconComponent,
+    ImageUploadComponent,
    NumberFormatterPipe,
    ObjectLengthPipe,
-    FromNowPipe
+    FromNowPipe,
+    PeerTubeTemplateDirective
  ],
  providers: [
@@ -174,6 +237,7 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
    VideoService,
    AccountService,
    VideoChannelService,
+    VideoPlaylistService,
    VideoCaptionService,
    VideoImportService,
    UserSubscriptionService,
@@ -183,6 +247,7 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
    LoginValidatorsService,
    ResetPasswordValidatorsService,
    UserValidatorsService,
+    VideoPlaylistValidatorsService,
    VideoAbuseValidatorsService,
    VideoChannelValidatorsService,
    VideoCommentValidatorsService,
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts
index 8f1754c7f..ef470ee44 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -38,7 +38,7 @@ export class SubscribeButtonComponent implements OnInit {
  ngOnInit () {
    if (this.isUserLoggedIn()) {
-      this.userSubscriptionService.isSubscriptionExists(this.uri)
+      this.userSubscriptionService.doesSubscriptionExist(this.uri)
        .subscribe(
          res => this.subscribed = res[this.uri],
diff --git a/client/src/app/shared/user-subscription/user-subscription.service.ts b/client/src/app/shared/user-subscription/user-subscription.service.ts
index 3d05f071e..cfd5b100f 100644
--- a/client/src/app/shared/user-subscription/user-subscription.service.ts
+++ b/client/src/app/shared/user-subscription/user-subscription.service.ts
@@ -28,7 +28,7 @@ export class UserSubscriptionService {
    this.existsObservable = this.existsSubject.pipe(
      bufferTime(500),
      filter(uris => uris.length !== 0),
-      switchMap(uris => this.areSubscriptionExist(uris)),
+      switchMap(uris => this.doSubscriptionsExist(uris)),
      share()
    )
  }
@@ -69,13 +69,13 @@ export class UserSubscriptionService {
               )
  }
-  isSubscriptionExists (nameWithHost: string) {
+  doesSubscriptionExist (nameWithHost: string) {
    this.existsSubject.next(nameWithHost)
    return this.existsObservable.pipe(first())
  }
-  private areSubscriptionExist (uris: string[]): Observable<SubscriptionExistResult> {
+  private doSubscriptionsExist (uris: string[]): Observable<SubscriptionExistResult> {
    const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/exist'
    let params = new HttpParams()
diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts
index 5d0dc19ae..72fc3e7b4 100644
--- a/client/src/app/shared/users/user-notification.model.ts
+++ b/client/src/app/shared/users/user-notification.model.ts
@@ -1,4 +1,4 @@
-import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo, ActorInfo } from '../../../../../shared'
+import { ActorInfo, FollowState, UserNotification as UserNotificationServer, UserNotificationType, VideoInfo } from '../../../../../shared'
 import { Actor } from '@app/shared/actor/actor.model'
 export class UserNotification implements UserNotificationServer {
@@ -39,6 +39,7 @@ export class UserNotification implements UserNotificationServer {
  actorFollow?: {
    id: number
+    state: FollowState
    follower: ActorInfo & { avatarUrl?: string }
    following: {
      type: 'account' | 'channel'
@@ -54,9 +55,11 @@ export class UserNotification implements UserNotificationServer {
  videoUrl?: string
  commentUrl?: any[]
  videoAbuseUrl?: string
+  videoAutoBlacklistUrl?: string
  accountUrl?: string
  videoImportIdentifier?: string
  videoImportUrl?: string
+  instanceFollowUrl?: string
  constructor (hash: UserNotificationServer) {
    this.id = hash.id
@@ -107,6 +110,11 @@ export class UserNotification implements UserNotificationServer {
          this.videoUrl = this.buildVideoUrl(this.videoAbuse.video)
          break
+        case UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS:
+          this.videoAutoBlacklistUrl = '/admin/moderation/video-auto-blacklist/list'
+          this.videoUrl = this.buildVideoUrl(this.video)
+          break
        case UserNotificationType.BLACKLIST_ON_MY_VIDEO:
          this.videoUrl = this.buildVideoUrl(this.videoBlacklist.video)
          break
@@ -118,7 +126,8 @@ export class UserNotification implements UserNotificationServer {
        case UserNotificationType.MY_VIDEO_IMPORT_SUCCESS:
          this.videoImportUrl = this.buildVideoImportUrl()
          this.videoImportIdentifier = this.buildVideoImportIdentifier(this.videoImport)
-          this.videoUrl = this.buildVideoUrl(this.videoImport.video)
+          if (this.videoImport.video) this.videoUrl = this.buildVideoUrl(this.videoImport.video)
          break
        case UserNotificationType.MY_VIDEO_IMPORT_ERROR:
@@ -133,6 +142,10 @@ export class UserNotification implements UserNotificationServer {
        case UserNotificationType.NEW_FOLLOW:
          this.accountUrl = this.buildAccountUrl(this.actorFollow.follower)
          break
+        case UserNotificationType.NEW_INSTANCE_FOLLOWER:
+          this.instanceFollowUrl = '/admin/follows/followers-list'
+          break
      }
    } catch (err) {
      console.error(err)
diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts
index f8a30955d..ae0bc9cb1 100644
--- a/client/src/app/shared/users/user-notification.service.ts
+++ b/client/src/app/shared/users/user-notification.service.ts
@@ -7,7 +7,7 @@ import { ResultList, UserNotification as UserNotificationServer, UserNotificatio
 import { UserNotification } from './user-notification.model'
 import { AuthService } from '../../core'
 import { ComponentPagination } from '../rest/component-pagination.model'
-import { User } from '..'
+import { User } from '../users/user.model'
 import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
 @Injectable()
diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
index 0d69e0feb..d0d9d9f35 100644
--- a/client/src/app/shared/users/user-notifications.component.html
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -36,6 +36,14 @@
        </div>
      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS">
+        <my-global-icon iconName="no"></my-global-icon>
+        <div class="message">
+          The recently added video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been <a (click)="markAsRead(notification)" [routerLink]="notification.videoAutoBlacklistUrl">auto-blacklisted</a>
+        </div>
+      </ng-container>
      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
@@ -56,7 +64,7 @@
        <my-global-icon iconName="cloud-download"></my-global-icon>
        <div class="message">
-          <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl || notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
        </div>
      </ng-container>
@@ -94,6 +102,15 @@
          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
        </div>
      </ng-container>
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_INSTANCE_FOLLOWER">
+        <my-global-icon iconName="users"></my-global-icon>
+        <div class="message">
+          Your instance has <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">a new follower</a> ({{ notification.actorFollow.follower.host }})
+          <ng-container *ngIf="notification.actorFollow.state === 'pending'"> awaiting your approval</ng-container>
+        </div>
+      </ng-container>
    </ng-container>
    <div class="from-date">{{ notification.createdAt | myFromNow }}</div>
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index 315d504c9..88f38d9cf 100644
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -13,7 +13,7 @@
  align-items: center;
  font-size: inherit;
  padding: 15px 5px 15px 10px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
+  border-bottom: 1px solid $separator-border-color;
  &.unread {
    background-color: rgba(0, 0, 0, 0.05);
diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts
index b5f9fd399..ce43b604a 100644
--- a/client/src/app/shared/users/user-notifications.component.ts
+++ b/client/src/app/shared/users/user-notifications.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { UserNotificationService } from '@app/shared/users/user-notification.service'
 import { UserNotificationType } from '../../../../../shared'
 import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
@@ -15,6 +15,8 @@ export class UserNotificationsComponent implements OnInit {
  @Input() infiniteScroll = true
  @Input() itemsPerPage = 20
+  @Output() notificationsLoaded = new EventEmitter()
  notifications: UserNotification[] = []
  // So we can access it in the template
@@ -43,6 +45,8 @@ export class UserNotificationsComponent implements OnInit {
          result => {
            this.notifications = this.notifications.concat(result.data)
            this.componentPagination.totalItems = result.total
+            this.notificationsLoaded.emit()
          },
          err => this.notifier.error(err.message)
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index c15f1de8c..e3ed2dfbd 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -2,15 +2,18 @@ import { hasUserRight, User as UserServerModel, UserNotificationSetting, UserRig
 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 {
  id: number
  username: string
  email: string
  emailVerified: boolean
-  role: UserRole
  nsfwPolicy: NSFWPolicyType
+  role: UserRole
+  roleLabel: string
  webTorrentEnabled: boolean
  autoPlayVideo: boolean
  videosHistoryEnabled: boolean
@@ -21,6 +24,8 @@ export class User implements UserServerModel {
  videoChannels: VideoChannel[]
  createdAt: Date
+  adminFlags?: UserAdminFlag
  blocked: boolean
  blockedReason?: string
@@ -30,6 +35,7 @@ export class User implements UserServerModel {
    this.id = hash.id
    this.username = hash.username
    this.email = hash.email
    this.role = hash.role
    this.videoChannels = hash.videoChannels
@@ -40,6 +46,9 @@ export class User implements UserServerModel {
    this.videosHistoryEnabled = hash.videosHistoryEnabled
    this.autoPlayVideo = hash.autoPlayVideo
    this.createdAt = hash.createdAt
+    this.adminFlags = hash.adminFlags
    this.blocked = hash.blocked
    this.blockedReason = hash.blockedReason
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 94e46d7c2..a9eab9b6f 100644
--- a/client/src/app/shared/video-blacklist/video-blacklist.service.ts
+++ b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
@@ -1,11 +1,13 @@
-import { catchError, map } from 'rxjs/operators'
+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 { Observable } from 'rxjs'
+import { from as observableFrom, Observable } from 'rxjs'
-import { VideoBlacklist, ResultList } from '../../../../../shared'
+import { VideoBlacklist, VideoBlacklistType, ResultList } from '../../../../../shared'
+import { Video } from '../video/video.model'
 import { environment } from '../../../environments/environment'
 import { RestExtractor, RestPagination, RestService } from '../rest'
+import { ComponentPagination } from '../rest/component-pagination.model'
 @Injectable()
 export class VideoBlacklistService {
@@ -17,10 +19,14 @@ export class VideoBlacklistService {
    private restExtractor: RestExtractor
  ) {}
-  listBlacklist (pagination: RestPagination, sort: SortMeta): Observable<ResultList<VideoBlacklist>> {
+  listBlacklist (pagination: RestPagination, sort: SortMeta, type?: VideoBlacklistType): Observable<ResultList<VideoBlacklist>> {
    let params = new HttpParams()
    params = this.restService.addRestGetParams(params, pagination, sort)
+    if (type) {
+      params = params.set('type', type.toString())
+    }
    return this.authHttp.get<ResultList<VideoBlacklist>>(VideoBlacklistService.BASE_VIDEOS_URL + 'blacklist', { params })
               .pipe(
                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
@@ -28,12 +34,37 @@ export class VideoBlacklistService {
               )
  }
-  removeVideoFromBlacklist (videoId: number) {
+  getAutoBlacklistedAsVideoList (videoPagination: ComponentPagination): Observable<{ videos: Video[], totalVideos: number}> {
-    return this.authHttp.delete(VideoBlacklistService.BASE_VIDEOS_URL + videoId + '/blacklist')
+    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
+    // prioritize first created since waiting longest
-                 catchError(res => this.restExtractor.handleError(res))
+    const AUTO_BLACKLIST_SORT = 'createdAt'
-               )
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, AUTO_BLACKLIST_SORT)
+    params = params.set('type', VideoBlacklistType.AUTO_BEFORE_PUBLISHED.toString())
+    return this.authHttp.get<ResultList<VideoBlacklist>>(VideoBlacklistService.BASE_VIDEOS_URL + 'blacklist', { params })
+              .pipe(
+                map(res => {
+                  const videos = res.data.map(videoBlacklist => new Video(videoBlacklist.video))
+                  const totalVideos = res.total
+                  return { videos, totalVideos }
+                }),
+                catchError(res => this.restExtractor.handleError(res))
+              )
+  }
+  removeVideoFromBlacklist (videoIdArgs: number | number[]) {
+    const videoIds = Array.isArray(videoIdArgs) ? videoIdArgs : [ videoIdArgs ]
+    return observableFrom(videoIds)
+      .pipe(
+        concatMap(id => this.authHttp.delete(VideoBlacklistService.BASE_VIDEOS_URL + id + '/blacklist')),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
  }
  blacklistVideo (videoId: number, reason: string, unfederate: boolean) {
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 7ae66ddfc..7ae13154d 100644
--- a/client/src/app/shared/video-import/video-import.service.ts
+++ b/client/src/app/shared/video-import/video-import.service.ts
@@ -67,6 +67,7 @@ export class VideoImportService {
    const description = video.description || null
    const support = video.support || null
    const scheduleUpdate = video.scheduleUpdate || null
+    const originallyPublishedAt = video.originallyPublishedAt || null
    return {
      name: video.name,
@@ -81,9 +82,11 @@ export class VideoImportService {
      nsfw: video.nsfw,
      waitTranscoding: video.waitTranscoding,
      commentsEnabled: video.commentsEnabled,
+      downloadEnabled: video.downloadEnabled,
      thumbnailfile: video.thumbnailfile,
      previewfile: video.previewfile,
-      scheduleUpdate
+      scheduleUpdate,
+      originallyPublishedAt
    }
  }
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
new file mode 100644
index 000000000..648d580fa
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -0,0 +1,76 @@
+<div class="root">
+  <div class="header">
+    <div class="first-row">
+      <div i18n class="title">Save to</div>
+      <div class="options" (click)="displayOptions = !displayOptions">
+        <my-global-icon iconName="cog"></my-global-icon>
+        <span i18n>Options</span>
+      </div>
+    </div>
+    <div class="options-row" *ngIf="displayOptions">
+      <div>
+        <my-peertube-checkbox
+          inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
+          i18n-labelText labelText="Start at"
+        ></my-peertube-checkbox>
+        <my-timestamp-input
+          [timestamp]="timestampOptions.startTimestamp"
+          [maxTimestamp]="video.duration"
+          [disabled]="!timestampOptions.startTimestampEnabled"
+          [(ngModel)]="timestampOptions.startTimestamp"
+        ></my-timestamp-input>
+      </div>
+      <div>
+        <my-peertube-checkbox
+          inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
+          i18n-labelText labelText="Stop at"
+        ></my-peertube-checkbox>
+        <my-timestamp-input
+          [timestamp]="timestampOptions.stopTimestamp"
+          [maxTimestamp]="video.duration"
+          [disabled]="!timestampOptions.stopTimestampEnabled"
+          [(ngModel)]="timestampOptions.stopTimestamp"
+        ></my-timestamp-input>
+      </div>
+    </div>
+  </div>
+  <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
+    <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>
+    <div class="display-name">
+      {{ playlist.displayName }}
+      <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info">
+        {{ formatTimestamp(playlist) }}
+      </div>
+    </div>
+  </div>
+  <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
+    <my-global-icon iconName="add"></my-global-icon>
+    Create a private playlist
+  </div>
+  <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
+    <div class="form-group">
+      <label i18n for="displayName">Display name</label>
+      <input
+        type="text" id="displayName"
+        formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+      >
+      <div *ngIf="formErrors['displayName']" class="form-error">
+        {{ formErrors['displayName'] }}
+      </div>
+    </div>
+    <input type="submit" i18n-value value="Create" [disabled]="!form.valid">
+  </form>
+</div>
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
new file mode 100644
index 000000000..c677fea6c
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -0,0 +1,107 @@
+@import '_variables';
+@import '_mixins';
+.root {
+  max-height: 300px;
+  overflow-y: auto;
+}
+.header {
+  min-width: 240px;
+  padding: 6px 24px 10px 24px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid $separator-border-color;
+  .first-row {
+    display: flex;
+    align-items: center;
+    .title {
+      font-size: 18px;
+      flex-grow: 1;
+    }
+    .options {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      cursor: pointer;
+      my-global-icon {
+        @include apply-svg-color(#333);
+        width: 16px;
+        height: 23px;
+        margin-right: 3px;
+      }
+    }
+  }
+  .options-row {
+    margin-top: 10px;
+    padding-left: 10px;
+    > div {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+.dropdown-item {
+  padding: 6px 24px;
+}
+.playlist {
+  display: flex;
+  cursor: pointer;
+  my-peertube-checkbox {
+    margin-right: 10px;
+  }
+  .display-name {
+    display: flex;
+    align-items: flex-end;
+    .timestamp-info {
+      font-size: 0.9em;
+      color: $grey-foreground-color;
+      margin-left: 5px;
+    }
+  }
+}
+.new-playlist-button,
+.new-playlist-block {
+  padding-top: 10px;
+  margin-top: 10px;
+  border-top: 1px solid $separator-border-color;
+}
+.new-playlist-button  {
+  cursor: pointer;
+  my-global-icon {
+    @include apply-svg-color(#333);
+    position: relative;
+    left: -1px;
+    top: -1px;
+    margin-right: 4px;
+    width: 21px;
+    height: 21px;
+  }
+}
+input[type=text] {
+  @include peertube-input-text(200px);
+  display: block;
+}
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+}
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
new file mode 100644
index 000000000..7dcdf7a9e
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
@@ -0,0 +1,212 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { AuthService, Notifier } from '@app/core'
+import { forkJoin } from 'rxjs'
+import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models'
+import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { secondsToTime } from '../../../assets/player/utils'
+type PlaylistSummary = {
+  id: number
+  inPlaylist: boolean
+  displayName: string
+  startTimestamp?: number
+  stopTimestamp?: number
+}
+@Component({
+  selector: 'my-video-add-to-playlist',
+  styleUrls: [ './video-add-to-playlist.component.scss' ],
+  templateUrl: './video-add-to-playlist.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class VideoAddToPlaylistComponent extends FormReactive implements OnInit {
+  @Input() video: Video
+  @Input() currentVideoTimestamp: number
+  @Input() lazyLoad = false
+  isNewPlaylistBlockOpened = false
+  videoPlaylists: PlaylistSummary[] = []
+  timestampOptions: {
+    startTimestampEnabled: boolean
+    startTimestamp: number
+    stopTimestampEnabled: boolean
+    stopTimestamp: number
+  }
+  displayOptions = false
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private authService: AuthService,
+    private notifier: Notifier,
+    private i18n: I18n,
+    private videoPlaylistService: VideoPlaylistService,
+    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
+    private cd: ChangeDetectorRef
+  ) {
+    super()
+  }
+  get user () {
+    return this.authService.getUser()
+  }
+  ngOnInit () {
+    this.resetOptions(true)
+    this.buildForm({
+      displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
+    })
+    if (this.lazyLoad !== true) this.load()
+  }
+  load () {
+    forkJoin([
+      this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt'),
+      this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)
+    ])
+      .subscribe(
+        ([ playlistsResult, existResult ]) => {
+          for (const playlist of playlistsResult.data) {
+            const existingPlaylist = existResult[ this.video.id ].find(p => p.playlistId === playlist.id)
+            this.videoPlaylists.push({
+              id: playlist.id,
+              displayName: playlist.displayName,
+              inPlaylist: !!existingPlaylist,
+              startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
+              stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
+            })
+          }
+          this.cd.markForCheck()
+        }
+      )
+  }
+  openChange (opened: boolean) {
+    if (opened === false) {
+      this.isNewPlaylistBlockOpened = false
+      this.displayOptions = false
+    }
+  }
+  openCreateBlock (event: Event) {
+    event.preventDefault()
+    this.isNewPlaylistBlockOpened = true
+  }
+  togglePlaylist (event: Event, playlist: PlaylistSummary) {
+    event.preventDefault()
+    if (playlist.inPlaylist === true) {
+      this.removeVideoFromPlaylist(playlist)
+    } else {
+      this.addVideoInPlaylist(playlist)
+    }
+    playlist.inPlaylist = !playlist.inPlaylist
+    this.resetOptions()
+    this.cd.markForCheck()
+  }
+  createPlaylist () {
+    const displayName = this.form.value[ 'displayName' ]
+    const videoPlaylistCreate: VideoPlaylistCreate = {
+      displayName,
+      privacy: VideoPlaylistPrivacy.PRIVATE
+    }
+    this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate).subscribe(
+      res => {
+        this.videoPlaylists.push({
+          id: res.videoPlaylist.id,
+          displayName,
+          inPlaylist: false
+        })
+        this.isNewPlaylistBlockOpened = false
+        this.cd.markForCheck()
+      },
+      err => this.notifier.error(err.message)
+    )
+  }
+  resetOptions (resetTimestamp = false) {
+    this.displayOptions = false
+    this.timestampOptions = {} as any
+    this.timestampOptions.startTimestampEnabled = false
+    this.timestampOptions.stopTimestampEnabled = false
+    if (resetTimestamp) {
+      this.timestampOptions.startTimestamp = 0
+      this.timestampOptions.stopTimestamp = this.video.duration
+    }
+  }
+  formatTimestamp (playlist: PlaylistSummary) {
+    const start = playlist.startTimestamp ? secondsToTime(playlist.startTimestamp) : ''
+    const stop = playlist.stopTimestamp ? secondsToTime(playlist.stopTimestamp) : ''
+    return `(${start}-${stop})`
+  }
+  private removeVideoFromPlaylist (playlist: PlaylistSummary) {
+    this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, this.video.id)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName }))
+            playlist.inPlaylist = false
+          },
+          err => {
+            this.notifier.error(err.message)
+            playlist.inPlaylist = true
+          },
+          () => this.cd.markForCheck()
+        )
+  }
+  private addVideoInPlaylist (playlist: PlaylistSummary) {
+    const body: VideoPlaylistElementCreate = { videoId: this.video.id }
+    if (this.timestampOptions.startTimestampEnabled) body.startTimestamp = this.timestampOptions.startTimestamp
+    if (this.timestampOptions.stopTimestampEnabled) body.stopTimestamp = this.timestampOptions.stopTimestamp
+    this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
+      .subscribe(
+        () => {
+          playlist.inPlaylist = true
+          playlist.startTimestamp = body.startTimestamp
+          playlist.stopTimestamp = body.stopTimestamp
+          const message = body.startTimestamp || body.stopTimestamp
+            ? this.i18n('Video added in {{n}} at timestamps {{t}}', { n: playlist.displayName, t: this.formatTimestamp(playlist) })
+            : this.i18n('Video added in {{n}}', { n: playlist.displayName })
+          this.notifier.success(message)
+        },
+        err => {
+          this.notifier.error(err.message)
+          playlist.inPlaylist = false
+        },
+        () => this.cd.markForCheck()
+      )
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
new file mode 100644
index 000000000..ab5a78928
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
@@ -0,0 +1,73 @@
+<div class="video" [ngClass]="{ playing: playing }">
+  <a [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()">
+    <div class="position">
+      <my-global-icon *ngIf="playing" iconName="play"></my-global-icon>
+      <ng-container *ngIf="!playing">{{ position }}</ng-container>
+    </div>
+    <my-video-thumbnail
+      [video]="video" [nsfw]="isVideoBlur(video)"
+      [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+    ></my-video-thumbnail>
+    <div class="video-info">
+      <a tabindex="-1" class="video-info-name"
+         [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+         [attr.title]="video.name"
+      >{{ video.name }}</a>
+      <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
+      <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ video.byAccount }}</span>
+      <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video) }}</span>
+    </div>
+  </a>
+  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()"
+       autoClose="outside">
+    <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
+    <div ngbDropdownMenu>
+      <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, video)">
+        <my-global-icon iconName="edit"></my-global-icon>
+        <ng-container i18n>Edit starts/stops at</ng-container>
+      </div>
+      <div class="timestamp-options" *ngIf="displayTimestampOptions">
+        <div>
+          <my-peertube-checkbox
+            inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
+            i18n-labelText labelText="Start at"
+          ></my-peertube-checkbox>
+          <my-timestamp-input
+            [timestamp]="timestampOptions.startTimestamp"
+            [maxTimestamp]="video.duration"
+            [disabled]="!timestampOptions.startTimestampEnabled"
+            [(ngModel)]="timestampOptions.startTimestamp"
+          ></my-timestamp-input>
+        </div>
+        <div>
+          <my-peertube-checkbox
+            inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
+            i18n-labelText labelText="Stop at"
+          ></my-peertube-checkbox>
+          <my-timestamp-input
+            [timestamp]="timestampOptions.stopTimestamp"
+            [maxTimestamp]="video.duration"
+            [disabled]="!timestampOptions.stopTimestampEnabled"
+            [(ngModel)]="timestampOptions.stopTimestamp"
+          ></my-timestamp-input>
+        </div>
+        <input type="submit" i18n-value value="Save" (click)="updateTimestamps(video)">
+      </div>
+      <span class="dropdown-item" (click)="removeFromPlaylist(video)">
+            <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
+          </span>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
new file mode 100644
index 000000000..cb7072d7f
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -0,0 +1,125 @@
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
+my-video-thumbnail {
+  @include thumbnail-size-component(130px, 72px);
+  display: flex; // Avoids an issue with line-height that adds space below the element
+  margin-right: 10px;
+}
+.video {
+  display: flex;
+  align-items: center;
+  background-color: var(--mainBackgroundColor);
+  padding: 10px;
+  border-bottom: 1px solid $separator-border-color;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    .more {
+      opacity: 1;
+    }
+  }
+  &.playing {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+  a {
+    @include disable-default-a-behaviour;
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    cursor: pointer;
+    .position {
+      font-weight: $font-semibold;
+      margin-right: 10px;
+      color: $grey-foreground-color;
+      min-width: 25px;
+      my-global-icon {
+        @include apply-svg-color($grey-foreground-color);
+        width: 17px;
+        position: relative;
+        left: -2px;
+      }
+    }
+    .video-info {
+      display: flex;
+      flex-direction: column;
+      align-self: flex-start;
+      min-width: 0;
+      a {
+        color: var(--mainForegroundColor);
+        width: auto;
+        &:hover {
+          text-decoration: underline !important;
+        }
+      }
+      .video-info-name {
+        font-size: 18px;
+        font-weight: $font-semibold;
+        display: inline-block;
+        @include ellipsis;
+      }
+      .video-info-account, .video-info-timestamp {
+        color: $grey-foreground-color;
+      }
+    }
+  }
+  .more {
+    justify-self: flex-end;
+    margin-left: auto;
+    cursor: pointer;
+    opacity: 0;
+    &.show {
+      opacity: 1;
+    }
+    .icon-more {
+      @include apply-svg-color($grey-foreground-color);
+      display: flex;
+      &::after {
+        border: none;
+      }
+    }
+    .dropdown-item {
+      @include dropdown-with-icon-item;
+    }
+    .timestamp-options {
+      padding-top: 0;
+      padding-left: 35px;
+      margin-bottom: 15px;
+      > div {
+        display: flex;
+        align-items: center;
+      }
+      input {
+        @include peertube-button;
+        @include orange-button;
+        margin-top: 10px;
+      }
+    }
+  }
+}
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
new file mode 100644
index 000000000..57990707a
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -0,0 +1,159 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'
+import { Video } from '@app/shared/video/video.model'
+import { VideoPlaylistElementUpdate } from '@shared/models'
+import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
+import { ActivatedRoute } from '@angular/router'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoService } from '@app/shared/video/video.service'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { secondsToTime } from '../../../assets/player/utils'
+@Component({
+  selector: 'my-video-playlist-element-miniature',
+  styleUrls: [ './video-playlist-element-miniature.component.scss' ],
+  templateUrl: './video-playlist-element-miniature.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class VideoPlaylistElementMiniatureComponent {
+  @ViewChild('moreDropdown') moreDropdown: NgbDropdown
+  @Input() playlist: VideoPlaylist
+  @Input() video: Video
+  @Input() owned = false
+  @Input() playing = false
+  @Input() rowLink = false
+  @Input() accountLink = true
+  @Input() position: number
+  @Output() elementRemoved = new EventEmitter<Video>()
+  displayTimestampOptions = false
+  timestampOptions: {
+    startTimestampEnabled: boolean
+    startTimestamp: number
+    stopTimestampEnabled: boolean
+    stopTimestamp: number
+  } = {} as any
+  constructor (
+    private authService: AuthService,
+    private serverService: ServerService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private route: ActivatedRoute,
+    private i18n: I18n,
+    private videoService: VideoService,
+    private videoPlaylistService: VideoPlaylistService,
+    private cdr: ChangeDetectorRef
+  ) {}
+  buildRouterLink () {
+    if (!this.playlist) return null
+    return [ '/videos/watch/playlist', this.playlist.uuid ]
+  }
+  buildRouterQuery () {
+    if (!this.video) return {}
+    return {
+      videoId: this.video.uuid,
+      start: this.video.playlistElement.startTimestamp,
+      stop: this.video.playlistElement.stopTimestamp
+    }
+  }
+  isVideoBlur (video: Video) {
+    return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
+  }
+  removeFromPlaylist (video: Video) {
+    this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, video.id)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName }))
+            this.elementRemoved.emit(this.video)
+          },
+          err => this.notifier.error(err.message)
+        )
+    this.moreDropdown.close()
+  }
+  updateTimestamps (video: Video) {
+    const body: VideoPlaylistElementUpdate = {}
+    body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null
+    body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null
+    this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, video.id, body)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Timestamps updated'))
+            video.playlistElement.startTimestamp = body.startTimestamp
+            video.playlistElement.stopTimestamp = body.stopTimestamp
+            this.cdr.detectChanges()
+          },
+          err => this.notifier.error(err.message)
+        )
+    this.moreDropdown.close()
+  }
+  formatTimestamp (video: Video) {
+    const start = video.playlistElement.startTimestamp
+    const stop = video.playlistElement.stopTimestamp
+    const startFormatted = secondsToTime(start, true, ':')
+    const stopFormatted = secondsToTime(stop, true, ':')
+    if (start === null && stop === null) return ''
+    if (start !== null && stop === null) return this.i18n('Starts at ') + startFormatted
+    if (start === null && stop !== null) return this.i18n('Stops at ') + stopFormatted
+    return this.i18n('Starts at ') + startFormatted + this.i18n(' and stops at ') + stopFormatted
+  }
+  onDropdownOpenChange () {
+    this.displayTimestampOptions = false
+  }
+  toggleDisplayTimestampsOptions (event: Event, video: Video) {
+    event.preventDefault()
+    this.displayTimestampOptions = !this.displayTimestampOptions
+    if (this.displayTimestampOptions === true) {
+      this.timestampOptions = {
+        startTimestampEnabled: false,
+        stopTimestampEnabled: false,
+        startTimestamp: 0,
+        stopTimestamp: video.duration
+      }
+      if (video.playlistElement.startTimestamp) {
+        this.timestampOptions.startTimestampEnabled = true
+        this.timestampOptions.startTimestamp = video.playlistElement.startTimestamp
+      }
+      if (video.playlistElement.stopTimestamp) {
+        this.timestampOptions.stopTimestampEnabled = true
+        this.timestampOptions.stopTimestamp = video.playlistElement.stopTimestamp
+      }
+    }
+    // FIXME: why do we have to use setTimeout here?
+    setTimeout(() => {
+      this.cdr.detectChanges()
+    })
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
new file mode 100644
index 000000000..86f6664cb
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
@@ -0,0 +1,34 @@
+<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage }">
+  <a
+    [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description"
+    class="miniature-thumbnail"
+  >
+    <img alt="" [attr.aria-labelledby]="playlist.displayName" [attr.src]="playlist.thumbnailUrl" />
+    <div class="miniature-playlist-info-overlay">
+      <ng-container i18n>{playlist.videosLength, plural, =0 {No videos} =1 {1 video} other {{{ playlist.videosLength }} videos}}</ng-container>
+    </div>
+    <div class="play-overlay">
+      <div class="icon"></div>
+    </div>
+  </a>
+  <div class="miniature-info">
+    <a tabindex="-1" class="miniature-name" [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description">
+      {{ playlist.displayName }}
+    </a>
+    <a i18n [routerLink]="[ '/video-channels', playlist.videoChannelBy ]" class="by" *ngIf="displayChannel && playlist.videoChannelBy">
+      {{ playlist.videoChannelBy }}
+    </a>
+    <div class="privacy-date">
+      <span class="video-info-privacy" *ngIf="displayPrivacy">{{ playlist.privacy.label }}</span>
+      <span i18n class="updated-at">Updated {{ playlist.updatedAt | myFromNow }}</span>
+    </div>
+    <div *ngIf="displayDescription" class="video-info-description">{{ playlist.description }}</div>
+  </div>
+</div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
new file mode 100644
index 000000000..8947e72d1
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
@@ -0,0 +1,78 @@
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
+.miniature {
+  display: inline-block;
+  &.no-videos:not(.to-manage){
+    a {
+      cursor: default !important;
+    }
+  }
+  &.to-manage,
+  &.no-videos {
+    .play-overlay {
+      display: none;
+    }
+  }
+  .miniature-thumbnail {
+    @include miniature-thumbnail;
+    .miniature-playlist-info-overlay {
+      @include static-thumbnail-overlay;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      height: $video-thumbnail-height;
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-weight: $font-semibold;
+    }
+  }
+  .miniature-info {
+    width: 200px;
+    margin-top: 2px;
+    line-height: normal;
+    .miniature-name {
+      @include miniature-name;
+      @include ellipsis-multiline(1.3em, 2);
+      margin: 0;
+    }
+    .by {
+      @include disable-default-a-behaviour;
+      display: block;
+      color: $grey-foreground-color;
+    }
+    .privacy-date {
+      margin-top: 5px;
+      .video-info-privacy {
+        font-size: 14px;
+        font-weight: $font-semibold;
+        &::after {
+          content: '-';
+          margin: 0 3px;
+        }
+      }
+    }
+    .video-info-description {
+      margin-top: 10px;
+      color: $grey-foreground-color;
+    }
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts
new file mode 100644
index 000000000..523e96f2a
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+@Component({
+  selector: 'my-video-playlist-miniature',
+  styleUrls: [ './video-playlist-miniature.component.scss' ],
+  templateUrl: './video-playlist-miniature.component.html'
+})
+export class VideoPlaylistMiniatureComponent {
+  @Input() playlist: VideoPlaylist
+  @Input() toManage = false
+  @Input() displayChannel = false
+  @Input() displayDescription = false
+  @Input() displayPrivacy = false
+  getPlaylistUrl () {
+    if (this.toManage) return [ '/my-account/video-playlists', this.playlist.uuid ]
+    if (this.playlist.videosLength === 0) return null
+    return [ '/videos/watch/playlist', this.playlist.uuid ]
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist.model.ts b/client/src/app/shared/video-playlist/video-playlist.model.ts
new file mode 100644
index 000000000..7e311aa54
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist.model.ts
@@ -0,0 +1,84 @@
+import {
+  VideoChannelSummary,
+  VideoConstant,
+  VideoPlaylist as ServerVideoPlaylist,
+  VideoPlaylistPrivacy,
+  VideoPlaylistType
+} from '../../../../../shared/models/videos'
+import { AccountSummary, peertubeTranslate } from '@shared/models'
+import { Actor } from '@app/shared/actor/actor.model'
+import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
+export class VideoPlaylist implements ServerVideoPlaylist {
+  id: number
+  uuid: string
+  isLocal: boolean
+  displayName: string
+  description: string
+  privacy: VideoConstant<VideoPlaylistPrivacy>
+  thumbnailPath: string
+  videosLength: number
+  type: VideoConstant<VideoPlaylistType>
+  createdAt: Date | string
+  updatedAt: Date | string
+  ownerAccount: AccountSummary
+  videoChannel?: VideoChannelSummary
+  thumbnailUrl: string
+  ownerBy: string
+  ownerAvatarUrl: string
+  videoChannelBy?: string
+  videoChannelAvatarUrl?: string
+  constructor (hash: ServerVideoPlaylist, translations: {}) {
+    const absoluteAPIUrl = getAbsoluteAPIUrl()
+    this.id = hash.id
+    this.uuid = hash.uuid
+    this.isLocal = hash.isLocal
+    this.displayName = hash.displayName
+    this.description = hash.description
+    this.privacy = hash.privacy
+    this.thumbnailPath = hash.thumbnailPath
+    if (this.thumbnailPath) {
+      this.thumbnailUrl = absoluteAPIUrl + hash.thumbnailPath
+    } else {
+      this.thumbnailUrl = window.location.origin + '/client/assets/images/default-playlist.jpg'
+    }
+    this.videosLength = hash.videosLength
+    this.type = hash.type
+    this.createdAt = new Date(hash.createdAt)
+    this.updatedAt = new Date(hash.updatedAt)
+    this.ownerAccount = hash.ownerAccount
+    this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
+    this.ownerAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.ownerAccount)
+    if (hash.videoChannel) {
+      this.videoChannel = hash.videoChannel
+      this.videoChannelBy = Actor.CREATE_BY_STRING(hash.videoChannel.name, hash.videoChannel.host)
+      this.videoChannelAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.videoChannel)
+    }
+    this.privacy.label = peertubeTranslate(this.privacy.label, translations)
+    if (this.type.id === VideoPlaylistType.WATCH_LATER) {
+      this.displayName = peertubeTranslate(this.displayName, translations)
+    }
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist.service.ts b/client/src/app/shared/video-playlist/video-playlist.service.ts
new file mode 100644
index 000000000..da7437507
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -0,0 +1,179 @@
+import { bufferTime, catchError, filter, first, map, share, switchMap } from 'rxjs/operators'
+import { Injectable } from '@angular/core'
+import { Observable, ReplaySubject, Subject } from 'rxjs'
+import { RestExtractor } from '../rest/rest-extractor.service'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { ResultList, VideoPlaylistElementCreate, VideoPlaylistElementUpdate } from '../../../../../shared'
+import { environment } from '../../../environments/environment'
+import { VideoPlaylist as VideoPlaylistServerModel } from '@shared/models/videos/playlist/video-playlist.model'
+import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { VideoPlaylistCreate } from '@shared/models/videos/playlist/video-playlist-create.model'
+import { VideoPlaylistUpdate } from '@shared/models/videos/playlist/video-playlist-update.model'
+import { objectToFormData } from '@app/shared/misc/utils'
+import { ServerService } from '@app/core'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { AccountService } from '@app/shared/account/account.service'
+import { Account } from '@app/shared/account/account.model'
+import { RestService } from '@app/shared/rest'
+import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
+import { VideoPlaylistReorder } from '@shared/models/videos/playlist/video-playlist-reorder.model'
+@Injectable()
+export class VideoPlaylistService {
+  static BASE_VIDEO_PLAYLIST_URL = environment.apiUrl + '/api/v1/video-playlists/'
+  static MY_VIDEO_PLAYLIST_URL = environment.apiUrl + '/api/v1/users/me/video-playlists/'
+  // Use a replay subject because we "next" a value before subscribing
+  private videoExistsInPlaylistSubject: Subject<number> = new ReplaySubject(1)
+  private readonly videoExistsInPlaylistObservable: Observable<VideoExistInPlaylist>
+  constructor (
+    private authHttp: HttpClient,
+    private serverService: ServerService,
+    private restExtractor: RestExtractor,
+    private restService: RestService
+  ) {
+    this.videoExistsInPlaylistObservable = this.videoExistsInPlaylistSubject.pipe(
+      bufferTime(500),
+      filter(videoIds => videoIds.length !== 0),
+      switchMap(videoIds => this.doVideosExistInPlaylist(videoIds)),
+      share()
+    )
+  }
+  listChannelPlaylists (videoChannel: VideoChannel): Observable<ResultList<VideoPlaylist>> {
+    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost + '/video-playlists'
+    return this.authHttp.get<ResultList<VideoPlaylist>>(url)
+               .pipe(
+                 switchMap(res => this.extractPlaylists(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  listAccountPlaylists (account: Account, sort: string): Observable<ResultList<VideoPlaylist>> {
+    const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-playlists'
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, undefined, sort)
+    return this.authHttp.get<ResultList<VideoPlaylist>>(url, { params })
+               .pipe(
+                 switchMap(res => this.extractPlaylists(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  getVideoPlaylist (id: string | number) {
+    const url = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + id
+    return this.authHttp.get<VideoPlaylist>(url)
+               .pipe(
+                 switchMap(res => this.extractPlaylist(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  createVideoPlaylist (body: VideoPlaylistCreate) {
+    const data = objectToFormData(body)
+    return this.authHttp.post<{ videoPlaylist: { id: number } }>(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL, data)
+               .pipe(
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  updateVideoPlaylist (videoPlaylist: VideoPlaylist, body: VideoPlaylistUpdate) {
+    const data = objectToFormData(body)
+    return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylist.id, data)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  removeVideoPlaylist (videoPlaylist: VideoPlaylist) {
+    return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylist.id)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  addVideoInPlaylist (playlistId: number, body: VideoPlaylistElementCreate) {
+    return this.authHttp.post(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos', body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  updateVideoOfPlaylist (playlistId: number, videoId: number, body: VideoPlaylistElementUpdate) {
+    return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + videoId, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  removeVideoFromPlaylist (playlistId: number, videoId: number) {
+    return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + videoId)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  reorderPlaylist (playlistId: number, oldPosition: number, newPosition: number) {
+    const body: VideoPlaylistReorder = {
+      startPosition: oldPosition,
+      insertAfterPosition: newPosition
+    }
+    return this.authHttp.post(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/reorder', body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  doesVideoExistInPlaylist (videoId: number) {
+    this.videoExistsInPlaylistSubject.next(videoId)
+    return this.videoExistsInPlaylistObservable.pipe(first())
+  }
+  extractPlaylists (result: ResultList<VideoPlaylistServerModel>) {
+    return this.serverService.localeObservable
+               .pipe(
+                 map(translations => {
+                   const playlistsJSON = result.data
+                   const total = result.total
+                   const playlists: VideoPlaylist[] = []
+                   for (const playlistJSON of playlistsJSON) {
+                     playlists.push(new VideoPlaylist(playlistJSON, translations))
+                   }
+                   return { data: playlists, total }
+                 })
+               )
+  }
+  extractPlaylist (playlist: VideoPlaylistServerModel) {
+    return this.serverService.localeObservable
+               .pipe(map(translations => new VideoPlaylist(playlist, translations)))
+  }
+  private doVideosExistInPlaylist (videoIds: number[]): Observable<VideoExistInPlaylist> {
+    const url = VideoPlaylistService.MY_VIDEO_PLAYLIST_URL + 'videos-exist'
+    let params = new HttpParams()
+    params = this.restService.addObjectParams(params, { videoIds })
+    return this.authHttp.get<VideoExistInPlaylist>(url, { params })
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+}
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 1f97bc389..268677977 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -1,4 +1,4 @@
-<div [ngClass]="{ 'margin-content': marginContent }">
+<div class="margin-content">
  <div class="videos-header">
    <div *ngIf="titlePage" class="title-page title-page-single">
      <div placement="bottom" [ngbTooltip]="titleTooltip" container="body">
@@ -11,7 +11,7 @@
    <div class="moderation-block" *ngIf="displayModerationBlock">
      <my-peertube-checkbox
        (change)="toggleModerationDisplay()"
-        inputName="display-unlisted-private"  i18n-labelText labelText="Display unlisted and private videos"
+        inputName="display-unlisted-private" i18n-labelText labelText="Display unlisted and private videos"
      >
      </my-peertube-checkbox>
    </div>
@@ -19,13 +19,14 @@
  <div class="no-results" i18n *ngIf="pagination.totalItems === 0">No results.</div>
  <div
-    myInfiniteScroller
+    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true"
-    [pageHeight]="pageHeight" [firstLoadedPage]="firstLoadedPage"
+    class="videos"
-    (nearOfTop)="onNearOfTop()" (nearOfBottom)="onNearOfBottom()" (pageChanged)="onPageChanged($event)"
-    class="videos" #videosElement
  >
-    <div *ngFor="let videos of videoPages; trackBy: pageByVideoId" class="videos-page">
+    <my-video-miniature
-      <my-video-miniature *ngFor="let video of videos; trackBy: videoById" [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"></my-video-miniature>
+      *ngFor="let video of videos; trackBy: videoById" [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
-    </div>
+      [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
+      (videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
+    >
+    </my-video-miniature>
  </div>
 </div>
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 292ede698..9d481d6e4 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -1,12 +1,5 @@
 @import '_mixins';
+@import '_miniature';
-.videos {
-  text-align: center;
-  my-video-miniature {
-    text-align: left;
-  }
-}
 .videos-header {
  display: flex;
@@ -31,8 +24,33 @@
  }
 }
-@media screen and (max-width: 500px) {
+.margin-content {
-  .videos {
+  width: $video-miniature-width * 6;
-    @include video-miniature-small-screen;
+  margin: auto !important;
+  @media screen and (max-width: 1800px) {
+    width: $video-miniature-width * 5;
+  }
+  @media screen and (max-width: 1800px - $video-miniature-width) {
+    width: $video-miniature-width * 4;
+  }
+  @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
+    width: $video-miniature-width * 3;
+  }
+  @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
+    width: $video-miniature-width * 2;
+  }
+  @media screen and (max-width: 500px) {
+    width: auto;
+    margin: 0 !important;
+    .videos {
+      @include video-miniature-small-screen;
+    }
  }
 }
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index b0633be4a..fa9d38735 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -1,66 +1,62 @@
 import { debounceTime } from 'rxjs/operators'
-import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { Location } from '@angular/common'
-import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
 import { fromEvent, Observable, Subscription } from 'rxjs'
 import { AuthService } from '../../core/auth'
 import { ComponentPagination } from '../rest/component-pagination.model'
 import { VideoSortField } from './sort-field.type'
 import { Video } from './video.model'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { OwnerDisplayType } from '@app/shared/video/video-miniature.component'
+import { MiniatureDisplayOptions, OwnerDisplayType } from '@app/shared/video/video-miniature.component'
 import { Syndication } from '@app/shared/video/syndication.model'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
+import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
-export abstract class AbstractVideoList implements OnInit, OnDestroy {
-  private static LINES_PER_PAGE = 4
-  @ViewChild('videosElement') videosElement: ElementRef
-  @ViewChild(InfiniteScrollerDirective) infiniteScroller: InfiniteScrollerDirective
+export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook {
  pagination: ComponentPagination = {
    currentPage: 1,
-    itemsPerPage: 10,
+    itemsPerPage: 25,
    totalItems: null
  }
  sort: VideoSortField = '-publishedAt'
  categoryOneOf?: number
  defaultSort: VideoSortField = '-publishedAt'
  syndicationItems: Syndication[] = []
  loadOnInit = true
-  marginContent = true
+  videos: Video[] = []
-  pageHeight: number
-  videoWidth: number
-  videoHeight: number
-  videoPages: Video[][] = []
  ownerDisplayType: OwnerDisplayType = 'account'
-  firstLoadedPage: number
  displayModerationBlock = false
  titleTooltip: string
+  displayVideoActions = true
-  protected baseVideoWidth = 215
+  disabled = false
-  protected baseVideoHeight = 205
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    privacyLabel: true,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
  protected abstract notifier: Notifier
  protected abstract authService: AuthService
-  protected abstract router: Router
  protected abstract route: ActivatedRoute
+  protected abstract serverService: ServerService
  protected abstract screenService: ScreenService
-  protected abstract i18n: I18n
+  protected abstract router: Router
-  protected abstract location: Location
-  protected abstract currentRoute: string
  abstract titlePage: string
-  protected loadedPages: { [ id: number ]: Video[] } = {}
-  protected loadingPage: { [ id: number ]: boolean } = {}
-  protected otherRouteParams = {}
  private resizeSubscription: Subscription
+  private angularState: number
+  abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number }>
-  abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}>
  abstract generateSyndicationList (): void
  get user () {
@@ -77,207 +73,96 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
      .subscribe(() => this.calcPageSizes())
    this.calcPageSizes()
-    if (this.loadOnInit === true) this.loadMoreVideos(this.pagination.currentPage)
+    if (this.loadOnInit === true) this.loadMoreVideos()
  }
  ngOnDestroy () {
    if (this.resizeSubscription) this.resizeSubscription.unsubscribe()
  }
-  pageByVideoId (index: number, page: Video[]) {
+  disableForReuse () {
-    // Video are unique in all pages
+    this.disabled = true
-    return page.length !== 0 ? page[0].id : 0
  }
-  videoById (index: number, video: Video) {
+  enabledForReuse () {
-    return video.id
+    this.disabled = false
  }
-  onNearOfTop () {
+  videoById (index: number, video: Video) {
-    this.previousPage()
+    return video.id
  }
  onNearOfBottom () {
-    if (this.hasMoreVideos()) {
+    if (this.disabled) return
-      this.nextPage()
-    }
-  }
-  onPageChanged (page: number) {
-    this.pagination.currentPage = page
-    this.setNewRouteParams()
-  }
-  reloadVideos () {
+    // Last page
-    this.loadedPages = {}
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
-    this.loadMoreVideos(this.pagination.currentPage)
-  }
-  loadMoreVideos (page: number, loadOnTop = false) {
+    this.pagination.currentPage += 1
-    this.adjustVideoPageHeight()
-    const currentY = window.scrollY
+    this.setScrollRouteParams()
-    if (this.loadedPages[page] !== undefined) return
+    this.loadMoreVideos()
-    if (this.loadingPage[page] === true) return
+  }
-    this.loadingPage[page] = true
+  loadMoreVideos () {
-    const observable = this.getVideosObservable(page)
+    const observable = this.getVideosObservable(this.pagination.currentPage)
    observable.subscribe(
      ({ videos, totalVideos }) => {
-        this.loadingPage[page] = false
-        if (this.firstLoadedPage === undefined || this.firstLoadedPage > page) this.firstLoadedPage = page
-        // Paging is too high, return to the first one
-        if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) {
-          this.pagination.currentPage = 1
-          this.setNewRouteParams()
-          return this.reloadVideos()
-        }
-        this.loadedPages[page] = videos
-        this.buildVideoPages()
        this.pagination.totalItems = totalVideos
+        this.videos = this.videos.concat(videos)
-        // Initialize infinite scroller now we loaded the first page
+        this.onMoreVideos()
-        if (Object.keys(this.loadedPages).length === 1) {
-          // Wait elements creation
-          setTimeout(() => {
-            this.infiniteScroller.initialize()
-            // At our first load, we did not load the first page
-            // Load the previous page so the user can move on the top (and browser previous pages)
-            if (this.pagination.currentPage > 1) this.loadMoreVideos(this.pagination.currentPage - 1, true)
-          }, 500)
-        }
-        // Insert elements on the top but keep the scroll in the previous position
-        if (loadOnTop) setTimeout(() => { window.scrollTo(0, currentY + this.pageHeight) }, 0)
      },
-      error => {
-        this.loadingPage[page] = false
-        this.notifier.error(error.message)
-      }
-    )
-  }
-  toggleModerationDisplay () {
+      error => this.notifier.error(error.message)
-    throw new Error('toggleModerationDisplay is not implemented')
+    )
  }
-  protected hasMoreVideos () {
+  reloadVideos () {
-    // No results
+    this.pagination.currentPage = 1
-    if (this.pagination.totalItems === 0) return false
+    this.videos = []
+    this.loadMoreVideos()
-    // Not loaded yet
-    if (!this.pagination.totalItems) return true
-    const maxPage = this.pagination.totalItems / this.pagination.itemsPerPage
-    return maxPage > this.maxPageLoaded()
  }
-  protected previousPage () {
+  toggleModerationDisplay () {
-    const min = this.minPageLoaded()
+    throw new Error('toggleModerationDisplay is not implemented')
-    if (min > 1) {
-      this.loadMoreVideos(min - 1, true)
-    }
  }
-  protected nextPage () {
+  removeVideoFromArray (video: Video) {
-    this.loadMoreVideos(this.maxPageLoaded() + 1)
+    this.videos = this.videos.filter(v => v.id !== video.id)
  }
-  protected buildRouteParams () {
+  // On videos hook for children that want to do something
-    // There is always a sort and a current page
+  protected onMoreVideos () { /* empty */ }
-    const params = {
-      sort: this.sort,
-      page: this.pagination.currentPage
-    }
-    return Object.assign(params, this.otherRouteParams)
-  }
  protected loadRouteParams (routeParams: { [ key: string ]: any }) {
-    this.sort = routeParams['sort'] as VideoSortField || this.defaultSort
+    this.sort = routeParams[ 'sort' ] as VideoSortField || this.defaultSort
-    this.categoryOneOf = routeParams['categoryOneOf']
+    this.categoryOneOf = routeParams[ 'categoryOneOf' ]
-    if (routeParams['page'] !== undefined) {
+    this.angularState = routeParams[ 'a-state' ]
-      this.pagination.currentPage = parseInt(routeParams['page'], 10)
-    } else {
-      this.pagination.currentPage = 1
-    }
-  }
-  protected setNewRouteParams () {
-    const paramsObject = this.buildRouteParams()
-    const queryParams = Object.keys(paramsObject)
-                              .map(p => p + '=' + paramsObject[p])
-                              .join('&')
-    this.location.replaceState(this.currentRoute, queryParams)
-  }
-  protected buildVideoPages () {
-    this.videoPages = Object.values(this.loadedPages)
-  }
-  protected adjustVideoPageHeight () {
-    const numberOfPagesLoaded = Object.keys(this.loadedPages).length
-    if (!numberOfPagesLoaded) return
-    this.pageHeight = this.videosElement.nativeElement.offsetHeight / numberOfPagesLoaded
-  }
-  protected buildVideoHeight () {
-    // Same ratios than base width/height
-    return this.videosElement.nativeElement.offsetWidth * (this.baseVideoHeight / this.baseVideoWidth)
-  }
-  private minPageLoaded () {
-    return Math.min(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
-  }
-  private maxPageLoaded () {
-    return Math.max(...Object.keys(this.loadedPages).map(e => parseInt(e, 10)))
  }
  private calcPageSizes () {
-    if (this.screenService.isInMobileView() || this.baseVideoWidth === -1) {
+    if (this.screenService.isInMobileView()) {
      this.pagination.itemsPerPage = 5
-      // Video takes all the width
-      this.videoWidth = -1
-      this.videoHeight = this.buildVideoHeight()
-      this.pageHeight = this.pagination.itemsPerPage * this.videoHeight
-    } else {
-      this.videoWidth = this.baseVideoWidth
-      this.videoHeight = this.baseVideoHeight
-      const videosWidth = this.videosElement.nativeElement.offsetWidth
-      this.pagination.itemsPerPage = Math.floor(videosWidth / this.videoWidth) * AbstractVideoList.LINES_PER_PAGE
-      this.pageHeight = this.videoHeight * AbstractVideoList.LINES_PER_PAGE
    }
+  }
-    // Rebuild pages because maybe we modified the number of items per page
+  private setScrollRouteParams () {
-    const videos = [].concat(...this.videoPages)
+    // Already set
-    this.loadedPages = {}
+    if (this.angularState) return
-    let i = 1
+    this.angularState = 42
-    // Don't include the last page if it not complete
-    while (videos.length >= this.pagination.itemsPerPage && i < 10000) { // 10000 -> Hard limit in case of infinite loop
-      this.loadedPages[i] = videos.splice(0, this.pagination.itemsPerPage)
-      i++
-    }
-    // Re fetch the last page
+    const queryParams = {
-    if (videos.length !== 0) {
+      'a-state': this.angularState,
-      this.loadMoreVideos(i)
+      categoryOneOf: this.categoryOneOf
-    } else {
-      this.buildVideoPages()
    }
-    console.log('Rebuilt pages with %s elements per page.', this.pagination.itemsPerPage)
+    let path = this.router.url
+    if (!path || path === '/') path = this.serverService.getConfig().instance.defaultClientRoute
+    this.router.navigate([ path ], { queryParams, replaceUrl: true, queryParamsHandling: 'merge' })
  }
 }
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts
index a02e9444a..5f8a1dd6e 100644
--- a/client/src/app/shared/video/infinite-scroller.directive.ts
+++ b/client/src/app/shared/video/infinite-scroller.directive.ts
@@ -1,30 +1,23 @@
 import { distinct, distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators'
-import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
 import { fromEvent, Subscription } from 'rxjs'
 @Directive({
  selector: '[myInfiniteScroller]'
 })
 export class InfiniteScrollerDirective implements OnInit, OnDestroy {
-  @Input() containerHeight: number
-  @Input() pageHeight: number
-  @Input() firstLoadedPage = 1
  @Input() percentLimit = 70
  @Input() autoInit = false
+  @Input() onItself = false
  @Output() nearOfBottom = new EventEmitter<void>()
-  @Output() nearOfTop = new EventEmitter<void>()
-  @Output() pageChanged = new EventEmitter<number>()
  private decimalLimit = 0
  private lastCurrentBottom = -1
-  private lastCurrentTop = 0
  private scrollDownSub: Subscription
-  private scrollUpSub: Subscription
+  private container: HTMLElement
-  private pageChangeSub: Subscription
-  private middleScreen: number
-  constructor () {
+  constructor (private el: ElementRef) {
    this.decimalLimit = this.percentLimit / 100
  }
@@ -34,21 +27,21 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
  ngOnDestroy () {
    if (this.scrollDownSub) this.scrollDownSub.unsubscribe()
-    if (this.scrollUpSub) this.scrollUpSub.unsubscribe()
-    if (this.pageChangeSub) this.pageChangeSub.unsubscribe()
  }
  initialize () {
-    this.middleScreen = window.innerHeight / 2
+    if (this.onItself) {
+      this.container = this.el.nativeElement
+    }
    // Emit the last value
    const throttleOptions = { leading: true, trailing: true }
-    const scrollObservable = fromEvent(window, 'scroll')
+    const scrollObservable = fromEvent(this.container || window, 'scroll')
      .pipe(
        startWith(null),
        throttleTime(200, undefined, throttleOptions),
-        map(() => ({ current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight })),
+        map(() => this.getScrollInfo()),
        distinctUntilChanged((o1, o2) => o1.current === o2.current),
        share()
      )
@@ -66,39 +59,13 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
        filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit)
      )
      .subscribe(() => this.nearOfBottom.emit())
-    // Scroll up
-    this.scrollUpSub = scrollObservable
-      .pipe(
-        // Check we scroll up
-        filter(({ current }) => {
-          const res = this.lastCurrentTop > current
-          this.lastCurrentTop = current
-          return res
-        }),
-        filter(({ current, maximumScroll }) => {
-          return current !== 0 && (1 - (current / maximumScroll)) > this.decimalLimit
-        })
-      )
-      .subscribe(() => this.nearOfTop.emit())
-    // Page change
-    this.pageChangeSub = scrollObservable
-      .pipe(
-        distinct(),
-        map(({ current }) => this.calculateCurrentPage(current)),
-        distinctUntilChanged()
-      )
-      .subscribe(res => this.pageChanged.emit(res))
  }
-  private calculateCurrentPage (current: number) {
+  private getScrollInfo () {
-    const scrollY = current + this.middleScreen
+    if (this.container) {
+      return { current: this.container.scrollTop, maximumScroll: this.container.scrollHeight }
-    const page = Math.max(1, Math.ceil(scrollY / this.pageHeight))
+    }
-    // Offset page
+    return { current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight }
-    return page + (this.firstLoadedPage - 1)
  }
 }
diff --git a/client/src/app/shared/video/modals/video-blacklist.component.html b/client/src/app/shared/video/modals/video-blacklist.component.html
new file mode 100644
index 000000000..1a87bdcd4
--- /dev/null
+++ b/client/src/app/shared/video/modals/video-blacklist.component.html
@@ -0,0 +1,38 @@
+<ng-template #modal>
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Blacklist video</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+  <div class="modal-body">
+    <form novalidate [formGroup]="form" (ngSubmit)="blacklist()">
+      <div class="form-group">
+        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
+        </textarea>
+        <div *ngIf="formErrors.reason" class="form-error">
+          {{ formErrors.reason }}
+        </div>
+      </div>
+      <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>
+      </div>
+      <div class="form-group inputs">
+        <span i18n class="action-button action-button-cancel" (click)="hide()">
+          Cancel
+        </span>
+        <input
+          type="submit" i18n-value value="Submit" class="action-button-submit"
+          [disabled]="!form.valid"
+        >
+      </div>
+    </form>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/video/modals/video-blacklist.component.scss b/client/src/app/shared/video/modals/video-blacklist.component.scss
new file mode 100644
index 000000000..afcdb9a16
--- /dev/null
+++ b/client/src/app/shared/video/modals/video-blacklist.component.scss
@@ -0,0 +1,6 @@
+@import 'variables';
+@import 'mixins';
+textarea {
+  @include peertube-textarea(100%, 100px);
+}
diff --git a/client/src/app/shared/video/modals/video-blacklist.component.ts b/client/src/app/shared/video/modals/video-blacklist.component.ts
new file mode 100644
index 000000000..4e4e8dc50
--- /dev/null
+++ b/client/src/app/shared/video/modals/video-blacklist.component.ts
@@ -0,0 +1,76 @@
+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'
+@Component({
+  selector: 'my-video-blacklist',
+  templateUrl: './video-blacklist.component.html',
+  styleUrls: [ './video-blacklist.component.scss' ]
+})
+export class VideoBlacklistComponent extends FormReactive implements OnInit {
+  @Input() video: VideoDetails = null
+  @ViewChild('modal') modal: NgbModal
+  @Output() videoBlacklisted = new EventEmitter()
+  error: string = null
+  private openedModal: NgbModalRef
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private videoBlacklistValidatorsService: VideoBlacklistValidatorsService,
+    private videoBlacklistService: VideoBlacklistService,
+    private notifier: Notifier,
+    private redirectService: RedirectService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+  ngOnInit () {
+    const defaultValues = { unfederate: 'true' }
+    this.buildForm({
+      reason: this.videoBlacklistValidatorsService.VIDEO_BLACKLIST_REASON,
+      unfederate: null
+    }, defaultValues)
+  }
+  show () {
+    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+  }
+  hide () {
+    this.openedModal.close()
+    this.openedModal = null
+  }
+  blacklist () {
+    const reason = this.form.value[ 'reason' ] || undefined
+    const unfederate = this.video.isLocal ? this.form.value[ 'unfederate' ] : undefined
+    this.videoBlacklistService.blacklistVideo(this.video.id, reason, unfederate)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Video blacklisted.'))
+            this.hide()
+            this.video.blacklisted = true
+            this.video.blacklistedReason = reason
+            this.videoBlacklisted.emit()
+          },
+          err => this.notifier.error(err.message)
+        )
+  }
+}
diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
new file mode 100644
index 000000000..dd01c1388
--- /dev/null
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -0,0 +1,52 @@
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Download video</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+  <div class="modal-body">
+    <div class="form-group">
+      <div class="input-group input-group-sm">
+        <div class="input-group-prepend peertube-select-container">
+          <select [(ngModel)]="resolutionId">
+            <option *ngFor="let file of video?.files" [value]="file.resolution.id">{{ file.resolution.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">
+            <span class="glyphicon glyphicon-copy"></span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="download-type">
+      <div class="peertube-radio-container">
+        <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
+        <label i18n for="download-direct">Direct download</label>
+      </div>
+      <div class="peertube-radio-container">
+        <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
+        <label i18n for="download-torrent">Torrent (.torrent file)</label>
+      </div>
+      <div class="peertube-radio-container">
+        <input type="radio" name="download" id="download-magnet" [(ngModel)]="downloadType" value="magnet">
+        <label i18n for="download-magnet">Torrent (magnet link)</label>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer inputs">
+    <span i18n class="action-button action-button-cancel" (click)="hide()">
+      Cancel
+    </span>
+    <input
+      type="submit" i18n-value value="Download" class="action-button-submit"
+      (click)="download()"
+    >
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/video/modals/video-download.component.scss b/client/src/app/shared/video/modals/video-download.component.scss
new file mode 100644
index 000000000..3e826c3b6
--- /dev/null
+++ b/client/src/app/shared/video/modals/video-download.component.scss
@@ -0,0 +1,25 @@
+@import 'variables';
+@import 'mixins';
+.peertube-select-container {
+  @include peertube-select-container(100px);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: none;
+  select {
+    height: inherit;
+  }
+}
+.download-type {
+  margin-top: 30px;
+  .peertube-radio-container {
+    @include peertube-radio-container;
+    display: inline-block;
+    margin-right: 30px;
+  }
+}
diff --git a/client/src/app/shared/video/modals/video-download.component.ts b/client/src/app/shared/video/modals/video-download.component.ts
new file mode 100644
index 000000000..d6d10d29e
--- /dev/null
+++ b/client/src/app/shared/video/modals/video-download.component.ts
@@ -0,0 +1,69 @@
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { VideoDetails } from '../../../shared/video/video-details.model'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Notifier } from '@app/core'
+@Component({
+  selector: 'my-video-download',
+  templateUrl: './video-download.component.html',
+  styleUrls: [ './video-download.component.scss' ]
+})
+export class VideoDownloadComponent {
+  @ViewChild('modal') modal: ElementRef
+  downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent'
+  resolutionId: number | string = -1
+  video: VideoDetails
+  constructor (
+    private notifier: Notifier,
+    private modalService: NgbModal,
+    private i18n: I18n
+  ) { }
+  show (video: VideoDetails) {
+    this.video = video
+    const m = this.modalService.open(this.modal)
+    m.result.then(() => this.onClose())
+     .catch(() => this.onClose())
+    this.resolutionId = this.video.files[0].resolution.id
+  }
+  onClose () {
+    this.video = undefined
+  }
+  download () {
+    window.location.assign(this.getLink())
+  }
+  getLink () {
+    // HTML select send us a string, so convert it to a number
+    this.resolutionId = parseInt(this.resolutionId.toString(), 10)
+    const file = this.video.files.find(f => f.resolution.id === this.resolutionId)
+    if (!file) {
+      console.error('Could not find file with resolution %d.', this.resolutionId)
+      return
+    }
+    switch (this.downloadType) {
+      case 'direct':
+        return file.fileDownloadUrl
+      case 'torrent':
+        return file.torrentDownloadUrl
+      case 'magnet':
+        return file.magnetUri
+    }
+  }
+  activateCopiedMessage () {
+    this.notifier.success(this.i18n('Copied'))
+  }
+}
diff --git a/client/src/app/shared/video/modals/video-report.component.html b/client/src/app/shared/video/modals/video-report.component.html
new file mode 100644
index 000000000..b9434da26
--- /dev/null
+++ b/client/src/app/shared/video/modals/video-report.component.html
@@ -0,0 +1,36 @@
+<ng-template #modal>
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Report video</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+  <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>
+    </div>
+    <form novalidate [formGroup]="form" (ngSubmit)="report()">
+      <div class="form-group">
+        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
+        </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="submit" i18n-value value="Submit" class="action-button-submit"
+          [disabled]="!form.valid"
+        >
+      </div>
+    </form>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/video/modals/video-report.component.scss b/client/src/app/shared/video/modals/video-report.component.scss
new file mode 100644
index 000000000..4713660a2
--- /dev/null
+++ b/client/src/app/shared/video/modals/video-report.component.scss
@@ -0,0 +1,10 @@
+@import 'variables';
+@import 'mixins';
+.information {
+  margin-bottom: 20px;
+}
+textarea {
+  @include peertube-textarea(100%, 100px);
+}
diff --git a/client/src/app/shared/video/modals/video-report.component.ts b/client/src/app/shared/video/modals/video-report.component.ts
new file mode 100644
index 000000000..725dd020f
--- /dev/null
+++ b/client/src/app/shared/video/modals/video-report.component.ts
@@ -0,0 +1,81 @@
+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'
+@Component({
+  selector: 'my-video-report',
+  templateUrl: './video-report.component.html',
+  styleUrls: [ './video-report.component.scss' ]
+})
+export class VideoReportComponent extends FormReactive implements OnInit {
+  @Input() video: VideoDetails = null
+  @ViewChild('modal') modal: NgbModal
+  error: string = null
+  private openedModal: NgbModalRef
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private videoAbuseValidatorsService: VideoAbuseValidatorsService,
+    private videoAbuseService: VideoAbuseService,
+    private notifier: Notifier,
+    private i18n: I18n
+  ) {
+    super()
+  }
+  get currentHost () {
+    return window.location.host
+  }
+  get originHost () {
+    if (this.isRemoteVideo()) {
+      return this.video.account.host
+    }
+    return ''
+  }
+  ngOnInit () {
+    this.buildForm({
+      reason: this.videoAbuseValidatorsService.VIDEO_ABUSE_REASON
+    })
+  }
+  show () {
+    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+  }
+  hide () {
+    this.openedModal.close()
+    this.openedModal = null
+  }
+  report () {
+    const reason = this.form.value['reason']
+    this.videoAbuseService.reportVideo(this.video.id, reason)
+                          .subscribe(
+                            () => {
+                              this.notifier.success(this.i18n('Video reported.'))
+                              this.hide()
+                            },
+                            err => this.notifier.error(err.message)
+                           )
+  }
+  isRemoteVideo () {
+    return !this.video.isLocal
+  }
+}
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.html b/client/src/app/shared/video/video-actions-dropdown.component.html
new file mode 100644
index 000000000..ec03fa55d
--- /dev/null
+++ b/client/src/app/shared/video/video-actions-dropdown.component.html
@@ -0,0 +1,21 @@
+<ng-container *ngIf="videoActions.length !== 0">
+  <div class="playlist-dropdown" ngbDropdown #playlistDropdown="ngbDropdown" role="button" autoClose="outside" [placement]="getPlaylistDropdownPlacement()"
+    *ngIf="isUserLoggedIn() && displayOptions.playlist" (openChange)="playlistAdd.openChange($event)"
+  >
+    <span class="anchor" ngbDropdownAnchor></span>
+    <div ngbDropdownMenu>
+      <my-video-add-to-playlist #playlistAdd [video]="video" [lazyLoad]="true"></my-video-add-to-playlist>
+    </div>
+  </div>
+  <my-action-dropdown
+    [actions]="videoActions" [label]="label" [entry]="{ video: video }" (click)="loadDropdownInformation()"
+    [buttonSize]="buttonSize" [placement]="placement" [buttonDirection]="buttonDirection" [buttonStyled]="buttonStyled"
+  ></my-action-dropdown>
+  <my-video-download #videoDownloadModal></my-video-download>
+  <my-video-report #videoReportModal [video]="video"></my-video-report>
+  <my-video-blacklist #videoBlacklistModal [video]="video" (videoBlacklisted)="onVideoBlacklisted()"></my-video-blacklist>
+</ng-container>
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.scss b/client/src/app/shared/video/video-actions-dropdown.component.scss
new file mode 100644
index 000000000..7ffdce822
--- /dev/null
+++ b/client/src/app/shared/video/video-actions-dropdown.component.scss
@@ -0,0 +1,12 @@
+.playlist-dropdown {
+  position: absolute;
+  .anchor {
+    display: block;
+    opacity: 0;
+  }
+}
+/deep/ .icon-playlist-add {
+  left: 2px;
+}
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts
new file mode 100644
index 000000000..ee2f44f9e
--- /dev/null
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -0,0 +1,241 @@
+import { AfterViewInit, 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 { Video } from '@app/shared/video/video.model'
+import { VideoService } from '@app/shared/video/video.service'
+import { VideoDetails } from '@app/shared/video/video-details.model'
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { VideoAddToPlaylistComponent } from '@app/shared/video-playlist/video-add-to-playlist.component'
+import { VideoDownloadComponent } from '@app/shared/video/modals/video-download.component'
+import { VideoReportComponent } from '@app/shared/video/modals/video-report.component'
+import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklist.component'
+import { VideoBlacklistService } from '@app/shared/video-blacklist'
+import { ScreenService } from '@app/shared/misc/screen.service'
+export type VideoActionsDisplayType = {
+  playlist?: boolean
+  download?: boolean
+  update?: boolean
+  blacklist?: boolean
+  delete?: boolean
+  report?: boolean
+}
+@Component({
+  selector: 'my-video-actions-dropdown',
+  templateUrl: './video-actions-dropdown.component.html',
+  styleUrls: [ './video-actions-dropdown.component.scss' ]
+})
+export class VideoActionsDropdownComponent implements OnChanges {
+  @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
+  @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
+  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
+  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
+  @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
+  @Input() video: Video | VideoDetails
+  @Input() displayOptions: VideoActionsDisplayType = {
+    playlist: false,
+    download: true,
+    update: true,
+    blacklist: true,
+    delete: true,
+    report: true
+  }
+  @Input() placement = 'left'
+  @Input() label: string
+  @Input() buttonStyled = false
+  @Input() buttonSize: DropdownButtonSize = 'normal'
+  @Input() buttonDirection: DropdownDirection = 'vertical'
+  @Output() videoRemoved = new EventEmitter()
+  @Output() videoUnblacklisted = new EventEmitter()
+  @Output() videoBlacklisted = new EventEmitter()
+  videoActions: DropdownAction<{ video: Video }>[][] = []
+  private loaded = false
+  constructor (
+    private authService: AuthService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private videoBlacklistService: VideoBlacklistService,
+    private serverService: ServerService,
+    private screenService: ScreenService,
+    private videoService: VideoService,
+    private blocklistService: BlocklistService,
+    private i18n: I18n
+  ) { }
+  get user () {
+    return this.authService.getUser()
+  }
+  ngOnChanges () {
+    this.buildActions()
+  }
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+  loadDropdownInformation () {
+    if (!this.isUserLoggedIn() || this.loaded === true) return
+    this.loaded = true
+    if (this.displayOptions.playlist) this.playlistAdd.load()
+  }
+  /* Show modals */
+  showDownloadModal () {
+    this.videoDownloadModal.show(this.video as VideoDetails)
+  }
+  showReportModal () {
+    this.videoReportModal.show()
+  }
+  showBlacklistModal () {
+    this.videoBlacklistModal.show()
+  }
+  /* Actions checker */
+  isVideoUpdatable () {
+    return this.video.isUpdatableBy(this.user)
+  }
+  isVideoRemovable () {
+    return this.video.isRemovableBy(this.user)
+  }
+  isVideoBlacklistable () {
+    return this.video.isBlackistableBy(this.user)
+  }
+  isVideoUnblacklistable () {
+    return this.video.isUnblacklistableBy(this.user)
+  }
+  isVideoDownloadable () {
+    return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled
+  }
+  /* Action handlers */
+  async unblacklistVideo () {
+    const confirmMessage = this.i18n(
+      'Do you really want to remove this video from the blacklist? It will be available again in the videos list.'
+    )
+    const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist'))
+    if (res === false) return
+    this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name }))
+        this.video.blacklisted = false
+        this.video.blacklistedReason = null
+        this.videoUnblacklisted.emit()
+      },
+      err => this.notifier.error(err.message)
+    )
+  }
+  async removeVideo () {
+    const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete'))
+    if (res === false) return
+    this.videoService.removeVideo(this.video.id)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name }))
+            this.videoRemoved.emit()
+          },
+          error => this.notifier.error(error.message)
+        )
+  }
+  onVideoBlacklisted () {
+    this.videoBlacklisted.emit()
+  }
+  getPlaylistDropdownPlacement () {
+    if (this.screenService.isInSmallView()) {
+      return 'bottom-right'
+    }
+    return 'bottom-left bottom-right'
+  }
+  private buildActions () {
+    this.videoActions = []
+    if (this.authService.isLoggedIn()) {
+      this.videoActions.push([
+        {
+          label: this.i18n('Save to playlist'),
+          handler: () => this.playlistDropdown.toggle(),
+          isDisplayed: () => this.displayOptions.playlist,
+          iconName: 'playlist-add'
+        }
+      ])
+      this.videoActions.push([
+        {
+          label: this.i18n('Download'),
+          handler: () => this.showDownloadModal(),
+          isDisplayed: () => this.displayOptions.download && this.isVideoDownloadable(),
+          iconName: 'download'
+        },
+        {
+          label: this.i18n('Update'),
+          linkBuilder: ({ video }) => [ '/videos/update', video.uuid ],
+          iconName: 'edit',
+          isDisplayed: () => this.displayOptions.update && this.isVideoUpdatable()
+        },
+        {
+          label: this.i18n('Blacklist'),
+          handler: () => this.showBlacklistModal(),
+          iconName: 'no',
+          isDisplayed: () => this.displayOptions.blacklist && this.isVideoBlacklistable()
+        },
+        {
+          label: this.i18n('Unblacklist'),
+          handler: () => this.unblacklistVideo(),
+          iconName: 'undo',
+          isDisplayed: () => this.displayOptions.blacklist && this.isVideoUnblacklistable()
+        },
+        {
+          label: this.i18n('Delete'),
+          handler: () => this.removeVideo(),
+          isDisplayed: () => this.displayOptions.delete && this.isVideoRemovable(),
+          iconName: 'delete'
+        }
+      ])
+      this.videoActions.push([
+        {
+          label: this.i18n('Report'),
+          handler: () => this.showReportModal(),
+          isDisplayed: () => this.displayOptions.report,
+          iconName: 'alert'
+        }
+      ])
+    }
+  }
+}
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index fa4ca7f93..22f024656 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -3,6 +3,8 @@ import { AuthUser } from '../../core'
 import { Video } from '../../shared/video/video.model'
 import { Account } from '@app/shared/account/account.model'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { VideoStreamingPlaylist } from '../../../../../shared/models/videos/video-streaming-playlist.model'
+import { VideoStreamingPlaylistType } from '../../../../../shared/models/videos/video-streaming-playlist.type'
 export class VideoDetails extends Video implements VideoDetailsServerModel {
  descriptionPath: string
@@ -12,6 +14,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
  files: VideoFile[]
  account: Account
  commentsEnabled: boolean
+  downloadEnabled: boolean
  waitTranscoding: boolean
  state: VideoConstant<VideoState>
@@ -19,6 +22,10 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
  likesPercent: number
  dislikesPercent: number
+  trackerUrls: string[]
+  streamingPlaylists: VideoStreamingPlaylist[]
  constructor (hash: VideoDetailsServerModel, translations = {}) {
    super(hash, translations)
@@ -29,28 +36,24 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
    this.tags = hash.tags
    this.support = hash.support
    this.commentsEnabled = hash.commentsEnabled
+    this.downloadEnabled = hash.downloadEnabled
-    this.buildLikeAndDislikePercents()
+    this.trackerUrls = hash.trackerUrls
-  }
+    this.streamingPlaylists = hash.streamingPlaylists
-  isRemovableBy (user: AuthUser) {
+    this.buildLikeAndDislikePercents()
-    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.REMOVE_ANY_VIDEO))
-  }
-  isBlackistableBy (user: AuthUser) {
-    return this.blacklisted !== true && user && user.hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) === true
  }
-  isUnblacklistableBy (user: AuthUser) {
+  buildLikeAndDislikePercents () {
-    return this.blacklisted === true && user && user.hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) === true
+    this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
+    this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
  }
-  isUpdatableBy (user: AuthUser) {
+  getHlsPlaylist () {
-    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.UPDATE_ANY_VIDEO))
+    return this.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
  }
-  buildLikeAndDislikePercents () {
+  hasHlsPlaylist () {
-    this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
+    return !!this.getHlsPlaylist()
-    this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
  }
 }
diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts
index fc772a3cf..1f633d427 100644
--- a/client/src/app/shared/video/video-edit.model.ts
+++ b/client/src/app/shared/video/video-edit.model.ts
@@ -14,6 +14,7 @@ export class VideoEdit implements VideoUpdate {
  tags: string[]
  nsfw: boolean
  commentsEnabled: boolean
+  downloadEnabled: boolean
  waitTranscoding: boolean
  channelId: number
  privacy: VideoPrivacy
@@ -25,8 +26,17 @@ export class VideoEdit implements VideoUpdate {
  uuid?: string
  id?: number
  scheduleUpdate?: VideoScheduleUpdate
+  originallyPublishedAt?: Date | string
-  constructor (video?: Video & { tags: string[], commentsEnabled: boolean, support: string, thumbnailUrl: string, previewUrl: string }) {
+  constructor (
+    video?: Video & {
+      tags: string[],
+      commentsEnabled: boolean,
+      downloadEnabled: boolean,
+      support: string,
+      thumbnailUrl: string,
+      previewUrl: string
+    }) {
    if (video) {
      this.id = video.id
      this.uuid = video.uuid
@@ -38,6 +48,7 @@ export class VideoEdit implements VideoUpdate {
      this.tags = video.tags
      this.nsfw = video.nsfw
      this.commentsEnabled = video.commentsEnabled
+      this.downloadEnabled = video.downloadEnabled
      this.waitTranscoding = video.waitTranscoding
      this.channelId = video.channel.id
      this.privacy = video.privacy.id
@@ -46,6 +57,7 @@ export class VideoEdit implements VideoUpdate {
      this.previewUrl = video.previewUrl
      this.scheduleUpdate = video.scheduledUpdate
+      this.originallyPublishedAt = video.originallyPublishedAt ? new Date(video.originallyPublishedAt) : null
    }
  }
@@ -67,6 +79,12 @@ export class VideoEdit implements VideoUpdate {
    } else {
      this.scheduleUpdate = null
    }
+    // Convert originallyPublishedAt to string so that function objectToFormData() works correctly
+    if (this.originallyPublishedAt) {
+      const originallyPublishedAt = new Date(values['originallyPublishedAt'])
+      this.originallyPublishedAt = originallyPublishedAt.toISOString()
+    }
  }
  toFormPatch () {
@@ -80,9 +98,11 @@ export class VideoEdit implements VideoUpdate {
      tags: this.tags,
      nsfw: this.nsfw,
      commentsEnabled: this.commentsEnabled,
+      downloadEnabled: this.downloadEnabled,
      waitTranscoding: this.waitTranscoding,
      channelId: this.channelId,
-      privacy: this.privacy
+      privacy: this.privacy,
+      originallyPublishedAt: this.originallyPublishedAt
    }
    // Special case if we scheduled an update
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 2c635fa2f..7af0f1113 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -1,25 +1,56 @@
-<div class="video-miniature">
+<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()">
  <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur"></my-video-thumbnail>
-  <div class="video-miniature-information">
+  <div class="video-bottom">
-    <a
+    <div class="video-miniature-information">
-      tabindex="-1"
+      <a
-      class="video-miniature-name"
+        tabindex="-1"
-      [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
+        class="video-miniature-name"
-    >
+        [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
-      <span *ngIf="isUnlistedVideo()" class="badge badge-warning" i18n>Unlisted</span>
+      >
-      <span *ngIf="isPrivateVideo()" class="badge badge-danger" i18n>Private</span>
+        <ng-container *ngIf="displayOptions.privacyLabel">
+          <span *ngIf="isUnlistedVideo()" class="badge badge-warning" i18n>Unlisted</span>
-      {{ video.name }}
+          <span *ngIf="isPrivateVideo()" class="badge badge-danger" i18n>Private</span>
-    </a>
+        </ng-container>
-    <span i18n class="video-miniature-created-at-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
+        {{ video.name }}
+      </a>
-    <a tabindex="-1" *ngIf="displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
-      {{ video.byAccount }}
+      <span class="video-miniature-created-at-views">
-    </a>
+        <ng-container *ngIf="displayOptions.date">{{ video.publishedAt | myFromNow }}</ng-container>
-    <a tabindex="-1" *ngIf="displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
+        <ng-container *ngIf="displayOptions.date && displayOptions.views"> - </ng-container>
-      {{ video.byVideoChannel }}
+        <ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }} views</ng-container>
-    </a>
+      </span>
+      <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
+        {{ video.byAccount }}
+      </a>
+      <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
+        {{ video.byVideoChannel }}
+      </a>
+      <div class="video-info-privacy">
+        <ng-container *ngIf="displayOptions.privacyText">{{ video.privacy.label }}</ng-container>
+        <ng-container *ngIf="displayOptions.privacyText && displayOptions.state"> - </ng-container>
+        <ng-container *ngIf="displayOptions.state">{{ getStateLabel(video) }}</ng-container>
+      </div>
+      <div *ngIf="displayOptions.blacklistInfo && video.blacklisted" class="video-info-blacklisted">
+        <span class="blacklisted-label" i18n>Blacklisted</span>
+        <span class="blacklisted-reason" *ngIf="video.blacklistedReason">{{ video.blacklistedReason }}</span>
+      </div>
+      <div i18n *ngIf="displayOptions.nsfw && video.nsfw" class="video-info-nsfw">
+        Sensitive
+      </div>
+    </div>
+    <div class="video-actions">
+      <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown -->
+      <my-video-actions-dropdown
+        *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left"
+        (videoRemoved)="onVideoRemoved()" (videoBlacklisted)="onVideoBlacklisted()" (videoUnblacklisted)="onVideoUnblacklisted()"
+      ></my-video-actions-dropdown>
+    </div>
  </div>
 </div>
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index f44bdf9a9..d665ce021 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -1,59 +1,156 @@
 @import '_variables';
 @import '_mixins';
+@import '_miniature';
+$more-button-width: 41px;
+$more-margin-right: 10px;
 .video-miniature {
-  display: inline-block;
+  width: $video-miniature-width;
-  padding-right: 15px;
+  display: inline-flex;
+  flex-direction: column;
  margin-bottom: 30px;
-  height: 175px;
+  height: 195px;
  vertical-align: top;
-  .video-miniature-information {
+  .video-bottom {
-    width: 200px;
+    display: flex;
-    margin-top: 2px;
-    line-height: normal;
+    .video-miniature-information {
+      width: $video-miniature-width - $more-button-width - $more-margin-right;
+      line-height: normal;
+      .video-miniature-name {
+        @include miniature-name;
+      }
+      .video-miniature-created-at-views {
+        display: block;
+        font-size: 13px;
+      }
+      .video-miniature-account,
+      .video-miniature-channel {
+        @include disable-default-a-behaviour;
+        @include ellipsis;
+        display: block;
+        font-size: 13px;
+        color: $grey-foreground-color;
+        &:hover {
+          color: $grey-foreground-hover-color;
+        }
+      }
+      .video-info-privacy,
+      .video-info-blacklisted .blacklisted-label,
+      .video-info-nsfw {
+        font-weight: $font-semibold;
+      }
+      .video-info-blacklisted {
+        color: red;
+        .blacklisted-reason::before {
+          content: ' - ';
+        }
+      }
+      .video-info-nsfw {
+        color: red;
+      }
+    }
-    .video-miniature-name {
+    .video-actions {
-      @include ellipsis-multiline(
+      margin-top: 3px;
-        $font-size: 1rem,
+      margin-right: $more-margin-right;
-        $line-height: 1,
+      width: $more-button-width;
-        $lines-to-show: 2
+      height: 30px;
-      );
-      transition: color 0.2s;
-      font-size: 16px;
-      font-weight: $font-semibold;
-      color: var(--mainForegroundColor);
-      margin-top: 5px;
-      margin-bottom: 5px;
-      &:hover {
+      /deep/ .dropdown-root:not(.show) {
-        text-decoration: none;
+        opacity: 0;
      }
-      &.blur-filter {
+      /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root {
-        filter: blur(3px);
+        opacity: 1;
-        padding-left: 4px;
      }
    }
-    .video-miniature-created-at-views {
+    &:hover .video-actions /deep/ .dropdown-root {
-      display: block;
+      opacity: 1;
-      font-size: 13px;
    }
-    .video-miniature-account,
+    @media screen and (max-width: $small-view) {
-    .video-miniature-channel {
+      .video-miniature-information .video-miniature-name {
-      @include disable-default-a-behaviour;
+        margin-top: 0;
+      }
+      .video-actions {
+        margin: 0;
+        top: -3px;
-      display: block;
+        /deep/ .dropdown-root {
-      overflow: hidden;
+          opacity: 1 !important;
-      text-overflow: ellipsis;
+        }
-      white-space: nowrap;
+      }
-      font-size: 13px;
+    }
-      color: $grey-foreground-color;
+  }
+  &.display-as-row {
+    flex-direction: row;
+    margin-bottom: 0;
+    height: auto;
+    width: 100%;
+    my-video-thumbnail {
+      margin-right: 10px;
+    }
+    .video-bottom {
+      .video-miniature-information {
+        width: auto;
+        min-width: 500px;
+        .video-miniature-name {
+          @include ellipsis-multiline(1.3em, 2);
+          margin-top: 2px;
+          margin-bottom: 5px;
+        }
+        .video-miniature-created-at-views,
+        .video-miniature-account,
+        .video-miniature-channel {
+          font-size: 14px;
+          width: fit-content;
+        }
+        .video-info-privacy {
+          margin-top: 5px;
+        }
+        .video-info-blacklisted {
+          margin-top: 3px;
+        }
+      }
+      .video-actions {
+        margin: 0;
+        top: -3px;
+      }
+    }
+    @media screen and (max-width: $small-view) {
+      flex-direction: column;
+      height: auto;
+      my-video-thumbnail {
+        margin-right: 0;
+      }
-      &:hover {
+      .video-miniature-information {
-        color: $grey-foreground-hover-color;
+        min-width: initial;
      }
    }
  }
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 2f951a1f1..48475033c 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -1,10 +1,23 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output } from '@angular/core'
 import { User } from '../users'
 import { Video } from './video.model'
 import { ServerService } from '@app/core'
-import { VideoPrivacy } from '../../../../../shared'
+import { VideoPrivacy, VideoState } from '../../../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component'
+import { ScreenService } from '@app/shared/misc/screen.service'
 export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
+export type MiniatureDisplayOptions = {
+  date?: boolean
+  views?: boolean
+  by?: boolean
+  privacyLabel?: boolean
+  privacyText?: boolean
+  state?: boolean
+  blacklistInfo?: boolean
+  nsfw?: boolean
+}
 @Component({
  selector: 'my-video-miniature',
@@ -15,31 +28,53 @@ export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
 export class VideoMiniatureComponent implements OnInit {
  @Input() user: User
  @Input() video: Video
  @Input() ownerDisplayType: OwnerDisplayType = 'account'
+  @Input() displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+  @Input() displayAsRow = false
+  @Input() displayVideoActions = true
+  @Output() videoBlacklisted = new EventEmitter()
+  @Output() videoUnblacklisted = new EventEmitter()
+  @Output() videoRemoved = new EventEmitter()
+  videoActionsDisplayOptions: VideoActionsDisplayType = {
+    playlist: true,
+    download: false,
+    update: true,
+    blacklist: true,
+    delete: true,
+    report: true
+  }
+  showActions = false
  private ownerDisplayTypeChosen: 'account' | 'videoChannel'
-  constructor (private serverService: ServerService) { }
+  constructor (
+    private screenService: ScreenService,
+    private serverService: ServerService,
+    private i18n: I18n,
+    @Inject(LOCALE_ID) private localeId: string
+  ) { }
  get isVideoBlur () {
    return this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
  }
  ngOnInit () {
-    if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') {
+    this.setUpBy()
-      this.ownerDisplayTypeChosen = this.ownerDisplayType
-      return
-    }
-    // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // We rely on mouseenter to lazy load actions
-    // -> Use the account name
+    if (this.screenService.isInTouchScreen()) {
-    if (
+      this.loadActions()
-      this.video.channel.name === `${this.video.account.name}_channel` ||
-      this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
-    ) {
-      this.ownerDisplayTypeChosen = 'account'
-    } else {
-      this.ownerDisplayTypeChosen = 'videoChannel'
    }
  }
@@ -58,4 +93,63 @@ export class VideoMiniatureComponent implements OnInit {
  isPrivateVideo () {
    return this.video.privacy.id === VideoPrivacy.PRIVATE
  }
+  getStateLabel (video: Video) {
+    if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) {
+      return this.i18n('Published')
+    }
+    if (video.scheduledUpdate) {
+      const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
+      return this.i18n('Publication scheduled on ') + updateAt
+    }
+    if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) {
+      return this.i18n('Waiting transcoding')
+    }
+    if (video.state.id === VideoState.TO_TRANSCODE) {
+      return this.i18n('To transcode')
+    }
+    if (video.state.id === VideoState.TO_IMPORT) {
+      return this.i18n('To import')
+    }
+    return ''
+  }
+  loadActions () {
+    if (this.displayVideoActions) this.showActions = true
+  }
+  onVideoBlacklisted () {
+    this.videoBlacklisted.emit()
+  }
+  onVideoUnblacklisted () {
+    this.videoUnblacklisted.emit()
+  }
+  onVideoRemoved () {
+    this.videoRemoved.emit()
+  }
+  private setUpBy () {
+    if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') {
+      this.ownerDisplayTypeChosen = this.ownerDisplayType
+      return
+    }
+    // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // -> Use the account name
+    if (
+      this.video.channel.name === `${this.video.account.name}_channel` ||
+      this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
+    ) {
+      this.ownerDisplayTypeChosen = 'account'
+    } else {
+      this.ownerDisplayTypeChosen = 'videoChannel'
+    }
+  }
 }
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index d25666916..b302ebd0f 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,10 +1,14 @@
 <a
-  [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
+  [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name"
  class="video-thumbnail"
 >
  <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
-  <div class="video-thumbnail-overlay">{{ video.durationLabel }}</div>
+  <div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div>
+  <div class="play-overlay">
+    <div class="icon"></div>
+  </div>
  <div class="progress-bar" *ngIf="video.userHistory?.currentTime">
    <div [ngStyle]="{ 'width.%': getProgressPercent() }"></div>
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 4772edaf0..469b659e9 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -1,39 +1,15 @@
 @import '_variables';
 @import '_mixins';
+@import '_miniature';
 .video-thumbnail {
-  display: inline-block;
+  @include miniature-thumbnail;
-  position: relative;
-  border-radius: 4px;
-  overflow: hidden;
-  width: $video-thumbnail-width;
-  height: $video-thumbnail-height;
-  background-color: #ececec;
-  &:hover {
-    text-decoration: none !important;
-  }
-  @include disable-outline;
-  &.focus-visible {
-    box-shadow: 0 0 0 2px var(--mainColor);
-  }
-  img {
-    width: $video-thumbnail-width;
-    height: $video-thumbnail-height;
-    &.blur-filter {
-      filter: blur(5px);
-      transform : scale(1.03);
-    }
-  }
  .progress-bar {
    height: 3px;
    width: 100%;
-    position: relative;
+    position: absolute;
-    top: -3px;
+    bottom: 0;
    background-color: rgba(0, 0, 0, 0.20);
    div {
@@ -42,16 +18,15 @@
    }
  }
-  .video-thumbnail-overlay {
+  .video-thumbnail-duration-overlay {
+    @include static-thumbnail-overlay;
    position: absolute;
    right: 5px;
    bottom: 5px;
-    display: inline-block;
+    padding: 0 5px;
-    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 3px;
-    color: #fff;
    font-size: 12px;
    font-weight: $font-bold;
-    border-radius: 3px;
-    padding: 0 5px;
  }
 }
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index ca43700c7..fe65ade94 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -10,8 +10,11 @@ import { ScreenService } from '@app/shared/misc/screen.service'
 export class VideoThumbnailComponent {
  @Input() video: Video
  @Input() nsfw = false
+  @Input() routerLink: any[]
+  @Input() queryParams: any[]
-  constructor (private screenService: ScreenService) {}
+  constructor (private screenService: ScreenService) {
+  }
  getImageUrl () {
    if (!this.video) return ''
@@ -30,4 +33,10 @@ export class VideoThumbnailComponent {
    return (currentTime / this.video.duration) * 100
  }
+  getVideoRouterLink () {
+    if (this.routerLink) return this.routerLink
+    return [ '/videos/watch', this.video.uuid ]
+  }
 }
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index 6ea83d13b..0cef3eb8f 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -1,11 +1,12 @@
 import { User } from '../'
-import { Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
+import { PlaylistElement, UserRight, Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 import { VideoConstant } from '../../../../../shared/models/videos/video-constant.model'
 import { durationToString, getAbsoluteAPIUrl } from '../misc/utils'
 import { peertubeTranslate, ServerConfig } from '../../../../../shared/models'
 import { Actor } from '@app/shared/actor/actor.model'
 import { VideoScheduleUpdate } from '../../../../../shared/models/videos/video-schedule-update.model'
+import { AuthUser } from '@app/core'
 export class Video implements VideoServerModel {
  byVideoChannel: string
@@ -17,6 +18,7 @@ export class Video implements VideoServerModel {
  createdAt: Date
  updatedAt: Date
  publishedAt: Date
+  originallyPublishedAt: Date | string
  category: VideoConstant<number>
  licence: VideoConstant<number>
  language: VideoConstant<string>
@@ -46,6 +48,8 @@ export class Video implements VideoServerModel {
  blacklisted?: boolean
  blacklistedReason?: string
+  playlistElement?: PlaylistElement
  account: {
    id: number
    uuid: string
@@ -116,12 +120,16 @@ export class Video implements VideoServerModel {
    this.privacy.label = peertubeTranslate(this.privacy.label, translations)
    this.scheduledUpdate = hash.scheduledUpdate
+    this.originallyPublishedAt = hash.originallyPublishedAt ? new Date(hash.originallyPublishedAt.toString()) : null
    if (this.state) this.state.label = peertubeTranslate(this.state.label, translations)
    this.blacklisted = hash.blacklisted
    this.blacklistedReason = hash.blacklistedReason
    this.userHistory = hash.userHistory
+    this.playlistElement = hash.playlistElement
  }
  isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {
@@ -134,4 +142,20 @@ export class Video implements VideoServerModel {
    // Return default instance config
    return serverConfig.instance.defaultNSFWPolicy !== 'display'
  }
+  isRemovableBy (user: AuthUser) {
+    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.REMOVE_ANY_VIDEO))
+  }
+  isBlackistableBy (user: AuthUser) {
+    return this.blacklisted !== true && user && user.hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) === true
+  }
+  isUnblacklistableBy (user: AuthUser) {
+    return this.blacklisted === true && user && user.hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) === true
+  }
+  isUpdatableBy (user: AuthUser) {
+    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.UPDATE_ANY_VIDEO))
+  }
 }
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 55844f988..ef489648c 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -31,6 +31,8 @@ import { ServerService } 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 { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 export interface VideosProvider {
  getVideos (
@@ -81,6 +83,7 @@ export class VideoService implements VideosProvider {
    const description = video.description || null
    const support = video.support || null
    const scheduleUpdate = video.scheduleUpdate || null
+    const originallyPublishedAt = video.originallyPublishedAt || null
    const body: VideoUpdate = {
      name: video.name,
@@ -95,9 +98,11 @@ export class VideoService implements VideosProvider {
      nsfw: video.nsfw,
      waitTranscoding: video.waitTranscoding,
      commentsEnabled: video.commentsEnabled,
+      downloadEnabled: video.downloadEnabled,
      thumbnailfile: video.thumbnailfile,
      previewfile: video.previewfile,
-      scheduleUpdate
+      scheduleUpdate,
+      originallyPublishedAt
    }
    const data = objectToFormData(body)
@@ -167,6 +172,23 @@ export class VideoService implements VideosProvider {
               )
  }
+  getPlaylistVideos (
+    videoPlaylistId: number | string,
+    videoPagination: ComponentPagination
+  ): Observable<{ videos: Video[], totalVideos: number }> {
+    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination)
+    return this.authHttp
+               .get<ResultList<Video>>(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylistId + '/videos', { params })
+               .pipe(
+                 switchMap(res => this.extractVideos(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
  getUserSubscriptionVideos (
    videoPagination: ComponentPagination,
    sort: VideoSortField
diff --git a/client/src/app/shared/video/videos-selection.component.html b/client/src/app/shared/video/videos-selection.component.html
new file mode 100644
index 000000000..53809b6fd
--- /dev/null
+++ b/client/src/app/shared/video/videos-selection.component.html
@@ -0,0 +1,26 @@
+<div class="no-results" i18n *ngIf="pagination.totalItems === 0">No results.</div>
+<div myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" class="videos">
+  <div class="video" *ngFor="let video of videos; let i = index">
+    <div class="checkbox-container">
+      <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="_selection[video.id]"></my-peertube-checkbox>
+    </div>
+    <my-video-miniature [video]="video" [displayAsRow]="true" [displayOptions]="miniatureDisplayOptions" [displayVideoActions]="false"></my-video-miniature>
+    <!-- Display only once -->
+    <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
+      <div class="action-selection-mode-child">
+        <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
+          Cancel
+        </span>
+        <ng-container *ngTemplateOutlet="globalButtonsTemplate"></ng-container>
+      </div>
+    </div>
+    <ng-container  *ngIf="isInSelectionMode() === false">
+      <ng-container *ngTemplateOutlet="rowButtonsTemplate; context: {$implicit: video}"></ng-container>
+    </ng-container>
+  </div>
+</div>
diff --git a/client/src/app/shared/video/videos-selection.component.scss b/client/src/app/shared/video/videos-selection.component.scss
new file mode 100644
index 000000000..d3cbabf23
--- /dev/null
+++ b/client/src/app/shared/video/videos-selection.component.scss
@@ -0,0 +1,57 @@
+@import '_variables';
+@import '_mixins';
+.action-selection-mode {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+  .action-selection-mode-child {
+    position: fixed;
+    .action-button {
+      display: inline-block;
+    }
+    .action-button-cancel-selection {
+      @include peertube-button;
+      @include grey-button;
+      margin-right: 10px;
+    }
+  }
+}
+.video {
+  @include row-blocks;
+  &:first-child {
+    margin-top: 47px;
+  }
+  .checkbox-container {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    margin-left: 12px;
+  }
+  my-video-miniature {
+    flex-grow: 1;
+  }
+}
+@media screen and (max-width: $small-view) {
+  .video {
+    flex-direction: column;
+    height: auto;
+    .checkbox-container {
+      display: none;
+    }
+    my-button {
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/client/src/app/shared/video/videos-selection.component.ts b/client/src/app/shared/video/videos-selection.component.ts
new file mode 100644
index 000000000..b6bedafd8
--- /dev/null
+++ b/client/src/app/shared/video/videos-selection.component.ts
@@ -0,0 +1,112 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  QueryList,
+  TemplateRef
+} from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AbstractVideoList } from '@app/shared/video/abstract-video-list'
+import { AuthService, Notifier, ServerService } from '@app/core'
+import { ScreenService } from '@app/shared/misc/screen.service'
+import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
+import { Observable } from 'rxjs'
+import { Video } from '@app/shared/video/video.model'
+import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
+import { VideoSortField } from '@app/shared/video/sort-field.type'
+export type SelectionType = { [ id: number ]: boolean }
+@Component({
+  selector: 'my-videos-selection',
+  templateUrl: './videos-selection.component.html',
+  styleUrls: [ './videos-selection.component.scss' ]
+})
+export class VideosSelectionComponent extends AbstractVideoList implements OnInit, OnDestroy, AfterContentInit {
+  @Input() titlePage: string
+  @Input() miniatureDisplayOptions: MiniatureDisplayOptions
+  @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<{ videos: Video[], totalVideos: number }>
+  @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective>
+  @Output() selectionChange = new EventEmitter<SelectionType>()
+  @Output() videosModelChange = new EventEmitter<Video[]>()
+  _selection: SelectionType = {}
+  rowButtonsTemplate: TemplateRef<any>
+  globalButtonsTemplate: TemplateRef<any>
+  constructor (
+    protected router: Router,
+    protected route: ActivatedRoute,
+    protected notifier: Notifier,
+    protected authService: AuthService,
+    protected screenService: ScreenService,
+    protected serverService: ServerService
+  ) {
+    super()
+  }
+  ngAfterContentInit () {
+    {
+      const t = this.templates.find(t => t.name === 'rowButtons')
+      if (t) this.rowButtonsTemplate = t.template
+    }
+    {
+      const t = this.templates.find(t => t.name === 'globalButtons')
+      if (t) this.globalButtonsTemplate = t.template
+    }
+  }
+  @Input() get selection () {
+    return this._selection
+  }
+  set selection (selection: SelectionType) {
+    this._selection = selection
+    this.selectionChange.emit(this._selection)
+  }
+  @Input() get videosModel () {
+    return this.videos
+  }
+  set videosModel (videos: Video[]) {
+    this.videos = videos
+    this.videosModelChange.emit(this.videos)
+  }
+  ngOnInit () {
+    super.ngOnInit()
+  }
+  ngOnDestroy () {
+    super.ngOnDestroy()
+  }
+  getVideosObservable (page: number) {
+    return this.getVideosObservableFunction(page, this.sort)
+  }
+  abortSelectionMode () {
+    this._selection = {}
+  }
+  isInSelectionMode () {
+    return Object.keys(this._selection).some(k => this._selection[ k ] === true)
+  }
+  generateSyndicationList () {
+    throw new Error('Method not implemented.')
+  }
+  protected onMoreVideos () {
+    this.videosModel = this.videos
+  }
+}